Skip to content

Commit

Permalink
Update card patterns to match common action patterns (#11747)
Browse files Browse the repository at this point in the history
  • Loading branch information
sarahill authored Mar 15, 2024
1 parent 97184dc commit 5cff962
Show file tree
Hide file tree
Showing 11 changed files with 24 additions and 4 deletions.
5 changes: 5 additions & 0 deletions .changeset/sharp-weeks-run.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'polaris.shopify.com': patch
---

Updated card layout patterns to match common action patterns.
22 changes: 19 additions & 3 deletions polaris.shopify.com/content/patterns/card-layout/index.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
---
title: Card layout
description: Standardized card layout gives merchants a content structure to rely on.
lede: Standardized card layout gives merchants a content structure to rely on.
previewImg: /images/patterns/card-layout/card-layout-cover-image.png
url: /patterns/card-layout
hideChildren: true
status: New
---

<LayoutSection card>
Expand Down Expand Up @@ -60,7 +63,7 @@ Use the object type as card title when the card is a list of objects.
</Medium>

<Medium variant="do">
![A card with tags as card title and a header action. The header action has a pen icon only, but no label. The action conveys that it’s an update action, and leverages the card title to make it clear what is being updated.](/images/patterns/card-layout/structure/[email protected])
![A card with tags as card title and a header action. The header action has a pen icon only, but no label. The action conveys that it’s an edit action, and leverages the card title to make it clear what is being updated.](/images/patterns/card-layout/structure/[email protected])

Choose a title to clarify what the header action does.

Expand All @@ -76,7 +79,7 @@ Choose a title that represents all sections if a card has multiple sections.
<Text>
### Header actions

Actions in the header should represent the content of the whole card. The most common header action is the “Update” action, which allows merchants to modify the contents of the card. Another common action is the "View" action, which allows merchants to navigate to the source of the contents.
Actions in the header should represent the content of the whole card. The most common header action is the "Edit" action, which allows merchants to modify the contents of the card. Another common action is the "View" action, which allows merchants to navigate to the source of the contents.

</Text>

Expand Down Expand Up @@ -129,6 +132,19 @@ Choose a title that represents all sections if a card has multiple sections.

</Medium>

<Text>

### Table actions

Table actions are placed to the right in the header to keep them discoverable. They are typically actions that allow merchants to add item or select items that will display in the table.

</Text>

<Large>
![A card showing an add action associated with an index table in the card
header.](/images/patterns/common-actions/types/[email protected])
</Large>

</LayoutSection>

<LayoutSection card>
Expand Down Expand Up @@ -185,7 +201,7 @@ Choose a title that represents all sections if a card has multiple sections.
</Medium>

<Medium variant="do">
![A card with two sections, each with an update action in its respective section header.](/images/patterns/card-layout/structure/card-layout-structure-19-body-do-place-actions-in-section-header@2x.png)
![A card with two sections, each with an edit action in its respective section header.](/images/patterns/card-layout/structure/card-layout-structure-19-body-do-place-actions-in-section-header@2x.png)

Place section actions in the section header where merchants can associate them to what they control.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Common actions
description: Standardizing recurring actions gives merchants a predictable way to complete common tasks.
lede: Standardizing recurring actions gives merchants a predictable way to complete common tasks.
icon: ColorIcon
previewImg: /images/patterns/common-actions/common-actions-cover-image.png
keywords:
- common actions
Expand Down
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 ...ard-layout/structure/[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 ...s/patterns/card-layout/structure/[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.
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 ...terns/card-layout/structure/[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.

0 comments on commit 5cff962

Please sign in to comment.