diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js b/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js
index 4f9feba2cf..710b842c74 100644
--- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js
+++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js
@@ -11,7 +11,6 @@ import userEvent from '@testing-library/user-event';
import {
expectWarn,
expectMultipleError,
- required,
} from '../../global/js/utils/test-helper';
import uuidv4 from '../../global/js/utils/uuidv4';
@@ -131,7 +130,6 @@ const DummyComponent = ({ props, open }) => {
// These are tests than apply to both Tearsheet and TearsheetNarrow
// and also (with extra props and omitting button tests) to CreateTearsheetNarrow
let tooManyButtonsTestedAlready = false;
-let closeIconDescriptionTestedAlready = false;
const commonTests = (Ts, name, props, testActions) => {
it(`renders a component ${name}`, async () => {
render();
@@ -229,24 +227,6 @@ const commonTests = (Ts, name, props, testActions) => {
screen.getByRole('button', { name: closeIconDescription });
});
- if (testActions) {
- it('requires closeIconDescription when there are no actions', async () =>
- expectMultipleError(
- // prop-types only reports the first occurrence of each distinct error,
- // which creates an unfortunate dependency between test runs
- closeIconDescriptionTestedAlready
- ? [required('closeIconDescription', name)]
- : [
- required('closeIconDescription', name),
- required('closeIconDescription', 'TearsheetShell'),
- ],
- () => {
- render();
- closeIconDescriptionTestedAlready = true;
- }
- ));
- }
-
it('renders description', async () => {
render();
screen.getByText(descriptionFragment);
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx b/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx
index 655a76b8b1..836d8cb26a 100644
--- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx
@@ -9,7 +9,7 @@
import { Button, type ButtonProps } from '@carbon/react';
// Import portions of React that are needed.
import React, { ForwardedRef, PropsWithChildren, ReactNode } from 'react';
-import { TearsheetShell, tearsheetHasCloseIcon } from './TearsheetShell';
+import { TearsheetShell } from './TearsheetShell';
import { ActionSet } from '../ActionSet';
// Other standard imports.
@@ -22,23 +22,6 @@ import { portalType } from './TearsheetShell';
const componentName = 'Tearsheet';
// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-/**
- * The accessibility title for the close icon (if shown).
- *
- * **Note:** This prop is only required if a close icon is shown, i.e. if
- * there are a no navigation actions and/or hasCloseIcon is true.
- */
-export type CloseIconDescriptionTypes =
- | {
- hasCloseIcon?: false;
- closeIconDescription?: string;
- }
- | {
- hasCloseIcon: true;
- closeIconDescription: string;
- };
-
// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.
@@ -76,6 +59,12 @@ export interface TearsheetProps extends PropsWithChildren {
*/
className?: string;
+ /**
+ * The accessibility title for the close icon (if shown).
+ *
+ */
+ closeIconDescription?: string;
+
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
@@ -194,7 +183,7 @@ export let Tearsheet = React.forwardRef(
influencerPosition = 'left',
influencerWidth = 'narrow',
...rest
- }: TearsheetProps & CloseIconDescriptionTypes,
+ }: TearsheetProps,
ref: ForwardedRef
) => (
tearsheetHasCloseIcon(actions, hasCloseIcon)
- ),
+ closeIconDescription: PropTypes.string,
/**
* A description of the flow, displayed in the header area of the tearsheet.
@@ -308,7 +292,6 @@ Tearsheet.propTypes = {
* tearsheet"), and that behavior can be overridden if required by setting
* this prop to either true or false.
*/
- /**@ts-ignore */
hasCloseIcon: PropTypes.bool,
/**
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
index 0d2e51d871..c05757e4b0 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx
@@ -8,10 +8,8 @@
// Carbon and package components we use.
import { Button, ButtonProps } from '@carbon/react';
import {
- CloseIconDescriptionTypes,
TearsheetShell,
tearsheetShellWideProps as blocked,
- tearsheetHasCloseIcon,
} from './TearsheetShell';
// Import portions of React that are needed.
import React, { ForwardedRef, PropsWithChildren, ReactNode } from 'react';
@@ -24,7 +22,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
import { pkg } from '../../settings';
import { portalType } from './TearsheetShell';
-interface TearsheetNarrowBaseProps extends PropsWithChildren {
+export interface TearsheetNarrowProps extends PropsWithChildren {
/**
* The navigation actions to be shown as buttons in the action area at the
* bottom of the tearsheet. Each action is specified as an object with
@@ -51,6 +49,12 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
*/
className?: string;
+ /**
+ * The accessibility title for the close icon (if shown).
+ *
+ */
+ closeIconDescription?: string;
+
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
@@ -118,9 +122,6 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
verticalPosition?: 'normal' | 'lower';
}
-export type TearsheetNarrowProps = TearsheetNarrowBaseProps &
- CloseIconDescriptionTypes;
-
const componentName = 'TearsheetNarrow';
// NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -236,14 +237,8 @@ TearsheetNarrow.propTypes = {
/**
* The accessibility title for the close icon (if shown).
*
- * **Note:** This prop is only required if a close icon is shown, i.e. if
- * there are a no navigation actions and/or hasCloseIcon is true.
*/
- /**@ts-ignore */
- closeIconDescription: PropTypes.string.isRequired.if(
- ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon)
- ),
-
+ closeIconDescription: PropTypes.string,
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
@@ -255,7 +250,6 @@ TearsheetNarrow.propTypes = {
* the tearsheet is read-only or has no navigation actions (sometimes called
* a "passive tearsheet").
*/
- /**@ts-ignore*/
hasCloseIcon: PropTypes.bool,
/**
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
index b79082a03a..a5626228ad 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -59,6 +59,14 @@ interface TearsheetShellProps extends PropsWithChildren {
*/
className?: string;
+ /**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+ closeIconDescription?: string;
+
/**
* Used to track the current step on components which use `StepsContext` and `TearsheetShell`
*/
@@ -185,16 +193,6 @@ interface TearsheetShellProps extends PropsWithChildren {
slug?: ReactNode;
}
-export type CloseIconDescriptionTypes =
- | {
- hasCloseIcon?: false;
- closeIconDescription?: string;
- }
- | {
- hasCloseIcon: true;
- closeIconDescription: string;
- };
-
// NOTE: the component SCSS is not imported here: it is rolled up separately.
// Global data structure to communicate the state of tearsheet stacking
@@ -247,7 +245,7 @@ export const TearsheetShell = React.forwardRef(
ariaLabel,
children,
className,
- closeIconDescription,
+ closeIconDescription = 'Close',
currentStep,
description,
hasCloseIcon,
@@ -270,7 +268,7 @@ export const TearsheetShell = React.forwardRef(
launcherButtonRef,
// Collect any other property values passed in.
...rest
- }: TearsheetShellProps & CloseIconDescriptionTypes,
+ }: TearsheetShellProps,
ref: ForwardedRef
) => {
const carbonPrefix = usePrefix();
@@ -653,9 +651,7 @@ TearsheetShell.propTypes = {
* there are a no navigation actions and/or hasCloseIcon is true.
*/
/**@ts-ignore*/
- closeIconDescription: PropTypes.string.isRequired.if(
- ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon)
- ),
+ closeIconDescription: PropTypes.string,
/**
* Optional prop that allows you to pass any component.