Skip to content

Update New badge pattern #8110

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

Merged
merged 2 commits into from
Jan 20, 2023
Merged

Update New badge pattern #8110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e016d91
update new badge guidance
yurm04 Jan 19, 2023
a44bf96
changeset
yurm04 Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/spotty-frogs-exercise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'polaris.shopify.com': minor
---

Added New badge pattern guidance for the primary nav
1 change: 1 addition & 0 deletions polaris.shopify.com/content/components/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ The navigation component should:
- Use a major icon for item actions.
- Use a minor icon for secondary actions.
- Use the provided navigation section component to group navigation items.
- Not use the [New badge](/patterns/new-badge) in navigation items.
Copy link
Member

@alex-page alex-page Jan 19, 2023

Choose a reason for hiding this comment

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

I wonder if the documentation could be.. "Do not add additional components like Badge into the navigation". I foresee people trying to sneak other components in.

Copy link
Contributor

@selenehinkley selenehinkley Jan 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I like that suggestion because the clarity future proofs potential misuse/interpretations. Suggesting this copy in a new PR: Not add additional components, like badge, in navigation items. Example: Don‘t add the New badge.


---

Expand Down
8 changes: 8 additions & 0 deletions polaris.shopify.com/content/patterns/new-badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,16 @@ The New badge should be used on features that have all of these 3 characteristic
- It’s creating new value for merchants (not just an improved way of doing something they are already doing)
- It’s worth distracting our merchants from their current workflow to inform them about a whole new part of Shopify

Example:
- To signify an entirely new page in the Settings nav

Note: Using the New badge in the Settings nav to draw attention to a new feature must be reviewed and approved by UX management on a case by case basis.

Consider how the admin would look if it was cluttered with New badges or features of varying importance—overusing the badge creates unnecessary distraction and lessens its impact.

### When not to use the New badge
- Should never be used in the primary [navigation](/components/navigation) menu of the Shopify admin

## How long to use the New badge

New badges should have a short lifespan. The badge should disappear:
Expand Down