fix: replace arrow with clear button on DatePickers (#361)

Fixes #358

src/components/Button/index.js

@@ -33,6 +33,7 @@ Button.propTypes = {
     'primary',
     'secondary',
     'tertiary',
+    'quaternary',
     'primary-warning',
     'secondary-warning',
     'primary-danger',

src/components/Button/styles.js

@@ -11,7 +11,7 @@ const shapeStyles = (size, shape) => css`
 `
 
 export const Button = styled(filterComponent(ReakitButton))(
-  ({ disabled, shape, size, variant }) => css`
+  ({ disabled, shape, size = 'md', variant }) => css`
     ${th(`buttons.${variant}`)};
     position: relative;
     display: inline-flex;

src/components/Button/theme.js

@@ -56,6 +56,12 @@ export const getButtons = theme => {
       'background-color': colors.light[200],
       'border-color': colors.danger[500]
     },
+    quaternary: {
+      ...defaults,
+      color: colors.nude[700],
+      'background-color': colors.nude[200],
+      'border-color': colors.nude[200]
+    },
     focused: {
       primary: {
         'background-color': colors.primary[200],
@@ -84,6 +90,11 @@ export const getButtons = theme => {
       'secondary-danger': {
         color: colors.danger[200],
         'border-color': colors.danger[200]
+      },
+      quaternary: {
+        color: colors.nude[800],
+        'background-color': colors.nude[400],
+        'border-color': colors.nude[400]
       }
     },
     disabled: {

src/components/ClearButton/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { Icon } from '../Icon'
+
+import * as S from './styles'
+
+export const ClearButton = props => (
+  <S.ClearButton height={0.45} shape="circle" variant="quaternary" width={0.45} {...props}>
+    <Icon height={0.5} name="cross" width={0.5} />
+  </S.ClearButton>
+)

src/components/ClearButton/styles.js

@@ -0,0 +1,5 @@
+import styled from '@xstyled/styled-components'
+
+import { Button } from '../Button/styles'
+
+export const ClearButton = styled(Button)``

src/components/DatePicker/index.js

@@ -62,6 +62,12 @@ export const DatePicker = forwardRef(
       onBlur && onBlur(e)
     }
 
+    const handleReset = e => {
+      e.preventDefault()
+      setDate(null)
+      onChange && onChange()
+    }
+
     const handleChange = newDate => {
       if (!newDate) return
       const date = formatDate(newDate)
@@ -83,6 +89,7 @@ export const DatePicker = forwardRef(
             icon={icon}
             iconPlacement={iconPlacement}
             inputRef={inputRef || ref}
+            onReset={handleReset}
             size={size}
           />
         }
@@ -94,6 +101,7 @@ export const DatePicker = forwardRef(
         selected={date}
         size={size}
         {...rest}
+        isClearable={false}
       />
     )
   }

src/components/DateTimePicker/CustomInput.js

@@ -3,7 +3,7 @@ import { func, oneOf } from 'prop-types'
 
 import { COMPONENT_TYPE, SIZES_TYPE } from '../../utils'
 import { IconWrapper } from '../Field/styles'
-import { Icon } from '../Icon'
+import { ClearButton } from '../ClearButton'
 
 import * as S from './styles'
 
@@ -17,9 +17,11 @@ export class CustomInput extends PureComponent {
       icon,
       iconPlacement,
       inputRef,
+      onReset,
       size,
       ...rest
     } = this.props
+
     return (
       <S.CustomInput
         focused={focused}
@@ -36,7 +38,7 @@ export class CustomInput extends PureComponent {
         )}
         <input ref={inputRef} {...rest} />
         <IconWrapper iconPlacement="right" size={size}>
-          <Icon color="nude.800" name="down" size="xs" />
+          <ClearButton onClick={onReset} />
         </IconWrapper>
       </S.CustomInput>
     )
@@ -50,5 +52,6 @@ CustomInput.propTypes = {
   icon: COMPONENT_TYPE,
   iconPlacement: oneOf('right', 'left'),
   inputRef: func,
+  onReset: func,
   size: SIZES_TYPE
 }

src/components/DateTimePicker/index.js

@@ -16,8 +16,8 @@ export const DateTimePicker = forwardRef(
     const [date, setDate] = useState(value)
 
     const handleChange = newDate => {
-      setDate(newDate)
-      onChange && onChange(new Date(newDate))
+      setDate(newDate || null)
+      onChange && onChange(newDate && new Date(newDate))
     }
 
     const formatDate = date => getDate(date, 15)

src/components/DateTimePicker/styles.js

@@ -6,6 +6,7 @@ import { TimePicker } from '../TimePicker/styles'
 import { wrapperSystem } from '../../utils/'
 import { IconWrapper } from '../Field/styles'
 import { Icon } from '../Icon/styles'
+import { ClearButton } from '../ClearButton/styles'
 
 // Only require CSS on client
 if (typeof window !== 'undefined') {
@@ -16,10 +17,6 @@ const focusStyles = css`
   &:focus {
     position: relative;
     z-index: 1;
-
-    ~ ${IconWrapper}:last-child ${Icon} {
-      transform: rotate3d(0, 0, 1, 180deg);
-    }
   }
 `
 
@@ -94,5 +91,10 @@ export const CustomInput = styled.div(({ focused, icon, iconPlacement, size, ...
       transition: medium;
       z-index: ${focused ? 2 : null};
     }
+
+    ${ClearButton} {
+      pointer-events: auto;
+      z-index: 1;
+    }
   `
 })

src/components/TimePicker/index.js

@@ -63,6 +63,12 @@ export const TimePicker = forwardRef(
       onBlur && onBlur(e)
     }
 
+    const handleReset = e => {
+      e.preventDefault()
+      setDate(null)
+      onChange && onChange()
+    }
+
     const handleChange = newDate => {
       if (!newDate) return
       const date = formatDate(newDate)
@@ -84,6 +90,7 @@ export const TimePicker = forwardRef(
             icon={icon}
             iconPlacement={iconPlacement}
             inputRef={inputRef || ref}
+            onReset={handleReset}
             size={size}
           />
         }
@@ -98,6 +105,7 @@ export const TimePicker = forwardRef(
         size={size}
         timeIntervals={timeIntervals}
         {...rest}
+        isClearable={false}
       />
     )
   }

src/index.js

@@ -2,6 +2,7 @@
 export * from './components/Badge/index'
 export * from './components/Box/index'
 export * from './components/Button/index'
+export * from './components/ClearButton/index'
 export * from './components/ConnectedField/index'
 export * from './components/DatePicker/index'
 export * from './components/DatePickerPopper/index'