[Modal] Replace boolean props (#10261)

Fixes #10259

Author: kyledurand

.changeset/moody-terms-provide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Replaced `small`, `large`, and `fullScreen` props with `size` prop

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 <path> --componentName="Text" --from="color" --to="tone"`
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Text" --from="tone" --to="tone" --fromValue="warning" --toValue="caution"`
+
+**Modal**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Modal" --from="small" --to="size" --newValue="small"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Modal" --from="large" --to="size" --newValue="large"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Modal" --from="fullScreen" --to="size" --newValue="fullScreen"`

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

@@ -217,7 +217,7 @@ export function Large() {
   return (
     <div style={{height: '500px'}}>
       <Modal
-        large
+        size="large"
         activator={activator}
         open={active}
         onClose={toggleActive}
@@ -268,7 +268,7 @@ export function Small() {
   return (
     <div style={{height: '500px'}}>
       <Modal
-        small
+        size="small"
         activator={activator}
         open={active}
         onClose={toggleActive}
@@ -638,7 +638,7 @@ export function Fullscreen() {
         open
         onClose={() => {}}
         sectioned
-        fullScreen
+        size="fullScreen"
         primaryAction={{content: 'Save'}}
       >
         <Text as="h1">Fullscreen on small displays</Text>

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<HTMLElement> | 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<ModalProps> & {
@@ -77,8 +75,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   instant,
   sectioned,
   loading,
-  large,
-  small,
+  size,
   limitHeight,
   footer,
   primaryAction,
@@ -89,7 +86,6 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   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<ModalProps> & {
         onClose={onClose}
         onEntered={handleEntered}
         onExited={handleExited}
-        large={large}
-        small={small}
+        size={size}
         limitHeight={limitHeight}
-        fullScreen={fullScreen}
         setClosing={setClosing}
       >
         <Header

polaris-react/src/components/Modal/components/Dialog/Dialog.scss

@@ -89,7 +89,7 @@ $large-width: 980px;
     }
   }
 
-  &.fullScreen {
+  &.sizeFullScreen {
     height: 100%;
     @media #{$p-breakpoints-md-up} {
       height: unset;

polaris-react/src/components/Modal/components/Dialog/Dialog.tsx

@@ -3,11 +3,12 @@ import type {SetStateAction, Dispatch} from 'react';
 import {Transition, CSSTransition} from 'react-transition-group';
 import {motion} from '@shopify/polaris-tokens';
 
-import {classNames} from '../../../../utilities/css';
+import {classNames, variationName} from '../../../../utilities/css';
 import {focusFirstFocusableNode} from '../../../../utilities/focus';
 import {Key} from '../../../../types';
 import {KeypressListener} from '../../../KeypressListener';
 import {TrapFocus} from '../../../TrapFocus';
+import type {ModalSize} from '../../Modal';
 
 import styles from './Dialog.scss';
 
@@ -18,37 +19,31 @@ export interface DialogProps {
   instant?: boolean;
   children?: React.ReactNode;
   limitHeight?: boolean;
-  large?: boolean;
-  small?: boolean;
+  size?: ModalSize;
   onClose(): void;
   onEntered?(): void;
   onExited?(): void;
   in?: boolean;
-  fullScreen?: boolean;
   setClosing?: Dispatch<SetStateAction<boolean>>;
 }
 
 export function Dialog({
   instant,
   labelledBy,
   children,
+  limitHeight,
+  size,
   onClose,
   onExited,
   onEntered,
-  large,
-  small,
-  limitHeight,
-  fullScreen,
   setClosing,
   ...props
 }: DialogProps) {
   const containerNode = useRef<HTMLDivElement>(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;
 

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

@@ -159,12 +159,12 @@ describe('<Modal>', () => {
   describe('large', () => {
     it('passes large to Dialog if true', () => {
       const modal = mountWithApp(
-        <Modal title="foo" large onClose={jest.fn()} open>
+        <Modal title="foo" size="large" onClose={jest.fn()} open>
           <Badge />
         </Modal>,
       );
 
-      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('<Modal>', () => {
         </Modal>,
       );
 
-      expect(modal).toContainReactComponent(Dialog, {large: undefined});
+      expect(modal).toContainReactComponent(Dialog, {size: undefined});
     });
   });
 
   describe('small', () => {
     it('passes small to Dialog if true', () => {
       const modal = mountWithApp(
-        <Modal title="foo" small onClose={jest.fn()} open>
+        <Modal title="foo" size="small" onClose={jest.fn()} open>
           <Badge />
         </Modal>,
       );
 
-      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('<Modal>', () => {
         </Modal>,
       );
 
-      expect(modal).toContainReactComponent(Dialog, {small: undefined});
+      expect(modal).toContainReactComponent(Dialog, {size: undefined});
     });
   });
 
@@ -225,12 +225,12 @@ describe('<Modal>', () => {
   describe('fullScreen', () => {
     it('passes fullScreen to Dialog if true', () => {
       const modal = mountWithApp(
-        <Modal title="foo" fullScreen onClose={jest.fn()} open>
+        <Modal title="foo" size="fullScreen" onClose={jest.fn()} open>
           <Badge />
         </Modal>,
       );
 
-      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('<Modal>', () => {
         </Modal>,
       );
 
-      expect(modal).toContainReactComponent(Dialog, {fullScreen: undefined});
+      expect(modal).toContainReactComponent(Dialog, {size: undefined});
     });
   });
 

polaris.shopify.com/pages/examples/modal-large.tsx

@@ -15,7 +15,7 @@ function LargeModalExample() {
   return (
     <div style={{height: '500px'}}>
       <Modal
-        large
+        size="large"
         activator={activator}
         open={active}
         onClose={toggleActive}

polaris.shopify.com/pages/examples/modal-small.tsx

@@ -15,7 +15,7 @@ function SmallModalExample() {
   return (
     <div style={{height: '500px'}}>
       <Modal
-        small
+        size="small"
         activator={activator}
         open={active}
         onClose={toggleActive}