feat: Better styles for DateMonthPicker (#1256)

feat: Better styles for DateMonthPicker
cozy · Nov 22, 2019 · f4a3b68 · f4a3b68
2 parents 303ac4d + 2a2389e
commit f4a3b68
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 67 deletions.
diff --git a/react/DateMonthPicker/Readme.md b/react/DateMonthPicker/Readme.md
@@ -3,30 +3,43 @@ import I18n from 'cozy-ui/transpiled/react/I18n';
 import DateMonthPicker from 'cozy-ui/transpiled/react/DateMonthPicker';
 import Stack from 'cozy-ui/transpiled/react/Stack';
 import Button from 'cozy-ui/transpiled/react/Button';
-import Modal from 'cozy-ui/transpiled/react/Modal';
+import Modal, { ModalContent } from 'cozy-ui/transpiled/react/Modal';
 
 
 const dictRequire = x => ({})
-const initialState = { choosing: isTesting(), monthDate: '2019-08' }
+const initialState = { choosing: false, monthDate: '2019-08' }
 const showPicker = () => setState({ choosing: true });
 const hidePicker = () => setState({ choosing: false });
 const handleSelect = monthDate => {
   setState({ monthDate })
   hidePicker()
-}
+};
 
-<I18n dictRequire={dictRequire} lang='en'>
+const Interactive = () => (
   <Stack>
       Month chosen: { state.monthDate ? state.monthDate : 'No date chosen yet'}<br/>
       <Button onClick={showPicker} label='Choose month'/>
-      { state.choosing ? <Modal title='Choose month' dismissAction={hidePicker}>
-        <DateMonthPicker
-            f={x => x}
-            onSelect={handleSelect}
-            initialValue={state.monthDate}
-          />
-        <div className='u-mb-2'>{' '}</div>
+      { state.choosing ? <Modal size='xsmall' title='Choose month' dismissAction={hidePicker}>
+        <ModalContent>
+          <DateMonthPicker
+              f={x => x}
+              onSelect={handleSelect}
+              initialValue={state.monthDate}
+            />
+        </ModalContent>
       </Modal>: null }
   </Stack>
+)
+
+const Static = () => (
+  <DateMonthPicker
+    f={x => x}
+    onSelect={handleSelect}
+    initialValue={state.monthDate}
+  /> 
+);
+
+<I18n dictRequire={dictRequire} lang='en'>
+  { isTesting() ? <Static /> : <Interactive /> }
 </I18n>
 ```
diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import Button from '../Button'
 import Icon from '../Icon'
 import { translate } from '../I18n'
 import range from 'lodash/range'
@@ -16,15 +15,15 @@ const MonthButton = translate()(({ monthNum, f, onClick, isSelected }) => {
     onClick(monthNum)
   }
   return (
-    <Button
-      theme="secondary"
+    <button
       className={cx(
         styles.DateMonthPicker__MonthButton,
-        isSelected ? styles.ValueSelected : null
+        isSelected ? styles['DateMonthPicker__MonthButton--selected'] : null
       )}
       onClick={handleClick}
-      label={f(d, 'MMM')}
-    />
+    >
+      {f(d, 'MMM')}
+    </button>
   )
 })
 
@@ -50,34 +49,23 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
     onSelect(format(d, 'YYYY-MM-DD'))
   }
   return (
-    <>
+    <div>
       <div className={styles.DateMonthPicker__YearControls}>
-        <Button
+        <button
           className={styles.DateMonthPicker__YearButton}
-          theme="secondary"
-          size="small"
-          label={year - 1}
-          iconOnly={true}
+          title={year - 1}
           onClick={decreaseYear}
-          icon={<Icon icon="left" />}
-        />
-        <div
-          className={cx(
-            styles.DateMonthPicker__Year,
-            year === initialYear && styles.ValueSelected
-          )}
         >
-          {year}
-        </div>
-        <Button
+          <Icon icon="left" />
+        </button>
+        <div className={cx(styles.DateMonthPicker__Year)}>{year}</div>
+        <button
           className={styles.DateMonthPicker__YearButton}
-          theme="secondary"
-          size="small"
-          label={year + 1}
-          iconOnly={true}
+          title={year + 1}
           onClick={increaseYear}
-          icon={<Icon icon="right" />}
-        />
+        >
+          <Icon icon="right" />
+        </button>
       </div>
       <div className={styles.DateMonthPicker__MonthGrid}>
         {range(0, 12).map(i => (
@@ -89,7 +77,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           />
         ))}
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/react/DateMonthPicker/index.spec.jsx b/react/DateMonthPicker/index.spec.jsx
@@ -1,22 +1,27 @@
 import { mount } from 'enzyme'
 import React from 'react'
 import DateMonthPicker from './index'
-import Button from '../Button'
 import I18n from '../I18n'
 import { act } from 'react-dom/test-utils'
+
 const findButtonWithLabel = (root, label) =>
-  root.findWhere(n => n.type() == Button && n.props().label === label)
+  root.findWhere(n => n.type() == 'button' && n.props().children === label)
 
 const findButtonWithIcon = (root, iconName) =>
   root.findWhere(n => {
     const props = n.props()
-    if (n.type() !== Button) {
+    if (n.type() !== 'button') {
       return
     }
-    if (!props.icon) {
+    if (!props.children || !props.children.length > 1) {
       return
     }
-    return props.icon.props.icon === iconName
+
+    return (
+      props.children.props &&
+      props.children.props.icon &&
+      props.children.props.icon == iconName
+    )
   })
 
 describe('DateMonthPicker', () => {

diff --git a/react/DateMonthPicker/styles.styl b/react/DateMonthPicker/styles.styl
@@ -1,40 +1,70 @@
-.DateMonthPicker__YearControls
+@require 'settings/shadows'
+@require 'settings/radius'
+
+buttonHeight=3rem
+
+$buttonHover
+  background var(--paleGrey)
+  color var(--charcoalGrey)
+
+$buttonActive
+  background-color var(--silver)
+  color var(--charcoalGrey)
+  font-weight bold
+  outline 0
+
+$button
+  background none
+  min-height buttonHeight
+  min-width 3rem
+  display inline-block
+  border-width 0
+  color var(--coolGrey)
+  cursor pointer
+
+  &:hover
+    @extend $buttonHover
+
+  &:active, &:hover:active
+    @extend $buttonActive
+
+$select
   justify-content center
   display flex
   align-items center
+  border-radius radius-8
+  border 1px solid var(--silver)
+  overflow hidden
+
+.DateMonthPicker__YearControls
+  @extend $select
+  @extend $raised-12
+
+  margin-bottom 1rem
+  font-weight bold
 
 .DateMonthPicker__YearButton
+  @extend $button
   flex-grow 0
-  min-width 3rem
-  min-height 3rem
-  text-align center
-  border-width 0
-  margin 0
-  color var(--coolGrey)
-  background none
-
-.DateMonthPicker__YearButton:hover
-    background none
+  cursor pointer
 
 .DateMonthPicker__Year
+  flex-grow 1
   display inline-flex
+  justify-content center
 
 .DateMonthPicker__MonthGrid
   display grid
   grid-template-columns repeat(4, auto)
   grid-template-rows repeat(3, 1fr)
   overflow hidden
+  grid-gap 1rem
 
 
 .DateMonthPicker__MonthButton
-  min-height 3rem
-  min-width 0
-  margin 0
-  border 0
-  border-radius 0
-  font-weight normal
-  text-transform none
-
-.ValueSelected
-  color var(--primaryColor)
-  font-weight bold
+  @extend $button
+  border-radius buttonHeight
+
+  &.DateMonthPicker__MonthButton--selected
+    @extend $buttonHover
+    font-weight bold
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -356,6 +356,21 @@ exports[`Checkbox should render examples: Checkbox 5`] = `
 </div>"
 `;
 
+exports[`DateMonthPicker should render examples: DateMonthPicker 1`] = `
+"<div>
+  <div>
+    <div class=\\"styles__DateMonthPicker__YearControls___1DGlB\\"><button class=\\"styles__DateMonthPicker__YearButton___3zNDK\\" title=\\"2018\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <use xlink:href=\\"#left\\"></use>
+        </svg></button>
+      <div class=\\"styles__DateMonthPicker__Year___387bP\\">2019</div><button class=\\"styles__DateMonthPicker__YearButton___3zNDK\\" title=\\"2020\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <use xlink:href=\\"#right\\"></use>
+        </svg></button>
+    </div>
+    <div class=\\"styles__DateMonthPicker__MonthGrid___TCFg4\\"><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Jan</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Feb</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Mar</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Apr</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">May</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Jun</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Jul</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm styles__DateMonthPicker__MonthButton--selected___40hCm\\">Aug</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Sep</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Oct</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Nov</button><button class=\\"styles__DateMonthPicker__MonthButton___3I_Mm\\">Dec</button></div>
+  </div>
+</div>"
+`;
+
 exports[`Empty should render examples: Empty 1`] = `
 "<div>
   <div style=\\"position: relative; transform: translateZ(0); height: 500px; display: flex;\\">

diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
@@ -27,6 +27,7 @@ testComponent('Button')
 testComponent('ButtonAction')
 testComponent('Card')
 testComponent('Checkbox')
+testComponent('DateMonthPicker')
 testComponent('Empty')
 testComponent('Field')
 testComponent('Hero')

diff --git a/react/index.js b/react/index.js
@@ -89,3 +89,4 @@ export {
   useViewStack,
   ViewStackContext
 } from './ViewStack'
+export { default as DateMonthPicker } from './DateMonthPicker'
diff --git a/stylus/settings/radius.styl b/stylus/settings/radius.styl
@@ -0,0 +1 @@
+radius-8=8px
diff --git a/stylus/settings/shadows.styl b/stylus/settings/shadows.styl
@@ -0,0 +1,4 @@
+box-shadow-12=0 4px 12px 0 rgba(0, 0, 0, .08)
+
+$raised-12
+    box-shadow box-shadow-12