Date month picker tweaks (#1253)

Date month picker tweaks
cozy · Nov 21, 2019 · 3fcea8c · 3fcea8c
2 parents bc52948 + f60fc51
commit 3fcea8c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/react/DateMonthPicker/Readme.md b/react/DateMonthPicker/Readme.md
@@ -19,7 +19,7 @@ const handleSelect = monthDate => {
   <Stack>
       Month chosen: { state.monthDate ? state.monthDate : 'No date chosen yet'}<br/>
       <Button onClick={showPicker} label='Choose month'/>
-      { state.choosing ? <Modal dismissAction={hidePicker}>
+      { state.choosing ? <Modal title='Choose month' dismissAction={hidePicker}>
         <DateMonthPicker
             f={x => x}
             onSelect={handleSelect}

diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx
@@ -9,6 +9,8 @@ import styles from './styles.styl'
 import cx from 'classnames'
 
 const MonthButton = translate()(({ monthNum, f, onClick, isSelected }) => {
+  // We do not care care about year and day since we are creating the date
+  // only to be able to format it into a monthName
   const d = new Date(2019, monthNum, 15)
   const handleClick = () => {
     onClick(monthNum)
@@ -47,15 +49,15 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
     const d = new Date(year, month, 1)
     onSelect(format(d, 'YYYY-MM-DD'))
   }
-
   return (
     <>
       <div className={styles.DateMonthPicker__YearControls}>
         <Button
           className={styles.DateMonthPicker__YearButton}
           theme="secondary"
           size="small"
-          label=""
+          label={year - 1}
+          iconOnly={true}
           onClick={decreaseYear}
           icon={<Icon icon="left" />}
         />
@@ -71,7 +73,8 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           className={styles.DateMonthPicker__YearButton}
           theme="secondary"
           size="small"
-          label=""
+          label={year + 1}
+          iconOnly={true}
           onClick={increaseYear}
           icon={<Icon icon="right" />}
         />

diff --git a/react/DateMonthPicker/styles.styl b/react/DateMonthPicker/styles.styl
@@ -11,7 +11,10 @@
   border-width 0
   margin 0
   color var(--coolGrey)
-  background none !important
+  background none
+
+.DateMonthPicker__YearButton:hover
+    background none
 
 .DateMonthPicker__Year
   display inline-flex