diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js new file mode 100644 index 000000000000..558358d080c1 --- /dev/null +++ b/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js @@ -0,0 +1,67 @@ +/** + * Copyright IBM Corp. 2022 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const { expect, test } = require('@playwright/test'); +const { themes } = require('../../test-utils/env'); +const { snapshotStory, visitStory } = require('../../test-utils/storybook'); + +test.describe('FluidDatePicker', () => { + themes.forEach((theme) => { + test.describe(theme, () => { + test('fluid date picker (range) @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--range-with-calendar', + theme, + }); + }); + + test('fluid date picker (single) @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--single', + theme, + }); + }); + + test('fluid date picker (simple) @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--simple', + theme, + }); + }); + }); + }); + + test('accessibility-checker @avt', async ({ page }) => { + await visitStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--range-with-calendar', + globals: { + theme: 'white', + }, + }); + await visitStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--single', + globals: { + theme: 'white', + }, + }); + await visitStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--simple', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidDatePicker'); + }); +}); diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json index 5874dd497917..a8851632cd96 100644 --- a/examples/codesandbox-styles/package.json +++ b/examples/codesandbox-styles/package.json @@ -1,7 +1,7 @@ { "name": "codesandbox-styles", "private": true, - "version": "0.20.0-rc.1", + "version": "0.20.0-rc.2", "scripts": { "develop": "vite" }, @@ -9,7 +9,7 @@ "vite": "^2.8.0" }, "dependencies": { - "@carbon/styles": "^1.17.0-rc.1", + "@carbon/styles": "^1.17.0-rc.2", "sass": "^1.51.0" } } diff --git a/examples/codesandbox-with-sass-compilation/package.json b/examples/codesandbox-with-sass-compilation/package.json index b3ad27d6bfa7..83c14d76cdd9 100644 --- a/examples/codesandbox-with-sass-compilation/package.json +++ b/examples/codesandbox-with-sass-compilation/package.json @@ -1,9 +1,9 @@ { "name": "codesandbox-with-sass-compilation", - "version": "0.18.0-rc.1", + "version": "0.18.0-rc.2", "private": true, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index 507f322f9d44..90da411f7d41 100644 --- a/examples/codesandbox/package.json +++ b/examples/codesandbox/package.json @@ -1,9 +1,9 @@ { "name": "codesandbox", - "version": "0.18.0-rc.1", + "version": "0.18.0-rc.2", "private": true, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json index a61a1db719a8..7e54c4f74e58 100644 --- a/examples/custom-theme/package.json +++ b/examples/custom-theme/package.json @@ -1,14 +1,14 @@ { "name": "custom-theme", "private": true, - "version": "0.15.0-rc.1", + "version": "0.15.0-rc.2", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/examples/incremental-migration/package.json b/examples/incremental-migration/package.json index ed67f67e2a59..c5f4107e8dff 100644 --- a/examples/incremental-migration/package.json +++ b/examples/incremental-migration/package.json @@ -1,7 +1,7 @@ { "name": "incremental-migration", "private": true, - "version": "0.17.0-rc.1", + "version": "0.17.0-rc.2", "scripts": { "build": "next build", "dev": "next dev", @@ -13,7 +13,7 @@ }, "dependencies": { "@carbon/icons-react": "^10.49.0", - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "carbon-components": "^10.57.0", "carbon-components-react": "^7.57.0", "carbon-icons": "^7.0.7", diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json index 00efffa95cc4..931367bc7ea5 100644 --- a/examples/light-dark-mode/package.json +++ b/examples/light-dark-mode/package.json @@ -1,7 +1,7 @@ { "name": "examples-light-dark", "private": true, - "version": "0.15.0-rc.1", + "version": "0.15.0-rc.2", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0" diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 53f3f0739a20..90f03bf41296 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,7 +1,7 @@ { "name": "examples-nextjs", "private": true, - "version": "0.17.0-rc.1", + "version": "0.17.0-rc.2", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0" diff --git a/examples/vite/package.json b/examples/vite/package.json index 55fd1ef5ef5f..2812cec74d3f 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,14 +1,14 @@ { "name": "vite", "private": true, - "version": "0.15.0-rc.1", + "version": "0.15.0-rc.2", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", "react": "^17.0.0", "react-dom": "^17.0.0" }, diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json index d00113a6dcd6..75c563fec1c6 100644 --- a/packages/carbon-components-react/package.json +++ b/packages/carbon-components-react/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components-react", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "8.17.0-rc.1", + "version": "8.17.0-rc.2", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -39,8 +39,8 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/react": "^1.17.0-rc.1", - "@carbon/styles": "^1.17.0-rc.1", + "@carbon/react": "^1.17.0-rc.2", + "@carbon/styles": "^1.17.0-rc.2", "@carbon/telemetry": "0.1.0" }, "devDependencies": { diff --git a/packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss new file mode 100644 index 000000000000..48feea2e339c --- /dev/null +++ b/packages/carbon-components-react/scss/components/fluid-date-picker/_fluid-date-picker.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 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. +// + +@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker'; diff --git a/packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss b/packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss new file mode 100644 index 000000000000..3f06534772d3 --- /dev/null +++ b/packages/carbon-components-react/scss/components/fluid-date-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 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. +// + +@forward '@carbon/styles/scss/components/fluid-date-picker'; diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json index 72ff93c7330f..c59d4209401e 100644 --- a/packages/carbon-components/package.json +++ b/packages/carbon-components/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "11.17.0-rc.1", + "version": "11.17.0-rc.2", "license": "Apache-2.0", "repository": { "type": "git", @@ -40,7 +40,7 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/styles": "^1.17.0-rc.1", + "@carbon/styles": "^1.17.0-rc.2", "@carbon/telemetry": "0.1.0" }, "devDependencies": { diff --git a/packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss new file mode 100644 index 000000000000..64deceede606 --- /dev/null +++ b/packages/carbon-components/scss/components/fluid-date-picker/_fluid-date-picker.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 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. +// + +@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker'; diff --git a/packages/carbon-components/scss/components/fluid-date-picker/_index.scss b/packages/carbon-components/scss/components/fluid-date-picker/_index.scss new file mode 100644 index 000000000000..489faea12362 --- /dev/null +++ b/packages/carbon-components/scss/components/fluid-date-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 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. +// + +@forward '@carbon/styles/scss/components/fluid-date-picker'; diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 4b5d8a477a4e..f30ef4876bdc 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2367,6 +2367,12 @@ Map { "inline": Object { "type": "bool", }, + "invalid": Object { + "type": "bool", + }, + "invalidText": Object { + "type": "node", + }, "light": [Function], "locale": Object { "args": Array [ @@ -2501,6 +2507,12 @@ Map { ], "type": "oneOfType", }, + "warn": Object { + "type": "bool", + }, + "warnText": Object { + "type": "node", + }, }, "render": [Function], }, @@ -7639,7 +7651,6 @@ Map { "TextArea" => Object { "$$typeof": Symbol(react.forward_ref), "defaultProps": Object { - "cols": 50, "disabled": false, "enableCounter": false, "helperText": "", @@ -9403,6 +9414,34 @@ Map { }, }, }, + "unstable__FluidDatePicker" => Object { + "$$typeof": Symbol(react.forward_ref), + "propTypes": Object { + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "invalid": Object { + "type": "bool", + }, + "invalidText": Object { + "type": "node", + }, + "warn": Object { + "type": "bool", + }, + "warnText": Object { + "type": "node", + }, + }, + "render": [Function], + }, + "unstable__FluidDatePickerInput" => Object { + "$$typeof": Symbol(react.forward_ref), + "render": [Function], + }, "unstable__FluidDropdown" => Object { "$$typeof": Symbol(react.forward_ref), "propTypes": Object { diff --git a/packages/react/package.json b/packages/react/package.json index 977629c998c4..26bf20a18619 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react", "description": "React components for the Carbon Design System", - "version": "1.17.0-rc.1", + "version": "1.17.0-rc.2", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -46,7 +46,7 @@ "@carbon/feature-flags": "^0.9.0", "@carbon/icons-react": "^11.10.0", "@carbon/layout": "^11.7.0", - "@carbon/styles": "^1.17.0-rc.1", + "@carbon/styles": "^1.17.0-rc.2", "@carbon/telemetry": "0.1.0", "classnames": "2.3.2", "copy-to-clipboard": "^3.3.1", diff --git a/packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss new file mode 100644 index 000000000000..a4a1b765aa35 --- /dev/null +++ b/packages/react/scss/components/fluid-date-picker/_fluid-date-picker.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 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. +// + +@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker'; diff --git a/packages/react/scss/components/fluid-date-picker/_index.scss b/packages/react/scss/components/fluid-date-picker/_index.scss new file mode 100644 index 000000000000..0659b6549a33 --- /dev/null +++ b/packages/react/scss/components/fluid-date-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 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. +// + +@forward '@carbon/styles/scss/components/fluid-date-picker'; diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index 10ef4678fb5f..d89bf1a93ef0 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -231,6 +231,8 @@ describe('Carbon Components React', () => { "unstable_TextDirection", "unstable__FluidComboBox", "unstable__FluidComboBoxSkeleton", + "unstable__FluidDatePicker", + "unstable__FluidDatePickerInput", "unstable__FluidDropdown", "unstable__FluidDropdownSkeleton", "unstable__FluidMultiSelect", diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js index 88b03ea95eb9..485d38b2e9bf 100644 --- a/packages/react/src/components/DatePicker/DatePicker.js +++ b/packages/react/src/components/DatePicker/DatePicker.js @@ -6,7 +6,7 @@ */ import PropTypes from 'prop-types'; -import React, { useEffect, useRef } from 'react'; +import React, { useContext, useEffect, useRef } from 'react'; import cx from 'classnames'; import flatpickr from 'flatpickr'; import l10n from 'flatpickr/dist/l10n/index'; @@ -18,6 +18,8 @@ import deprecate from '../../prop-types/deprecate'; import { match, keys } from '../../internal/keyboard'; import { usePrefix } from '../../internal/usePrefix'; import { useSavedCallback } from '../../internal/useSavedCallback'; +import { FormContext } from '../FluidForm'; +import { WarningFilled, WarningAltFilled } from '@carbon/icons-react'; // Weekdays shorthand for english locale l10n.en.weekdays.shorthand.forEach((_day, index) => { @@ -187,6 +189,10 @@ const DatePicker = React.forwardRef(function DatePicker( disable, enable, inline, + invalid, + invalidText, + warn, + warnText, light = false, locale = 'en', maxDate, @@ -201,6 +207,7 @@ const DatePicker = React.forwardRef(function DatePicker( ref ) { const prefix = usePrefix(); + const { isFluid } = useContext(FormContext); const startInputField = useRef(null); const endInputField = useRef(null); const calendarRef = useRef(null); @@ -467,9 +474,37 @@ const DatePicker = React.forwardRef(function DatePicker( } }, [value, prefix]); + let fluidError; + if (isFluid) { + if (invalid) { + fluidError = ( + <> + +
+
{invalidText}
+ + ); + } + + if (warn && !invalid) { + fluidError = ( + <> + +
+
{warnText}
+ + ); + } + } + return (
{childrenWithProps}
+ {fluidError}
); }); @@ -530,6 +565,16 @@ DatePicker.propTypes = { */ inline: PropTypes.bool, + /** + * Specify whether or not the control is invalid (Fluid only) + */ + invalid: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in error state (Fluid Only) + */ + invalidText: PropTypes.node, + /** * `true` to use the light version. */ @@ -654,6 +699,16 @@ DatePicker.propTypes = { PropTypes.object, PropTypes.number, ]), + + /** + * Specify whether the control is currently in warning state (Fluid only) + */ + warn: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in warning state (Fluid only) + */ + warnText: PropTypes.node, }; export default DatePicker; diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js index dad8c5c2ce2d..5f5aad11972b 100644 --- a/packages/react/src/components/DatePickerInput/DatePickerInput.js +++ b/packages/react/src/components/DatePickerInput/DatePickerInput.js @@ -8,8 +8,9 @@ import { Calendar, WarningFilled, WarningAltFilled } from '@carbon/icons-react'; import cx from 'classnames'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, { useContext } from 'react'; import { usePrefix } from '../../internal/usePrefix'; +import { FormContext } from '../FluidForm'; const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) { const { @@ -32,6 +33,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) { ...rest } = props; const prefix = usePrefix(); + const { isFluid } = useContext(FormContext); const datePickerInputProps = { id, onChange: (event) => { @@ -62,9 +64,12 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) { const inputClasses = cx(`${prefix}--date-picker__input`, { [`${prefix}--date-picker__input--${size}`]: size, [`${prefix}--date-picker__input--invalid`]: invalid, + [`${prefix}--date-picker__input--warn`]: warn, }); const containerClasses = cx(`${prefix}--date-picker-container`, { [`${prefix}--date-picker--nolabel`]: !labelText, + [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid, + [`${prefix}--date-picker--fluid--warn`]: isFluid && warn, }); const input = invalid ? ( @@ -95,6 +100,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) { )}
{input} + {isFluid && }
{invalid && ( -
{invalidText}
+ <> + {isFluid &&
} +
{invalidText}
+ + )} + {warn && ( + <> + {isFluid &&
} +
{warnText}
+ )} - {warn &&
{warnText}
} {helperText &&
{helperText}
} ); @@ -211,9 +225,12 @@ DatePickerInput.propTypes = { function DatePickerIcon({ datePickerType, invalid, warn }) { const prefix = usePrefix(); + const { isFluid } = useContext(FormContext); if (datePickerType === 'simple' && !invalid && !warn) { - return null; + if (!isFluid) { + return null; + } } if (invalid) { diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.js new file mode 100644 index 000000000000..42d5794e3f88 --- /dev/null +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.js @@ -0,0 +1,74 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 DatePicker from '../DatePicker'; +import { usePrefix } from '../../internal/usePrefix'; +import { FormContext } from '../FluidForm/FormContext'; + +const FluidDatePicker = React.forwardRef(function FluidDatePicker( + { className, children, invalid, invalidText, warn, warnText, ...other }, + ref +) { + const prefix = usePrefix(); + const classNames = classnames(className, { + [`${prefix}--date-picker--fluid`]: true, + [`${prefix}--date-picker--fluid--invalid`]: invalid, + [`${prefix}--date-picker--fluid--warn`]: warn, + }); + + return ( + + + {children} + + + ); +}); + +FluidDatePicker.propTypes = { + /** + * The child node(s) + */ + children: PropTypes.node, + + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className: PropTypes.string, + + /** + * Specify whether or not the control is invalid + */ + invalid: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in error state + */ + invalidText: PropTypes.node, + + /** + * Specify whether the control is currently in warning state + */ + warn: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText: PropTypes.node, +}; + +export default FluidDatePicker; diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js new file mode 100644 index 000000000000..7bd23c0672c0 --- /dev/null +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js @@ -0,0 +1,229 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 React from 'react'; +import FluidDatePicker from '../FluidDatePicker'; +import FluidDatePickerInput from '../FluidDatePickerInput'; +import { + ToggletipLabel, + Toggletip, + ToggletipButton, + ToggletipContent, +} from '../Toggletip'; +import { Information } from '@carbon/icons-react'; + +export default { + title: 'Experimental/unstable__FluidDatePicker', + component: FluidDatePicker, +}; + +const ToggleTip = ( + <> + Label + + + + + +

Additional field information here.

+ + + +); + +export const Simple = () => ( +
+ + + +
+); + +export const Single = () => ( +
+ + + +
+); + +export const RangeWithCalendar = () => { + return ( +
+ + + + +
+ ); +}; + +export const Playground = (args) => { + const { invalid, invalidText, warn, warnText, disabled } = args; + return ( +
+ + + + +
+
+ + + +
+ ); +}; + +Playground.argTypes = { + appendTo: { + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + disable: { + table: { + disable: true, + }, + }, + enable: { + table: { + disable: true, + }, + }, + inline: { + table: { + disable: true, + }, + }, + light: { + table: { + disable: true, + }, + }, + locale: { + table: { + disable: true, + }, + }, + onChange: { + action: 'clicked', + table: { + disable: true, + }, + }, + onClose: { + action: 'clicked', + table: { + disable: true, + }, + }, + onOpen: { + action: 'clicked', + table: { + disable: true, + }, + }, + value: { + table: { + disable: true, + }, + }, + disabled: { + control: { type: 'boolean' }, + table: { + category: 'DatePickerInput', + }, + }, + invalid: { + control: { type: 'boolean' }, + table: { + category: 'DatePickerInput', + }, + }, + invalidText: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + defaultValue: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + }, + placeholder: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + }, + warn: { + control: { type: 'boolean' }, + table: { + category: 'DatePickerInput', + }, + }, + warnText: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + defaultValue: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + }, +}; diff --git a/packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js b/packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js new file mode 100644 index 000000000000..8e3d514b0cff --- /dev/null +++ b/packages/react/src/components/FluidDatePicker/__tests__/FluidDatePicker-test.js @@ -0,0 +1,65 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 React from 'react'; +import FluidDatePicker from '../FluidDatePicker'; +import FluidDatePickerInput from '../../FluidDatePickerInput'; +import { render, screen } from '@testing-library/react'; + +const prefix = 'cds'; + +describe('FluidDatePicker', () => { + describe('renders as expected - Component API', () => { + it('should add extra classes that are passed via className', () => { + render( + {}} + className="custom-class" + dateFormat="m/d/Y" + data-testid="datePicker-1"> + + + + ); + + expect(screen.getByTestId('datePicker-1')).toHaveClass('custom-class'); + }); + + it('should add fluid classes by default', () => { + render( + {}} + className="custom-class" + dateFormat="m/d/Y" + data-testid="datePicker-1"> + + + + ); + + expect(screen.getByTestId('datePicker-1')).toHaveClass( + `${prefix}--date-picker--fluid` + ); + }); + }); +}); diff --git a/packages/react/src/components/FluidDatePicker/index.js b/packages/react/src/components/FluidDatePicker/index.js new file mode 100644 index 000000000000..e035b5dcabb9 --- /dev/null +++ b/packages/react/src/components/FluidDatePicker/index.js @@ -0,0 +1,9 @@ +/** + * Copyright IBM Corp. 2022 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export default from './FluidDatePicker'; +export FluidDatePicker from './FluidDatePicker'; diff --git a/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js b/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js new file mode 100644 index 000000000000..35dabebc1189 --- /dev/null +++ b/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js @@ -0,0 +1,23 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 React from 'react'; +import DatePickerInput from '../DatePickerInput'; +import { FormContext } from '../FluidForm/FormContext'; + +const FluidDatePickerInput = React.forwardRef(function FluidDatePickerInput( + { ...other }, + ref +) { + return ( + + + + ); +}); + +export default FluidDatePickerInput; diff --git a/packages/react/src/components/FluidDatePickerInput/index.js b/packages/react/src/components/FluidDatePickerInput/index.js new file mode 100644 index 000000000000..5384e51e32d0 --- /dev/null +++ b/packages/react/src/components/FluidDatePickerInput/index.js @@ -0,0 +1,9 @@ +/** + * Copyright IBM Corp. 2022 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export default from './FluidDatePickerInput'; +export FluidDatePickerInput from './FluidDatePickerInput'; diff --git a/packages/react/src/components/FluidForm/FluidForm.stories.js b/packages/react/src/components/FluidForm/FluidForm.stories.js index 849632a11420..e882d9f49335 100644 --- a/packages/react/src/components/FluidForm/FluidForm.stories.js +++ b/packages/react/src/components/FluidForm/FluidForm.stories.js @@ -8,6 +8,11 @@ import React from 'react'; import FluidForm from '.'; +import FluidDatePicker from '../FluidDatePicker'; +import FluidDatePickerInput from '../FluidDatePickerInput'; +import FluidSelect from '../FluidSelect'; +import SelectItem from '../SelectItem'; +import SelectItemGroup from '../SelectItemGroup'; import FluidTextInput from '../FluidTextInput'; import FluidTextArea from '../FluidTextArea'; import ModalWrapper from '../ModalWrapper'; @@ -45,6 +50,39 @@ export default { export const Default = () => ( <> +
+ + + + + + +
{ }); it('should set cols as expected', () => { - expect(textarea().props().cols).toEqual(50); + expect(textarea().props().style).toEqual({ width: '100%' }); wrapper.setProps({ cols: 200 }); expect(textarea().props().cols).toEqual(200); }); diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js index 441a4a2a0a79..5fa92e064a7a 100644 --- a/packages/react/src/components/TextArea/TextArea.js +++ b/packages/react/src/components/TextArea/TextArea.js @@ -128,6 +128,13 @@ const TextArea = React.forwardRef(function TextArea( aria-invalid={invalid || null} aria-describedby={invalid ? errorId : null} disabled={other.disabled} + style={ + other.cols + ? {} + : { + width: `100%`, + } + } /> ); @@ -268,7 +275,6 @@ TextArea.defaultProps = { onClick: () => {}, placeholder: '', rows: 4, - cols: 50, invalid: false, invalidText: '', helperText: '', diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js index 5a89e26b4738..77f115e45bae 100644 --- a/packages/react/src/components/TextArea/TextArea.stories.js +++ b/packages/react/src/components/TextArea/TextArea.stories.js @@ -21,7 +21,6 @@ export const Default = () => (