Improve Date Range UX for selecting a single day (#1560)

Author: dbchristopher

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## UNRELEASED
+
+### Changed
+
+- InputDateRange allows you to specify a single day range by clicking on one of the date range endpoints
+
 ## [0.9.18]
 
 ### Added
@@ -24,7 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.9.17] - 2020-10-12
 
-## Added
+### Added
 
 - `Combobox` and `ComboboxMulti` `openOnClick` prop
 - `ComboboxInput` now supports `freeInput` prop
@@ -35,7 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `useDialog` - all of the power of `Dialog` in a hook!
 - Visual Snapshot test for `MenuItem`, `MenuGroup`, `Status`
 
-## Changed
+### Changed
 
 - `Code`, `CodeBlock` & `Paragraph` now explicitly use `theme.colors.text` as default color
 - `Dialog`

packages/components/snapshots/Dialog/Medium Content-snap.png

@@ -23,73 +23,50 @@
  SOFTWARE.
 
  */
-import React, { FC, useState } from 'react'
-import {
-  Button,
-  FieldSelect,
-  Paragraph,
-  Popover,
-  PopoverContent,
-} from '@looker/components'
-import { DateFormat } from '@looker/components/src/DateFormat'
-import { FieldDateRange } from '@looker/components/src/FieldDateRange'
-import { InputDateRange } from '@looker/components/src/InputDateRange'
-import { Locales } from '@looker/components/src/utils/i18n'
+import React, { useState } from 'react'
+import { Story } from '@storybook/react/types-6-0'
+import { Locales } from '../utils/i18n'
+import { FieldSelect } from '../Form/Fields/FieldSelect'
+import { Paragraph } from '../Text/Paragraph'
+import { DateFormat } from '../DateFormat'
+import { FieldDateRange, FieldInputDateRangeProps } from '.'
 
 interface DateRange {
   from?: Date
   to?: Date
 }
 
 export default {
-  title: 'Forms/DateRange',
+  component: FieldDateRange,
+  title: 'FieldDateRange',
 }
 
-export const Basic = () => <FieldDateRange />
-export const Disabled = () => <FieldDateRange disabled />
-
-export const Controlled: FC = () => {
-  const startDate = new Date()
-  startDate.setDate(9)
-  const endDate = new Date()
-  endDate.setDate(15)
-
-  const [controlledDateRange, setControlledDateRange] = useState<any>()
+const Template: Story<FieldInputDateRangeProps> = (args) => (
+  <FieldDateRange {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  defaultValue: {
+    from: new Date('May 18, 2020'),
+    to: new Date('May 21, 2020'),
+  },
+  label: 'Pick A Date',
+}
 
-  const handleNextWeekClick = () => {
-    setControlledDateRange({
-      from: new Date('03/02/2020'),
-      to: new Date('03/09/2020'),
-    })
-  }
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+  label: 'Pick A Date',
+}
 
-  return (
-    <Popover
-      content={
-        <PopoverContent>
-          <Button onClick={handleNextWeekClick}>Next Week</Button>
-          <InputDateRange
-            value={controlledDateRange}
-            onChange={setControlledDateRange}
-          />
-        </PopoverContent>
-      }
-    >
-      <Button>
-        {controlledDateRange ? (
-          <>
-            <DateFormat>{controlledDateRange.from}</DateFormat> &mdash;
-            <DateFormat>{controlledDateRange.to}</DateFormat>
-          </>
-        ) : (
-          'Select Dates'
-        )}
-      </Button>
-    </Popover>
-  )
+export const Error = Template.bind({})
+Error.args = {
+  label: 'Pick A Date',
+  validationMessage: { message: 'Field Disabled', type: 'error' },
 }
 
-export const Localized: FC = () => {
+export const Localized = () => {
   const startDate = new Date()
   startDate.setDate(9)
   const endDate = new Date()
@@ -141,3 +118,7 @@ export const Localized: FC = () => {
     </>
   )
 }
+
+Localized.parameters = {
+  storyshots: { disable: true },
+}

packages/components/snapshots/FieldDateRange/Basic-snap.png

@@ -38,7 +38,9 @@ import {
 
 export interface FieldInputDateRangeProps
   extends FieldProps,
-    InputDateRangeProps {}
+    InputDateRangeProps {
+  ref: Ref<HTMLInputElement>
+}
 
 const FieldDateRangeComponent = forwardRef(
   (props: FieldInputDateRangeProps, ref: Ref<HTMLInputElement>) => {

packages/components/snapshots/FieldDateRange/Disabled-snap.png

@@ -0,0 +1,94 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import React, { useState } from 'react'
+import { Story } from '@storybook/react/types-6-0'
+import { Button } from '../Button'
+import { Popover, PopoverContent } from '../Popover'
+import { DateFormat } from '../DateFormat'
+import { InputDateRange, InputDateRangeProps } from './'
+
+export default {
+  component: InputDateRange,
+  title: 'InputDateRange',
+}
+
+const Template: Story<InputDateRangeProps> = (args) => (
+  <InputDateRange {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  defaultValue: {
+    from: new Date('July 25, 2020'),
+    to: new Date('August 5, 2020'),
+  },
+}
+export const Disabled = () => <InputDateRange disabled />
+
+export const Controlled = () => {
+  const startDate = new Date()
+  startDate.setDate(9)
+  const endDate = new Date()
+  endDate.setDate(15)
+
+  const [controlledDateRange, setControlledDateRange] = useState<any>()
+
+  const handleNextWeekClick = () => {
+    setControlledDateRange({
+      from: new Date('03/02/2020'),
+      to: new Date('03/09/2020'),
+    })
+  }
+
+  return (
+    <Popover
+      content={
+        <PopoverContent>
+          <Button onClick={handleNextWeekClick}>Next Week</Button>
+          <InputDateRange
+            value={controlledDateRange}
+            onChange={setControlledDateRange}
+          />
+        </PopoverContent>
+      }
+    >
+      <Button>
+        {controlledDateRange ? (
+          <>
+            <DateFormat>{controlledDateRange.from}</DateFormat> &mdash;
+            <DateFormat>{controlledDateRange.to}</DateFormat>
+          </>
+        ) : (
+          'Select Dates'
+        )}
+      </Button>
+    </Popover>
+  )
+}
+
+Controlled.parameters = {
+  storyshots: { disable: true },
+}