button base housekeeping (#16336)

* button base housekeeping * add pixel size to description * snapshot update
MetaMask · Nov 3, 2022 · 8bdf820 · 8bdf820
1 parent 107525b
commit 8bdf820
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 29 deletions.
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
@@ -22,7 +22,7 @@ The `ButtonBase` accepts all props below as well as all [Box](/docs/ui-component
 Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js`
 to change the size of `ButtonBase`. Defaults to `SIZES.MD`
 
-Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
+Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `SIZES`.
 
 Possible sizes include:
 
@@ -86,6 +86,20 @@ import { ButtonBase } from '../ui/component-library';
 </ButtonBase>
 ```
 
+### Href
+
+When an `href` prop is passed it will change the element to an anchor(`a`) tag.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-base-button-base-stories-js--href" />
+</Canvas>
+
+```jsx
+import { ButtonBase } from '../ui/component-library';
+
+<ButtonBase href="/metamask">Anchor Element</ButtonBase>;
+```
+
 ### Disabled
 
 Use the boolean `disabled` prop to disable button

diff --git a/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="button-base"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button base
+    </span>
+  </button>
+</div>
+`;
diff --git a/...t-library/button-base/button.constants.js → ...rary/button-base/button-base.constants.js b/...t-library/button-base/button.constants.js → ...rary/button-base/button-base.constants.js
@@ -1,6 +1,6 @@
 import { SIZES } from '../../../helpers/constants/design-system';
 
-export const BUTTON_SIZES = {
+export const BUTTON_BASE_SIZES = {
   SM: SIZES.SM,
   MD: SIZES.MD,
   LG: SIZES.LG,

diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
@@ -15,27 +15,28 @@ import {
   SIZES,
   FLEX_DIRECTION,
 } from '../../../helpers/constants/design-system';
-import { BUTTON_SIZES } from './button.constants';
+import { BUTTON_BASE_SIZES } from './button-base.constants';
 
 export const ButtonBase = ({
   as = 'button',
   block,
   children,
   className,
-  size = BUTTON_SIZES.MD,
+  href,
+  size = BUTTON_BASE_SIZES.MD,
   icon,
   iconPositionRight,
   loading,
   disabled,
   iconProps,
   ...props
 }) => {
-  const Tag = props?.href ? 'a' : as;
+  const Tag = href ? 'a' : as;
   return (
     <Box
       as={Tag}
-      paddingLeft={size === BUTTON_SIZES.AUTO ? 0 : 4}
-      paddingRight={size === BUTTON_SIZES.AUTO ? 0 : 4}
+      paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
+      paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
       className={classnames(
         'mm-button',
         `mm-button--size-${size}`,
@@ -61,13 +62,13 @@ export const ButtonBase = ({
           iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
         }
         gap={2}
-        variant={size === BUTTON_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
+        variant={size === BUTTON_BASE_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
         color={TEXT_COLORS.INHERIT}
       >
         {icon && (
           <Icon
             name={icon}
-            size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
+            size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
             {...iconProps}
           />
         )}
@@ -77,7 +78,7 @@ export const ButtonBase = ({
         <Icon
           className="mm-button__icon-loading"
           name={ICON_NAMES.LOADING_FILLED}
-          size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
+          size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
         />
       )}
     </Box>
@@ -105,6 +106,10 @@ ButtonBase.propTypes = {
    * Boolean to disable button
    */
   disabled: PropTypes.bool,
+  /**
+   * When an `href` prop is passed, ButtonBase will automatically change the root element to be an `a` (anchor) tag
+   */
+  href: PropTypes.string,
   /**
    * Add icon to left side of button text passing icon name
    * The name of the icon to display. Should be one of ICON_NAMES
@@ -125,9 +130,9 @@ ButtonBase.propTypes = {
   loading: PropTypes.bool,
   /**
    * The size of the ButtonBase.
-   * Possible values could be 'SIZES.AUTO', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
    */
-  size: PropTypes.oneOf(Object.values(BUTTON_SIZES)),
+  size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
   /**
    * Addition style properties to apply to the button.
    */

diff --git a/ui/components/component-library/button-base/button-base.stories.js b/ui/components/component-library/button-base/button-base.stories.js
@@ -9,7 +9,7 @@ import {
 import Box from '../../ui/box/box';
 import { ICON_NAMES } from '../icon';
 import { Text } from '../text';
-import { BUTTON_SIZES } from './button.constants';
+import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
 
@@ -66,7 +66,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(BUTTON_SIZES),
+      options: Object.values(BUTTON_BASE_SIZES),
     },
     marginTop: {
       options: marginSizeControlOptions,
@@ -145,6 +145,12 @@ export const As = (args) => (
   </Box>
 );
 
+export const Href = (args) => <ButtonBase {...args}>Anchor Element</ButtonBase>;
+
+Href.args = {
+  href: '/metamask',
+};
+
 export const Disabled = (args) => (
   <ButtonBase {...args}>Disabled Button</ButtonBase>
 );

diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js
@@ -1,17 +1,18 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { BUTTON_SIZES } from './button.constants';
+import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 
 describe('ButtonBase', () => {
-  it('should render button element correctly', () => {
+  it('should render button element correctly and match snapshot', () => {
     const { getByTestId, getByText, container } = render(
       <ButtonBase data-testid="button-base">Button base</ButtonBase>,
     );
     expect(getByText('Button base')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-base')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render anchor element correctly', () => {
@@ -40,23 +41,35 @@ describe('ButtonBase', () => {
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
-        <ButtonBase size={BUTTON_SIZES.AUTO} data-testid={BUTTON_SIZES.AUTO} />
-        <ButtonBase size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM} />
-        <ButtonBase size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD} />
-        <ButtonBase size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG} />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.AUTO}
+          data-testid={BUTTON_BASE_SIZES.AUTO}
+        />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.SM}
+          data-testid={BUTTON_BASE_SIZES.SM}
+        />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.MD}
+          data-testid={BUTTON_BASE_SIZES.MD}
+        />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.LG}
+          data-testid={BUTTON_BASE_SIZES.LG}
+        />
       </>,
     );
-    expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.AUTO}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.AUTO)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.AUTO}`,
     );
-    expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.SM}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.SM}`,
     );
-    expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.MD}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.MD)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.MD}`,
     );
-    expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.LG}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.LG)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.LG}`,
     );
   });
 

diff --git a/ui/components/component-library/button-base/index.js b/ui/components/component-library/button-base/index.js
@@ -1,2 +1,2 @@
 export { ButtonBase } from './button-base';
-export { BUTTON_SIZES } from './button.constants';
+export { BUTTON_BASE_SIZES } from './button-base.constants';