Merge pull request #912 from CPatchane/xsmall_modal

Add xsmall modal size
cozy · Apr 23, 2019 · bc1f730 · bc1f730
2 parents 335fc29 + 7859e55
commit bc1f730
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/react/Modal/Readme.md b/react/Modal/Readme.md
@@ -26,12 +26,13 @@ initialState = { modalOpened: false};
 
 ### Size
 
-Several sizes avalaible: `small`, `medium`, `large`, `xlarge`, `xxlarge`.
+Several sizes avalaible: `xsmall, small`, `medium`, `large`, `xlarge`, `xxlarge`.
 `small` being the default one.
 
 ```
 initialState = { modalOpened: false};
 const sizes = [
+  'xsmall',
   'small',
   'medium',
   'large',
@@ -268,11 +269,11 @@ class ModalCounterWithAnimatedHeader extends React.Component {
    increment () {
     this.setState({ counter: this.state.counter + 1 })
    }
-   
+
    componentWillUnmount() {
      clearTimeout(this.timeout)
    }
-   
+
   render () {
     return (
       <Modal

diff --git a/react/Modal/index.jsx b/react/Modal/index.jsx
@@ -412,7 +412,14 @@ Modal.propTypes = {
   /** If has a value, the modal will be rendered inside a portal and its value will be passed to Portal
    to control the rendering destination of the Modal */
   into: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge', 'xxlarge']),
+  size: PropTypes.oneOf([
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge',
+    'xxlarge'
+  ]),
   height: PropTypes.string,
   width: PropTypes.string,
   spacing: PropTypes.oneOf(['small', 'large']),

diff --git a/react/Modal/styles.styl b/react/Modal/styles.styl
@@ -19,6 +19,9 @@
     &.c-modal--fullscreen
         @extend $modal--fullscreen
 
+.c-modal--xsmall
+    @extend $modal--xsmall
+
 .c-modal--small
     @extend $modal--small
 

diff --git a/stylus/components/modals.styl b/stylus/components/modals.styl
@@ -11,13 +11,15 @@
 \*------------------------------------*/
 
 // Modal sizes
+xsmall-width = rem(384)
 small-width = rem(544)
 medium-width = rem(576)
 large-width = rem(640)
 xlarge-width = rem(800)
 xxlarge-width = rem(960)
 
 // Modal margins
+xsmall-margin = rem(8)
 small-margin = rem(8)
 medium-margin = rem(24)
 large-margin = rem(48)
@@ -66,7 +68,7 @@ $modal
     background-color white
     color var(--charcoalGrey)
 
-for size in 'small' 'medium' 'large' 'xlarge' 'xxlarge'
+for size in 'xsmall' 'small' 'medium' 'large' 'xlarge' 'xxlarge'
     $modal--{size}
         width lookup(size + '-width')