From b3c83f93bcc5adf755e6c7e178fe49794d494a6d Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 20 Sep 2023 08:31:04 -0700 Subject: [PATCH] Update `Button` examples with new variants (#10543) ### WHY are these changes introduced? Fixes https://github.com/Shopify/polaris/issues/10165 ### WHAT is this pull request doing? Removes `Button` examples for `plain monochrome` and `destructive` and adds examples for `tertiary` and `primary critical`. --- .../content/components/actions/button.md | 21 ++++++++----------- ...tructive.tsx => button-plain-critical.tsx} | 0 .../examples/button-plain-monochrome.tsx | 14 ------------- ...n-slim.tsx => button-primary-critical.tsx} | 6 +++++- ...on-destructive.tsx => button-tertiary.tsx} | 2 +- 5 files changed, 15 insertions(+), 28 deletions(-) rename polaris.shopify.com/pages/examples/{button-plain-destructive.tsx => button-plain-critical.tsx} (100%) delete mode 100644 polaris.shopify.com/pages/examples/button-plain-monochrome.tsx rename polaris.shopify.com/pages/examples/{button-slim.tsx => button-primary-critical.tsx} (68%) rename polaris.shopify.com/pages/examples/{button-destructive.tsx => button-tertiary.tsx} (76%) diff --git a/polaris.shopify.com/content/components/actions/button.md b/polaris.shopify.com/content/components/actions/button.md index b57e1c116ef..24ada13b270 100644 --- a/polaris.shopify.com/content/components/actions/button.md +++ b/polaris.shopify.com/content/components/actions/button.md @@ -27,21 +27,18 @@ examples: - fileName: button-plain.tsx title: Plain description: Use for less important or less commonly used actions since they’re less prominent. For example, plain buttons are used as actions in cards. - - fileName: button-plain-monochrome.tsx - title: Plain monochrome - description: Use for less important or less commonly used actions where matching the current text color is desired. For example in the InlineError component. - - fileName: button-plain-destructive.tsx - title: Plain destructive - description: Use for actions that will delete merchant data or be otherwise difficult to recover from. Since they’re less prominent, use for less important or less commonly used destructive actions. For example, plain buttons are used as actions in cards. + - fileName: button-tertiary.tsx + title: Tertiary + description: Use for tertiary actions. Can be paired with any other button style to create visual variation. + - fileName: button-plain-critical.tsx + title: Plain critical + description: Use for actions that will delete merchant data or be otherwise difficult to recover from. Since they’re less prominent, use for less important or less commonly used critical actions. For example, plain buttons are used as actions in cards. - fileName: button-primary.tsx title: Primary description: Use to highlight the most important actions in any experience. Don’t use more than one primary button in a section or screen to avoid overwhelming merchants. - - fileName: button-destructive.tsx - title: Destructive - description: Use when the action will delete merchant data or be otherwise difficult to recover from. Destructive buttons should trigger a confirmation dialog before the action is completed. Be thoughtful about using destructive buttons because they can feel stressful for merchants. - - fileName: button-slim.tsx - title: Slim - description: Use when a table or list has a set of actions on each item to avoid making items taller than they need to be. Don’t use slim buttons for primary actions. + - fileName: button-primary-critical.tsx + title: Primary critical + description: Use when the action will delete merchant data or be otherwise difficult to recover from. Critical buttons should trigger a confirmation dialog before the action is completed. Be thoughtful about using critical buttons because they can feel stressful for merchants. - fileName: button-large.tsx title: Large description: Use for the main call to action in empty states or for calls to action shown with large illustrations. diff --git a/polaris.shopify.com/pages/examples/button-plain-destructive.tsx b/polaris.shopify.com/pages/examples/button-plain-critical.tsx similarity index 100% rename from polaris.shopify.com/pages/examples/button-plain-destructive.tsx rename to polaris.shopify.com/pages/examples/button-plain-critical.tsx diff --git a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx b/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx deleted file mode 100644 index 7da88ebc453..00000000000 --- a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import {Button} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function ButtonExample() { - return ( -
- Could not retrieve data.{' '} - -
- ); -} - -export default withPolarisExample(ButtonExample); diff --git a/polaris.shopify.com/pages/examples/button-slim.tsx b/polaris.shopify.com/pages/examples/button-primary-critical.tsx similarity index 68% rename from polaris.shopify.com/pages/examples/button-slim.tsx rename to polaris.shopify.com/pages/examples/button-primary-critical.tsx index 2d072b1bcc2..aeb7c5de51f 100644 --- a/polaris.shopify.com/pages/examples/button-slim.tsx +++ b/polaris.shopify.com/pages/examples/button-primary-critical.tsx @@ -3,7 +3,11 @@ import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function ButtonExample() { - return ; + return ( + + ); } export default withPolarisExample(ButtonExample); diff --git a/polaris.shopify.com/pages/examples/button-destructive.tsx b/polaris.shopify.com/pages/examples/button-tertiary.tsx similarity index 76% rename from polaris.shopify.com/pages/examples/button-destructive.tsx rename to polaris.shopify.com/pages/examples/button-tertiary.tsx index d4408107e2c..0020d2837cf 100644 --- a/polaris.shopify.com/pages/examples/button-destructive.tsx +++ b/polaris.shopify.com/pages/examples/button-tertiary.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function ButtonExample() { - return ; + return ; } export default withPolarisExample(ButtonExample);