Skip to content

Commit

Permalink
Updated common action guidelines (#12739)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
sarahill authored Oct 4, 2024
1 parent 242666d commit af15611
Show file tree
Hide file tree
Showing 9 changed files with 6 additions and 26 deletions.
5 changes: 5 additions & 0 deletions .changeset/perfect-pans-shop.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'polaris.shopify.com': patch
---

Updated common action guidelines
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ keywords:
## Content

Actions should always clearly communicate their purpose by using a text label, an icon, or a combination of both.

See the [actionable language guidelines](/content/actionable-language#buttons) for more detail.

</Stack>
Expand Down Expand Up @@ -218,7 +218,6 @@ keywords:

</LayoutSection>


<LayoutSection card>

<ExtraLarge>
Expand Down Expand Up @@ -249,30 +248,6 @@ keywords:

</Text>

<Small variant="do">

![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])

Clarify icon only actions with a tooltip using the verb + noun format for the label.

</Small>

<Small variant="do">
<video width="100%" height="auto" controls playsInline muted loop>
<source
src="/images/patterns/common-actions/common-actions-best-practices-desktop-tooltip-delay.mp4"
type="video/mp4"
/>
Delay the appearance of tooltips attached to common actions as they can be intrusive.
</video>

Delay the appearance of tooltips attached to common actions as they can be intrusive.

</Small>

<Text>
</Text>

<Large variant="do">

![An image of two cards with items displaying actions on hover.](/images/patterns/common-actions/[email protected])
Expand Down
Binary file modified ...patterns/common-actions/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../images/patterns/common-actions/types/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../images/patterns/common-actions/types/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...lic/images/patterns/common-actions/types/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ic/images/patterns/common-actions/types/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...c/images/patterns/common-actions/types/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit af15611

Please sign in to comment.