Update styleguide Button props

Shopify · Aug 16, 2023 · e318f4f · e318f4f
1 parent 4a33f52
commit e318f4f
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 14 deletions.
diff --git a/polaris.shopify.com/pages/examples/filters-disabled.tsx b/polaris.shopify.com/pages/examples/filters-disabled.tsx
@@ -76,8 +76,7 @@ function FiltersDisabledExample() {
               <div style={{paddingLeft: '8px'}}>
                 <Button
                   disabled
-                  primary
-                  plain
+                  variant="primaryPlain"
                   onClick={() => console.log('New filter saved')}
                 >
                   Save

diff --git a/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx
@@ -99,8 +99,7 @@ function FiltersWithSomeDisabledExample() {
               <div style={{paddingLeft: '8px'}}>
                 <Button
                   disabled
-                  primary
-                  plain
+                  variant="primaryPlain"
                   onClick={() => console.log('New filter saved')}
                 >
                   Save

diff --git a/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx b/polaris.shopify.com/pages/examples/fullscreen-bar-with-children.tsx
@@ -35,7 +35,7 @@ function FullscreenBarExample() {
         </div>
         <ButtonGroup>
           <Button onClick={() => {}}>Secondary Action</Button>
-          <Button primary onClick={() => {}}>
+          <Button variant="primary" onClick={() => {}}>
             Primary Action
           </Button>
         </ButtonGroup>

diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx
@@ -28,7 +28,7 @@ function LegacyCardExample() {
         <Popover
           active={false}
           activator={
-            <Button disclosure plain>
+            <Button disclosure variant="plain">
               View Sales
             </Button>
           }

diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx
@@ -15,7 +15,7 @@ function LegacyCardExample() {
           <LegacyStack distribution="trailing">
             <ButtonGroup>
               <Button>Enable two-step authentication</Button>
-              <Button plain>Learn more</Button>
+              <Button variant="plain">Learn more</Button>
             </ButtonGroup>
           </LegacyStack>
         </LegacyStack>

diff --git a/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx b/polaris.shopify.com/pages/examples/page-actions-with-custom-primary-action.tsx
@@ -7,7 +7,7 @@ function PageExample() {
     <PageActions
       primaryAction={
         <Button
-          primary
+          variant="primary"
           connectedDisclosure={{
             accessibilityLabel: 'Other save actions',
             actions: [{content: 'Save as draft'}],

diff --git a/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx b/polaris.shopify.com/pages/examples/page-with-custom-primary-action.tsx
@@ -9,7 +9,7 @@ function PageExample() {
       title="General"
       primaryAction={
         <Button
-          primary
+          variant="primary"
           connectedDisclosure={{
             accessibilityLabel: 'Other save actions',
             actions: [{content: 'Save as new'}],

diff --git a/polaris.shopify.com/pages/examples/page-without-primary-action-in-header.tsx b/polaris.shopify.com/pages/examples/page-without-primary-action-in-header.tsx
@@ -22,7 +22,7 @@ function PageExample() {
           <LegacyStack.Item fill>
             <p>Buy postage and ship remaining 2 items</p>
           </LegacyStack.Item>
-          <Button primary>Continue</Button>
+          <Button variant="primary">Continue</Button>
         </LegacyStack>
       </LegacyCard>
     </Page>

diff --git a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
@@ -43,7 +43,7 @@ export function WithPrimitiveComponents() {
 
   const helpLink = (
     <Button
-      plain
+      variant="plain"
       icon={CircleInformationMajor}
       accessibilityLabel="Learn more"
     />

diff --git a/polaris.shopify.com/pages/examples/sheet-default.tsx b/polaris.shopify.com/pages/examples/sheet-default.tsx
@@ -111,7 +111,7 @@ function SheetExample() {
               accessibilityLabel="Cancel"
               icon={MobileCancelMajor}
               onClick={toggleSheetActive}
-              plain
+              variant="plain"
             />
           </div>
           <Scrollable style={{padding: '1rem', height: '100%'}}>
@@ -136,7 +136,7 @@ function SheetExample() {
             }}
           >
             <Button onClick={toggleSheetActive}>Cancel</Button>
-            <Button primary onClick={toggleSheetActive}>
+            <Button variant="primary" onClick={toggleSheetActive}>
               Done
             </Button>
           </div>

diff --git a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
@@ -326,7 +326,7 @@ function SheetWithSearchableListboxExample() {
                 accessibilityLabel="Cancel"
                 icon={MobileCancelMajor}
                 onClick={handleCloseSheet}
-                plain
+                variant="plain"
               />
             </div>
             <TextContainer>