Feat/16634/buttonicon housekeeping (#16666)

* rename iconName prop

* pixel update

* updates to iconProps

* arialabel to stories

ui/components/component-library/button-icon/README.mdx

@@ -15,19 +15,21 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/ui-component
 
 <ArgsTable of={ButtonIcon} />
 
-### Icon<span style={{ color: 'red' }}>\*</span>
+### Icon Name<span style={{ color: 'red' }}>\*</span>
 
-Use the required `icon` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+
+Use the [IconSearch](/story/ui-components-component-library-icon-icon-stories-js--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--icon" />
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--icon-name" />
 </Canvas>
 
 ```jsx
 import { ButtonIcon } from '../ui/component-library';
 import { ICON_NAMES } from '../icon';
 
-<ButtonIcon icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />;
+<ButtonIcon iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />;
 ```
 
 ### Size
@@ -50,8 +52,8 @@ Possible sizes include:
 import { SIZES } from '../../../helpers/constants/design-system';
 import { ButtonIcon } from '../ui/component-library';
 
-<ButtonIcon size={SIZES.SM} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
-<ButtonIcon size={SIZES.LG} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon size={SIZES.SM} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon size={SIZES.LG} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
 ```
 
 ### Aria Label
@@ -66,8 +68,8 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
 import { ButtonIcon } from '../ui/component-library';
 
 
-<ButtonIcon as="button" icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
-<ButtonIcon as="a" href="https://metamask.io/" target="_blank" icon={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
+<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
 ```
 
 ### As
@@ -87,8 +89,8 @@ Button `as` options:
 import { ButtonIcon } from '../ui/component-library';
 
 
-<ButtonIcon as="button" icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
-<ButtonIcon as="a" href="https://metamask.io/" target="_blank" icon={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
+<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
 ```
 
 ### Href
@@ -105,7 +107,7 @@ import { ButtonIcon } from '../ui/component-library';
 <ButtonIcon
   href="https://metamask.io/"
   target="_blank"
-  icon={ICON_NAMES.EXPORT}
+  iconName={ICON_NAMES.EXPORT}
   color={COLORS.PRIMARY_DEFAULT}
   ariaLabel="Visit MetaMask.io"
 />;
@@ -123,7 +125,7 @@ Use the `color` prop and the `COLORS` object to change the color of the `ButtonI
 import { ButtonIcon } from '../ui/component-library';
 
 <ButtonIcon
-  icon={ICON_NAMES.EXPORT}
+  iconName={ICON_NAMES.EXPORT}
   color={COLORS.PRIMARY_DEFAULT}
   ariaLabel="Visit MetaMask.io"
 />;
@@ -140,5 +142,5 @@ Use the boolean `disabled` prop to disable button
 ```jsx
 import { ButtonIcon } from '../ui/component-library';
 
-<ButtonIcon icon={ICON_NAMES.CLOSE_OUTLINE} disabled ariaLabel="Close" />;
+<ButtonIcon iconName={ICON_NAMES.CLOSE_OUTLINE} disabled ariaLabel="Close" />;
 ```

ui/components/component-library/button-icon/button-icon.js

@@ -8,10 +8,11 @@ import {
   COLORS,
   DISPLAY,
   JUSTIFY_CONTENT,
+  SIZES,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
-import { Icon } from '../icon';
+import { Icon, ICON_NAMES } from '../icon';
 
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 
@@ -21,8 +22,8 @@ export const ButtonIcon = ({
   className,
   color = COLORS.ICON_DEFAULT,
   href,
-  size = BUTTON_ICON_SIZES.LG,
-  icon,
+  size = SIZES.LG,
+  iconName,
   disabled,
   iconProps,
   ...props
@@ -50,7 +51,7 @@ export const ButtonIcon = ({
       href={href}
       {...props}
     >
-      <Icon name={icon} size={size} {...iconProps} />
+      <Icon name={iconName} size={size} {...iconProps} />
     </Box>
   );
 };
@@ -84,14 +85,14 @@ ButtonIcon.propTypes = {
   /**
    * The name of the icon to display. Should be one of ICON_NAMES
    */
-  icon: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
+  iconName: PropTypes.oneOf(ICON_NAMES).isRequired,
   /**
    * iconProps accepts all the props from Icon
    */
   iconProps: PropTypes.object,
   /**
    * The size of the ButtonIcon.
-   * Possible values could be 'SIZES.SM', 'SIZES.LG',
+   * Possible values could be 'SIZES.SM' 24px, 'SIZES.LG' 32px,
    */
   size: PropTypes.oneOf(Object.values(BUTTON_ICON_SIZES)),
   /**

ui/components/component-library/button-icon/button-icon.stories.js

@@ -58,9 +58,9 @@ export default {
       control: 'boolean',
     },
     href: {
-      control: 'string',
+      control: 'text',
     },
-    icon: {
+    iconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
     },
@@ -94,15 +94,18 @@ export default {
 export const DefaultStory = (args) => <ButtonIcon {...args} />;
 
 DefaultStory.args = {
-  icon: ICON_NAMES.CLOSE_OUTLINE,
+  iconName: ICON_NAMES.CLOSE_OUTLINE,
   ariaLabel: 'Close',
 };
 
 DefaultStory.storyName = 'Default';
 
-export const Icon = (args) => (
-  <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />
-);
+export const IconName = (args) => <ButtonIcon {...args} />;
+
+IconName.args = {
+  iconName: ICON_NAMES.CLOSE_OUTLINE,
+  ariaLabel: 'Close',
+};
 
 export const Size = (args) => (
   <Box
@@ -114,14 +117,14 @@ export const Size = (args) => (
     <ButtonIcon
       {...args}
       size={SIZES.SM}
-      icon={ICON_NAMES.CLOSE_OUTLINE}
+      iconName={ICON_NAMES.CLOSE_OUTLINE}
       ariaLabel="Close"
     />
     <ButtonIcon
       {...args}
       size={SIZES.LG}
       color={COLORS.PRIMARY}
-      icon={ICON_NAMES.CLOSE_OUTLINE}
+      iconName={ICON_NAMES.CLOSE_OUTLINE}
       ariaLabel="Close"
     />
   </Box>
@@ -131,7 +134,7 @@ export const AriaLabel = (args) => (
   <>
     <ButtonIcon
       as="button"
-      icon={ICON_NAMES.CLOSE_OUTLINE}
+      iconName={ICON_NAMES.CLOSE_OUTLINE}
       ariaLabel="Close"
       {...args}
     />
@@ -140,7 +143,7 @@ export const AriaLabel = (args) => (
       href="https://metamask.io/"
       target="_blank"
       color={COLORS.PRIMARY_DEFAULT}
-      icon={ICON_NAMES.EXPORT}
+      iconName={ICON_NAMES.EXPORT}
       ariaLabel="Visit MetaMask.io"
       {...args}
     />
@@ -149,28 +152,34 @@ export const AriaLabel = (args) => (
 
 export const As = (args) => (
   <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
-    <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} />
+    <ButtonIcon
+      {...args}
+      iconName={ICON_NAMES.CLOSE_OUTLINE}
+      ariaLabel="close"
+    />
     <ButtonIcon
       as="a"
       href="#"
       {...args}
       color={COLORS.PRIMARY_DEFAULT}
-      icon={ICON_NAMES.EXPORT}
+      iconName={ICON_NAMES.EXPORT}
+      ariaLabel="demo"
     />
   </Box>
 );
 
 export const Href = (args) => (
-  <ButtonIcon icon={ICON_NAMES.EXPORT} {...args} target="_blank" />
+  <ButtonIcon iconName={ICON_NAMES.EXPORT} {...args} target="_blank" />
 );
 
 Href.args = {
+  ariaLabel: 'Visit Metamask.io',
   href: 'https://metamask.io/',
   color: COLORS.PRIMARY_DEFAULT,
 };
 
 export const Color = (args) => (
-  <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} />
+  <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="close" />
 );
 
 Color.args = {
@@ -178,7 +187,7 @@ Color.args = {
 };
 
 export const Disabled = (args) => (
-  <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} />
+  <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="close" />
 );
 
 Disabled.args = {

ui/components/component-library/button-icon/button-icon.test.js

@@ -2,6 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { COLORS } from '../../../helpers/constants/design-system';
+import { ICON_NAMES } from '..';
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 import { ButtonIcon } from './button-icon';
 
@@ -10,7 +11,7 @@ describe('ButtonIcon', () => {
     const { getByTestId, container } = render(
       <ButtonIcon
         data-testid="button-icon"
-        icon="add-square-filled"
+        iconName={ICON_NAMES.ADD_SQUARE_FILLED}
         ariaLabel="add"
       />,
     );
@@ -24,7 +25,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         as="a"
         data-testid="button-icon"
-        icon="add-square-filled"
+        iconName={ICON_NAMES.ADD_SQUARE_FILLED}
         ariaLabel="add"
       />,
     );
@@ -38,7 +39,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         href="/metamask"
         data-testid="button-icon"
-        icon="add-square-filled"
+        iconName={ICON_NAMES.ADD_SQUARE_FILLED}
         ariaLabel="add"
       />,
     );
@@ -50,13 +51,13 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <>
         <ButtonIcon
-          icon="add-square-filled"
+          iconName={ICON_NAMES.ADD_SQUARE_FILLED}
           ariaLabel="add"
           size={BUTTON_ICON_SIZES.SM}
           data-testid={BUTTON_ICON_SIZES.SM}
         />
         <ButtonIcon
-          icon="add-square-filled"
+          iconName={ICON_NAMES.ADD_SQUARE_FILLED}
           ariaLabel="add"
           size={BUTTON_ICON_SIZES.LG}
           data-testid={BUTTON_ICON_SIZES.LG}
@@ -75,13 +76,13 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <>
         <ButtonIcon
-          icon="add-square-filled"
+          iconName={ICON_NAMES.ADD_SQUARE_FILLED}
           ariaLabel="add"
           color={COLORS.ICON_DEFAULT}
           data-testid={COLORS.ICON_DEFAULT}
         />
         <ButtonIcon
-          icon="add-square-filled"
+          iconName={ICON_NAMES.ADD_SQUARE_FILLED}
           ariaLabel="add"
           color={COLORS.ERROR_DEFAULT}
           data-testid={COLORS.ERROR_DEFAULT}
@@ -101,7 +102,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         data-testid="classname"
         className="mm-button-icon--test"
-        icon="add-square-filled"
+        iconName={ICON_NAMES.ADD_SQUARE_FILLED}
         ariaLabel="add"
       />,
     );
@@ -114,7 +115,7 @@ describe('ButtonIcon', () => {
         <ButtonIcon
           disabled
           data-testid="disabled"
-          icon="add-square-filled"
+          iconName={ICON_NAMES.ADD_SQUARE_FILLED}
           ariaLabel="add"
         />
       </>,
@@ -127,7 +128,7 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <ButtonIcon
         data-testid="icon"
-        icon="add-square-filled"
+        iconName={ICON_NAMES.ADD_SQUARE_FILLED}
         ariaLabel="add"
         iconProps={{ 'data-testid': 'button-icon' }}
       />,
@@ -138,7 +139,7 @@ describe('ButtonIcon', () => {
 
   it('should render with aria-label', () => {
     const { getByLabelText } = render(
-      <ButtonIcon icon="add-square-filled" ariaLabel="add" />,
+      <ButtonIcon iconName={ICON_NAMES.ADD_SQUARE_FILLED} ariaLabel="add" />,
     );
 
     expect(getByLabelText('add')).toBeDefined();

ui/components/component-library/index.js

@@ -6,7 +6,7 @@ export { AvatarWithBadge } from './avatar-with-badge';
 export { AvatarBase } from './avatar-base';
 export { Button } from './button';
 export { ButtonBase } from './button-base';
-export { ButtonIcon } from './button-icon';
+export { ButtonIcon, BUTTON_ICON_SIZES } from './button-icon';
 export { ButtonLink } from './button-link';
 export { ButtonPrimary } from './button-primary';
 export { ButtonSecondary } from './button-secondary';