Main content 1
@@ -243,7 +259,8 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
title="Tearsheet #2"
open={open2}
onClose={() => setOpen2(false)}
- slug={slug && sampleSlug}
+ aiLabel={aiLabel && sampleAILabel}
+ slug={slug && sampleAILabel}
selectorPrimaryFocus="#main-content"
>
@@ -256,7 +273,8 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
title="Tearsheet #3"
open={open3}
onClose={() => setOpen3(false)}
- slug={slug && sampleSlug}
+ aiLabel={aiLabel && sampleAILabel}
+ slug={slug && sampleAILabel}
selectorPrimaryFocus="#main-content"
>
@@ -289,7 +307,8 @@ fullyLoaded.args = {
onClose: action('onClose called'),
title,
actions: 0,
- slug: 1,
+ aiLabel: 1,
+ slug: 0,
};
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 1e69672f47..df49a38b10 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(undefined);
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(undefined);
@@ -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 f861942d7d..95977eed46 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,
@@ -52,6 +52,12 @@ const maxDepth = 3;
interface TearsheetShellProps extends PropsWithChildren {
actions?: ButtonProps<'button'>[];
+ /**
+ * 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.
+ */
+ aiLabel?: ReactNode;
+
ariaLabel?: string;
/**
@@ -155,17 +161,18 @@ interface TearsheetShellProps extends PropsWithChildren {
*/
size: 'narrow' | 'wide';
- /**
- * **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
- */
- slug?: ReactNode;
-
/**
* The main title of the tearsheet, displayed in the header area.
*/
title?: ReactNode;
verticalPosition?: 'normal' | 'lower';
+
+ // Deprecated props
+ /**
+ * @deprecated Property replaced by `aiLabel`
+ */
+ slug?: ReactNode;
}
export type CloseIconDescriptionTypes =
@@ -230,6 +237,7 @@ export const TearsheetShell = React.forwardRef(
{
// The component props, in alphabetical order (for consistency).
actions,
+ aiLabel,
ariaLabel,
children,
className,
@@ -248,7 +256,7 @@ export const TearsheetShell = React.forwardRef(
selectorPrimaryFocus,
selectorsFloatingMenus = [],
size,
- slug,
+ slug: deprecated_slug,
title,
verticalPosition,
launcherButtonRef,
@@ -465,7 +473,6 @@ export const TearsheetShell = React.forwardRef(
[`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
};
};
-
return renderPortalUse(
1 || (depth === 1 && (prevDepth?.current ?? 0) > 1),
[`${bc}--wide`]: wide,
[`${bc}--narrow`]: !wide,
- [`${bc}--has-slug`]: slug,
+ [`${bc}--has-slug`]: deprecated_slug,
+ [`${bc}--has-ai-label`]: aiLabel,
[`${bc}--has-close`]: effectiveHasCloseIcon,
})}
- slug={slug}
+ slug={aiLabel || deprecated_slug}
style={setScaleValues()}
containerClassName={cx(`${bc}__container`, {
[`${bc}__container--lower`]: verticalPosition === 'lower',
@@ -622,6 +630,11 @@ export const portalType =
PropTypes.instanceOf(Element);
export const deprecatedProps = {
+ /**
+ * @deprecated Property replaced by `aiLabel`
+ */
+ slug: deprecateProp(PropTypes.node, 'Property replaced by `aiLabel`'),
+
/**
* **Deprecated**
*
@@ -676,6 +689,12 @@ TearsheetShell.propTypes = {
})
),
+ /**
+ * 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.
+ */
+ aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+
/**
* The main content of the tearsheet.
*/
@@ -797,16 +816,9 @@ TearsheetShell.propTypes = {
*/
/**@ts-ignore*/
size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
-
- /**
- * **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
- */
- slug: PropTypes.node,
-
/**
* The main title of the tearsheet, displayed in the header area.
*/
title: PropTypes.node,
-
...deprecatedProps,
};