fix(Button): make changes based on audit (#10610)

* fix(Button): make changes based on audit

* docs(Button): add next folder back

* docs(Button): remove excess stories

* docs(Button): re-add stories for simplicity

Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/Button/Button.js

@@ -294,7 +294,7 @@ Button.propTypes = {
   isExpressive: PropTypes.bool,
 
   /**
-   * Specify whether the Button is currently selected
+   * Specify whether the Button is currently selected. Only applies to the Ghost variant.
    */
   isSelected: PropTypes.bool,
 

packages/react/src/components/Button/next/Button.stories.js

@@ -0,0 +1,130 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Add16 } from '@carbon/icons-react';
+import { default as Button, ButtonSkeleton } from '../';
+import ButtonSet from '../../ButtonSet';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  subcomponents: {
+    ButtonSet,
+    ButtonSkeleton,
+  },
+  argTypes: {
+    kind: {
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'ghost',
+        'danger',
+        'danger--tertiary',
+        'danger--ghost',
+      ],
+      control: { type: 'select' },
+    },
+    size: {
+      options: ['sm', 'md', 'lg', 'xl', '2xl'],
+      control: { type: 'select' },
+    },
+    children: {
+      control: false,
+    },
+    renderIcon: {
+      control: false,
+    },
+    as: {
+      control: false,
+    },
+    small: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const _Default = (args) => {
+  return <Button {...args}>Button</Button>;
+};
+
+export const Secondary = (args) => {
+  return (
+    <Button kind="secondary" {...args}>
+      Button
+    </Button>
+  );
+};
+
+export const Tertiary = (args) => {
+  return (
+    <Button kind="tertiary" {...args}>
+      Button
+    </Button>
+  );
+};
+
+export const Danger = (args) => {
+  return (
+    <>
+      <Button kind="danger" {...args}>
+        Button
+      </Button>
+      &nbsp;
+      <Button kind="danger--tertiary" {...args}>
+        Tertiary Danger Button
+      </Button>
+      &nbsp;
+      <Button kind="danger--ghost" {...args}>
+        Ghost Danger Button
+      </Button>
+    </>
+  );
+};
+
+export const Ghost = (args) => {
+  return (
+    <Button kind="ghost" {...args}>
+      Button
+    </Button>
+  );
+};
+
+export const IconButton = (args) => (
+  <Button
+    renderIcon={Add16}
+    iconDescription="Icon Description"
+    hasIconOnly
+    onClick={action('onClick')}
+    {...args}
+  />
+);
+
+export const SetOfButtons = (args) => {
+  return (
+    <ButtonSet>
+      <Button kind="secondary" {...args}>
+        Secondary button
+      </Button>
+      <Button kind="primary" {...args}>
+        Primary button
+      </Button>
+    </ButtonSet>
+  );
+};
+
+export const Skeleton = () => (
+  <div>
+    <ButtonSkeleton />
+    &nbsp;
+    <ButtonSkeleton size="sm" />
+  </div>
+);

packages/styles/scss/components/button/_button.scss

@@ -102,9 +102,9 @@
       transparent,
       transparent,
       $link-primary,
-      $background-hover,
+      $layer-hover,
       currentColor,
-      $background-active
+      $layer-active
     );
 
     padding: $button-padding-ghost;
@@ -243,6 +243,7 @@
 
       &:active {
         border-color: $button-danger-active;
+        background-color: $button-danger-active;
         color: $text-on-color;
       }
 
@@ -334,7 +335,7 @@
 
   //expressive styles
   .#{$prefix}--btn--expressive {
-    @include type-style('body-short-02');
+    @include type-style('body-compact-02');
 
     min-height: 3rem;
   }

packages/styles/scss/components/button/_mixins.scss

@@ -20,7 +20,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-base {
   @include component-reset.reset;
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   position: relative;
   display: inline-flex;