Skip to content

Commit af15611

Browse files
authored
Updated common action guidelines (#12739)
This PR updates common action guidelines to remove references to using tooltips with icon only buttons. ## Why - Icons used in buttons should be used for common actions that are universally understood - Adding icons to every icon only button gets very busy and overwhelming - Tooltips on buttons isn't a pattern that scales to mobile
1 parent 242666d commit af15611

File tree

9 files changed

+6
-26
lines changed

9 files changed

+6
-26
lines changed

.changeset/perfect-pans-shop.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Updated common action guidelines

polaris.shopify.com/content/patterns/common-actions/variants/best-practices.mdx

+1-26
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ keywords:
1717
## Content
1818

1919
Actions should always clearly communicate their purpose by using a text label, an icon, or a combination of both.
20-
20+
2121
See the [actionable language guidelines](/content/actionable-language#buttons) for more detail.
2222

2323
</Stack>
@@ -218,7 +218,6 @@ keywords:
218218

219219
</LayoutSection>
220220

221-
222221
<LayoutSection card>
223222

224223
<ExtraLarge>
@@ -249,30 +248,6 @@ keywords:
249248

250249
</Text>
251250

252-
<Small variant="do">
253-
254-
![An image showing two icon only actions in a hover state with supporting tooltips. There's an add action with the tooltip "Add item" and a remove action the tooltip "Remove item".](/images/patterns/common-actions/[email protected])
255-
256-
Clarify icon only actions with a tooltip using the verb + noun format for the label.
257-
258-
</Small>
259-
260-
<Small variant="do">
261-
<video width="100%" height="auto" controls playsInline muted loop>
262-
<source
263-
src="/images/patterns/common-actions/common-actions-best-practices-desktop-tooltip-delay.mp4"
264-
type="video/mp4"
265-
/>
266-
Delay the appearance of tooltips attached to common actions as they can be intrusive.
267-
</video>
268-
269-
Delay the appearance of tooltips attached to common actions as they can be intrusive.
270-
271-
</Small>
272-
273-
<Text>
274-
</Text>
275-
276251
<Large variant="do">
277252

278253
![An image of two cards with items displaying actions on hover.](/images/patterns/common-actions/[email protected])
Loading
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)