Main content 1
@@ -243,7 +243,7 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
title="Tearsheet #2"
open={open2}
onClose={() => setOpen2(false)}
- slug={slug && sampleSlug}
+ aiLabel={aiLabel && sampleAILabel}
selectorPrimaryFocus="#main-content"
>
@@ -256,7 +256,7 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
title="Tearsheet #3"
open={open3}
onClose={() => setOpen3(false)}
- slug={slug && sampleSlug}
+ aiLabel={aiLabel && sampleAILabel}
selectorPrimaryFocus="#main-content"
>
@@ -289,7 +289,7 @@ fullyLoaded.args = {
onClose: action('onClose called'),
title,
actions: 0,
- slug: 1,
+ aiLabel: 1,
};
export const stacked = StackedTemplate.bind({});
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.story.jsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.story.jsx
index 9f6a1a6b72..feeeff88b1 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.story.jsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.story.jsx
@@ -12,12 +12,7 @@ import { createPortal } from 'react-dom';
import styles from './_storybook-styles.scss?inline';
import { TearsheetShell, deprecatedProps } from './TearsheetShell';
import { getDeprecatedArgTypes } from '../../global/js/utils/props-helper';
-import {
- Button,
- unstable__Slug as Slug,
- unstable__SlugContent as SlugContent,
- TextInput,
-} from '@carbon/react';
+import { Button, AILabel, AILabelContent, TextInput } from '@carbon/react';
// import mdx from './TearsheetShell.mdx';
@@ -37,12 +32,12 @@ export default {
},
},
portalTarget: { control: { disable: true } },
- slug: {
+ aiLabel: {
control: {
type: 'select',
labels: {
- 0: 'No AI slug',
- 1: 'with AI Slug',
+ 0: 'No AI Label',
+ 1: 'with AI Label',
},
default: 0,
},
@@ -76,9 +71,9 @@ const dummyContent = (
);
-const sampleSlug = (
-
-
+const sampleAILabel = (
+
+
AI Explained
84%
@@ -92,12 +87,12 @@ const sampleSlug = (
Model type
Foundation model
-
-
+
+
);
// Template.
-const Template = ({ influencer, open: _open, slug, ...args }, context) => {
+const Template = ({ influencer, open: _open, aiLabel, ...args }, context) => {
const ref = useRef();
const [open, setOpen] = useState(context.viewMode !== 'docs' && _open);
const [beenOpen, setBeenOpen] = useState(false);
@@ -120,7 +115,7 @@ const Template = ({ influencer, open: _open, slug, ...args }, context) => {
}
open={open}
onClose={() => setOpen(false)}
- slug={slug && sampleSlug}
+ aiLabel={aiLabel && sampleAILabel}
title={'Tearsheet title'}
>
{dummyContent}
@@ -130,7 +125,7 @@ const Template = ({ influencer, open: _open, slug, ...args }, context) => {
};
const ReturnFocusTemplate = (
- { influencer, open: _open, slug, ...args },
+ { influencer, open: _open, aiLabel, ...args },
context
) => {
const ref = useRef();
@@ -156,7 +151,7 @@ const ReturnFocusTemplate = (
}
open={open}
onClose={() => setOpen(false)}
- slug={slug && sampleSlug}
+ aiLabel={aiLabel && sampleAILabel}
title={'Tearsheet title'}
launcherButtonRef={buttonRef}
>
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
index 3ecf47fab4..1fdad080c3 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -25,7 +25,7 @@ import cx from 'classnames';
import { pkg } from '../../settings';
import pconsole from '../../global/js/utils/pconsole';
import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
-
+import { deprecateProp } from '../../global/js/utils/props-helper';
// Carbon and package components we use.
import {
Button,
@@ -156,10 +156,15 @@ interface TearsheetShellProps extends PropsWithChildren {
size: 'narrow' | 'wide';
/**
- * **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+ * @deprecated **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
*/
slug?: ReactNode;
+ /**
+ * Optional prop that is intended for any scenerio where something is being generated by AI to reinforce AI transparency, accountibility, and explainability at the UI level.
+ */
+ aiLabel: ReactNode;
+
/**
* The main title of the tearsheet, displayed in the header area.
*/
@@ -230,6 +235,7 @@ export const TearsheetShell = React.forwardRef(
{
// The component props, in alphabetical order (for consistency).
actions,
+ aiLabel,
ariaLabel,
children,
className,
@@ -248,7 +254,7 @@ export const TearsheetShell = React.forwardRef(
selectorPrimaryFocus,
selectorsFloatingMenus = [],
size,
- slug,
+ slug: deprecated_slug,
title,
verticalPosition,
launcherButtonRef,
@@ -472,10 +478,11 @@ export const TearsheetShell = React.forwardRef(
depth > 1 || (depth === 1 && (prevDepth?.current ?? 0) > 1),
[`${bc}--wide`]: wide,
[`${bc}--narrow`]: !wide,
- [`${bc}--has-slug`]: slug,
+ [`${bc}--has-slug`]: deprecated_slug,
+ [`${bc}--has-aiLabel`]: aiLabel,
[`${bc}--has-close`]: effectiveHasCloseIcon,
})}
- slug={slug}
+ slug={aiLabel ? aiLabel : deprecated_slug}
style={setScaleValues()}
containerClassName={cx(`${bc}__container`, {
[`${bc}__container--lower`]: verticalPosition === 'lower',
@@ -664,6 +671,11 @@ TearsheetShell.propTypes = {
})
),
+ /**
+ * Optional prop that is intended for any scenerio where something is being generated by AI to reinforce AI transparency, accountibility, and explainability at the UI level.
+ */
+ aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+
/**
* The main content of the tearsheet.
*/
@@ -789,7 +801,7 @@ TearsheetShell.propTypes = {
/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
*/
- slug: PropTypes.node,
+ slug: deprecateProp(PropTypes.node, 'Property replaced by `aiLabel`'),
/**
* The main title of the tearsheet, displayed in the header area.
From 245ae9d9d03bdb2051456e932e2ab51c4334582d Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:34:01 +0530
Subject: [PATCH 02/14] feat(tearsheet): update cspell
---
cspell.json | 3 +++
1 file changed, 3 insertions(+)
diff --git a/cspell.json b/cspell.json
index 11e98c1111..7ff2a2f86f 100644
--- a/cspell.json
+++ b/cspell.json
@@ -64,6 +64,7 @@
],
"words": [
"aboutmodal",
+ "accountibility",
"actionbar",
"apikey",
"apikeymodal",
@@ -91,6 +92,7 @@
"disttags",
"dragbar",
"draggable",
+ "explainability",
"interstitialscreenviewmodule",
"draghandle",
"dragmode",
@@ -145,6 +147,7 @@
"rowindex",
"ruleset",
"sbdocs",
+ "scenerio",
"scrollend",
"semibold",
"serializers",
From d135f4239db57aed225e96d068079c6bf6e5078e Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:00:05 +0530
Subject: [PATCH 03/14] feat(Tearsheet): deprecation message update
---
.../Tearsheet/Tearsheet.stories.jsx | 33 +++++++++++----
.../Tearsheet/TearsheetNarrow.stories.jsx | 22 +++++++++-
.../components/Tearsheet/TearsheetShell.tsx | 40 ++++++++++---------
3 files changed, 67 insertions(+), 28 deletions(-)
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx b/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx
index 52c7847831..928799a85a 100644
--- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx
+++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx
@@ -111,6 +111,20 @@ export default {
},
default: 0,
},
+ description:
+ 'Optional prop that is intended for any scenerio where something is being generated by AI to reinforce AI transparency, accountibility, and explainability at the UI level.',
+ options: [0, 1],
+ },
+ slug: {
+ control: {
+ type: 'select',
+ labels: {
+ 0: 'No AI Slug',
+ 1: 'with AI Slug',
+ },
+ default: 0,
+ },
+ description: 'deprecated Property replaced by "aiLabel"',
options: [0, 1],
},
},
@@ -180,7 +194,7 @@ const sampleAILabel = (
// Template.
// eslint-disable-next-line react/prop-types
-const Template = ({ actions, aiLabel, ...args }) => {
+const Template = ({ actions, aiLabel, slug, ...args }) => {
const [open, setOpen] = useState(false);
const wiredActions =
@@ -212,6 +226,7 @@ const Template = ({ actions, aiLabel, ...args }) => {
open={open}
onClose={() => setOpen(false)}
aiLabel={aiLabel && sampleAILabel}
+ slug={slug && sampleAILabel}
>
{mainContent}
@@ -231,7 +246,7 @@ const tabs = (
);
-const TemplateWithNav = ({ actions, aiLabel, ...args }) => {
+const TemplateWithNav = ({ actions, aiLabel, slug, ...args }) => {
const [open, setOpen] = useState(false);
const wiredActions =
@@ -264,6 +279,7 @@ const TemplateWithNav = ({ actions, aiLabel, ...args }) => {
open={open}
onClose={() => setOpen(false)}
aiLabel={aiLabel && sampleAILabel}
+ slug={slug && sampleAILabel}
>