diff --git a/.changeset/sharp-weeks-run.md b/.changeset/sharp-weeks-run.md new file mode 100644 index 00000000000..ada7bba0afc --- /dev/null +++ b/.changeset/sharp-weeks-run.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Updated card layout patterns to match common action patterns. diff --git a/polaris.shopify.com/content/patterns/card-layout/index.mdx b/polaris.shopify.com/content/patterns/card-layout/index.mdx index e3071d8d980..bb7810e93ea 100644 --- a/polaris.shopify.com/content/patterns/card-layout/index.mdx +++ b/polaris.shopify.com/content/patterns/card-layout/index.mdx @@ -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 --- @@ -60,7 +63,7 @@ Use the object type as card title when the card is a list of objects. - ![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/card-layout-structure-05-card-title-do-imply-action@2x.png) + ![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/card-layout-structure-05-card-title-do-imply-action@2x.png) Choose a title to clarify what the header action does. @@ -76,7 +79,7 @@ Choose a title that represents all sections if a card has multiple sections. ### 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. @@ -129,6 +132,19 @@ Choose a title that represents all sections if a card has multiple sections. + + + ### 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. + + + + + ![A card showing an add action associated with an index table in the card + header.](/images/patterns/common-actions/types/common-action-types-add-do-top-table@2x.png) + + @@ -185,7 +201,7 @@ Choose a title that represents all sections if a card has multiple sections. - ![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. diff --git a/polaris.shopify.com/content/patterns/common-actions/index.mdx b/polaris.shopify.com/content/patterns/common-actions/index.mdx index 34f45d6fdfe..33f552c7804 100644 --- a/polaris.shopify.com/content/patterns/common-actions/index.mdx +++ b/polaris.shopify.com/content/patterns/common-actions/index.mdx @@ -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 diff --git a/polaris.shopify.com/public/images/patterns/card-layout/card-layout-cover-image.png b/polaris.shopify.com/public/images/patterns/card-layout/card-layout-cover-image.png new file mode 100644 index 00000000000..665fdff7bf1 Binary files /dev/null and b/polaris.shopify.com/public/images/patterns/card-layout/card-layout-cover-image.png differ diff --git a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-05-card-title-do-imply-action@2x.png b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-05-card-title-do-imply-action@2x.png index 8a742174146..ef6ec9bce91 100644 Binary files a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-05-card-title-do-imply-action@2x.png and b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-05-card-title-do-imply-action@2x.png differ diff --git a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-07-header-actions@2x.png b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-07-header-actions@2x.png index 6237b5fa906..609f55d0c81 100644 Binary files a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-07-header-actions@2x.png and b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-07-header-actions@2x.png differ diff --git a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-08-header-actions-do-use-plain-primary-button@2x.png b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-08-header-actions-do-use-plain-primary-button@2x.png index 003e98315eb..fe04c310962 100644 Binary files a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-08-header-actions-do-use-plain-primary-button@2x.png and b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-08-header-actions-do-use-plain-primary-button@2x.png differ diff --git a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-12-header-actions-caution-when-placing-list-actions-in-header@2x.png b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-12-header-actions-caution-when-placing-list-actions-in-header@2x.png index 9d9889f017d..38d762a2297 100644 Binary files a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-12-header-actions-caution-when-placing-list-actions-in-header@2x.png and b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-12-header-actions-caution-when-placing-list-actions-in-header@2x.png differ diff --git a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-20-body-dont-group-section-actions-in-card-header@2x.png b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-20-body-dont-group-section-actions-in-card-header@2x.png index 509853ada4e..7bc38029937 100644 Binary files a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-20-body-dont-group-section-actions-in-card-header@2x.png and b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-20-body-dont-group-section-actions-in-card-header@2x.png differ diff --git a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-31-footer-list-actions@2x.png b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-31-footer-list-actions@2x.png index e7f38a343f3..50b0b52adcd 100644 Binary files a/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-31-footer-list-actions@2x.png and b/polaris.shopify.com/public/images/patterns/card-layout/structure/card-layout-structure-31-footer-list-actions@2x.png differ diff --git a/polaris.shopify.com/public/images/patterns/common-actions/common-actions-cover-image.png b/polaris.shopify.com/public/images/patterns/common-actions/common-actions-cover-image.png index 895fdb63f13..ca0cc98bf95 100644 Binary files a/polaris.shopify.com/public/images/patterns/common-actions/common-actions-cover-image.png and b/polaris.shopify.com/public/images/patterns/common-actions/common-actions-cover-image.png differ