diff --git a/UNRELEASED.md b/UNRELEASED.md index 811457c8c37..f9b04517ee8 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,7 +12,8 @@ - Prevented scrolling to `Popover` content in development ([#2403](https://github.com/Shopify/polaris-react/pull/2403)) - Fixed an issue which caused HSL colors to not display in Edge ([#2418](https://github.com/Shopify/polaris-react/pull/2418)) - Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of its container ([#2412](https://github.com/Shopify/polaris-react/pull/2412)) -- Fixed an issue which caused HSL colors to not display in Edge ((#2418)[https://github.com/Shopify/polaris-react/pull/2418]) +- Fixed an issue which caused HSL colors to not display in Edge ([#2418](https://github.com/Shopify/polaris-react/pull/2418)) +- Changed Button's `disclosure` prop to be `boolean | "up" | "down"`, allowing greater control over the direction the disclosure caret faces ([#2431](https://github.com/Shopify/polaris-react/pull/2431)) - Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of it's container ([#2412](https://github.com/Shopify/polaris-react/pull/2412)) - Fixed a race condition in DatePicker ([#2373](https://github.com/Shopify/polaris-react/pull/2373)) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 932ebeb600d..e83b4e7f5ed 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -592,3 +592,13 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent, } } // stylelint-enable selector-max-specificity + +.DisclosureIcon { + transition-property: transform; + transition-duration: duration(slow); + transition-timing-function: easing(out); +} + +.DisclosureIconFacingUp { + transform: rotate(-180deg); +} diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 8e2aae439e9..bf99f2f6712 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -44,8 +44,8 @@ export interface ButtonProps { pressed?: boolean; /** Allows the button to grow to the width of its container */ fullWidth?: boolean; - /** Displays the button with a disclosure icon */ - disclosure?: boolean; + /** Displays the button with a disclosure icon. Defaults to `down` when set to true */ + disclosure?: 'down' | 'up' | boolean; /** Allows the button to submit a form */ submit?: boolean; /** Renders a button that looks like a link */ @@ -154,9 +154,20 @@ export function Button({ icon && children == null && styles.iconOnly, ); + const disclosureIcon = ( + + ); + const disclosureIconMarkup = disclosure ? ( - +
+ {disclosureIcon} +
) : null; diff --git a/src/components/Button/README.md b/src/components/Button/README.md index da11b8150f4..5f2eafb7540 100644 --- a/src/components/Button/README.md +++ b/src/components/Button/README.md @@ -290,6 +290,30 @@ function PressedButton() { } ``` +### Button with disclosure + + + +Use to denote something that can be progressively disclosed to the user on click. + +```jsx +function DisclosureButtion() { + const [expanded, setExpanded] = useState(false); + + return ( + + ); +} +``` + ### Disabled state Use for actions that aren’t currently available. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it. diff --git a/src/components/Button/tests/Button.test.tsx b/src/components/Button/tests/Button.test.tsx index 84e3c904b04..63b4022f809 100644 --- a/src/components/Button/tests/Button.test.tsx +++ b/src/components/Button/tests/Button.test.tsx @@ -370,6 +370,26 @@ describe('