Skip to content

Commit 5db7778

Browse files
author
Yuraima Estevez
authored
Update New badge pattern (#8110)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Adds new guidance to the New badge pattern page to address New badges being added to the primary admin nav <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Adds a few bullet points to the new badge pattern and the navigation component documentation **On the New badge pattern page** <img width="846" alt="Screenshot 2023-01-19 at 5 01 08 PM" src="https://user-images.githubusercontent.com/4642404/213581845-76f932ab-b73b-4ef1-afd1-308850fb4231.png"> **On the navigation component page** <img width="811" alt="Screenshot 2023-01-19 at 5 01 47 PM" src="https://user-images.githubusercontent.com/4642404/213581863-bbc0426a-7eee-4c7c-b6a1-13dde645c39e.png"> <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) <!-- Give as much information as needed to experiment with the component in the playground. --> <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent e6aa9c8 commit 5db7778

File tree

3 files changed

+14
-0
lines changed

3 files changed

+14
-0
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': minor
3+
---
4+
5+
Added New badge pattern guidance for the primary nav

polaris.shopify.com/content/components/navigation.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ The navigation component should:
6262
- Use a major icon for item actions.
6363
- Use a minor icon for secondary actions.
6464
- Use the provided navigation section component to group navigation items.
65+
- Not use the [New badge](/patterns/new-badge) in navigation items.
6566

6667
---
6768

polaris.shopify.com/content/patterns/new-badge.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,16 @@ The New badge should be used on features that have all of these 3 characteristic
2424
- It’s creating new value for merchants (not just an improved way of doing something they are already doing)
2525
- It’s worth distracting our merchants from their current workflow to inform them about a whole new part of Shopify
2626

27+
Example:
28+
- To signify an entirely new page in the Settings nav
29+
30+
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.
31+
2732
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.
2833

34+
### When not to use the New badge
35+
- Should never be used in the primary [navigation](/components/navigation) menu of the Shopify admin
36+
2937
## How long to use the New badge
3038

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

0 commit comments

Comments
 (0)