[Button] Add support for two right direction icons in disclosure prop.

The two new disclosure icons are `ChevronRightIcon` and `ArrowRightIcon`,
which are used to indicate in-context navigation or navigation to
another context, respectively.

.changeset/beige-mugs-retire.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add support for two right direction icons in Button component disclosure prop: ChevronRightIcon and ArrowRightIcon.

polaris-react/src/components/Button/Button.stories.tsx

@@ -736,6 +736,32 @@ export function SelectDisclosure() {
   );
 }
 
+export function ChevronRightDisclosure() {
+  return (
+    <div>
+      <Button
+        disclosure="right"
+        onClick={() => console.log('In-context Navigation')}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}
+
+export function ArrowRightDisclosure() {
+  return (
+    <div>
+      <Button
+        disclosure="arrowRight"
+        onClick={() => console.log('Navigation to another context')}
+      >
+        Get started
+      </Button>
+    </div>
+  );
+}
+
 export function Split() {
   const [active, setActive] = React.useState<string | null>(null);
 

polaris-react/src/components/Button/Button.tsx

@@ -3,6 +3,8 @@ import {
   SelectIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  ChevronRightIcon,
+  ArrowRightIcon,
 } from '@shopify/polaris-icons';
 
 import {useBreakpoints} from '../../utilities/breakpoints';
@@ -33,7 +35,7 @@ export interface ButtonProps extends BaseButton {
   /** Allows the button to grow to the width of its container */
   fullWidth?: boolean;
   /** Displays the button with a disclosure icon. Defaults to `down` when set to true */
-  disclosure?: 'down' | 'up' | 'select' | boolean;
+  disclosure?: 'down' | 'up' | 'select' | 'right' | 'arrowRight' | boolean;
   /** Removes underline from button text (including on interaction)
    * @deprecated Use a variant instead
    */
@@ -146,15 +148,7 @@ export function Button({
   const disclosureMarkup = disclosure ? (
     <span className={loading ? styles.hidden : styles.Icon}>
       <Icon
-        source={
-          loading
-            ? 'placeholder'
-            : getDisclosureIconSource(
-                disclosure,
-                ChevronUpIcon,
-                ChevronDownIcon,
-              )
-        }
+        source={loading ? 'placeholder' : getDisclosureIconSource(disclosure)}
       />
     </span>
   ) : null;
@@ -260,12 +254,18 @@ function isIconSource(x: any): x is IconSource {
 
 function getDisclosureIconSource(
   disclosure: NonNullable<ButtonProps['disclosure']>,
-  upIcon: IconSource,
-  downIcon: IconSource,
 ) {
-  if (disclosure === 'select') {
-    return SelectIcon;
+  switch (disclosure) {
+    case 'select':
+      return SelectIcon;
+    case 'up':
+      return ChevronUpIcon;
+    case 'right':
+      return ChevronRightIcon;
+    case 'arrowRight':
+      return ArrowRightIcon;
+    case 'down':
+    default:
+      return ChevronDownIcon;
   }
-
-  return disclosure === 'up' ? upIcon : downIcon;
 }

polaris-react/src/components/Button/tests/Button.test.tsx

@@ -4,6 +4,8 @@ import {
   ChevronUpIcon,
   PlusIcon,
   SelectIcon,
+  ChevronRightIcon,
+  ArrowRightIcon,
 } from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
 
@@ -348,6 +350,18 @@ describe('<Button />', () => {
       expect(disclosureIcon).toHaveReactProps({source: ChevronUpIcon});
     });
 
+    it('is facing right if set to "right"', () => {
+      const button = mountWithApp(<Button disclosure="right" />);
+      const disclosureIcon = button.find(Icon);
+      expect(disclosureIcon).toHaveReactProps({source: ChevronRightIcon});
+    });
+
+    it('is arrow right if set to "arrowRight"', () => {
+      const button = mountWithApp(<Button disclosure="arrowRight" />);
+      const disclosureIcon = button.find(Icon);
+      expect(disclosureIcon).toHaveReactProps({source: ArrowRightIcon});
+    });
+
     it('is double-arrow if set to "select"', () => {
       const button = mountWithApp(<Button disclosure="select" />);
       const disclosureIcon = button.find(Icon);