docs(button): add updated ButtonSet docs

carbon-design-system · Aug 13, 2020 · f65e6e9 · f65e6e9
1 parent 7e832f9
commit f65e6e9
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 16 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -13879,20 +13879,27 @@ Button styles
     // 196px from design kit
     max-width: rem(196px);
 
-    &:not(:first-of-type):not(:focus) {
+    &:not(:focus) {
       box-shadow: rem(-1px) 0 0 0 $button-separator;
     }
+
+    &:first-of-type:not(:focus) {
+      box-shadow: inherit;
+    }
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
     box-shadow: inherit;
   }
 
-  .#{$prefix}--btn-set--stacked
-    .#{$prefix}--btn:not(:first-of-type):not(:focus) {
+  .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) {
     box-shadow: 0 rem(-1px) 0 0 $button-separator;
   }
 
+  .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) {
+    box-shadow: inherit;
+  }
+
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled {
     box-shadow: rem(-1px) 0 0 0 $disabled-03;
 

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -102,7 +102,6 @@ const props = {
       onFocus: action('onFocus'),
     };
   },
-<<<<<<< HEAD
   set: () => {
     const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
     return {
@@ -119,8 +118,6 @@ const props = {
       onFocus: action('onFocus'),
     };
   },
-=======
->>>>>>> docs(button): remove extra stories, add playground
 };
 
 export default {
@@ -129,6 +126,7 @@ export default {
   parameters: {
     component: Button,
     subcomponents: {
+      ButtonSet,
       ButtonSkeleton,
     },
     docs: {
@@ -164,17 +162,33 @@ export const Ghost = () => {
 export const Playground = () => {
   const regularProps = props.regular();
   const iconOnly = props.iconOnly();
+  const { stacked, ...buttonProps } = props.set();
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-      }}>
-      <Button {...regularProps}>Button</Button>
-      &nbsp;
-      <Button hasIconOnly {...iconOnly}></Button>
-    </div>
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}>
+        <Button {...regularProps}>Button</Button>
+        &nbsp;
+        <Button hasIconOnly {...iconOnly}></Button>
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}>
+        <ButtonSet stacked={stacked}>
+          <Button kind="secondary" {...buttonProps}>
+            Secondary button
+          </Button>
+          <Button kind="primary" {...buttonProps}>
+            Primary button
+          </Button>
+        </ButtonSet>
+      </div>
+    </>
   );
 };
 
@@ -184,6 +198,15 @@ IconButton.story = {
   name: 'Icon Button',
 };
 
+export const SetOfButtons = () => {
+  return (
+    <ButtonSet>
+      <Button kind="secondary">Secondary button</Button>
+      <Button kind="primary">Primary button</Button>
+    </ButtonSet>
+  );
+};
+
 export const Skeleton = () => (
   <div>
     <ButtonSkeleton />

diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
@@ -2,6 +2,7 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import * as stories from './Button-story.js';
 import Button from '../Button';
+import ButtonSet from '../ButtonSet';
 import { Add16, Delete16 } from '@carbon/icons-react';
 
 # Button
@@ -45,6 +46,19 @@ buttons.
   <Story id="button--icon-button" />
 </Preview>
 
+## Set of Buttons
+
+You can wrap two `Button` elements in a `ButtonSet` when an action required by
+the user has more than one option. Always use a negative action button
+(secondary) paired with a positive action button (primary) in that order.
+Negative action buttons will be on the left. Positive action buttons should be
+on the right. When these two types buttons are paired in the correct order, they
+will automatically space themselves apart.
+
+<Preview>
+  <Story id="button--set-of-buttons" />
+</Preview>
+
 ## Skeleton state
 
 You can use the `ButtonSkeleton` component to render a skeleton variant of a
@@ -261,6 +275,23 @@ a position and will render the tooltip accordingly. Accepted options are `top`,
 <Button hasIconOnly renderIcon={Add16} iconDescription="Add" tooltipPosition="left" />
 ```
 
+### ButtonSet `stacked`
+
+By passing in `stacked` to the `ButtonSet` component, you can arrange your two
+`Button` elements vertically
+
+<ButtonSet stacked>
+  <Button kind="secondary">Secondary button</Button>
+  <Button kind="primary">Primary button</Button>
+</ButtonSet>
+
+```jsx
+<ButtonSet stacked>
+  <Button kind="secondary">Secondary button</Button>
+  <Button kind="primary">Primary button</Button>
+</ButtonSet>
+```
+
 ## References
 
 - [MDN: ARIA button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)