Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(tearsheet): rename ailabel to decorator #6576

Merged
merged 11 commits into from
Jan 2, 2025
Merged

chore(tearsheet): rename ailabel to decorator #6576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e286a63
chore(tearsheet): rename aiLabel to decorator
sangeethababu9223 Dec 12, 2024
47d7675
fix(Tearsheet): resolve conflict
sangeethababu9223 Dec 12, 2024
d88aba3
fix(tearsheet): avt issue fix
sangeethababu9223 Dec 12, 2024
91434bf
Merge branch 'main' into chore/tearsheet-rename-ailabel-to-decorator
sangeethababu9223 Dec 13, 2024
b91d8f7
feat(tearsheet): update doc
sangeethababu9223 Dec 13, 2024
fb385aa
Merge branch 'main' into chore/tearsheet-rename-ailabel-to-decorator
sangeethababu9223 Dec 17, 2024
08d6d0e
Update Tearsheet.docs-page.js
sangeethababu9223 Dec 18, 2024
0463542
Merge branch 'main' into chore/tearsheet-rename-ailabel-to-decorator
sangeethababu9223 Dec 18, 2024
e70e2e8
Merge branch 'main' into chore/tearsheet-rename-ailabel-to-decorator
elycheea Dec 18, 2024
943ec50
Merge branch 'main' into chore/tearsheet-rename-ailabel-to-decorator
sangeethababu9223 Dec 19, 2024
63a9b34
Merge branch 'main' into chore/tearsheet-rename-ailabel-to-decorator
sangeethababu9223 Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading