Add nav badges #24528
Merged
Add nav badges #24528
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
psealock
reviewed
Aug 17, 2020
There was a problem hiding this comment.
Cool, looks good. Going from a previous comment, BadgeUI would be better name.
| `; | ||
|
|
||
| export const Badge = styled.span` | ||
| margin-left: 8px; |
There was a problem hiding this comment.
This is needed to keep even spacing between elements if a menu item name is longer. Note the spacing here is uneven:
Keeping the margin on the badge is a better choice than the text so that elements are preemptively shortened if a badge does not exist.
psealock
approved these changes
Aug 18, 2020
psealock
added a commit
that referenced
this pull request
Aug 25, 2020
* Migrate styles to css-in-js * Add spacing to navigation child items * Add badge property and styles to navigation items * Update UI component naming * newLine Co-authored-by: Paul Sealock <psealock@gmail.com>
psealock
added a commit
that referenced
this pull request
Aug 26, 2020
* Migrate styles to css-in-js * Add spacing to navigation child items * Add badge property and styles to navigation items * Update UI component naming * newLine Co-authored-by: Paul Sealock <psealock@gmail.com>
psealock
added a commit
that referenced
this pull request
Aug 31, 2020
* Migrate styles to css-in-js * Add spacing to navigation child items * Add badge property and styles to navigation items * Update UI component naming * newLine Co-authored-by: Paul Sealock <psealock@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
REBASE NEEDED: This PR was branched from #24522 and will need a rebase it's merged.
Adds nav badge property to nav items and adds base styling for the badges.
Note: this currently does not limit the badge to a type of integer. I'm not sure if there are use cases that exist for strings, but we could sanitize in this PR if we decide only number should be allowed.
Screenshots
Testing
npm run storybook:devin a terminal.Navigationstory.