diff --git a/.changeset/beige-mugs-retire.md b/.changeset/beige-mugs-retire.md
new file mode 100644
index 00000000000..98bc2fe56eb
--- /dev/null
+++ b/.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.
diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index b7d5b9097c0..f0d2dca7149 100644
--- a/polaris-react/src/components/Button/Button.stories.tsx
+++ b/polaris-react/src/components/Button/Button.stories.tsx
@@ -736,6 +736,32 @@ export function SelectDisclosure() {
);
}
+export function ChevronRightDisclosure() {
+ return (
+
+
+
+ );
+}
+
+export function ArrowRightDisclosure() {
+ return (
+
+
+
+ );
+}
+
export function Split() {
const [active, setActive] = React.useState(null);
diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx
index af3e2f52b20..fd8f26b46b1 100644
--- a/polaris-react/src/components/Button/Button.tsx
+++ b/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 ? (
) : null;
@@ -260,12 +254,18 @@ function isIconSource(x: any): x is IconSource {
function getDisclosureIconSource(
disclosure: NonNullable,
- 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;
}
diff --git a/polaris-react/src/components/Button/tests/Button.test.tsx b/polaris-react/src/components/Button/tests/Button.test.tsx
index e587461e752..4d0ea4168ed 100644
--- a/polaris-react/src/components/Button/tests/Button.test.tsx
+++ b/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('', () => {
expect(disclosureIcon).toHaveReactProps({source: ChevronUpIcon});
});
+ it('is facing right if set to "right"', () => {
+ const button = mountWithApp();
+ const disclosureIcon = button.find(Icon);
+ expect(disclosureIcon).toHaveReactProps({source: ChevronRightIcon});
+ });
+
+ it('is arrow right if set to "arrowRight"', () => {
+ const button = mountWithApp();
+ const disclosureIcon = button.find(Icon);
+ expect(disclosureIcon).toHaveReactProps({source: ArrowRightIcon});
+ });
+
it('is double-arrow if set to "select"', () => {
const button = mountWithApp();
const disclosureIcon = button.find(Icon);