Skip to content

Commit

Permalink
chore(tearsheet): rename ailabel to decorator (#6576)
Browse files Browse the repository at this point in the history 
* chore(tearsheet): rename aiLabel to decorator

* fix(tearsheet): avt issue fix

* feat(tearsheet): update doc

* Update Tearsheet.docs-page.js

update doc

---------

Co-authored-by: elysia <[email protected]>
  • Loading branch information
@sangeethababu9223 @elycheea
sangeethababu9223 and elycheea authored Jan 2, 2025
1 parent cc8f1aa commit 38e8c8f
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 131 deletions.
2 changes: 1 addition & 1 deletion e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ test.describe('TearsheetNarrow @avt', () => {
await expect(page).toHaveNoACViolations(
'TearsheetNarrow @avt-all-header-items'
);
await expect(page.locator('.ai-label-container')).toBeInViewport();
await expect(page.locator('.decorator-container')).toBeInViewport();

// Selecting the first slug button
const slugButton1 = page
Expand Down
4 changes: 2 additions & 2 deletions packages/ibm-products/src/components/Tearsheet/Tearsheet.docs-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ const DocsPage = () => (
{
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 Tearsheet component by including an `aiLabel` property on it and providing the carbon AILabel component as its own custom component.',
'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 Tearsheet component by including an `decorator` property on it and providing the carbon AILabel component as its own custom component.<br/> The `decorator` is versatile and can also be used to render other components.',
source: {
language: 'html',
code: `
<Tearsheet
{...args}
aiLabel={
decorator={
// carbon AILabel component
<AILabel
className="ai-label-container"
Expand Down
117 changes: 71 additions & 46 deletions packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@

import React, { useRef, useState } from 'react';
import DocsPage from './Tearsheet.docs-page';

import { action } from '@storybook/addon-actions';

import { Information } from '@carbon/react/icons';
import { pkg } from '../../settings';

import {
Expand All @@ -26,6 +25,9 @@ import {
TextInput,
AILabel,
AILabelContent,
Toggletip,
ToggletipButton,
ToggletipContent,
} from '@carbon/react';

import { Tearsheet, deprecatedProps } from './Tearsheet';
Expand Down Expand Up @@ -109,18 +111,18 @@ export default {
navigation: { control: { disable: true } },
open: { control: { disable: true } },
portalTarget: { control: { disable: true } },
aiLabel: {
decorator: {
control: {
type: 'select',
labels: {
0: 'No AI Label',
1: 'with AI Label',
2: 'With non AI Label component',
},
default: 0,
},
description:
'Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.',
options: [0, 1],
description: 'Optional prop that allows you to pass any component.',
options: [0, 1, 2],
},
slug: {
control: {
Expand All @@ -131,7 +133,7 @@ export default {
},
default: 0,
},
description: 'Deprecated: Property replaced by "aiLabel"',
description: 'Deprecated: Property replaced by "decorator"',
options: [0, 1],
},
},
Expand Down Expand Up @@ -179,29 +181,47 @@ const mainContent = (

const title = 'Title of the tearsheet';

const sampleAILabel = (
<AILabel align="bottom-start" className="ai-label-container" size="xs">
<AILabelContent>
<div>
<p className="secondary">AI Explained</p>
<h1>84%</h1>
<p className="secondary bold">Confidence score</p>
<p className="secondary">
This is not really Lorem Ipsum but the spell checker did not like the
previous text with it&apos;s non-words which is why this unwieldy
sentence, should one choose to call it that, here.
</p>
<hr />
<p className="secondary">Model type</p>
<p className="bold">Foundation model</p>
</div>
</AILabelContent>
</AILabel>
);
const sampleDecorator = (decorator) => {
switch (decorator) {
case 1:
return (
<AILabel className="decorator-container" size="xs">
<AILabelContent>
<div>
<p className="secondary">AI Explained</p>
<h1>84%</h1>
<p className="secondary bold">Confidence score</p>
<p className="secondary">
This is not really Lorem Ipsum but the spell checker did not
like the previous text with it&apos;s non-words which is why
this unwieldy sentence, should one choose to call it that, here.
</p>
<hr />
<p className="secondary">Model type</p>
<p className="bold">Foundation model</p>
</div>
</AILabelContent>
</AILabel>
);
case 2:
return (
<Toggletip>
<ToggletipButton label="Additional information">
<Information />
</ToggletipButton>
<ToggletipContent>
<p>Custom content here</p>
</ToggletipContent>
</Toggletip>
);
default:
return;
}
};

// Template.
// eslint-disable-next-line react/prop-types
const Template = ({ actions, aiLabel, slug, ...args }) => {
const Template = ({ actions, decorator, slug, ...args }) => {
const [open, setOpen] = useState(false);

const wiredActions =
Expand Down Expand Up @@ -232,8 +252,8 @@ const Template = ({ actions, aiLabel, slug, ...args }) => {
actions={wiredActions}
open={open}
onClose={() => setOpen(false)}
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
>
{mainContent}
</Tearsheet>
Expand All @@ -253,7 +273,7 @@ const tabs = (
</div>
);

const TemplateWithNav = ({ actions, aiLabel, slug, ...args }) => {
const TemplateWithNav = ({ actions, decorator, slug, ...args }) => {
const [open, setOpen] = useState(false);

const wiredActions =
Expand Down Expand Up @@ -285,8 +305,8 @@ const TemplateWithNav = ({ actions, aiLabel, slug, ...args }) => {
actions={wiredActions}
open={open}
onClose={() => setOpen(false)}
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
>
<TabPanels>
<TabPanel>Tab 1</TabPanel>
Expand All @@ -301,7 +321,7 @@ const TemplateWithNav = ({ actions, aiLabel, slug, ...args }) => {
);
};

const ReturnFocusTemplate = ({ actions, aiLabel, slug, ...args }) => {
const ReturnFocusTemplate = ({ actions, decorator, slug, ...args }) => {
const [open, setOpen] = useState(false);
const buttonRef = useRef(undefined);

Expand Down Expand Up @@ -335,8 +355,8 @@ const ReturnFocusTemplate = ({ actions, aiLabel, slug, ...args }) => {
actions={wiredActions}
open={open}
onClose={() => setOpen(false)}
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
launcherButtonRef={buttonRef}
>
{mainContent}
Expand All @@ -346,7 +366,12 @@ const ReturnFocusTemplate = ({ actions, aiLabel, slug, ...args }) => {
);
};

const FirstElementDisabledTemplate = ({ actions, aiLabel, slug, ...args }) => {
const FirstElementDisabledTemplate = ({
actions,
decorator,
slug,
...args
}) => {
const [open, setOpen] = useState(false);
const wiredActions =
actions &&
Expand Down Expand Up @@ -375,8 +400,8 @@ const FirstElementDisabledTemplate = ({ actions, aiLabel, slug, ...args }) => {
actions={wiredActions}
open={open}
onClose={() => setOpen(false)}
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
>
<div className="tearsheet-stories__dummy-content-block">
<Form>
Expand Down Expand Up @@ -412,7 +437,7 @@ const FirstElementDisabledTemplate = ({ actions, aiLabel, slug, ...args }) => {
};

// eslint-disable-next-line react/prop-types
const StackedTemplate = ({ mixedSizes, actions, aiLabel, slug, ...args }) => {
const StackedTemplate = ({ mixedSizes, actions, decorator, slug, ...args }) => {
const [open1, setOpen1] = useState(false);
const [open2, setOpen2] = useState(false);
const [open3, setOpen3] = useState(false);
Expand Down Expand Up @@ -508,8 +533,8 @@ const StackedTemplate = ({ mixedSizes, actions, aiLabel, slug, ...args }) => {
open={open1}
onClose={() => setOpen1(false)}
selectorPrimaryFocus="#stacked-input-1"
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
>
<div className="tearsheet-stories__dummy-content-block">
Main content 1
Expand Down Expand Up @@ -539,8 +564,8 @@ const StackedTemplate = ({ mixedSizes, actions, aiLabel, slug, ...args }) => {
open={open2}
onClose={() => setOpen2(false)}
selectorPrimaryFocus="#stacked-input-2"
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
>
<div className="tearsheet-stories__dummy-content-block">
Main content 2
Expand All @@ -558,8 +583,8 @@ const StackedTemplate = ({ mixedSizes, actions, aiLabel, slug, ...args }) => {
open={open3}
onClose={() => setOpen3(false)}
selectorPrimaryFocus="#stacked-input-3"
aiLabel={aiLabel && sampleAILabel}
slug={slug && sampleAILabel}
decorator={decorator && sampleDecorator(decorator)}
slug={slug && sampleDecorator(slug)}
>
<div className="tearsheet-stories__dummy-content-block">
Main content 3
Expand Down Expand Up @@ -648,7 +673,7 @@ fullyLoaded.args = {
onClose: action('onClose called'),
title,
actions: 0,
aiLabel: 1,
decorator: 1,
slug: 0,
};

Expand Down
Loading

0 comments on commit 38e8c8f

Please sign in to comment.