fix(ButtonGroup): address QA design updates (#1943)

- add example showing how to align tertiary buttons - remove and update stories
chanzuckerberg · May 14, 2024 · 1595a18 · 1595a18
1 parent 3140996
commit 1595a18
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 47 deletions.
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx b/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx
@@ -33,27 +33,37 @@ type Args = React.ComponentProps<typeof ButtonGroup>;
 
 export const Default: StoryObj<Args> = {};
 
+/**
+ * Buttons can have a vertical layout.
+ */
 export const Vertical: StoryObj<Args> = {
   args: {
     buttonLayout: 'vertical',
   },
 };
 
+/**
+ * Primary and secondary buttons can be put along the edges of the tertiary `Button`.
+ */
 export const HorizontalProgressive: StoryObj<Args> = {
   args: {
     buttonLayout: 'horizontal-progressive',
   },
 };
 
-export const WithFiveButtons: StoryObj<Args> = {
+/**
+ * When using a tertiary button, you may adjust the layout to nudge the button's alignment to better flow
+ * with adjacent content. Use `-ml-X` to set a negative margin within the `ButtonGroup`.
+ */
+export const HorizontalProgressiveTertiary: StoryObj<Args> = {
   args: {
+    buttonLayout: 'horizontal-progressive',
     children: (
       <>
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-        <Button>Button 4</Button>
-        <Button rank="primary">Button 5</Button>
+        <Button rank="primary">Primary Button</Button>
+        <Button className="-ml-size-2" rank="tertiary">
+          Tertiary Button
+        </Button>
       </>
     ),
   },

diff --git a/src/components/ButtonGroup/ButtonGroup-v2.test.ts b/src/components/ButtonGroup/ButtonGroup-v2.test.ts
@@ -2,6 +2,6 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
 import * as stories from './ButtonGroup-v2.stories';
 
-describe('<ButtonGroup />', () => {
+describe('<ButtonGroup /> (v2)', () => {
   generateSnapshots(stories as StoryFile);
 });
diff --git a/src/components/ButtonGroup/__snapshots__/ButtonGroup-v2.test.ts.snap b/src/components/ButtonGroup/__snapshots__/ButtonGroup-v2.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ButtonGroup /> Default story renders snapshot 1`] = `
+exports[`<ButtonGroup /> (v2) Default story renders snapshot 1`] = `
 <div
   class="p-8"
 >
@@ -31,7 +31,7 @@ exports[`<ButtonGroup /> Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<ButtonGroup /> HorizontalProgressive story renders snapshot 1`] = `
+exports[`<ButtonGroup /> (v2) HorizontalProgressive story renders snapshot 1`] = `
 <div
   class="p-8"
 >
@@ -62,12 +62,12 @@ exports[`<ButtonGroup /> HorizontalProgressive story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<ButtonGroup /> Vertical story renders snapshot 1`] = `
+exports[`<ButtonGroup /> (v2) HorizontalProgressiveTertiary story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <div
-    class="button-group button-group--vertical"
+    class="button-group button-group--horizontal-progressive"
   >
     <button
       class="button button--layout-none button--primary button--lg button--variant-default"
@@ -76,29 +76,29 @@ exports[`<ButtonGroup /> Vertical story renders snapshot 1`] = `
       <span
         class="button__text"
       >
-        Button 1
+        Primary Button
       </span>
     </button>
     <button
-      class="button button--layout-none button--secondary button--lg button--variant-default"
+      class="button button--layout-none button--tertiary button--lg button--variant-default -ml-size-2"
       type="button"
     >
       <span
         class="button__text"
       >
-        Button 2
+        Tertiary Button
       </span>
     </button>
   </div>
 </div>
 `;
 
-exports[`<ButtonGroup /> WithFiveButtons story renders snapshot 1`] = `
+exports[`<ButtonGroup /> (v2) Vertical story renders snapshot 1`] = `
 <div
   class="p-8"
 >
   <div
-    class="button-group button-group--horizontal"
+    class="button-group button-group--vertical"
   >
     <button
       class="button button--layout-none button--primary button--lg button--variant-default"
@@ -111,7 +111,7 @@ exports[`<ButtonGroup /> WithFiveButtons story renders snapshot 1`] = `
       </span>
     </button>
     <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
+      class="button button--layout-none button--secondary button--lg button--variant-default"
       type="button"
     >
       <span
@@ -120,36 +120,6 @@ exports[`<ButtonGroup /> WithFiveButtons story renders snapshot 1`] = `
         Button 2
       </span>
     </button>
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 3
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 4
-      </span>
-    </button>
-    <button
-      class="button button--layout-none button--primary button--lg button--variant-default"
-      type="button"
-    >
-      <span
-        class="button__text"
-      >
-        Button 5
-      </span>
-    </button>
   </div>
 </div>
 `;