Skip to content

Commit 5ee80eb

Browse files
tw15egantay1orjoneskodiakhq[bot]
authored
feat(FluidDatePicker): implement FluidDatePicker (#12247)
* 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 * fix(FluidDatePicker): always show range icon in fluid state * fix(FluidDatePicker): add invalid, warn icons to simple fluiddatepicker * feat(FluidDatePicker): add invalid state to DatePicker * test(FluidDatePicker): add e2e tests, update snapshots * chore(FluidDatePicker): fix avt test name * test(FluidDatePicker): add API tests * chore(FluidForm): add FluidDatePicker to FluidForm story, style fixes * chore(storybook): fix playground, remove test examples * test(e2e): update id * Update packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * Update packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * Update packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent c51ce37 commit 5ee80eb

File tree

26 files changed

+998
-6
lines changed

26 files changed

+998
-6
lines changed

‎e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright IBM Corp. 2022
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
const { expect, test } = require('@playwright/test');
11+
const { themes } = require('../../test-utils/env');
12+
const { snapshotStory, visitStory } = require('../../test-utils/storybook');
13+
14+
test.describe('FluidDatePicker', () => {
15+
themes.forEach((theme) => {
16+
test.describe(theme, () => {
17+
test('fluid date picker (range) @vrt', async ({ page }) => {
18+
await snapshotStory(page, {
19+
component: 'FluidDatePicker',
20+
id: 'experimental-unstable-fluiddatepicker--range-with-calendar',
21+
theme,
22+
});
23+
});
24+
25+
test('fluid date picker (single) @vrt', async ({ page }) => {
26+
await snapshotStory(page, {
27+
component: 'FluidDatePicker',
28+
id: 'experimental-unstable-fluiddatepicker--single',
29+
theme,
30+
});
31+
});
32+
33+
test('fluid date picker (simple) @vrt', async ({ page }) => {
34+
await snapshotStory(page, {
35+
component: 'FluidDatePicker',
36+
id: 'experimental-unstable-fluiddatepicker--simple',
37+
theme,
38+
});
39+
});
40+
});
41+
});
42+
43+
test('accessibility-checker @avt', async ({ page }) => {
44+
await visitStory(page, {
45+
component: 'FluidDatePicker',
46+
id: 'experimental-unstable-fluiddatepicker--range-with-calendar',
47+
globals: {
48+
theme: 'white',
49+
},
50+
});
51+
await visitStory(page, {
52+
component: 'FluidDatePicker',
53+
id: 'experimental-unstable-fluiddatepicker--single',
54+
globals: {
55+
theme: 'white',
56+
},
57+
});
58+
await visitStory(page, {
59+
component: 'FluidDatePicker',
60+
id: 'experimental-unstable-fluiddatepicker--simple',
61+
globals: {
62+
theme: 'white',
63+
},
64+
});
65+
await expect(page).toHaveNoACViolations('FluidDatePicker');
66+
});
67+
});

‎packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components-react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2018
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';

‎packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components-react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2018
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/fluid-date-picker';

‎packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2018
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';

‎packages/carbon-components/scss/components/fluid-date-picker/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2018
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/fluid-date-picker';

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2367,6 +2367,12 @@ Map {
23672367
"inline": Object {
23682368
"type": "bool",
23692369
},
2370+
"invalid": Object {
2371+
"type": "bool",
2372+
},
2373+
"invalidText": Object {
2374+
"type": "node",
2375+
},
23702376
"light": [Function],
23712377
"locale": Object {
23722378
"args": Array [
@@ -2501,6 +2507,12 @@ Map {
25012507
],
25022508
"type": "oneOfType",
25032509
},
2510+
"warn": Object {
2511+
"type": "bool",
2512+
},
2513+
"warnText": Object {
2514+
"type": "node",
2515+
},
25042516
},
25052517
"render": [Function],
25062518
},
@@ -9399,6 +9411,34 @@ Map {
93999411
},
94009412
},
94019413
},
9414+
"unstable__FluidDatePicker" => Object {
9415+
"$$typeof": Symbol(react.forward_ref),
9416+
"propTypes": Object {
9417+
"children": Object {
9418+
"type": "node",
9419+
},
9420+
"className": Object {
9421+
"type": "string",
9422+
},
9423+
"invalid": Object {
9424+
"type": "bool",
9425+
},
9426+
"invalidText": Object {
9427+
"type": "node",
9428+
},
9429+
"warn": Object {
9430+
"type": "bool",
9431+
},
9432+
"warnText": Object {
9433+
"type": "node",
9434+
},
9435+
},
9436+
"render": [Function],
9437+
},
9438+
"unstable__FluidDatePickerInput" => Object {
9439+
"$$typeof": Symbol(react.forward_ref),
9440+
"render": [Function],
9441+
},
94029442
"unstable__FluidDropdown" => Object {
94039443
"$$typeof": Symbol(react.forward_ref),
94049444
"propTypes": Object {

‎packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by @carbon/react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2018
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';

‎packages/react/scss/components/fluid-date-picker/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by @carbon/react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2018
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/fluid-date-picker';

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,8 @@ describe('Carbon Components React', () => {
231231
"unstable_TextDirection",
232232
"unstable__FluidComboBox",
233233
"unstable__FluidComboBoxSkeleton",
234+
"unstable__FluidDatePicker",
235+
"unstable__FluidDatePickerInput",
234236
"unstable__FluidDropdown",
235237
"unstable__FluidDropdownSkeleton",
236238
"unstable__FluidMultiSelect",

‎packages/react/src/components/DatePicker/DatePicker.js‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import PropTypes from 'prop-types';
9-
import React, { useEffect, useRef } from 'react';
9+
import React, { useContext, useEffect, useRef } from 'react';
1010
import cx from 'classnames';
1111
import flatpickr from 'flatpickr';
1212
import l10n from 'flatpickr/dist/l10n/index';
@@ -18,6 +18,8 @@ import deprecate from '../../prop-types/deprecate';
1818
import { match, keys } from '../../internal/keyboard';
1919
import { usePrefix } from '../../internal/usePrefix';
2020
import { useSavedCallback } from '../../internal/useSavedCallback';
21+
import { FormContext } from '../FluidForm';
22+
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
2123

2224
// Weekdays shorthand for english locale
2325
l10n.en.weekdays.shorthand.forEach((_day, index) => {
@@ -187,6 +189,10 @@ const DatePicker = React.forwardRef(function DatePicker(
187189
disable,
188190
enable,
189191
inline,
192+
invalid,
193+
invalidText,
194+
warn,
195+
warnText,
190196
light = false,
191197
locale = 'en',
192198
maxDate,
@@ -201,6 +207,7 @@ const DatePicker = React.forwardRef(function DatePicker(
201207
ref
202208
) {
203209
const prefix = usePrefix();
210+
const { isFluid } = useContext(FormContext);
204211
const startInputField = useRef(null);
205212
const endInputField = useRef(null);
206213
const calendarRef = useRef(null);
@@ -467,9 +474,37 @@ const DatePicker = React.forwardRef(function DatePicker(
467474
}
468475
}, [value, prefix]);
469476

477+
let fluidError;
478+
if (isFluid) {
479+
if (invalid) {
480+
fluidError = (
481+
<>
482+
<WarningFilled
483+
className={`${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`}
484+
/>
485+
<hr className={`${prefix}--date-picker__divider`} />
486+
<div className={`${prefix}--form-requirement`}>{invalidText}</div>
487+
</>
488+
);
489+
}
490+
491+
if (warn && !invalid) {
492+
fluidError = (
493+
<>
494+
<WarningAltFilled
495+
className={`${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`}
496+
/>
497+
<hr className={`${prefix}--date-picker__divider`} />
498+
<div className={`${prefix}--form-requirement`}>{warnText}</div>
499+
</>
500+
);
501+
}
502+
}
503+
470504
return (
471505
<div className={wrapperClasses} ref={ref} {...rest}>
472506
<div className={datePickerClasses}>{childrenWithProps}</div>
507+
{fluidError}
473508
</div>
474509
);
475510
});
@@ -530,6 +565,16 @@ DatePicker.propTypes = {
530565
*/
531566
inline: PropTypes.bool,
532567

568+
/**
569+
* Specify whether or not the control is invalid (Fluid only)
570+
*/
571+
invalid: PropTypes.bool,
572+
573+
/**
574+
* Provide the text that is displayed when the control is in error state (Fluid Only)
575+
*/
576+
invalidText: PropTypes.node,
577+
533578
/**
534579
* `true` to use the light version.
535580
*/
@@ -654,6 +699,16 @@ DatePicker.propTypes = {
654699
PropTypes.object,
655700
PropTypes.number,
656701
]),
702+
703+
/**
704+
* Specify whether the control is currently in warning state (Fluid only)
705+
*/
706+
warn: PropTypes.bool,
707+
708+
/**
709+
* Provide the text that is displayed when the control is in warning state (Fluid only)
710+
*/
711+
warnText: PropTypes.node,
657712
};
658713

659714
export default DatePicker;

0 commit comments

Comments
 (0)