update to add end icon support (#17776)

ui/components/component-library/banner-alert/README.mdx

@@ -124,8 +124,7 @@ import { BannerAlert, ICON_NAMES } from '../../component-library';
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
-    iconPositionRight: true,
+    endIconName: ICON_NAMES.ARROW_2_RIGHT,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
 >

ui/components/component-library/banner-alert/banner-alert.stories.js

@@ -164,8 +164,7 @@ ActionButton.args = {
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    iconName: ICON_NAMES.ARROW_2_RIGHT,
-    iconPositionRight: true,
+    endIconName: ICON_NAMES.ARROW_2_RIGHT,
   },
   children:
     'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',

ui/components/component-library/banner-base/README.mdx

@@ -87,8 +87,7 @@ import { BannerBase, ICON_NAMES } from '../../component-library';
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    iconName: ICON_NAMES.ARROW_2_RIGHT,
-    iconPositionRight: true,
+    endIconName: ICON_NAMES.ARROW_2_RIGHT,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
 >

ui/components/component-library/banner-base/banner-base.stories.js

@@ -143,8 +143,7 @@ ActionButton.args = {
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    iconName: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
-    iconPositionRight: true,
+    endIconName: ICON_NAMES.ARROW_2_RIGHT,
   },
   children:
     'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',

ui/components/component-library/banner-base/banner-base.test.js

@@ -58,8 +58,7 @@ describe('BannerBase', () => {
         title="Action prop demo"
         actionButtonLabel="Action"
         actionButtonProps={{
-          icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
-          iconPositionRight: true,
+          endIconName: ICON_NAMES.ARROW_2_RIGHT,
           'data-testid': 'action',
           className: 'mm-banner-base__action',
         }}

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

@@ -128,15 +128,56 @@ import { ButtonBase } from '../../component-library';
 
 ### Icon Name
 
-Use the `iconName` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
+Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
 
 <Canvas>
-  <Story id="components-componentlibrary-buttonbase--icon" />
+  <Story id="components-componentlibrary-buttonbase--start-icon-name" />
 </Canvas>
 
 ```jsx
 import { ButtonBase } from '../../component-library';
 import { ICON_NAMES } from '../icon';
 
-<ButtonBase icon={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>;
+<ButtonBase startIconName={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>;
+```
+
+<Canvas>
+  <Story id="components-componentlibrary-buttonbase--end-icon-name" />
+</Canvas>
+
+```jsx
+import { ButtonBase } from '../../component-library';
+import { ICON_NAMES } from '../icon';
+
+<ButtonBase endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</ButtonBase>;
+```
+
+### RTL
+
+For RTL language support use the `textProps` prop to pass a `textDirection` prop.
+
+<Canvas>
+  <Story id="components-componentlibrary-buttonbase--rtl" />
+</Canvas>
+
+```jsx
+import { ButtonBase, ICON_NAMES } from '../../component-library';
+
+<>
+  <ButtonBase
+    startIconName={ICON_NAMES.ADD_SQUARE}
+    endIconName={ICON_NAMES.ARROW_2_RIGHT}
+  >
+    Button Demo
+  </ButtonBase>
+  <ButtonBase
+    startIconName={ICON_NAMES.ADD_SQUARE}
+    endIconName={ICON_NAMES.ARROW_2_RIGHT}
+    textProps={{
+      textDirection: TEXT_DIRECTIONS.RIGHT_TO_LEFT,
+    }}
+  >
+    Button Demo
+  </ButtonBase>
+</>;
 ```

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

@@ -13,7 +13,6 @@ import {
   TextColor,
   TextVariant,
   Size,
-  FLEX_DIRECTION,
   BorderRadius,
   BackgroundColor,
 } from '../../../helpers/constants/design-system';
@@ -26,11 +25,12 @@ export const ButtonBase = ({
   className,
   href,
   size = BUTTON_BASE_SIZES.MD,
-  iconName,
-  iconPositionRight,
+  startIconName,
+  startIconProps,
+  endIconName,
+  endIconProps,
   loading,
   disabled,
-  iconProps,
   iconLoadingProps,
   textProps,
   ...props
@@ -67,16 +67,18 @@ export const ButtonBase = ({
         className="mm-button-base__content"
         justifyContent={JustifyContent.center}
         alignItems={AlignItems.center}
-        flexDirection={
-          iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
-        }
         gap={2}
         variant={TextVariant.bodyMd}
         color={TextColor.inherit}
         {...textProps}
       >
-        {iconName && <Icon name={iconName} size={Size.SM} {...iconProps} />}
+        {startIconName && (
+          <Icon name={startIconName} size={Size.SM} {...startIconProps} />
+        )}
         {children}
+        {endIconName && (
+          <Icon name={endIconName} size={Size.SM} {...endIconProps} />
+        )}
       </Text>
       {loading && (
         <Icon
@@ -120,19 +122,23 @@ ButtonBase.propTypes = {
    */
   href: PropTypes.string,
   /**
-   * Add icon to left side of button text passing icon name
+   * Add icon to start (left side) of button text passing icon name
    * The name of the icon to display. Should be one of ICON_NAMES
    */
-  iconName: PropTypes.string, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
-  /**
-   * Boolean that when true will position the icon on right of children
-   * Icon default position left
-   */
-  iconPositionRight: PropTypes.bool,
+  startIconName: PropTypes.oneOf(Object.values(ICON_NAMES)),
   /**
    * iconProps accepts all the props from Icon
    */
-  iconProps: PropTypes.shape(Icon.PropTypes),
+  startIconProps: PropTypes.shape(Icon.PropTypes),
+  /**
+   * Add icon to end (right side) of button text passing icon name
+   * The name of the icon to display. Should be one of ICON_NAMES
+   */
+  endIconName: PropTypes.oneOf(Object.values(ICON_NAMES)),
+  /**
+   * iconProps accepts all the props from Icon
+   */
+  endIconProps: PropTypes.shape(Icon.PropTypes),
   /**
    * iconLoadingProps accepts all the props from Icon
    */

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

@@ -6,7 +6,7 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES } from '../icon';
+import { ICON_NAMES, TEXT_DIRECTIONS } from '..';
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
@@ -55,7 +55,11 @@ export default {
     disabled: {
       control: 'boolean',
     },
-    iconName: {
+    startIconName: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
+    },
+    endIconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
     },
@@ -161,8 +165,36 @@ Loading.args = {
   loading: true,
 };
 
-export const Icon = (args) => (
-  <ButtonBase {...args} icon={ICON_NAMES.ADD_SQUARE}>
+export const StartIconName = (args) => (
+  <ButtonBase {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
     Button
   </ButtonBase>
 );
+
+export const EndIconName = (args) => (
+  <ButtonBase {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
+    Button
+  </ButtonBase>
+);
+
+export const Rtl = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <ButtonBase
+      {...args}
+      startIconName={ICON_NAMES.ADD_SQUARE}
+      endIconName={ICON_NAMES.ARROW_2_RIGHT}
+    >
+      Button Demo
+    </ButtonBase>
+    <ButtonBase
+      {...args}
+      startIconName={ICON_NAMES.ADD_SQUARE}
+      endIconName={ICON_NAMES.ARROW_2_RIGHT}
+      textProps={{
+        textDirection: TEXT_DIRECTIONS.RIGHT_TO_LEFT,
+      }}
+    >
+      Button Demo
+    </ButtonBase>
+  </Box>
+);

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

@@ -1,6 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
+import { ICON_NAMES } from '..';
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 
@@ -93,11 +94,14 @@ describe('ButtonBase', () => {
     const { getByTestId } = render(
       <ButtonBase
         data-testid="icon"
-        iconName="add-square"
-        iconProps={{ 'data-testid': 'base-button-icon' }}
+        startIconName={ICON_NAMES.ADD_SQUARE}
+        startIconProps={{ 'data-testid': 'start-button-icon' }}
+        endIconName={ICON_NAMES.ADD_SQUARE}
+        endIconProps={{ 'data-testid': 'end-button-icon' }}
       />,
     );
 
-    expect(getByTestId('base-button-icon')).toBeDefined();
+    expect(getByTestId('start-button-icon')).toBeDefined();
+    expect(getByTestId('end-button-icon')).toBeDefined();
   });
 });

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

@@ -39,7 +39,10 @@ export const ButtonLink = ({
             : TextVariant.bodyMd,
         ...textProps,
       }}
-      iconProps={{
+      startIconProps={{
+        size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
+      }}
+      endIconProps={{
         size: size === BUTTON_LINK_SIZES.INHERIT ? Size.inherit : Size.SM,
       }}
       iconLoadingProps={{

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

@@ -68,16 +68,21 @@ export default {
     href: {
       control: 'text',
     },
-    iconName: {
+    startIconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
     },
-    iconPositionRight: {
-      control: 'boolean',
+    endIconName: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
     },
-    iconProps: {
+    startIconProps: {
+      control: 'object',
+      table: { category: 'button base props' },
+    },
+    endIconProps: {
       control: 'object',
       table: { category: 'button base props' },
     },

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

@@ -2,6 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { Size } from '../../../helpers/constants/design-system';
+import { ICON_NAMES } from '..';
 import { ButtonLink } from './button-link';
 import { BUTTON_LINK_SIZES } from './button-link.constants';
 
@@ -81,7 +82,7 @@ describe('ButtonLink', () => {
   });
   it('should render with icon', () => {
     const { container } = render(
-      <ButtonLink data-testid="icon" iconName="add-square" />,
+      <ButtonLink data-testid="icon" startIconName={ICON_NAMES.ADD_SQUARE} />,
     );
 
     const icons = container.getElementsByClassName('mm-icon').length;

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

@@ -61,16 +61,21 @@ export default {
       control: 'boolean',
       table: { category: 'button base props' },
     },
-    iconName: {
+    startIconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
     },
-    iconPositionRight: {
-      control: 'boolean',
+    endIconName: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
     },
-    iconProps: {
+    startIconProps: {
+      control: 'object',
+      table: { category: 'button base props' },
+    },
+    endIconProps: {
       control: 'object',
       table: { category: 'button base props' },
     },

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

@@ -1,6 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
+import { ICON_NAMES } from '..';
 import { ButtonPrimary } from './button-primary';
 import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
 
@@ -89,7 +90,10 @@ describe('ButtonPrimary', () => {
   });
   it('should render with icon', () => {
     const { container } = render(
-      <ButtonPrimary data-testid="icon" iconName="add-square" />,
+      <ButtonPrimary
+        data-testid="icon"
+        startIconName={ICON_NAMES.ADD_SQUARE}
+      />,
     );
 
     const icons = container.getElementsByClassName('mm-icon').length;

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

@@ -60,16 +60,21 @@ export default {
       control: 'boolean',
       table: { category: 'button base props' },
     },
-    iconName: {
+    startIconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
     },
-    iconPositionRight: {
-      control: 'boolean',
+    endIconName: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
     },
-    iconProps: {
+    startIconProps: {
+      control: 'object',
+      table: { category: 'button base props' },
+    },
+    endIconProps: {
       control: 'object',
       table: { category: 'button base props' },
     },

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

@@ -1,6 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
+import { ICON_NAMES } from '..';
 import { ButtonSecondary } from './button-secondary';
 import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
 
@@ -93,7 +94,10 @@ describe('ButtonSecondary', () => {
   });
   it('should render with icon', () => {
     const { container } = render(
-      <ButtonSecondary data-testid="icon" iconName="add-square" />,
+      <ButtonSecondary
+        data-testid="icon"
+        startIconName={ICON_NAMES.ADD_SQUARE}
+      />,
     );
 
     const icons = container.getElementsByClassName('mm-icon').length;

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

@@ -175,17 +175,28 @@ import { Button } from '../ui/component-library';
 
 ### Icon Name
 
-Use the `iconName` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+Use the `startIconName` and/or `endIconName` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
 
 Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="components-componentlibrary-button--icon" />
+  <Story id="components-componentlibrary-button--start-icon-name" />
 </Canvas>
 
 ```jsx
 import { Button } from '../ui/component-library';
 import { ICON_NAMES } from '../icon';
 
-<Button icon={ICON_NAMES.ADD_SQUARE}>Button</Button>;
+<Button startIconName={ICON_NAMES.ADD_SQUARE}>Button</Button>;
+```
+
+<Canvas>
+  <Story id="components-componentlibrary-button--end-icon-name" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library';
+import { ICON_NAMES } from '../icon';
+
+<Button endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</Button>;
 ```

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

@@ -64,14 +64,18 @@ export default {
     href: {
       control: 'text',
     },
-    iconName: {
+    startIconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
     },
-    iconPositionRight: {
-      control: 'boolean',
+    endIconName: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
     },
-    iconProps: {
+    startIconProps: {
+      control: 'object',
+    },
+    endIconProps: {
       control: 'object',
     },
     loading: {
@@ -209,8 +213,14 @@ Loading.args = {
   loading: true,
 };
 
-export const Icon = (args) => (
-  <Button {...args} icon={ICON_NAMES.ADD_SQUARE}>
+export const StartIconName = (args) => (
+  <Button {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
+    Button
+  </Button>
+);
+
+export const EndIconName = (args) => (
+  <Button {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
     Button
   </Button>
 );

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

@@ -1,6 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
+import { ICON_NAMES } from '..';
 import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
 import { Button } from './button';
 
@@ -133,14 +134,14 @@ describe('Button', () => {
     const { getByTestId } = render(
       <Button
         data-testid="icon"
-        iconName="add-square"
-        iconProps={{ 'data-testid': 'base-button-icon' }}
+        startIconName={ICON_NAMES.ADD_SQUARE}
+        startIconProps={{ 'data-testid': 'start-button-icon' }}
       >
         Button
       </Button>,
     );
 
-    expect(getByTestId('base-button-icon')).toBeDefined();
+    expect(getByTestId('start-button-icon')).toBeDefined();
   });
 });