Skip to content

Commit 5b9f4b8

Browse files
authored
Update add action pattern guidance (#11906)
Updated add action guidance to make icon usage clearer. before | after --|-- ![Screenshot 2024-04-18 at 9 07 29 AM](https://github.com/Shopify/polaris/assets/8629173/152659ba-8680-4bd4-87bf-e926ceadb140) | ![Screenshot 2024-04-18 at 9 07 00 AM](https://github.com/Shopify/polaris/assets/8629173/9382be14-3dcc-4234-8b98-c8a2e2e0564b)
1 parent 6305fb2 commit 5b9f4b8

File tree

4 files changed

+9
-4
lines changed

4 files changed

+9
-4
lines changed

.changeset/nervous-shoes-mate.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Updated common action pattern add guiance

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@ url: /patterns/common-actions/overview
3030

3131
![Two tertiary buttons with the circle plus icon and an Add {object} label.](/images/patterns/common-actions/types/[email protected])
3232

33-
Use the circle plus icon in buttons that don’t have a defined container like tertiary buttons.
33+
Default to the circle plus icon for add actions.
3434

3535
</Medium>
3636

3737
<Medium variant="do">
3838

3939
![Two secondary buttons with the plus icon and an Add {object} label.](/images/patterns/common-actions/types/[email protected])
4040

41-
Use the plus icon when a button has a defined shape or filled background. The plus icon supports the action while balancing the weight of the element with the rest of the UI.
41+
Use the plus icon in `secondary` and `primary` [button](/components/actions/button?example=button-default) variants. The plus icon supports the action while balancing the weight of the filled shaped element with the rest of the UI.
4242

4343
</Medium>
4444

@@ -54,7 +54,7 @@ url: /patterns/common-actions/overview
5454

5555
![A select list of options with an add option at the botto of the list, outside of the scrollable area.](/images/patterns/common-actions/types/[email protected])
5656

57-
Place add actions at the bottom of a list of selectable options. For example, when picking a collection or tag to add to a product. Keep the action visible by placing it outside of the scrollable area.
57+
Place add actions at the bottom of a list of selectable options. For example, when picking a collection or tag to add to a product. Keep the action visible by placing it outside of the scrollable area.
5858

5959
</Medium>
6060

@@ -63,7 +63,7 @@ url: /patterns/common-actions/overview
6363
![Two cards each with long lists of resources in a viewable state with a main add action in the list header.](/images/patterns/common-actions/types/[email protected])
6464

6565
Place add actions in the header in long lists of resources.
66-
66+
6767
</Medium>
6868

6969
<Medium variant="do">
Loading
Loading

0 commit comments

Comments
 (0)