From 7ac1fa0c34addfb12f476a47b59647ba0d33534d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 9 Nov 2022 17:49:11 -0500 Subject: [PATCH] feat(FluidDatePicker): add `FluidDatePickerSkeleton` variant (#12485) * feat(FluidDatePicker): scaffold out initial react files * feat(FluidDatePicker): scaffold out more files * style(FluidDatePicker): add more styles for FluidDatePicker * style(FluidDatePicker): add single invalid styles * style(FluidDatePicker): clean up invalid, warn states on all variants * chore(storybook): fix playground, remove test examples * feat(FluidDatePicker): add FluidDatePickerSkeleton variant Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../__snapshots__/PublicAPI-test.js.snap | 17 +++++ packages/react/src/__tests__/index-test.js | 1 + .../FluidDatePicker.Skeleton.js | 71 +++++++++++++++++++ .../FluidDatePicker.stories.js | 33 +++++++-- .../src/components/FluidDatePicker/index.js | 2 + packages/react/src/index.js | 5 +- .../fluid-date-picker/_fluid-date-picker.scss | 61 ++++++++++++++++ 7 files changed, 184 insertions(+), 6 deletions(-) create mode 100644 packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index f30ef4876bdc..aba68710915e 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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 { diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index d89bf1a93ef0..b9c972bbd041 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/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", diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js new file mode 100644 index 000000000000..6b3ace7c6629 --- /dev/null +++ b/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 ( + +
+
+ +
+ {datePickerType !== 'simple' && ( + + )} +
+ {datePickerType === 'range' && ( +
+ +
+ +
+ )} +
+ + ); +} + +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; diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js index 7bd23c0672c0..0022126ab5d0 100644 --- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js +++ b/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 = () => ( +
+ +
+
+ +
+
+ +
+); + 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: { diff --git a/packages/react/src/components/FluidDatePicker/index.js b/packages/react/src/components/FluidDatePicker/index.js index e035b5dcabb9..4b3107e9f0d0 100644 --- a/packages/react/src/components/FluidDatePicker/index.js +++ b/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'; diff --git a/packages/react/src/index.js b/packages/react/src/index.js index f2f10d9c4976..af64c6560312 100644 --- a/packages/react/src/index.js +++ b/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, diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss index 391abdbbbcac..98f375acf922 100644 --- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss +++ b/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); + } }