feat(FluidDatePicker): add FluidDatePickerSkeleton variant

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9442,6 +9442,23 @@ Map {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "unstable__FluidDatePickerSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "datePickerType": Object {
+        "args": Array [
+          Array [
+            "simple",
+            "single",
+            "range",
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+  },
   "unstable__FluidDropdown" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

packages/react/src/__tests__/index-test.js

@@ -233,6 +233,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidComboBoxSkeleton",
         "unstable__FluidDatePicker",
         "unstable__FluidDatePickerInput",
+        "unstable__FluidDatePickerSkeleton",
         "unstable__FluidDropdown",
         "unstable__FluidDropdownSkeleton",
         "unstable__FluidMultiSelect",

packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+import { Calendar } from '@carbon/icons-react';
+
+function FluidDatePickerSkeleton({
+  className,
+  datePickerType = 'single',
+  ...other
+}) {
+  const prefix = usePrefix();
+
+  const classNames = classnames(
+    className,
+    `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`,
+    {
+      [`${prefix}--date-picker--fluid__skeleton--range`]:
+        datePickerType === 'range',
+    }
+  );
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <div className={classNames} {...other}>
+        <div className={`${prefix}--date-picker--fluid__skeleton--container`}>
+          <span className={`${prefix}--label ${prefix}--skeleton`} />
+          <div className={`${prefix}--skeleton ${prefix}--text-input`} />
+          {datePickerType !== 'simple' && (
+            <Calendar
+              className={`${prefix}--date-picker__icon`}
+              role="img"
+              aria-hidden="true"></Calendar>
+          )}
+        </div>
+        {datePickerType === 'range' && (
+          <div className={`${prefix}--date-picker--fluid__skeleton--container`}>
+            <span className={`${prefix}--label ${prefix}--skeleton`} />
+            <div className={`${prefix}--skeleton ${prefix}--text-input`} />
+            <Calendar
+              className={`${prefix}--date-picker__icon`}
+              role="img"
+              aria-hidden="true"></Calendar>
+          </div>
+        )}
+      </div>
+    </FormContext.Provider>
+  );
+}
+
+FluidDatePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify which variant of the DatePicker the skeleton should mimic
+   */
+  datePickerType: PropTypes.oneOf(['simple', 'single', 'range']),
+};
+
+export default FluidDatePickerSkeleton;

packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js

@@ -8,6 +8,7 @@
 import React from 'react';
 import FluidDatePicker from '../FluidDatePicker';
 import FluidDatePickerInput from '../FluidDatePickerInput';
+import FluidDatePickerSkeleton from './FluidDatePicker.Skeleton';
 import {
   ToggletipLabel,
   Toggletip,
@@ -81,6 +82,33 @@ export const RangeWithCalendar = () => {
   );
 };
 
+export const Skeleton = () => (
+  <div style={{ width: '300px' }}>
+    <FluidDatePickerSkeleton
+      datePickerType="simple"
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-1"
+    />
+    <br />
+    <br />
+    <FluidDatePickerSkeleton
+      datePickerType="single"
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-1"
+    />
+    <br />
+    <br />
+    <FluidDatePickerSkeleton
+      datePickerType="range"
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-1"
+    />
+  </div>
+);
+
 export const Playground = (args) => {
   const { invalid, invalidText, warn, warnText, disabled } = args;
   return (
@@ -181,11 +209,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  value: {
-    table: {
-      disable: true,
-    },
-  },
   disabled: {
     control: { type: 'boolean' },
     table: {

packages/react/src/components/FluidDatePicker/index.js

@@ -7,3 +7,5 @@
 
 export default from './FluidDatePicker';
 export FluidDatePicker from './FluidDatePicker';
+
+export { default as FluidDatePickerSkeleton } from './FluidDatePicker.Skeleton';

packages/react/src/index.js

@@ -216,7 +216,10 @@ export {
   FluidComboBox as unstable__FluidComboBox,
   FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton,
 } from './components/FluidComboBox';
-export { FluidDatePicker as unstable__FluidDatePicker } from './components/FluidDatePicker';
+export {
+  FluidDatePicker as unstable__FluidDatePicker,
+  FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton,
+} from './components/FluidDatePicker';
 export { FluidDatePickerInput as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput';
 export {
   FluidDropdown as unstable__FluidDropdown,

packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -277,4 +277,65 @@
     + .#{$prefix}--date-picker__icon {
     top: rem(80px);
   }
+
+  // Skeleton
+  .#{$prefix}--date-picker--fluid__skeleton {
+    height: rem(64px);
+    border-bottom: 1px solid $skeleton-element;
+    background: $skeleton-background;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--container {
+    position: relative;
+    width: 100%;
+    height: rem(64px);
+    padding: rem(13px) rem(40px) rem(13px) $spacing-05;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton {
+    height: 1rem;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label {
+    margin-bottom: rem(4px);
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input {
+    width: 80%;
+    height: rem(18px);
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--container
+    .#{$prefix}--date-picker__icon {
+    top: auto;
+    bottom: rem(2px);
+  }
+
+  // Range skeleton
+  .#{$prefix}--date-picker--fluid__skeleton--range {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range
+    .#{$prefix}--date-picker--fluid__skeleton--container {
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range
+    .#{$prefix}--date-picker--fluid__skeleton--container:first-of-type {
+    border-right: 1px solid $skeleton-element;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--text-input {
+    width: 100%;
+  }
+
+  .#{$prefix}--date-picker--fluid__skeleton--range
+    .#{$prefix}--date-picker--fluid__skeleton--container
+    .#{$prefix}--date-picker__icon {
+    bottom: rem(5px);
+  }
 }