From ea71f25012cc02d1b9bace9f4e132d125c01a7cb Mon Sep 17 00:00:00 2001
From: kyledurand <kyle.durand@shopify.com>
Date: Tue, 7 Nov 2023 09:40:31 -0500
Subject: [PATCH 1/2] chore: clean up button stories

---
 .../src/components/Button/Button.stories.tsx  | 368 ++++--------------
 1 file changed, 76 insertions(+), 292 deletions(-)

diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index 2e4892808cd..6599157ac0b 100644
--- a/polaris-react/src/components/Button/Button.stories.tsx
+++ b/polaris-react/src/components/Button/Button.stories.tsx
@@ -11,13 +11,7 @@ import {
   Popover,
   ActionList,
 } from '@shopify/polaris';
-import {
-  PlusMinor,
-  DeleteMinor,
-  CancelSmallMinor,
-  EditMajor,
-  ChevronDownMinor,
-} from '@shopify/polaris-icons';
+import {Plus, CancelSmall, Edit, ChevronDown} from '@shopify/polaris-icons';
 
 export default {
   component: Button,
@@ -25,265 +19,55 @@ export default {
 
 export function All() {
   return (
-    <div>
-      <BlockStack gap="800">
-        <BlockStack gap="400">
-          <Text as="h2">default</Text>
-          <Box padding="400">
-            <InlineStack gap="500" blockAlign="end">
-              <Button>Label</Button>
-              <Button disabled>Label</Button>
-              <Button icon={PlusMinor}>Label</Button>
-              <Button disabled icon={PlusMinor}>
-                Label
-              </Button>
-              <Button disclosure>Label</Button>
-              <Button
-                icon={CancelSmallMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                icon={EditMajor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                disabled
-                icon={PlusMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                icon={DeleteMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-            </InlineStack>
-          </Box>
-          <Card>
-            <InlineStack gap="500" blockAlign="end">
-              <Button>Label</Button>
-              <Button disabled>Label</Button>
-              <Button icon={PlusMinor}>Label</Button>
-              <Button disabled icon={PlusMinor}>
-                Label
-              </Button>
-              <Button disclosure>Label</Button>
-              <Button
-                icon={CancelSmallMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                disabled
-                icon={EditMajor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-            </InlineStack>
-          </Card>
-        </BlockStack>
-        <BlockStack gap="400">
-          <Text as="h2">destructive</Text>
-          <Box padding="400">
-            <InlineStack gap="500" blockAlign="end">
-              <Button tone="critical">Label</Button>
-              <Button tone="critical" disabled>
-                Label
-              </Button>
-              <Button tone="critical" icon={PlusMinor}>
-                Label
-              </Button>
-              <Button tone="critical" disabled icon={PlusMinor}>
-                Label
-              </Button>
-              <Button tone="critical" disclosure>
-                Label
-              </Button>
-              <Button
-                tone="critical"
-                icon={CancelSmallMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                tone="critical"
-                icon={EditMajor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                tone="critical"
-                disabled
-                icon={PlusMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                tone="critical"
-                icon={DeleteMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-            </InlineStack>
-          </Box>
-          <Card>
-            <InlineStack gap="500" blockAlign="end">
-              <Button tone="critical">Label</Button>
-              <Button tone="critical" disabled>
-                Label
-              </Button>
-              <Button tone="critical" icon={PlusMinor}>
-                Label
-              </Button>
-              <Button tone="critical" disabled icon={PlusMinor}>
-                Label
-              </Button>
-              <Button tone="critical" disclosure>
-                Label
-              </Button>
-              <Button
-                tone="critical"
-                icon={CancelSmallMinor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-              <Button
-                tone="critical"
-                disabled
-                icon={EditMajor}
-                onClick={() => {}}
-                accessibilityLabel="Dismiss"
-              />
-            </InlineStack>
-          </Card>
-        </BlockStack>
-        <BlockStack gap="200">
-          <Text as="h2">primary</Text>
-          <Primary />
-        </BlockStack>
-
-        <BlockStack gap="200">
-          <Text as="h2">primary destructive</Text>
-          <InlineStack gap="500" blockAlign="end">
-            <Button variant="primary" tone="critical">
-              Label
-            </Button>
-            <Button variant="primary" tone="critical" disabled>
-              Label
-            </Button>
-            <Button variant="primary" tone="critical" icon={DeleteMinor}>
-              Label
-            </Button>
-            <Button
-              variant="primary"
-              tone="critical"
-              disabled
-              icon={DeleteMinor}
-            >
-              Label
-            </Button>
-            <Button variant="primary" tone="critical" disclosure>
-              Label
-            </Button>
-            <Button
-              variant="primary"
-              tone="critical"
-              icon={CancelSmallMinor}
-              onClick={() => {}}
-              accessibilityLabel="Dismiss"
-            />
-          </InlineStack>
-        </BlockStack>
-
-        <BlockStack gap="200">
-          <Text as="h2">primary sucess</Text>
-          <InlineStack gap="500" blockAlign="end">
-            <Button variant="primary" tone="success">
-              Label
-            </Button>
-            <Button variant="primary" tone="success" disabled>
-              Label
-            </Button>
-            <Button variant="primary" tone="success" icon={DeleteMinor}>
-              Label
-            </Button>
-            <Button
-              variant="primary"
-              tone="success"
-              disabled
-              icon={DeleteMinor}
-            >
-              Label
-            </Button>
-            <Button variant="primary" tone="success" disclosure>
-              Label
-            </Button>
-            <Button
-              variant="primary"
-              tone="success"
-              icon={CancelSmallMinor}
-              onClick={() => {}}
-              accessibilityLabel="Dismiss"
-            />
-          </InlineStack>
-        </BlockStack>
-
-        <BlockStack gap="200">
-          <Text as="h2">plain</Text>
-          <Plain />
-        </BlockStack>
-
-        <BlockStack gap="200">
-          <Text as="h2">plain destructive</Text>
-          <PlainDestructive />
-        </BlockStack>
-
-        <BlockStack gap="200">
-          <Text as="h2">tertiary</Text>
-          <Tertiary />
-        </BlockStack>
-
-        <BlockStack gap="200">
-          <Text as="h2">tertiary destructive</Text>
-          <InlineStack gap="500" blockAlign="end">
-            <Button variant="tertiary" tone="critical">
-              Label
-            </Button>
-            <Button variant="tertiary" tone="critical" disabled>
-              Label
-            </Button>
-            <Button variant="tertiary" tone="critical" icon={PlusMinor}>
-              Label
-            </Button>
-            <Button
-              variant="tertiary"
-              tone="critical"
-              disabled
-              icon={PlusMinor}
-            >
-              Label
-            </Button>
-            <Button variant="tertiary" tone="critical" disclosure>
-              Label
-            </Button>
-            <Button
-              variant="tertiary"
-              tone="critical"
-              icon={CancelSmallMinor}
-              onClick={() => {}}
-              accessibilityLabel="Dismiss"
-            />
-          </InlineStack>
-        </BlockStack>
-      </BlockStack>
-    </div>
+    <BlockStack gap="400">
+      <Text as="span">Primary</Text>
+      <Primary />
+      <Text as="span">Default</Text>
+      <Default />
+      <Text as="span">Tertiary</Text>
+      <Tertiary />
+      <Text as="span">Plain</Text>
+      <Plain />
+      <Text as="span">Monochrome Plain</Text>
+      <MonochromePlain />
+      <Text as="span">Destructive</Text>
+      <Destructive />
+      <Text as="span">Plain Destructive</Text>
+      <PlainDestructive />
+      <Text as="span">Slim</Text>
+      <Slim />
+      <Text as="span">Micro</Text>
+      <Micro />
+      <Text as="span">Large</Text>
+      <Large />
+      <Text as="span">Full width</Text>
+      <FullWidth />
+      <Text as="span">Text aligned</Text>
+      <TextAligned />
+      <Text as="span">Pressed</Text>
+      <Pressed />
+      <Text as="span">Disclosure</Text>
+      <PlainDisclosure />
+      <Text as="span">Right aligned disclosure</Text>
+      <RightAlignedDisclosure />
+      <Text as="span">Select disclosure</Text>
+      <SelectDisclosure />
+      <Text as="span">Split</Text>
+      <Split />
+      <Text as="span">Disabled state</Text>
+      <DisabledState />
+      <Text as="span">Loading state</Text>
+      <LoadingState />
+    </BlockStack>
   );
 }
 
 export function Default() {
-  return <Button>Add product</Button>;
+  return (
+    <div>
+      <Button>Add product</Button>
+    </div>
+  );
 }
 
 export function Plain() {
@@ -294,10 +78,10 @@ export function Plain() {
         <Button variant="plain" disabled>
           Label
         </Button>
-        <Button variant="plain" icon={PlusMinor}>
+        <Button variant="plain" icon={Plus}>
           Label
         </Button>
-        <Button variant="plain" disabled icon={PlusMinor}>
+        <Button variant="plain" disabled icon={Plus}>
           Label
         </Button>
         <Button variant="plain" disclosure>
@@ -308,14 +92,14 @@ export function Plain() {
         </Button>
         <Button
           variant="plain"
-          icon={CancelSmallMinor}
+          icon={CancelSmall}
           onClick={() => {}}
           accessibilityLabel="Dismiss"
         />
         <Button
           variant="plain"
           disabled
-          icon={CancelSmallMinor}
+          icon={CancelSmall}
           onClick={() => {}}
           accessibilityLabel="Dismiss"
         />
@@ -357,10 +141,10 @@ export function Tertiary() {
           <Button variant="tertiary" disabled>
             Label
           </Button>
-          <Button variant="tertiary" icon={PlusMinor}>
+          <Button variant="tertiary" icon={Plus}>
             Label
           </Button>
-          <Button variant="tertiary" disabled icon={PlusMinor}>
+          <Button variant="tertiary" disabled icon={Plus}>
             Label
           </Button>
           <Button variant="tertiary" disclosure>
@@ -374,10 +158,10 @@ export function Tertiary() {
           <Button variant="tertiary" disabled>
             Label
           </Button>
-          <Button variant="tertiary" icon={PlusMinor}>
+          <Button variant="tertiary" icon={Plus}>
             Label
           </Button>
-          <Button variant="tertiary" disabled icon={PlusMinor}>
+          <Button variant="tertiary" disabled icon={Plus}>
             Label
           </Button>
           <Button variant="tertiary" disclosure>
@@ -389,14 +173,14 @@ export function Tertiary() {
         <InlineStack gap="500" blockAlign="end">
           <Button
             variant="tertiary"
-            icon={CancelSmallMinor}
+            icon={CancelSmall}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
           <Button
             disabled
             variant="tertiary"
-            icon={EditMajor}
+            icon={Edit}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
@@ -415,10 +199,10 @@ export function PlainDestructive() {
       <Button variant="plain" tone="critical" disabled>
         Label
       </Button>
-      <Button variant="plain" tone="critical" icon={PlusMinor}>
+      <Button variant="plain" tone="critical" icon={Plus}>
         Label
       </Button>
-      <Button variant="plain" tone="critical" disabled icon={PlusMinor}>
+      <Button variant="plain" tone="critical" disabled icon={Plus}>
         Label
       </Button>
       <Button variant="plain" tone="critical" disclosure>
@@ -430,7 +214,7 @@ export function PlainDestructive() {
       <Button
         variant="plain"
         tone="critical"
-        icon={CancelSmallMinor}
+        icon={CancelSmall}
         onClick={() => {}}
         accessibilityLabel="Dismiss"
       />
@@ -438,7 +222,7 @@ export function PlainDestructive() {
         variant="plain"
         tone="critical"
         disabled
-        icon={CancelSmallMinor}
+        icon={CancelSmall}
         onClick={() => {}}
         accessibilityLabel="Dismiss"
       />
@@ -455,10 +239,10 @@ export function Primary() {
           <Button variant="primary" disabled>
             Label
           </Button>
-          <Button variant="primary" icon={PlusMinor}>
+          <Button variant="primary" icon={Plus}>
             Label
           </Button>
-          <Button variant="primary" disabled icon={PlusMinor}>
+          <Button variant="primary" disabled icon={Plus}>
             Label
           </Button>
           <Button variant="primary" disclosure>
@@ -466,14 +250,14 @@ export function Primary() {
           </Button>
           <Button
             variant="primary"
-            icon={CancelSmallMinor}
+            icon={CancelSmall}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
           <Button
             disabled
             variant="primary"
-            icon={EditMajor}
+            icon={Edit}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
@@ -485,10 +269,10 @@ export function Primary() {
           <Button variant="primary" disabled>
             Label
           </Button>
-          <Button variant="primary" icon={PlusMinor}>
+          <Button variant="primary" icon={Plus}>
             Label
           </Button>
-          <Button variant="primary" disabled icon={PlusMinor}>
+          <Button variant="primary" disabled icon={Plus}>
             Label
           </Button>
           <Button variant="primary" disclosure>
@@ -496,14 +280,14 @@ export function Primary() {
           </Button>
           <Button
             variant="primary"
-            icon={CancelSmallMinor}
+            icon={CancelSmall}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
           <Button
             disabled
             variant="primary"
-            icon={EditMajor}
+            icon={Edit}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
@@ -530,7 +314,7 @@ export function Micro() {
       <Button variant="plain" size="micro">
         Label
       </Button>
-      <Button size="micro" accessibilityLabel="Edit" icon={EditMajor} />
+      <Button size="micro" accessibilityLabel="Edit" icon={Edit} />
     </InlineStack>
   );
 }
@@ -548,7 +332,7 @@ export function Slim() {
       <Button variant="plain" size="slim">
         Label
       </Button>
-      <Button size="slim" accessibilityLabel="Edit" icon={EditMajor} />
+      <Button size="slim" accessibilityLabel="Edit" icon={Edit} />
     </InlineStack>
   );
 }
@@ -558,8 +342,8 @@ export function Large() {
     <BlockStack gap="400">
       <InlineStack gap="500" blockAlign="end">
         <Button size="large">Create store</Button>
-        <Button size="large" accessibilityLabel="Edit" icon={EditMajor} />
-        <Button size="large" icon={PlusMinor} variant="primary">
+        <Button size="large" accessibilityLabel="Edit" icon={Edit} />
+        <Button size="large" icon={Plus} variant="primary">
           Create store
         </Button>
       </InlineStack>
@@ -646,7 +430,7 @@ export function RightAlignedDisclosure() {
 
 export function SelectDisclosure() {
   return (
-    <div style={{height: '100px'}}>
+    <div>
       <Button disclosure="select" onClick={() => console.log('Open Popover')}>
         Select options
       </Button>
@@ -661,7 +445,7 @@ export function Split() {
     setActive((activeId) => (activeId !== id ? id : null));
   };
   return (
-    <div style={{height: '100px'}}>
+    <div>
       <InlineStack gap="500">
         <ButtonGroup variant="segmented">
           <Button variant="primary">Save</Button>
@@ -673,7 +457,7 @@ export function Split() {
               <Button
                 variant="primary"
                 onClick={toggleActive('popover1')}
-                icon={ChevronDownMinor}
+                icon={ChevronDown}
                 accessibilityLabel="Other save actions"
               />
             }
@@ -696,7 +480,7 @@ export function Split() {
             activator={
               <Button
                 onClick={toggleActive('popover2')}
-                icon={ChevronDownMinor}
+                icon={ChevronDown}
                 accessibilityLabel="Other save actions"
               />
             }

From fab07b11dafc6fb224cd32160301d204da38fd4a Mon Sep 17 00:00:00 2001
From: kyledurand <kyle.durand@shopify.com>
Date: Thu, 9 Nov 2023 11:10:36 -0500
Subject: [PATCH 2/2] add missing stories, make consistent

---
 .../src/components/Button/Button.stories.tsx  | 457 ++++++++++++++----
 1 file changed, 370 insertions(+), 87 deletions(-)

diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index 6599157ac0b..8e630e227bb 100644
--- a/polaris-react/src/components/Button/Button.stories.tsx
+++ b/polaris-react/src/components/Button/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
+import type {TextProps} from '@shopify/polaris';
 import {
   Button,
   ButtonGroup,
@@ -11,52 +12,67 @@ import {
   Popover,
   ActionList,
 } from '@shopify/polaris';
-import {Plus, CancelSmall, Edit, ChevronDown} from '@shopify/polaris-icons';
+import {
+  PlusMinor,
+  CancelSmallMinor,
+  ChevronDownMinor,
+  EditMinor,
+} from '@shopify/polaris-icons';
 
 export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
 export function All() {
+  const textProps: Pick<TextProps, 'as' | 'fontWeight'> = {
+    as: 'span',
+    fontWeight: 'bold',
+  };
   return (
     <BlockStack gap="400">
-      <Text as="span">Primary</Text>
-      <Primary />
-      <Text as="span">Default</Text>
+      <Text {...textProps}>Default</Text>
       <Default />
-      <Text as="span">Tertiary</Text>
+      <Text {...textProps}>Critical</Text>
+      <Critical />
+      <Text {...textProps}>Primary</Text>
+      <Primary />
+      <Text {...textProps}>Primary success</Text>
+      <PrimarySuccess />
+      <Text {...textProps}>Primary critical</Text>
+      <PrimaryCritical />
+      <Text {...textProps}>Tertiary</Text>
       <Tertiary />
-      <Text as="span">Plain</Text>
+      <Text {...textProps}>Tertiary critical</Text>
+      <TertiaryCritical />
+      <Text {...textProps}>Plain</Text>
       <Plain />
-      <Text as="span">Monochrome Plain</Text>
+      <Text {...textProps}>Plain Critical</Text>
+      <PlainCritical />
+      <Text {...textProps}>Monochrome Plain</Text>
       <MonochromePlain />
-      <Text as="span">Destructive</Text>
-      <Destructive />
-      <Text as="span">Plain Destructive</Text>
-      <PlainDestructive />
-      <Text as="span">Slim</Text>
-      <Slim />
-      <Text as="span">Micro</Text>
+      <Text {...textProps}>Micro</Text>
       <Micro />
-      <Text as="span">Large</Text>
+      <Text {...textProps}>Slim</Text>
+      <Slim />
+      <Text {...textProps}>Large</Text>
       <Large />
-      <Text as="span">Full width</Text>
+      <Text {...textProps}>Full width</Text>
       <FullWidth />
-      <Text as="span">Text aligned</Text>
+      <Text {...textProps}>Text aligned</Text>
       <TextAligned />
-      <Text as="span">Pressed</Text>
+      <Text {...textProps}>Pressed</Text>
       <Pressed />
-      <Text as="span">Disclosure</Text>
+      <Text {...textProps}>Disclosure</Text>
       <PlainDisclosure />
-      <Text as="span">Right aligned disclosure</Text>
+      <Text {...textProps}>Right aligned disclosure</Text>
       <RightAlignedDisclosure />
-      <Text as="span">Select disclosure</Text>
+      <Text {...textProps}>Select disclosure</Text>
       <SelectDisclosure />
-      <Text as="span">Split</Text>
+      <Text {...textProps}>Split</Text>
       <Split />
-      <Text as="span">Disabled state</Text>
+      <Text {...textProps}>Disabled state</Text>
       <DisabledState />
-      <Text as="span">Loading state</Text>
+      <Text {...textProps}>Loading state</Text>
       <LoadingState />
     </BlockStack>
   );
@@ -64,24 +80,134 @@ export function All() {
 
 export function Default() {
   return (
-    <div>
-      <Button>Add product</Button>
-    </div>
+    <>
+      <Box padding="400">
+        <InlineStack gap="400" blockAlign="end">
+          <Button>Label</Button>
+          <Button disabled>Label</Button>
+          <Button icon={PlusMinor}>Label</Button>
+          <Button disabled icon={PlusMinor}>
+            Label
+          </Button>
+          <Button disclosure>Label</Button>
+          <Button
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            disabled
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+        </InlineStack>
+      </Box>
+      <Card>
+        <InlineStack gap="400" blockAlign="end">
+          <Button>Label</Button>
+          <Button disabled>Label</Button>
+          <Button icon={PlusMinor}>Label</Button>
+          <Button disabled icon={PlusMinor}>
+            Label
+          </Button>
+          <Button disclosure>Label</Button>
+          <Button
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            disabled
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+        </InlineStack>
+      </Card>
+    </>
+  );
+}
+
+export function Critical() {
+  return (
+    <>
+      <Box padding="400">
+        <InlineStack gap="400" blockAlign="end">
+          <Button tone="critical">Label</Button>
+          <Button tone="critical" disabled>
+            Label
+          </Button>
+          <Button tone="critical" icon={PlusMinor}>
+            Label
+          </Button>
+          <Button tone="critical" disabled icon={PlusMinor}>
+            Label
+          </Button>
+          <Button tone="critical" disclosure>
+            Label
+          </Button>
+          <Button
+            tone="critical"
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            disabled
+            tone="critical"
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+        </InlineStack>
+      </Box>
+      <Card>
+        <InlineStack gap="400" blockAlign="end">
+          <Button tone="critical">Label</Button>
+          <Button tone="critical" disabled>
+            Label
+          </Button>
+          <Button tone="critical" icon={PlusMinor}>
+            Label
+          </Button>
+          <Button tone="critical" disabled icon={PlusMinor}>
+            Label
+          </Button>
+          <Button tone="critical" disclosure>
+            Label
+          </Button>
+          <Button
+            tone="critical"
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            tone="critical"
+            disabled
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+        </InlineStack>
+      </Card>
+    </>
   );
 }
 
 export function Plain() {
   return (
     <Box padding="400">
-      <InlineStack gap="500" blockAlign="end">
+      <InlineStack gap="400" blockAlign="end">
         <Button variant="plain">Label</Button>
         <Button variant="plain" disabled>
           Label
         </Button>
-        <Button variant="plain" icon={Plus}>
+        <Button variant="plain" icon={PlusMinor}>
           Label
         </Button>
-        <Button variant="plain" disabled icon={Plus}>
+        <Button variant="plain" disabled icon={PlusMinor}>
           Label
         </Button>
         <Button variant="plain" disclosure>
@@ -92,14 +218,14 @@ export function Plain() {
         </Button>
         <Button
           variant="plain"
-          icon={CancelSmall}
+          icon={CancelSmallMinor}
           onClick={() => {}}
           accessibilityLabel="Dismiss"
         />
         <Button
           variant="plain"
           disabled
-          icon={CancelSmall}
+          icon={CancelSmallMinor}
           onClick={() => {}}
           accessibilityLabel="Dismiss"
         />
@@ -111,7 +237,7 @@ export function Plain() {
 export function MonochromePlain() {
   return (
     <Box padding="400">
-      <InlineStack gap="500" blockAlign="center">
+      <InlineStack gap="400" blockAlign="center">
         <Button variant="monochromePlain">Default</Button>
         <Button variant="monochromePlain" icon={PlusMinor}>
           With icon
@@ -136,51 +262,135 @@ export function Tertiary() {
   return (
     <BlockStack gap="400">
       <Box padding="400">
-        <InlineStack gap="500" blockAlign="end">
+        <InlineStack gap="400" blockAlign="end">
           <Button variant="tertiary">Label</Button>
           <Button variant="tertiary" disabled>
             Label
           </Button>
-          <Button variant="tertiary" icon={Plus}>
+          <Button variant="tertiary" icon={PlusMinor}>
             Label
           </Button>
-          <Button variant="tertiary" disabled icon={Plus}>
+          <Button variant="tertiary" disabled icon={PlusMinor}>
             Label
           </Button>
           <Button variant="tertiary" disclosure>
             Label
           </Button>
+          <Button
+            variant="tertiary"
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            disabled
+            variant="tertiary"
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
         </InlineStack>
       </Box>
       <Card>
-        <InlineStack gap="500" blockAlign="end">
+        <InlineStack gap="400" blockAlign="end">
           <Button variant="tertiary">Label</Button>
           <Button variant="tertiary" disabled>
             Label
           </Button>
-          <Button variant="tertiary" icon={Plus}>
+          <Button variant="tertiary" icon={PlusMinor}>
             Label
           </Button>
-          <Button variant="tertiary" disabled icon={Plus}>
+          <Button variant="tertiary" disabled icon={PlusMinor}>
             Label
           </Button>
           <Button variant="tertiary" disclosure>
             Label
           </Button>
+          <Button
+            variant="tertiary"
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            disabled
+            variant="tertiary"
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
         </InlineStack>
       </Card>
+    </BlockStack>
+  );
+}
+
+export function TertiaryCritical() {
+  return (
+    <BlockStack gap="400">
+      <Box padding="400">
+        <InlineStack gap="400" blockAlign="end">
+          <Button variant="tertiary" tone="critical">
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" disabled>
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" icon={PlusMinor}>
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" disabled icon={PlusMinor}>
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" disclosure>
+            Label
+          </Button>
+          <Button
+            variant="tertiary"
+            tone="critical"
+            icon={CancelSmallMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+          <Button
+            disabled
+            variant="tertiary"
+            tone="critical"
+            icon={EditMinor}
+            onClick={() => {}}
+            accessibilityLabel="Dismiss"
+          />
+        </InlineStack>
+      </Box>
       <Card>
-        <InlineStack gap="500" blockAlign="end">
+        <InlineStack gap="400" blockAlign="end">
+          <Button variant="tertiary" tone="critical">
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" disabled>
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" icon={PlusMinor}>
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" disabled icon={PlusMinor}>
+            Label
+          </Button>
+          <Button variant="tertiary" tone="critical" disclosure>
+            Label
+          </Button>
           <Button
             variant="tertiary"
-            icon={CancelSmall}
+            tone="critical"
+            icon={CancelSmallMinor}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
           <Button
             disabled
             variant="tertiary"
-            icon={Edit}
+            tone="critical"
+            icon={EditMinor}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
@@ -190,19 +400,19 @@ export function Tertiary() {
   );
 }
 
-export function PlainDestructive() {
+export function PlainCritical() {
   return (
-    <InlineStack gap="500" blockAlign="end">
+    <InlineStack gap="400" blockAlign="end">
       <Button variant="plain" tone="critical">
         Label
       </Button>
       <Button variant="plain" tone="critical" disabled>
         Label
       </Button>
-      <Button variant="plain" tone="critical" icon={Plus}>
+      <Button variant="plain" tone="critical" icon={PlusMinor}>
         Label
       </Button>
-      <Button variant="plain" tone="critical" disabled icon={Plus}>
+      <Button variant="plain" tone="critical" disabled icon={PlusMinor}>
         Label
       </Button>
       <Button variant="plain" tone="critical" disclosure>
@@ -214,7 +424,7 @@ export function PlainDestructive() {
       <Button
         variant="plain"
         tone="critical"
-        icon={CancelSmall}
+        icon={CancelSmallMinor}
         onClick={() => {}}
         accessibilityLabel="Dismiss"
       />
@@ -222,7 +432,7 @@ export function PlainDestructive() {
         variant="plain"
         tone="critical"
         disabled
-        icon={CancelSmall}
+        icon={CancelSmallMinor}
         onClick={() => {}}
         accessibilityLabel="Dismiss"
       />
@@ -234,15 +444,15 @@ export function Primary() {
   return (
     <BlockStack gap="400">
       <Box padding="400">
-        <InlineStack gap="500" blockAlign="end">
+        <InlineStack gap="400" blockAlign="end">
           <Button variant="primary">Label</Button>
           <Button variant="primary" disabled>
             Label
           </Button>
-          <Button variant="primary" icon={Plus}>
+          <Button variant="primary" icon={PlusMinor}>
             Label
           </Button>
-          <Button variant="primary" disabled icon={Plus}>
+          <Button variant="primary" disabled icon={PlusMinor}>
             Label
           </Button>
           <Button variant="primary" disclosure>
@@ -250,29 +460,29 @@ export function Primary() {
           </Button>
           <Button
             variant="primary"
-            icon={CancelSmall}
+            icon={CancelSmallMinor}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
           <Button
             disabled
             variant="primary"
-            icon={Edit}
+            icon={EditMinor}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
         </InlineStack>
       </Box>
       <Card>
-        <InlineStack gap="500" blockAlign="end">
+        <InlineStack gap="400" blockAlign="end">
           <Button variant="primary">Label</Button>
           <Button variant="primary" disabled>
             Label
           </Button>
-          <Button variant="primary" icon={Plus}>
+          <Button variant="primary" icon={PlusMinor}>
             Label
           </Button>
-          <Button variant="primary" disabled icon={Plus}>
+          <Button variant="primary" disabled icon={PlusMinor}>
             Label
           </Button>
           <Button variant="primary" disclosure>
@@ -280,14 +490,14 @@ export function Primary() {
           </Button>
           <Button
             variant="primary"
-            icon={CancelSmall}
+            icon={CancelSmallMinor}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
           <Button
             disabled
             variant="primary"
-            icon={Edit}
+            icon={EditMinor}
             onClick={() => {}}
             accessibilityLabel="Dismiss"
           />
@@ -297,13 +507,87 @@ export function Primary() {
   );
 }
 
-export function Destructive() {
-  return <Button tone="critical">Delete theme</Button>;
+export function PrimarySuccess() {
+  return (
+    <Box padding="400">
+      <InlineStack gap="400" blockAlign="end">
+        <Button variant="primary" tone="success">
+          Label
+        </Button>
+        <Button variant="primary" tone="success" disabled>
+          Label
+        </Button>
+        <Button variant="primary" tone="success" icon={PlusMinor}>
+          Label
+        </Button>
+        <Button variant="primary" tone="success" disabled icon={PlusMinor}>
+          Label
+        </Button>
+        <Button variant="primary" tone="success" disclosure>
+          Label
+        </Button>
+        <Button
+          variant="primary"
+          tone="success"
+          icon={CancelSmallMinor}
+          onClick={() => {}}
+          accessibilityLabel="Dismiss"
+        />
+        <Button
+          disabled
+          variant="primary"
+          tone="success"
+          icon={EditMinor}
+          onClick={() => {}}
+          accessibilityLabel="Dismiss"
+        />
+      </InlineStack>
+    </Box>
+  );
+}
+
+export function PrimaryCritical() {
+  return (
+    <Box padding="400">
+      <InlineStack gap="400" blockAlign="end">
+        <Button variant="primary" tone="critical">
+          Label
+        </Button>
+        <Button variant="primary" tone="critical" disabled>
+          Label
+        </Button>
+        <Button variant="primary" tone="critical" icon={PlusMinor}>
+          Label
+        </Button>
+        <Button variant="primary" tone="critical" disabled icon={PlusMinor}>
+          Label
+        </Button>
+        <Button variant="primary" tone="critical" disclosure>
+          Label
+        </Button>
+        <Button
+          variant="primary"
+          tone="critical"
+          icon={CancelSmallMinor}
+          onClick={() => {}}
+          accessibilityLabel="Dismiss"
+        />
+        <Button
+          disabled
+          variant="primary"
+          tone="critical"
+          icon={EditMinor}
+          onClick={() => {}}
+          accessibilityLabel="Dismiss"
+        />
+      </InlineStack>
+    </Box>
+  );
 }
 
 export function Micro() {
   return (
-    <InlineStack gap="500">
+    <InlineStack gap="400">
       <Button size="micro">Label</Button>
       <Button variant="primary" size="micro">
         Label
@@ -314,14 +598,14 @@ export function Micro() {
       <Button variant="plain" size="micro">
         Label
       </Button>
-      <Button size="micro" accessibilityLabel="Edit" icon={Edit} />
+      <Button size="micro" accessibilityLabel="Edit" icon={EditMinor} />
     </InlineStack>
   );
 }
 
 export function Slim() {
   return (
-    <InlineStack gap="500">
+    <InlineStack gap="400">
       <Button size="slim">Label</Button>
       <Button variant="primary" size="slim">
         Label
@@ -332,27 +616,26 @@ export function Slim() {
       <Button variant="plain" size="slim">
         Label
       </Button>
-      <Button size="slim" accessibilityLabel="Edit" icon={Edit} />
+      <Button size="slim" accessibilityLabel="Edit" icon={EditMinor} />
     </InlineStack>
   );
 }
 
 export function Large() {
   return (
-    <BlockStack gap="400">
-      <InlineStack gap="500" blockAlign="end">
-        <Button size="large">Create store</Button>
-        <Button size="large" accessibilityLabel="Edit" icon={Edit} />
-        <Button size="large" icon={Plus} variant="primary">
-          Create store
-        </Button>
-      </InlineStack>
-      <InlineStack gap="500" blockAlign="end">
-        <Button size="large" fullWidth>
-          Create store
-        </Button>
-      </InlineStack>
-    </BlockStack>
+    <InlineStack gap="400">
+      <Button size="large">Label</Button>
+      <Button size="large" variant="primary">
+        Label
+      </Button>
+      <Button size="large" tone="critical">
+        Label
+      </Button>
+      <Button size="large" variant="plain">
+        Label
+      </Button>
+      <Button size="large" accessibilityLabel="Edit" icon={EditMinor} />
+    </InlineStack>
   );
 }
 
@@ -362,11 +645,11 @@ export function FullWidth() {
 
 export function TextAligned() {
   return (
-    <Button variant="plain" textAlign="left">
-      This is a really long string of text that overflows onto the next line we
-      need to put in a lot of words now you can see the alignment. It is very
-      long but a customer could potentially name something this long.
-    </Button>
+    <Box maxWidth="200px">
+      <Button variant="plain" textAlign="right">
+        This is a really long string of text that overflows onto the next line.
+      </Button>
+    </Box>
   );
 }
 
@@ -446,7 +729,7 @@ export function Split() {
   };
   return (
     <div>
-      <InlineStack gap="500">
+      <InlineStack gap="400">
         <ButtonGroup variant="segmented">
           <Button variant="primary">Save</Button>
 
@@ -457,7 +740,7 @@ export function Split() {
               <Button
                 variant="primary"
                 onClick={toggleActive('popover1')}
-                icon={ChevronDown}
+                icon={ChevronDownMinor}
                 accessibilityLabel="Other save actions"
               />
             }
@@ -480,7 +763,7 @@ export function Split() {
             activator={
               <Button
                 onClick={toggleActive('popover2')}
-                icon={ChevronDown}
+                icon={ChevronDownMinor}
                 accessibilityLabel="Other save actions"
               />
             }
@@ -529,7 +812,7 @@ export function DisabledState() {
 
 export function LoadingState() {
   return (
-    <InlineStack gap="500">
+    <InlineStack gap="400">
       <Button loading>Save product</Button>
       <Button variant="primary" loading>
         Save product