Add size option for Modal (#40)

Author: adamkudrna

src/demo/pages/DemoContainer.jsx

@@ -1000,7 +1000,7 @@ class DemoContainer extends React.Component {
             />
             <h3 id="ui-components-modal" className="typography-size-4 mb-6">Modal</h3>
             <Documentation
-              name="Modal label"
+              name="Modal"
               component={(
                 <>
                   <Button
@@ -1028,7 +1028,7 @@ class DemoContainer extends React.Component {
               )}
             />
             <Documentation
-              name="Modal label with loading icon"
+              name="Small modal with loading icon"
               component={(
                 <>
                   <Button
@@ -1048,7 +1048,8 @@ class DemoContainer extends React.Component {
                         },
                       ]}
                       closeHandler={() => this.setState({ showModal2: false })}
-                      title="Modal"
+                      size="small"
+                      title="Small modal"
                     >
                       <p>Dialog content</p>
                     </Modal>

src/lib/components/ui/Modal/Modal.jsx

@@ -37,6 +37,18 @@ class Modal extends React.Component {
   }
 
   render() {
+    const sizeClass = (size) => {
+      if (size === 'small') {
+        return styles.isRootSmall;
+      }
+
+      if (size === 'medium') {
+        return styles.isRootMedium;
+      }
+
+      return styles.isRootLarge;
+    };
+
     return (
       <div
         className={styles.overlay}
@@ -52,6 +64,7 @@ class Modal extends React.Component {
         <div
           className={`
             ${styles.root}
+            ${sizeClass(this.props.size)}
             ${this.state.isContentOverflowing ? styles.isContentOverflowing : ''}
           `.trim()}
           onClick={(e) => {
@@ -115,6 +128,7 @@ Modal.defaultProps = {
   actions: [],
   closeHandler: null,
   id: undefined,
+  size: 'medium',
 };
 
 Modal.propTypes = {
@@ -132,6 +146,7 @@ Modal.propTypes = {
   ]).isRequired,
   closeHandler: PropTypes.func,
   id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
   title: PropTypes.string.isRequired,
   translations: PropTypes.shape({
     close: PropTypes.string.isRequired,

src/lib/components/ui/Modal/Modal.scss

@@ -9,7 +9,6 @@
   z-index: $modal-zindex;
   display: flex;
   flex-direction: column;
-  width: $modal-width;
   max-width: calc(100% - (2 * #{$modal-padding-x}));
   max-height: calc(100% - (2 * #{$modal-padding-y}));
   overflow-y: auto;
@@ -79,3 +78,15 @@
 .isContentOverflowing .footer {
   box-shadow: $modal-footer-box-shadow;
 }
+
+.isRootSmall {
+  width: $modal-size-small-width;
+}
+
+.isRootMedium {
+  width: $modal-size-medium-width;
+}
+
+.isRootLarge {
+  width: $modal-size-large-width;
+}

src/lib/components/ui/Modal/__tests__/Modal.test.jsx

@@ -28,6 +28,7 @@ describe('rendering', () => {
         ]}
         closeHandler={() => {}}
         id="custom-id"
+        size="large"
         title="Modal title"
       >
         Modal content
@@ -37,7 +38,7 @@ describe('rendering', () => {
     expect(shallowToJson(tree)).toMatchSnapshot();
   });
 
-  it('renders correctly with all with loading icon props except translations', () => {
+  it('renders correctly with all props except translations and with a loading icon', () => {
     const tree = mount((
       <Modal
         actions={[
@@ -49,6 +50,7 @@ describe('rendering', () => {
         ]}
         closeHandler={() => {}}
         id="custom-id"
+        size="small"
         title="Modal title"
       >
         Modal content

src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap

@@ -12,6 +12,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
   }
   closeHandler={[Function]}
   id="custom-id"
+  size="large"
   title="Modal title"
   translations={null}
 >
@@ -26,6 +27,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
     }
     closeHandler={[Function]}
     id="custom-id"
+    size="large"
     title="Modal title"
     translations={
       Object {
@@ -41,7 +43,8 @@ exports[`rendering renders correctly with all props except translations 1`] = `
       role="presentation"
     >
       <div
-        className="root"
+        className="root
+            isRootLarge"
         onClick={[Function]}
         role="presentation"
       >
@@ -166,7 +169,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
 </WithTranslationContextComponent>
 `;
 
-exports[`rendering renders correctly with all with loading icon props except translations 1`] = `
+exports[`rendering renders correctly with all props except translations and with a loading icon 1`] = `
 <WithTranslationContextComponent
   actions={
     Array [
@@ -181,6 +184,7 @@ exports[`rendering renders correctly with all with loading icon props except tra
   }
   closeHandler={[Function]}
   id="custom-id"
+  size="small"
   title="Modal title"
   translations={null}
 >
@@ -198,6 +202,7 @@ exports[`rendering renders correctly with all with loading icon props except tra
     }
     closeHandler={[Function]}
     id="custom-id"
+    size="small"
     title="Modal title"
     translations={
       Object {
@@ -213,7 +218,8 @@ exports[`rendering renders correctly with all with loading icon props except tra
       role="presentation"
     >
       <div
-        className="root"
+        className="root
+            isRootSmall"
         onClick={[Function]}
         role="presentation"
       >
@@ -362,6 +368,7 @@ exports[`rendering renders correctly with mandatory props only 1`] = `
   <Modal
     actions={Array []}
     closeHandler={null}
+    size="medium"
     title="Modal title"
     translations={
       Object {
@@ -376,7 +383,8 @@ exports[`rendering renders correctly with mandatory props only 1`] = `
       role="presentation"
     >
       <div
-        className="root"
+        className="root
+            isRootMedium"
         onClick={[Function]}
         role="presentation"
       >
@@ -416,6 +424,7 @@ exports[`rendering renders correctly with translations 1`] = `
   <Modal
     actions={Array []}
     closeHandler={[Function]}
+    size="medium"
     title="Modal title"
     translations={
       Object {
@@ -430,7 +439,8 @@ exports[`rendering renders correctly with translations 1`] = `
       role="presentation"
     >
       <div
-        className="root"
+        className="root
+            isRootMedium"
         onClick={[Function]}
         role="presentation"
       >

src/lib/components/ui/Modal/_theme.scss

@@ -2,3 +2,6 @@ $modal-background: var(--rui-modal-background);
 $modal-box-shadow: var(--rui-modal-box-shadow);
 $modal-footer-background: var(--rui-modal-footer-background);
 $modal-overlay-background: var(--rui-modal-overlay-background);
+$modal-size-small-width: var(--rui-modal-size-small-width);
+$modal-size-medium-width: var(--rui-modal-size-medium-width);
+$modal-size-large-width: var(--rui-modal-size-large-width);

src/lib/components/ui/Modal/_variables.scss

@@ -6,7 +6,6 @@
 
 // 1. Intentionally using direct color to prevent custom properties from being passed into `rgba` function.
 
-$modal-width: 46rem;
 $modal-padding-x: map-get($offset-values, 5);
 $modal-padding-y: map-get($offset-values, 3);
 $modal-border-radius: $border-radius;

src/lib/theme.scss

@@ -532,6 +532,9 @@
   --rui-modal-box-shadow: none;
   --rui-modal-footer-background: var(--rui-color-gray-100);
   --rui-modal-overlay-background: rgba(0, 0, 0, 0.5);
+  --rui-modal-size-small-width: 20rem;
+  --rui-modal-size-medium-width: 40rem;
+  --rui-modal-size-large-width: 60rem;
 
   //
   // Toolbar