Skip to content

Commit 416f25c

Browse files
authored
Uplifted Content Design Pages (#13012)
### WHY are these changes introduced? Updated content design pages based on uplift work to bring our published standards in line with current standards. These are updates to documentation only for polaris.shopify.com. ### WHAT is this pull request doing? - New Fundamentals page to replace the Product content page - Remove pages no longer needed (Actionable language, Help content, Help documentation, Merchant-to-customer content, and Voice and tone) - Updated Grammar page - Updated Error messages page - Updated page order for side nav - Moved button content guidelines to button compontent page - Added redirects for removed pages <img width="1370" alt="Shopify Polaris Content Guidelines" src="https://github.com/user-attachments/assets/e3bc526a-d56c-4376-b343-058326d2a1fc" /> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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) ### 🎩 checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] 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) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent 16421c4 commit 416f25c

17 files changed

+517
-3545
lines changed

.changeset/orange-spoons-fix.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

polaris.shopify.com/content/components/actions/button-group.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Button groups should:
5858

5959
## Content guidelines
6060

61-
Button groups should follow the [content guidelines](https://polaris.shopify.com/content/actionable-language#buttons) for buttons.
61+
Button groups should follow the [content guidelines](https://polaris.shopify.com/components/actions/button#content-guidelines) for buttons.
6262

6363
---
6464

polaris.shopify.com/content/components/actions/button.mdx

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,60 @@ The HTML that renders for the `Button` and `Link` components carries meaning. Us
117117

118118
## Content guidelines
119119

120-
Buttons should follow the content guidelines for [buttons](https://polaris.shopify.com/content/actionable-language#buttons).
120+
{/* keywords: buttons, button copy, button text, button content, links, actions, calls to action, call to actions, action-led, action led, scannable, articles, choose , select, choose vs select, select vs choose, need, must, need vs must, must vs need --> --> */}
121+
122+
Buttons need to be clear and predictable. Merchants should be able to anticipate what will happen when they select a button. Never mislead someone by mislabeling a button.
123+
124+
- Use universally understood iconography instead of words wherever you can
125+
- Buttons can include an icon or text, or both
126+
- Verbs like “View” or “Go” or “Read” are often unnecessary since the button itself already conveys these actions
127+
- Sentence case
128+
- No articles (“a” “an” “the”)
129+
- No punctuation
130+
131+
<DoDont>
132+
133+
#### Do
134+
135+
- Save
136+
- Edit
137+
- Add tags
138+
139+
#### Don’t
140+
141+
- Save product
142+
- Edit collection
143+
- Add tag(s)
144+
145+
</DoDont>
146+
147+
Always write button text in sentence case, which means the first word is capitalized and the rest are lowercase (unless a term is a proper noun).
148+
149+
<DoDont>
150+
151+
#### Do
152+
153+
- Buy new domain
154+
155+
#### Don’t
156+
157+
- Buy New Domain
158+
159+
</DoDont>
160+
161+
Avoid unnecessary words and articles such as “the,” “an,” or “a.”
162+
163+
<DoDont>
164+
165+
#### Do
166+
167+
Add menu item
168+
169+
#### Don’t
170+
171+
Add a menu item
172+
173+
</DoDont>
121174

122175
---
123176

0 commit comments

Comments
 (0)