Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(topnav): design feedback for top navigation component #784

Merged
merged 1 commit into from
Dec 7, 2020
Merged

feat(topnav): design feedback for top navigation component #784

merged 1 commit into from
Dec 7, 2020

Conversation

100stacks
Copy link
Member

@100stacks 100stacks commented Nov 5, 2020 •
edited
Loading

Description

Design Review for Top Navigation

What are the relevant story cards/tickets? Any additional PRs or other references?

Jira: SURF-2091

Before you request a review for this PR:

  • For UI changes, did you manually test in recent versions of modern browsers (Chrome, Firefox, and Safari)?
  • For UI changes, did you manually test in IE11 and legacy Edge?
  • Did you add component tests for any new code?
  • Did you run the component unit tests via yarn test to ensure all tests passed?
  • Did you include a screenshot of the component tests?
  • If you changed/added functionality, did you update the demo page and documentation?
  • If needed, did you add or modify the demo test page to test the changed/added functionality?
  • Did you assign reviewers?
  • In Jira, have you linked to this PR on the ticket(s)?

@100stacks 100stacks added this to the HelixUI-v1.2.0 milestone Nov 5, 2020
@netlify
Copy link

netlify bot commented Nov 5, 2020 •
edited
Loading

Deploy preview for helix-ui ready!

Built with commit 5f01e58

https://deploy-preview-784--helix-ui.netlify.app

@100stacks 100stacks added the PR: Needs Design Review PR: Needs Design Review label Nov 5, 2020
@100stacks 100stacks marked this pull request as draft November 5, 2020 19:24
100stacks
100stacks commented Nov 5, 2020
View reviewed changes
Copy link
Member Author

@100stacks 100stacks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielmdesigns, please add your feedback by selecting the Files changed tab and adding comments:

1. Select Files changed tab

Screen Shot 2020-11-05 at 1 36 02 PM

2. Add your comments/feedback

Screen Shot 2020-11-05 at 1 30 18 PM

3. Select Review Type and Select Submit Review

Screen Shot 2020-11-05 at 1 28 31 PM

docs/components/topnav/test.html
@@ -7,7 +7,7 @@
<div id="vue-topNavDemo">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielmdesigns, please see this page for a full-page demo of Top Navigation:

https://deploy-preview-784--helix-ui.netlify.app/components/topnav/test.html

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@100stacks Here are a few things that I noticed

  • The logo area does not have a hover state
  • nav-items need ~3px-4px of padding added to each side (left & right)
  • I can't make a selection from the product selector, so not sure if the "active" state is available/correct
  • The label "Account Number" from the dropdown should not be a hoverable/clickable link

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielmdesigns, thanks for the feedback. Please see below:

  1. Please verify hover state for the logo area. It appears to work in the PR preview.
  2. Please add a screenshot of which nav-items need the padding.
  3. This is a demo example, so we don't have it "wired up" to any logic.
  4. Ok, good catch. We'll fix this.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nav-padding

Thanks for the clarification... Take a look at the attachment of the nav-item. They all appear to be ~9px of left/right padding and it should be 12px. Let me know if I am missing something but it's a little tight side-to-side

@100stacks 100stacks force-pushed the surf-2091-top-nav-design-feedback branch from 4bf7a8f to 5e1918d Compare December 3, 2020 00:11
100stacks
100stacks commented Dec 3, 2020
View reviewed changes
Copy link
Member Author

@100stacks 100stacks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielmdesigns, please see the updates for the Top Navigation component.

https://deploy-preview-784--helix-ui.netlify.app/components/topnav/test.html

lalithkarikelli
lalithkarikelli approved these changes Dec 3, 2020
View reviewed changes
Copy link
Contributor

@lalithkarikelli lalithkarikelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@100stacks 100stacks force-pushed the surf-2091-top-nav-design-feedback branch from 5e1918d to 5f01e58 Compare December 7, 2020 20:03
@100stacks 100stacks added the CSS label Dec 7, 2020
@100stacks 100stacks marked this pull request as ready for review December 7, 2020 20:27
@danielmdesigns
Copy link

@100stacks i'm going to go ahead and approve these knowing that we have some updated changes coming down the pipe. let's go ahead and get these merged and we'll finalize once we have fabric updates available

danielmdesigns
danielmdesigns approved these changes Dec 7, 2020
View reviewed changes
Copy link

@danielmdesigns danielmdesigns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Will provide more feedback w/ updates once new Fabric changes are available

@100stacks 100stacks removed the PR: Needs Design Review PR: Needs Design Review label Dec 7, 2020
@100stacks 100stacks changed the title feat(topnav): design feedback on top navigation feat(topnav): design feedback for top navigation component Dec 7, 2020
@100stacks 100stacks merged commit 912f162 into master Dec 7, 2020
@100stacks 100stacks deleted the surf-2091-top-nav-design-feedback branch December 8, 2020 21:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danielmdesigns danielmdesigns danielmdesigns approved these changes

@lalithkarikelli lalithkarikelli lalithkarikelli approved these changes

Assignees
No one assigned
Labels
CSS
Projects
None yet
Milestone
HelixUI-v1.2.0
Development

Successfully merging this pull request may close these issues.
3 participants
@100stacks @danielmdesigns @lalithkarikelli