feat(Button): add Button to @carbon/styles (#8834)

* feat(Button): add button styles to @carbon/styles

* fix(Button): don't allow visibility of tooltip by default

* test(Button): update snapshots

* test(Button): add button style tests

* fix(Button): change convert import, add visually hidden classes

* fix(Tooltip): add space after minus sign"

packages/carbon-react/.storybook/manager-head.html

@@ -41,6 +41,10 @@
 
 <!-- Style overrides -->
 <style>
+  body {
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  }
+
   body a[href='/?path=/settings/about'] {
     display: none;
   }

packages/carbon-react/src/components/Button/Button.stories.js

@@ -0,0 +1,76 @@
+/**
+ * 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 { Button, ButtonSet, ButtonSkeleton } from 'carbon-components-react';
+
+export default {
+  title: 'Components/Button',
+  parameters: {
+    component: Button,
+    subcomponents: {
+      ButtonSet,
+      ButtonSkeleton,
+    },
+  },
+};
+
+export const _Default = () => {
+  return <Button>Button</Button>;
+};
+
+export const Secondary = () => {
+  return <Button kind="secondary">Button</Button>;
+};
+
+export const Tertiary = () => {
+  return <Button kind="tertiary">Button</Button>;
+};
+
+export const Danger = () => {
+  return (
+    <>
+      <Button kind="danger">Button</Button>
+      &nbsp;
+      <Button kind="danger--tertiary">Tertiary Danger Button</Button>
+      &nbsp;
+      <Button kind="danger--ghost">Ghost Danger Button</Button>
+    </>
+  );
+};
+
+export const Ghost = () => {
+  return <Button kind="ghost">Button</Button>;
+};
+
+export const IconButton = () => (
+  <Button
+    renderIcon={Add16}
+    iconDescription="Icon Description"
+    hasIconOnly
+    onClick={action('onClick')}
+  />
+);
+
+export const SetOfButtons = () => {
+  return (
+    <ButtonSet>
+      <Button kind="secondary">Secondary button</Button>
+      <Button kind="primary">Primary button</Button>
+    </ButtonSet>
+  );
+};
+
+export const Skeleton = () => (
+  <div>
+    <ButtonSkeleton />
+    &nbsp;
+    <ButtonSkeleton small />
+  </div>
+);

packages/carbon-react/src/components/Button/index.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+
+export { Button } from 'carbon-components-react';

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

@@ -47,7 +47,7 @@ const Button = React.forwardRef(function Button(
   },
   ref
 ) {
-  const [allowTooltipVisibility, setAllowTooltipVisibility] = useState(true);
+  const [allowTooltipVisibility, setAllowTooltipVisibility] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const tooltipRef = useRef(null);

packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap

@@ -27,7 +27,7 @@ exports[`HeaderGlobalAction should render 1`] = `
       aria-describedby={null}
       aria-label="Accessibility label"
       aria-pressed={null}
-      className="custom-class bx--header__action bx--btn bx--btn--primary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
+      className="custom-class bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
       disabled={false}
       onBlur={[Function]}
       onClick={[Function]}

packages/styles/scss/components/__tests__/button-test.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2018, 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.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/button', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../button';
+
+      $_: get('mixin', meta.mixin-exists('button', 'button'));
+      $_: get('variables', map.keys(meta.module-variables('button')));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+    expect(unwrap('variables')).toMatchInlineSnapshot(`
+      Array [
+        "button-font-weight",
+        "button-font-size",
+        "button-border-radius",
+        "button-height",
+        "button-padding",
+        "button-padding-field",
+        "button-padding-sm",
+        "button-padding-lg",
+        "button-padding-ghost",
+        "button-padding-ghost-field",
+        "button-padding-ghost-sm",
+        "button-border-width",
+        "button-outline-width",
+      ]
+    `);
+  });
+
+  test('configuration', async () => {
+    const { unwrap } = await render(`
+      @use '../button' with (
+        $button-height: 2rem,
+      );
+      $_: get('height', button.$button-height);
+    `);
+    expect(unwrap('height')).toBe('2rem');
+  });
+});

packages/styles/scss/components/_index.scss

@@ -7,6 +7,7 @@
 
 @use 'accordion';
 @use 'breadcrumb';
+@use 'button';
 @use 'link';
 @use 'list';
 @use 'loading';