From abeef7ad0563878da797fdbcc1ee1262d4fe4c7e Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 29 Aug 2023 14:04:12 -0400 Subject: [PATCH] [Modal] Replace boolean props (#10261) Fixes https://github.com/Shopify/polaris/issues/10259 --- .changeset/moody-terms-provide.md | 5 +++++ .../guides/migrating-from-v11-to-v12.md | 8 ++++++++ .../src/components/Modal/Modal.stories.tsx | 6 +++--- polaris-react/src/components/Modal/Modal.tsx | 18 ++++++------------ .../Modal/components/Dialog/Dialog.scss | 2 +- .../Modal/components/Dialog/Dialog.tsx | 17 ++++++----------- .../src/components/Modal/tests/Modal.test.tsx | 18 +++++++++--------- .../pages/examples/modal-large.tsx | 2 +- .../pages/examples/modal-small.tsx | 2 +- 9 files changed, 40 insertions(+), 38 deletions(-) create mode 100644 .changeset/moody-terms-provide.md diff --git a/.changeset/moody-terms-provide.md b/.changeset/moody-terms-provide.md new file mode 100644 index 00000000000..c7e199dedcf --- /dev/null +++ b/.changeset/moody-terms-provide.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +Replaced `small`, `large`, and `fullScreen` props with `size` prop diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md index dfb92132050..300541aefd4 100644 --- a/documentation/guides/migrating-from-v11-to-v12.md +++ b/documentation/guides/migrating-from-v11-to-v12.md @@ -97,3 +97,11 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release `npx @shopify/polaris-migrator react-rename-component-prop --componentName="Text" --from="color" --to="tone"` `npx @shopify/polaris-migrator react-rename-component-prop --componentName="Text" --from="tone" --to="tone" --fromValue="warning" --toValue="caution"` + +**Modal** + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="Modal" --from="small" --to="size" --newValue="small"` + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="Modal" --from="large" --to="size" --newValue="large"` + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="Modal" --from="fullScreen" --to="size" --newValue="fullScreen"` diff --git a/polaris-react/src/components/Modal/Modal.stories.tsx b/polaris-react/src/components/Modal/Modal.stories.tsx index 988503d4219..9133ee958b8 100644 --- a/polaris-react/src/components/Modal/Modal.stories.tsx +++ b/polaris-react/src/components/Modal/Modal.stories.tsx @@ -217,7 +217,7 @@ export function Large() { return (
{}} sectioned - fullScreen + size="fullScreen" primaryAction={{content: 'Save'}} > Fullscreen on small displays diff --git a/polaris-react/src/components/Modal/Modal.tsx b/polaris-react/src/components/Modal/Modal.tsx index 3cffd8bd200..078502b4e8b 100644 --- a/polaris-react/src/components/Modal/Modal.tsx +++ b/polaris-react/src/components/Modal/Modal.tsx @@ -19,6 +19,8 @@ import styles from './Modal.scss'; const IFRAME_LOADING_HEIGHT = 200; const DEFAULT_IFRAME_CONTENT_HEIGHT = 400; +export type ModalSize = 'small' | 'large' | 'fullScreen'; + export interface ModalProps extends FooterProps { /** Whether the modal is open or not */ open: boolean; @@ -41,10 +43,8 @@ export interface ModalProps extends FooterProps { instant?: boolean; /** Automatically adds sections to modal */ sectioned?: boolean; - /** Increases the modal width */ - large?: boolean; - /** Decreases the modal width */ - small?: boolean; + /** The size of the modal */ + size?: ModalSize; /** Limits modal height on large sceens with scrolling */ limitHeight?: boolean; /** Replaces modal content with a spinner while a background action is being performed */ @@ -61,8 +61,6 @@ export interface ModalProps extends FooterProps { activator?: React.RefObject | React.ReactElement; /** Removes Scrollable container from the modal content */ noScroll?: boolean; - /** Sets modal to the height of the viewport on small screens */ - fullScreen?: boolean; } export const Modal: React.FunctionComponent & { @@ -77,8 +75,7 @@ export const Modal: React.FunctionComponent & { instant, sectioned, loading, - large, - small, + size, limitHeight, footer, primaryAction, @@ -89,7 +86,6 @@ export const Modal: React.FunctionComponent & { onIFrameLoad, onTransitionEnd, noScroll, - fullScreen, }: ModalProps) { const [iframeHeight, setIframeHeight] = useState(IFRAME_LOADING_HEIGHT); const [closing, setClosing] = useState(false); @@ -198,10 +194,8 @@ export const Modal: React.FunctionComponent & { onClose={onClose} onEntered={handleEntered} onExited={handleExited} - large={large} - small={small} + size={size} limitHeight={limitHeight} - fullScreen={fullScreen} setClosing={setClosing} >
>; } @@ -32,23 +31,19 @@ export function Dialog({ instant, labelledBy, children, + limitHeight, + size, onClose, onExited, onEntered, - large, - small, - limitHeight, - fullScreen, setClosing, ...props }: DialogProps) { const containerNode = useRef(null); const classes = classNames( styles.Modal, - small && styles.sizeSmall, - large && styles.sizeLarge, + size && styles[variationName('size', size)], limitHeight && styles.limitHeight, - fullScreen && styles.fullScreen, ); const TransitionChild = instant ? Transition : FadeUp; diff --git a/polaris-react/src/components/Modal/tests/Modal.test.tsx b/polaris-react/src/components/Modal/tests/Modal.test.tsx index 462aa7a75ba..3559e5ff69e 100644 --- a/polaris-react/src/components/Modal/tests/Modal.test.tsx +++ b/polaris-react/src/components/Modal/tests/Modal.test.tsx @@ -159,12 +159,12 @@ describe('', () => { describe('large', () => { it('passes large to Dialog if true', () => { const modal = mountWithApp( - + , ); - expect(modal).toContainReactComponent(Dialog, {large: true}); + expect(modal).toContainReactComponent(Dialog, {size: 'large'}); }); it('does not pass large to Dialog be default', () => { @@ -174,19 +174,19 @@ describe('', () => { , ); - expect(modal).toContainReactComponent(Dialog, {large: undefined}); + expect(modal).toContainReactComponent(Dialog, {size: undefined}); }); }); describe('small', () => { it('passes small to Dialog if true', () => { const modal = mountWithApp( - + , ); - expect(modal).toContainReactComponent(Dialog, {small: true}); + expect(modal).toContainReactComponent(Dialog, {size: 'small'}); }); it('does not pass small to Dialog by default', () => { @@ -196,7 +196,7 @@ describe('', () => { , ); - expect(modal).toContainReactComponent(Dialog, {small: undefined}); + expect(modal).toContainReactComponent(Dialog, {size: undefined}); }); }); @@ -225,12 +225,12 @@ describe('', () => { describe('fullScreen', () => { it('passes fullScreen to Dialog if true', () => { const modal = mountWithApp( - + , ); - expect(modal).toContainReactComponent(Dialog, {fullScreen: true}); + expect(modal).toContainReactComponent(Dialog, {size: 'fullScreen'}); }); it('does not pass fullScreen to Dialog be default', () => { @@ -240,7 +240,7 @@ describe('', () => { , ); - expect(modal).toContainReactComponent(Dialog, {fullScreen: undefined}); + expect(modal).toContainReactComponent(Dialog, {size: undefined}); }); }); diff --git a/polaris.shopify.com/pages/examples/modal-large.tsx b/polaris.shopify.com/pages/examples/modal-large.tsx index e21ec8bfd20..dda2a9eee21 100644 --- a/polaris.shopify.com/pages/examples/modal-large.tsx +++ b/polaris.shopify.com/pages/examples/modal-large.tsx @@ -15,7 +15,7 @@ function LargeModalExample() { return (