Merge pull request #73 from headwirecom/feature/datepicker-style

Make the style of date picker more aligned with other fields

Author: mburri

packages/spectrum/src/additional/DatePicker.css

@@ -0,0 +1,9 @@
+/**
+ * Makes the little calendar icon grey on Chrome
+ * Otherwise it's not visible with dark mode styles
+ */
+::-webkit-calendar-picker-indicator {
+  filter: invert(0.5);
+  position: relative;
+  top: 2px;
+}

packages/spectrum/src/additional/DatePicker.tsx

@@ -0,0 +1,86 @@
+/*
+  The MIT License
+
+  Copyright (c) 2020 headwire.com, Inc
+  https://github.com/headwirecom/jsonforms-react-spectrum-renderers
+
+
+  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 from 'react';
+import './DatePicker.css';
+
+/**
+ * React Spectrum does not have date picker (it is in progress, not usable at the time of writing).
+ * We can make the default date picker look more consistent with other React Spectrum elements by
+ * copying the same styles as React Spectrum applies to TextField and FieldLabel.
+ */
+const inputStyle: React.CSSProperties = {
+  border: `var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) solid`,
+  borderRadius: `var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))`,
+  boxSizing: 'border-box',
+  padding: `3px var(--spectrum-global-dimension-size-150) 5px calc(var(--spectrum-global-dimension-size-150) - 1px)`,
+  textIndent: `0`,
+  width: `100%`,
+  height: `var(--spectrum-alias-single-line-height,var(--spectrum-global-dimension-size-400))`,
+  verticalAlign: `top`,
+  margin: `0`,
+  overflow: `visible`,
+  fontFamily: `adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif`,
+  fontSize: `var(--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100))`,
+  lineHeight: `var(--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium))`,
+  textOverflow: `ellipsis`,
+  transition: `border-color .13s ease-in-out,box-shadow .13s ease-in-out`,
+  outline: `none`,
+  backgroundColor: `var(--spectrum-global-color-gray-50)`,
+  borderColor: `var(--spectrum-alias-border-color,var(--spectrum-global-color-gray-400))`,
+  color: `var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))`,
+};
+
+const labelStyle: React.CSSProperties = {
+  boxSizing: 'border-box',
+  padding: `var(--spectrum-global-dimension-size-50) 0 var(--spectrum-global-dimension-size-65)`,
+  fontSize: `var(--spectrum-global-dimension-font-size-75)`,
+  fontWeight: `var(--spectrum-global-font-weight-regular,400)` as React.CSSProperties['fontWeight'],
+  lineHeight: `var(--spectrum-global-font-line-height-small,1.3)`,
+  verticalAlign: `top`,
+  WebkitFontSmoothing: `subpixel-antialiased`,
+  MozOsxFontSmoothing: `auto`,
+  cursor: `default`,
+};
+
+export const DatePicker: React.FC<React.ComponentProps<'input'>> = (props) => {
+  return (
+    <input
+      {...props}
+      style={props.style ? { ...inputStyle, ...props.style } : inputStyle}
+    />
+  );
+};
+
+export const DatePickerLabel: React.FC<React.ComponentProps<'label'>> = (
+  props
+) => {
+  return (
+    <label
+      {...props}
+      style={props.style ? { ...labelStyle, ...props.style } : labelStyle}
+    />
+  );
+};

packages/spectrum/src/cells/DateCell.tsx

@@ -33,12 +33,13 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
+import { DatePicker } from '../additional/DatePicker';
 
 export const DateCell = (props: CellProps) => {
   const { data, id, enabled, uischema, path, handleChange } = props;
 
   return (
-    <input
+    <DatePicker
       type='date'
       value={data ?? ''}
       onChange={(ev) => handleChange(path, ev.target.value)}

packages/spectrum/src/cells/DateTimeCell.tsx

@@ -33,6 +33,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
+import { DatePicker } from '../additional/DatePicker';
 
 export const DateTimeCell = (props: CellProps) => {
   const { data, id, enabled, uischema, path, handleChange } = props;
@@ -41,7 +42,7 @@ export const DateTimeCell = (props: CellProps) => {
   };
 
   return (
-    <input
+    <DatePicker
       type='datetime-local'
       value={(data ?? '').substr(0, 16)}
       onChange={(ev) => handleChange(path, toISOString(ev.target.value))}

packages/spectrum/src/spectrum-control/InputDate.tsx

@@ -28,6 +28,7 @@ import { merge } from 'lodash';
 import { SpectrumInputProps } from './index';
 import { DimensionValue } from '@react-types/shared';
 import { Flex } from '@adobe/react-spectrum';
+import { DatePicker, DatePickerLabel } from '../additional/DatePicker';
 
 export class InputDate extends React.PureComponent<
   CellProps & SpectrumInputProps
@@ -53,15 +54,14 @@ export class InputDate extends React.PureComponent<
 
     return (
       <Flex direction='column'>
-        <label htmlFor={id + '-input'}>
+        <DatePickerLabel htmlFor={id + '-input'}>
           {computeLabel(
             label,
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk
           )}
-        </label>
-        <input
-          style={{ marginTop: '3px', padding: '5px' }}
+        </DatePickerLabel>
+        <DatePicker
           width={width}
           type='date'
           value={data ?? ''}

packages/spectrum/src/spectrum-control/InputDateTime.tsx

@@ -28,6 +28,7 @@ import { CellProps, computeLabel } from '@jsonforms/core';
 import { merge } from 'lodash';
 import { SpectrumInputProps } from './index';
 import { Flex } from '@adobe/react-spectrum';
+import { DatePicker, DatePickerLabel } from '../additional/DatePicker';
 
 export class InputDateTime extends React.PureComponent<
   CellProps & SpectrumInputProps
@@ -57,15 +58,14 @@ export class InputDateTime extends React.PureComponent<
 
     return (
       <Flex direction='column'>
-        <label htmlFor={id + '-input'}>
+        <DatePickerLabel htmlFor={id + '-input'}>
           {computeLabel(
             label,
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk
           )}
-        </label>
-        <input
-          style={{ marginTop: '3px', padding: '5px' }}
+        </DatePickerLabel>
+        <DatePicker
           type='datetime-local'
           width={width}
           value={(data ?? '').substr(0, 16)}

packages/spectrum/src/spectrum-control/InputTime.tsx

@@ -28,6 +28,7 @@ import { merge } from 'lodash';
 import { SpectrumInputProps } from './index';
 import { DimensionValue } from '@react-types/shared';
 import { Flex } from '@adobe/react-spectrum';
+import { DatePicker, DatePickerLabel } from '../additional/DatePicker';
 
 export class InputTime extends React.PureComponent<
   CellProps & SpectrumInputProps
@@ -53,16 +54,15 @@ export class InputTime extends React.PureComponent<
 
     return (
       <Flex direction='column'>
-        <label htmlFor={id + '-input'}>
+        <DatePickerLabel htmlFor={id + '-input'}>
           {computeLabel(
             label,
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk
           )}
-        </label>
-        <input
+        </DatePickerLabel>
+        <DatePicker
           width={width}
-          style={{ marginTop: '3px', padding: '5px' }}
           type='time'
           value={data ?? ''}
           onChange={(ev) => handleChange(path, ev.target.value)}