-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update card patterns to match common action patterns (#11747)
Fixes https://github.com/Shopify/polaris-internal/issues/1519 ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
- Loading branch information
Showing
11 changed files
with
24 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
|
@@ -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. | ||
|
||
|
@@ -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> | ||
|
||
|
@@ -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> | ||
|
@@ -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. | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+14.9 KB
polaris.shopify.com/public/images/patterns/card-layout/card-layout-cover-image.png
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
BIN
+2.25 KB
(120%)
...ture/card-layout-structure-08-header-actions-do-use-plain-primary-button@2x.png
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
BIN
+445 Bytes
(100%)
...-structure-12-header-actions-caution-when-placing-list-actions-in-header@2x.png
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
BIN
+1.67 KB
(110%)
.../card-layout-structure-20-body-dont-group-section-actions-in-card-header@2x.png
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
BIN
-4.52 KB
(90%)
...hopify.com/public/images/patterns/common-actions/common-actions-cover-image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.