From 26831fe65a9306bb33e5e4646316b27e6cfefc77 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 15 Nov 2023 14:26:11 -0500 Subject: [PATCH 01/13] feat(Slug): Add `slug` prop to `TextInput`, `TextArea`, `NumberInput`, and `DatePicker`, add revert functionality to `Slug` (#15115) * feat(TextInput): support slug prop * fix(TextInput): add types for slug prop * refactor(Slug): remove old file, move demo to form story * docs(Storybook): update form story * feat(NumberInput): add slug to NumberInput * refactor(NumberInput): remove pseudo elements and use box-shadow * style(NumberInput): fix issue with z-index, add invalid styles * feat(DatePicker): add slug prop to DatePickerInput * feat(TextArea): add slug prop to TextArea * test(snapshot): update snapshots * fix(TextArea): remove console warning * style(Fluid): adjust styles for fluid inputs * docs(Storybook): fix ids * fix(Slug): adjust positioning, add storybook controls * fix(Storybook): add story styles to form example * fix(Slug): adjust positioning when invalid, warning state * style(Slug): adjust padding when slug is present * docs(Storybook): add examples with revert functionality * fix(NumberInput): fix type error * refactor(storybook): adjust stories * feat(Slug): add revertLabel prop * fix(Undo): replace undo, redo with coreect asset * fix(Slug): adjust revert positioning, remove margin * fix(NumberInput): don't set defaultValue if not provided, remove console * chore(files): add ai-gradient to react package * test(snapshot): update snapshots --- .../scss/utilities/_ai-gradient.scss | 9 + .../scss/utilities/_ai-gradient.scss | 9 + packages/icons/icons.yml | 6 - packages/icons/src/svg/16/redo.svg | 11 - packages/icons/src/svg/16/undo.svg | 11 - packages/icons/src/svg/20/redo.svg | 14 - packages/icons/src/svg/20/undo.svg | 14 - packages/icons/src/svg/24/redo.svg | 14 - packages/icons/src/svg/24/undo.svg | 11 - .../__snapshots__/PublicAPI-test.js.snap | 12 + .../react/scss/utilities/_ai-gradient.scss | 9 + .../DatePickerInput/DatePickerInput.tsx | 21 ++ .../FluidTextArea/FluidTextArea.stories.js | 2 +- .../react/src/components/Form/Form.stories.js | 274 +++++++++++++++++- .../react/src/components/Form/form-story.scss | 45 +++ .../components/NumberInput/NumberInput.tsx | 45 ++- packages/react/src/components/Slug/Slug.js | 136 --------- packages/react/src/components/Slug/index.js | 70 ++++- .../src/components/TextArea/TextArea.tsx | 102 ++++--- .../components/TextInput/TextInput.stories.js | 2 - .../src/components/TextInput/TextInput.tsx | 23 +- .../__snapshots__/styles-test.js.snap | 5 + packages/styles/files.js | 1 + .../components/date-picker/_date-picker.scss | 41 ++- .../fluid-date-picker/_fluid-date-picker.scss | 13 + .../_fluid-number-input.scss | 12 + .../fluid-text-area/_fluid-text-area.scss | 6 + .../fluid-text-input/_fluid-text-input.scss | 7 + .../number-input/_number-input.scss | 32 ++ .../styles/scss/components/slug/_slug.scss | 19 ++ .../scss/components/text-area/_text-area.scss | 38 ++- .../components/text-input/_text-input.scss | 25 ++ .../styles/scss/utilities/_ai-gradient.scss | 4 +- 33 files changed, 745 insertions(+), 298 deletions(-) create mode 100644 packages/carbon-components-react/scss/utilities/_ai-gradient.scss create mode 100644 packages/carbon-components/scss/utilities/_ai-gradient.scss delete mode 100755 packages/icons/src/svg/16/redo.svg delete mode 100755 packages/icons/src/svg/16/undo.svg delete mode 100755 packages/icons/src/svg/20/redo.svg delete mode 100755 packages/icons/src/svg/20/undo.svg delete mode 100644 packages/icons/src/svg/24/redo.svg delete mode 100644 packages/icons/src/svg/24/undo.svg create mode 100644 packages/react/scss/utilities/_ai-gradient.scss create mode 100644 packages/react/src/components/Form/form-story.scss delete mode 100644 packages/react/src/components/Slug/Slug.js diff --git a/packages/carbon-components-react/scss/utilities/_ai-gradient.scss b/packages/carbon-components-react/scss/utilities/_ai-gradient.scss new file mode 100644 index 000000000000..0ad5c4f89ee5 --- /dev/null +++ b/packages/carbon-components-react/scss/utilities/_ai-gradient.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// 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/utilities/ai-gradient'; diff --git a/packages/carbon-components/scss/utilities/_ai-gradient.scss b/packages/carbon-components/scss/utilities/_ai-gradient.scss new file mode 100644 index 000000000000..42b92483de5a --- /dev/null +++ b/packages/carbon-components/scss/utilities/_ai-gradient.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// 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/utilities/ai-gradient'; diff --git a/packages/icons/icons.yml b/packages/icons/icons.yml index d37be172e554..0549e3af659d 100644 --- a/packages/icons/icons.yml +++ b/packages/icons/icons.yml @@ -16551,9 +16551,6 @@ - revert - undo sizes: - - 16 - - 20 - - 24 - 32 - name: ref-evapotranspiration friendly_name: Ref evapotranspiration @@ -20940,9 +20937,6 @@ - revert - back sizes: - - 16 - - 20 - - 24 - 32 - name: ungroup-objects friendly_name: Ungroup objects diff --git a/packages/icons/src/svg/16/redo.svg b/packages/icons/src/svg/16/redo.svg deleted file mode 100755 index 5d3da118e0f9..000000000000 --- a/packages/icons/src/svg/16/redo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/packages/icons/src/svg/16/undo.svg b/packages/icons/src/svg/16/undo.svg deleted file mode 100755 index 4c2ca3bc72d1..000000000000 --- a/packages/icons/src/svg/16/undo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/packages/icons/src/svg/20/redo.svg b/packages/icons/src/svg/20/redo.svg deleted file mode 100755 index f8574179182c..000000000000 --- a/packages/icons/src/svg/20/redo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - diff --git a/packages/icons/src/svg/20/undo.svg b/packages/icons/src/svg/20/undo.svg deleted file mode 100755 index 86e94855026a..000000000000 --- a/packages/icons/src/svg/20/undo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - diff --git a/packages/icons/src/svg/24/redo.svg b/packages/icons/src/svg/24/redo.svg deleted file mode 100644 index cf5012852ecb..000000000000 --- a/packages/icons/src/svg/24/redo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - diff --git a/packages/icons/src/svg/24/undo.svg b/packages/icons/src/svg/24/undo.svg deleted file mode 100644 index 159a46789007..000000000000 --- a/packages/icons/src/svg/24/undo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 0ad9cb74e2f4..1ca356b34d0d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2720,6 +2720,9 @@ Map { ], "type": "oneOf", }, + "slug": Object { + "type": "node", + }, "type": Object { "type": "string", }, @@ -5472,6 +5475,9 @@ Map { ], "type": "oneOf", }, + "slug": Object { + "type": "node", + }, "step": Object { "type": "number", }, @@ -8086,6 +8092,9 @@ Map { "rows": Object { "type": "number", }, + "slug": Object { + "type": "node", + }, "value": Object { "args": Array [ Array [ @@ -8423,6 +8432,9 @@ Map { ], "type": "oneOf", }, + "slug": Object { + "type": "node", + }, "type": Object { "type": "string", }, diff --git a/packages/react/scss/utilities/_ai-gradient.scss b/packages/react/scss/utilities/_ai-gradient.scss new file mode 100644 index 000000000000..0c467c424a56 --- /dev/null +++ b/packages/react/scss/utilities/_ai-gradient.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// 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/utilities/ai-gradient'; diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx index 79362d76ee90..5bde18e75484 100644 --- a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx +++ b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx @@ -111,6 +111,11 @@ interface DatePickerInputProps */ size?: 'sm' | 'md' | 'lg'; + /** + * Provide a `Slug` component to be rendered inside the `DatePickerInput` component + */ + slug?: ReactNodeLike; + /** * Specify the type of the `` */ @@ -145,6 +150,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput( pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}', placeholder, size = 'md', + slug, type = 'text', warn, warnText, @@ -172,6 +178,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput( const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, { [`${prefix}--date-picker-input__wrapper--invalid`]: invalid, [`${prefix}--date-picker-input__wrapper--warn`]: warn, + [`${prefix}--date-picker-input__wrapper--slug`]: slug, }); const labelClasses = cx(`${prefix}--label`, { [`${prefix}--visually-hidden`]: hideLabel, @@ -209,6 +216,14 @@ const DatePickerInput = React.forwardRef(function DatePickerInput( } const input = ; + // Slug is always size `mini` + let normalizedSlug; + if (slug) { + normalizedSlug = React.cloneElement(slug as React.ReactElement, { + size: 'mini', + }); + } + return (
{labelText && ( @@ -219,6 +234,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
{input} + {normalizedSlug} {isFluid && } ` */ diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js index 0d9bd9ccd22e..845fb70889ae 100644 --- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js +++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js @@ -119,7 +119,7 @@ Playground.args = { disabled: false, enableCounter: false, labelText: 'Text Area label', - maxCount: '500', + maxCount: 500, warn: false, warnText: 'This is a warning message.', }; diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js index 13456e9f6aa0..9ec5195f91c8 100644 --- a/packages/react/src/components/Form/Form.stories.js +++ b/packages/react/src/components/Form/Form.stories.js @@ -5,11 +5,19 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, { useState, useRef } from 'react'; import Checkbox from '../Checkbox'; +import DatePicker from '../DatePicker'; +import DatePickerInput from '../DatePickerInput'; import Form from './Form'; import FormGroup from '../FormGroup'; import FileUploader from '../FileUploader'; +import FluidForm from '../FluidForm'; +import FluidNumberInput from '../FluidNumberInput'; +import FluidDatePicker from '../FluidDatePicker'; +import FluidDatePickerInput from '../FluidDatePickerInput'; +import FluidTextArea from '../FluidTextArea'; +import FluidTextInput from '../FluidTextInput'; import { NumberInput } from '../NumberInput'; import RadioButton from '../RadioButton'; import RadioButtonGroup from '../RadioButtonGroup'; @@ -20,7 +28,11 @@ import SelectItem from '../SelectItem'; import TextArea from '../TextArea'; import TextInput from '../TextInput'; import { Stack } from '../Stack'; +import { IconButton } from '../IconButton'; +import { View, FolderOpen, Folders } from '@carbon/icons-react'; +import { Slug, SlugContent, SlugActions } from '../Slug'; import mdx from './Form.mdx'; +import './form-story.scss'; const checkboxEvents = { className: 'some-class', @@ -108,6 +120,9 @@ const buttonEvents = { export default { title: 'Components/Form', component: Form, + subcomponents: { + Slug, + }, parameters: { docs: { page: mdx, @@ -220,3 +235,260 @@ export const Default = () => ( ); + +export const RevertTest = () => { + const textInputRef = useRef(); + const numberInputRef = useRef(); + const [isTextInputEdited, setIsTextInputEdited] = useState(false); + const [isNumberInputEdited, setIsNumberInputEdited] = useState(false); + const aiTextValue = 'Generated AI content'; + const aiNumberValue = 11; + + const handleRevertClick = (evt) => { + if (textInputRef.current.nextElementSibling.contains(evt.target)) { + textInputRef.current.value = aiTextValue; + textInputRef.current.focus(); + setIsTextInputEdited(false); + } + + if (numberInputRef.current.nextElementSibling.contains(evt.target)) { + numberInputRef.current.value = aiNumberValue; + numberInputRef.current.focus(); + setIsNumberInputEdited(false); + } + }; + + const handleChange = (evt, numberInputState) => { + if (textInputRef.current.contains(evt.target)) { + setIsTextInputEdited(true); + } + + if (numberInputRef.current.contains(evt.target) || numberInputState) { + setIsNumberInputEdited(true); + } + }; + + const textInputSlug = ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+ + + ); + + const numberInputSlug = ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+ + + ); + + return ( + +
+ + + + +
+ + ); +}; + +export const _AIForm = (args) => { + const { revertActive, ...rest } = args; + const slug = ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+ + + + + + + + + + + + + + + ); + + return ( + +
+ + + + + + +