From c7a665c79901dbac615fa968413f1d532d8e7544 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Wed, 18 Dec 2024 12:22:34 +0530 Subject: [PATCH 1/4] chore(createtearsheet): rename slug to decorator --- .../CreateTearsheet.docs-page.js | 2 +- .../CreateTearsheet.stories.jsx | 6 +- .../CreateTearsheet/CreateTearsheet.tsx | 39 +++++--- .../preview-components/MultiStepTearsheet.js | 6 +- .../preview-components/MultiStepWithIntro.js | 6 +- .../MultiStepWithStepInErrorState.js | 6 +- .../CreateTearsheetNarrow.stories.jsx | 17 +++- .../src/global/js/story-parts/decorator.jsx | 98 +++++++++++++++++++ .../src/global/js/story-parts/slug.jsx | 52 ---------- 9 files changed, 155 insertions(+), 77 deletions(-) create mode 100644 packages/ibm-products/src/global/js/story-parts/decorator.jsx delete mode 100644 packages/ibm-products/src/global/js/story-parts/slug.jsx diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js index 41c960bf56..cf175b2b2e 100644 --- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js +++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js @@ -149,7 +149,7 @@ sections, you can utilize the below included class names. { title: 'With AI Label', description: - 'An AI Label is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level. A Carbon AI Label can be provided to the CreateTearsheet component by including an `slug` property on it and providing the carbon AILabel component as its own custom component. Please note that the `slug` and `aiLabel` attributes are being deprecated and will soon be replaced by `decorator` to align with the Carbon.', + 'An AI Label is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level. A Carbon AI Label can be provided to the CreateTearsheet component by including a `decorator` or `slug` property on it and providing the carbon AILabel component as its own custom component. Please note that the `slug` attribute is being deprecated and will soon be replaced by `decorator` to align with the Carbon.
The `decorator` is versatile and can also be used to render other components.', source: { language: 'html', code: ` diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.stories.jsx b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.stories.jsx index e43304154f..896962555a 100644 --- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.stories.jsx +++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.stories.jsx @@ -5,7 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -import { slugArgTypes } from '../../global/js/story-parts/slug'; +import { + decoratorArgTypes, + slugArgTypes, +} from '../../global/js/story-parts/decorator'; import styles from './_storybook-styles.scss?inline'; import { CreateTearsheet } from './CreateTearsheet'; import DocsPage from './CreateTearsheet.docs-page'; @@ -26,6 +29,7 @@ export default { open: { control: { disable: true } }, children: { control: { disable: true } }, ...slugArgTypes(), + ...decoratorArgTypes(), }, parameters: { styles, diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx index 78cf0d3a3c..6c8f90876c 100644 --- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx +++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx @@ -24,6 +24,7 @@ import { useResetCreateComponent, useValidCreateStepCount, } from '../../global/js/hooks'; +import { deprecateProp } from '../../global/js/utils/props-helper'; import { CreateInfluencer } from '../CreateInfluencer'; import { Form } from '@carbon/react'; @@ -87,6 +88,11 @@ export interface CreateTearsheetProps extends PropsWithChildren { */ experimentalSecondarySubmitText?: string; + /** + * Optional prop that allows you to pass any component. + */ + decorator?: ReactNode; + /** * A description of the flow, displayed in the header area of the tearsheet. */ @@ -139,11 +145,6 @@ export interface CreateTearsheetProps extends PropsWithChildren { */ open?: boolean; - /** - * **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component - */ - slug?: ReactNode; - /** * The submit button text */ @@ -162,6 +163,12 @@ export interface CreateTearsheetProps extends PropsWithChildren { * to allow an action bar navigation or breadcrumbs to also show through. */ verticalPosition?: 'normal' | 'lower'; + + // Deprecated props + /** + * @deprecated Property replaced by `decorator` + */ + slug?: ReactNode; } interface Step { @@ -190,7 +197,8 @@ export let CreateTearsheet = forwardRef( onRequestSubmit, open, firstFocusElement, - slug, + slug: deprecated_slug, + decorator, submitButtonText, title, verticalPosition = 'normal', @@ -305,7 +313,7 @@ export let CreateTearsheet = forwardRef( onClose, open, size: 'wide', - slug, + decorator: decorator || deprecated_slug, title, verticalPosition, closeIconDescription: '', @@ -346,6 +354,12 @@ CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName); // is used in preference to relying on function.name. CreateTearsheet.displayName = componentName; +export const deprecatedProps = { + /** + * @deprecated Property replaced by `decorator` + */ + slug: deprecateProp(PropTypes.node, 'Property replaced by `decorator`'), +}; // Note that the descriptions here should be kept in sync with those for the // corresponding props for TearsheetNarrow and TearsheetShell components. CreateTearsheet.propTypes = { @@ -369,6 +383,11 @@ CreateTearsheet.propTypes = { */ className: PropTypes.string, + /** + * Optional prop that allows you to pass any component. + */ + decorator: PropTypes.node, + /** * A description of the flow, displayed in the header area of the tearsheet. */ @@ -426,11 +445,6 @@ CreateTearsheet.propTypes = { */ open: PropTypes.bool, - /** - * **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component - */ - slug: PropTypes.node, - /** * The submit button text */ @@ -449,4 +463,5 @@ CreateTearsheet.propTypes = { * to allow an action bar navigation or breadcrumbs to also show through. */ verticalPosition: PropTypes.oneOf(['normal', 'lower']), + ...deprecatedProps, }; diff --git a/packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepTearsheet.js b/packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepTearsheet.js index 6a0bac2f57..c1dddf0c26 100644 --- a/packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +++ b/packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepTearsheet.js @@ -24,7 +24,7 @@ import cx from 'classnames'; import { pkg } from '../../../settings'; import { CreateTearsheet } from '../CreateTearsheet'; import { CreateTearsheetStep } from '../CreateTearsheetStep'; -import { SlugSample } from '../../../global/js/story-parts/slug'; +import { sampleDecorator } from '../../../global/js/story-parts/decorator'; const blockClass = `${pkg.prefix}--tearsheet-create-multi-step`; @@ -56,6 +56,7 @@ export const MultiStepTearsheet = ({ label, nextButtonText, slug, + decorator, submitButtonText, title, ...rest @@ -115,7 +116,8 @@ export const MultiStepTearsheet = ({ }) } firstFocusElement={firstFocusElement} - slug={slug && SlugSample()} + slug={slug && sampleDecorator(slug)} + decorator={decorator && sampleDecorator(decorator)} {...rest} > { @@ -92,7 +93,8 @@ export const MultiStepWithIntro = ({ }, simulatedDelay); }) } - slug={slug && SlugSample()} + slug={slug && sampleDecorator(slug)} + decorator={decorator && sampleDecorator(decorator)} > { @@ -72,7 +73,8 @@ export const MultiStepWithStepInErrorState = ({ }, simulatedDelay); }) } - slug={slug && SlugSample()} + slug={slug && sampleDecorator(slug)} + decorator={decorator && sampleDecorator(decorator)} > { +const Template = ({ slug, decorator, ...args }) => { const [open, setOpen] = useState(false); const [topicName, setTopicName] = useState(''); const [partitionCount, setPartitionCount] = useState(1); @@ -80,7 +85,8 @@ const Template = ({ slug, ...args }) => { onRequestClose={() => setOpen(false)} onRequestSubmit={action('onRequestSubmit action called')} disableSubmit={!topicName || numberInputsInvalid} - slug={slug && SlugSample()} + slug={slug && sampleDecorator(slug)} + decorator={decorator && sampleDecorator(decorator)} {...args} > { ); }; -const WithValidationTemplate = ({ slug, ...args }) => { +const WithValidationTemplate = ({ slug, decorator, ...args }) => { const [open, setOpen] = useState(false); const [topicName, setTopicName] = useState(''); const [partitionCount, setPartitionCount] = useState(1); @@ -187,7 +193,8 @@ const WithValidationTemplate = ({ slug, ...args }) => { }} onRequestSubmit={action('onRequestSubmit action called')} disableSubmit={!topicName || numberInputsInvalid} - slug={slug && SlugSample()} + slug={slug && sampleDecorator(slug)} + decorator={decorator && sampleDecorator(decorator)} {...args} > { + switch (decorator) { + case 1: + return ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ This is not really Lorem Ipsum but the spell checker did not + like the previous text with it's non-words which is why + this unwieldy sentence, should one choose to call it that, here. +

+
+

Model type

+

Foundation model

+
+ + + ); + case 2: + return ( + + + + + +

Custom content here

+ + + ); + default: + return; + } +}; + +export const decoratorArgTypes = ({ + _default = 0, + withHollow = false, +} = {}) => { + const decorator = { + control: { + type: 'select', + labels: { + 0: 'No AI Label', + 1: 'with AI Label', + 2: 'With non AI Label component', + }, + default: _default, + }, + options: [0, 1, 2], + }; + + if (withHollow) { + decorator.control.labels[3] = 'with hollow AI Label (boolean)'; + decorator.options.push(3); + } + return { decorator }; +}; + +export const slugArgTypes = ({ _default = 0, withHollow = false } = {}) => { + const slug = { + control: { + type: 'select', + labels: { + 0: 'No AI slug', + 1: 'with AI Slug', + }, + default: _default, + }, + options: [0, 1], + }; + + if (withHollow) { + slug.control.labels[2] = 'with hollow AI Slug (boolean)'; + slug.options.push(2); + } + return { slug }; +}; diff --git a/packages/ibm-products/src/global/js/story-parts/slug.jsx b/packages/ibm-products/src/global/js/story-parts/slug.jsx deleted file mode 100644 index c97b3f3129..0000000000 --- a/packages/ibm-products/src/global/js/story-parts/slug.jsx +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Copyright IBM Corp. 2024, 2024 - * - * 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 { - unstable__Slug as Slug, - unstable__SlugContent as SlugContent, -} from '@carbon/react'; - -export const SlugSample = (props) => ( - - -
-

AI Explained

-

84%

-

Confidence score

-

- This is not really Lorem Ipsum but the spell checker did not like the - previous text with it's non-words which is why this unwieldy - sentence, should one choose to call it that, here. -

-
-

Model type

-

Foundation model

-
- - -); - -export const slugArgTypes = ({ _default = 0, withHollow = false } = {}) => { - const slug = { - control: { - type: 'select', - labels: { - 0: 'No AI slug', - 1: 'with AI Slug', - }, - default: _default, - }, - options: [0, 1], - }; - - if (withHollow) { - slug.control.labels[2] = 'with hollow AI Slug (boolean)'; - slug.options.push(2); - } - return { slug }; -}; From 2621ee3bf29bb773f54e45b03085b2af5c742c7b Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Wed, 18 Dec 2024 12:24:37 +0530 Subject: [PATCH 2/4] feat(createtearsheet): update doc --- .../src/components/CreateTearsheet/CreateTearsheet.docs-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js index cf175b2b2e..29e712042a 100644 --- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js +++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.docs-page.js @@ -155,7 +155,7 @@ sections, you can utilize the below included class names. code: ` Date: Wed, 18 Dec 2024 12:34:23 +0530 Subject: [PATCH 3/4] fix(createTearsheet): slug file restore --- .../src/global/js/story-parts/slug.jsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 packages/ibm-products/src/global/js/story-parts/slug.jsx diff --git a/packages/ibm-products/src/global/js/story-parts/slug.jsx b/packages/ibm-products/src/global/js/story-parts/slug.jsx new file mode 100644 index 0000000000..c97b3f3129 --- /dev/null +++ b/packages/ibm-products/src/global/js/story-parts/slug.jsx @@ -0,0 +1,52 @@ +/** + * Copyright IBM Corp. 2024, 2024 + * + * 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 { + unstable__Slug as Slug, + unstable__SlugContent as SlugContent, +} from '@carbon/react'; + +export const SlugSample = (props) => ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ This is not really Lorem Ipsum but the spell checker did not like the + previous text with it's non-words which is why this unwieldy + sentence, should one choose to call it that, here. +

+
+

Model type

+

Foundation model

+
+ + +); + +export const slugArgTypes = ({ _default = 0, withHollow = false } = {}) => { + const slug = { + control: { + type: 'select', + labels: { + 0: 'No AI slug', + 1: 'with AI Slug', + }, + default: _default, + }, + options: [0, 1], + }; + + if (withHollow) { + slug.control.labels[2] = 'with hollow AI Slug (boolean)'; + slug.options.push(2); + } + return { slug }; +}; From 4ff8e459e9ab86ee2bab7272b7acf0eb651105d7 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 19 Dec 2024 12:26:19 +0530 Subject: [PATCH 4/4] fix(createtearsheet): remove unnecessary export for deprecatedProps --- .../src/components/CreateTearsheet/CreateTearsheet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx index 6c8f90876c..1ce71f80ea 100644 --- a/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx +++ b/packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx @@ -354,7 +354,7 @@ CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName); // is used in preference to relying on function.name. CreateTearsheet.displayName = componentName; -export const deprecatedProps = { +const deprecatedProps = { /** * @deprecated Property replaced by `decorator` */