feat(Modal): add mini and tiny sizes (#1853)

Semantic-Org · Jul 16, 2017 · 5f7be15 · 5f7be15
1 parent d57d511
commit 5f7be15
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 3 deletions.
diff --git a/docs/app/Examples/modules/Modal/Variations/ModalExampleSize.js b/docs/app/Examples/modules/Modal/Variations/ModalExampleSize.js
@@ -12,6 +12,8 @@ class ModalExampleSize extends Component {
 
     return (
       <div>
+        <Button onClick={this.show('mini')}>Mini</Button>
+        <Button onClick={this.show('tiny')}>Tiny</Button>
         <Button onClick={this.show('small')}>Small</Button>
         <Button onClick={this.show('large')}>Large</Button>
         <Button onClick={this.show('fullscreen')}>Fullscreen</Button>

diff --git a/src/modules/Modal/Modal.d.ts b/src/modules/Modal/Modal.d.ts
@@ -85,7 +85,7 @@ export interface ModalProps extends PortalProps {
   open?: boolean;
 
   /** A modal can vary in size. */
-  size?: 'fullscreen' | 'large' | 'small';
+  size?: 'fullscreen' | 'large' | 'mini' | 'small' | 'tiny';
 
   /** Custom styles. */
   style?: React.CSSProperties;

diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
@@ -112,7 +112,7 @@ class Modal extends Component {
     open: PropTypes.bool,
 
     /** A modal can vary in size */
-    size: PropTypes.oneOf(['fullscreen', 'large', 'small']),
+    size: PropTypes.oneOf(['fullscreen', 'large', 'mini', 'small', 'tiny']),
 
     /** Custom styles. */
     style: PropTypes.object,

diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js
@@ -210,7 +210,7 @@ describe('Modal', () => {
 
   describe('size', () => {
     it('adds the size to the modal className', () => {
-      const sizes = ['fullscreen', 'large', 'small']
+      const sizes = ['fullscreen', 'large', 'mini', 'small', 'tiny']
 
       sizes.forEach(size => {
         wrapperMount(<Modal size={size} open />)