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('