Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update card patterns to match common action patterns #11747

Merged
merged 2 commits into from
Mar 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Loading