@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.10

package/src/components/Compass/examples/Compass.md

@@ -0,0 +1,47 @@
+---
+id: Compass
+cssPrefix: pf-v6-c-compass
+section: components
+beta: true
+propComponents:
+  [
+    'Compass',
+    'CompassHeader',
+    'CompassContent',
+    'CompassHero',
+    'CompassMainHeader',
+    'CompassPanel',
+    'CompassMessageBar'
+  ]
+---
+
+import './compass.css';
+import { useRef, useState } from 'react';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+## Examples
+
+### Basic
+
+In a basic compass layout, content can be passed to the following props to populate areas of the page:
+
+- `header`: content rendered in the top of the page. This will typically be a `CompassHeader` component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.
+- `sidebarStart`: content rendered in the left side or start side of the page
+- `main`: content rendered in the center of the page. This will typically consist of a `CompassMainHeader` or `CompassHero`, along with a `CompassContent` filled with one or more `CompassPanel` components.
+- `sidebarEnd`: content rendered in the right side or end side of the page
+- `footer`: content rendered in the bottom of the page
+
+The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props.
+
+```ts file="CompassBasic.tsx"
+
+```
+
+### Demo
+
+```ts isFullscreen file="CompassDemo.tsx"
+
+```

package/src/components/Compass/examples/CompassBasic.tsx

@@ -0,0 +1,33 @@
+import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
+  const sidebarStartContent = <div>Sidebar start</div>;
+  // TODO: simplify mainContent to only a div string
+  const mainContent = (
+    <>
+      <CompassHero>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassContent>
+        <CompassMainHeader>
+          <div>Content title</div>
+        </CompassMainHeader>
+        <div>Content</div>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = <div>Sidebar end</div>;
+  const footerContent = <div>Footer</div>;
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+    />
+  );
+};

package/src/components/Compass/examples/CompassDemo.tsx

@@ -0,0 +1,151 @@
+import { useRef, useState } from 'react';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMessageBar,
+  Tabs,
+  TabsComponent,
+  Tab,
+  TabContent,
+  TabTitleText,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+  Title,
+  Tooltip
+} from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const [activeTab, setActiveTab] = useState<number>(0);
+  const [activeSubtab, setActiveSubtab] = useState<number>(0);
+  const subTabsRef = useRef<HTMLDivElement>(null);
+
+  const navContent = (
+    <>
+      <CompassPanel isPill hasNoPadding>
+        <Tabs
+          activeKey={activeTab}
+          isNav
+          onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+          component={TabsComponent.nav}
+          aria-label="Compass navigation tabs"
+          inset={{ default: 'insetXl' }}
+        >
+          <Tab
+            tabContentId="subtabs"
+            tabContentRef={subTabsRef}
+            eventKey={0}
+            title={<TabTitleText>Tab 1</TabTitleText>}
+            aria-label="Compass tab with subtabs"
+          />
+          <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+          <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+          <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+        </Tabs>
+      </CompassPanel>
+      <CompassPanel isPill hasNoPadding>
+        <TabContent id="subtabs" ref={subTabsRef}>
+          <Tabs
+            activeKey={activeSubtab}
+            isSubtab
+            isNav
+            onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+            aria-label="Compass navigation subtabs"
+            inset={{ default: 'insetXl' }}
+          >
+            <Tab
+              tabContentId="subtab-1"
+              eventKey={0}
+              title={
+                <TabTitleText>
+                  <div id="subtab-1">Subtab 1</div>
+                </TabTitleText>
+              }
+            />
+            <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+            <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+          </Tabs>
+        </TabContent>
+      </CompassPanel>
+    </>
+  );
+
+  const sidebarContent = (
+    <CompassPanel isPill>
+      <ActionList isIconList isVertical>
+        <ActionListGroup>
+          <ActionListItem>
+            <Tooltip content="Play">
+              <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
+            </Tooltip>
+          </ActionListItem>
+          <ActionListItem>
+            <Tooltip content="Add">
+              <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+            </Tooltip>
+          </ActionListItem>
+        </ActionListGroup>
+        <ActionListItem>
+          <Tooltip content="Copy">
+            <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+          </Tooltip>
+        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Tooltip content="Help">
+              <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+            </Tooltip>
+          </ActionListItem>
+          <ActionListItem>
+            <Tooltip content="Second copy">
+              <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+            </Tooltip>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
+    </CompassPanel>
+  );
+
+  const headerContent = <CompassHeader logo={<div>logo</div>} nav={navContent} profile={<div>Profile</div>} />;
+  const sidebarStartContent = sidebarContent;
+  const mainContent = (
+    <>
+      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassContent>
+        <CompassPanel>Content</CompassPanel>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = sidebarContent;
+  const footerContent = (
+    <CompassMessageBar>
+      <CompassPanel isPill hasNoPadding>
+        Message bar
+      </CompassPanel>
+    </CompassMessageBar>
+  );
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+      backgroundSrcDark="/assets/images/pf-background.svg"
+      backgroundSrcLight="/assets/images/pf-background.svg"
+    />
+  );
+};

package/src/components/Compass/examples/compass.css

@@ -0,0 +1,11 @@
+#ws-react-c-compass-basic [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-c-compass-basic [class*="pf-v6-c-compass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}

package/src/components/Compass/index.ts

@@ -0,0 +1,7 @@
+export * from './Compass';
+export * from './CompassContent';
+export * from './CompassHeader';
+export * from './CompassHero';
+export * from './CompassMainHeader';
+export * from './CompassMessageBar';
+export * from './CompassPanel';

package/src/components/DataList/DataList.tsx

@@ -31,6 +31,8 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
   isCompact?: boolean;
+  /** @beta Flag indicating if DataList should have plain styling with a transparent background */
+  isPlain?: boolean;
   /** Specifies the grid breakpoints  */
   gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Determines which wrapping modifier to apply to the DataList */
@@ -59,6 +61,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
   onSelectDataListItem,
   selectedDataListItemId = '',
   isCompact = false,
+  isPlain = false,
   gridBreakpoint = 'md',
   wrapModifier = null,
   onSelectableRowChange,
@@ -84,6 +87,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
         className={css(
           styles.dataList,
           isCompact && styles.modifiers.compact,
+          isPlain && styles.modifiers.plain,
           gridBreakpointClasses[gridBreakpoint],
           wrapModifier && styles.modifiers[wrapModifier],
           className

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -71,6 +71,12 @@ test('Renders custom class when passed', () => {
   expect(screen.getByLabelText('list')).toHaveClass('data-list-custom');
 });
 
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<DataList key="list-id-1" isPlain aria-label="list" />);
+
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.plain);
+});
+
 test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>

package/src/components/DataList/examples/DataList.md

@@ -40,6 +40,12 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat
 
 ```
 
+### Plain
+
+```ts file="./DataListPlain.tsx"
+
+```
+
 ### Checkboxes, actions and additional cells
 
 ```ts file="./DataListCheckboxes.tsx"

package/src/components/DataList/examples/DataListPlain.tsx

@@ -0,0 +1,32 @@
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListPlain: React.FunctionComponent = () => (
+  <DataList aria-label="Plain data list example" isPlain>
+    <DataListItem aria-labelledby="plain-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="plain-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="plain-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="plain-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/Drawer/Drawer.tsx

@@ -17,6 +17,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   isExpanded?: boolean;
   /** Indicates if the content element and panel element are displayed side by side. */
   isInline?: boolean;
+  /** @beta Indicates if the drawer will have pill styles */
+  isPill?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
   /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
@@ -50,6 +52,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   children,
   isExpanded = false,
   isInline = false,
+  isPill = false,
   isStatic = false,
   position = 'end',
   onExpand = () => {},
@@ -65,6 +68,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
           styles.drawer,
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
+          isPill && styles.modifiers.pill,
           isStatic && styles.modifiers.static,
           (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -35,6 +35,8 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   hasNoBorder?: boolean;
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
+  /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
+  hasNoGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -68,6 +70,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   children,
   hasNoBorder = false,
   isResizable = false,
+  hasNoGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -364,6 +367,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className={css(
               styles.drawerPanel,
               isResizable && styles.modifiers.resizable,
+              hasNoGlass && styles.modifiers.noGlass,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,

package/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -10,9 +10,10 @@ import {
   DrawerPanelContent,
   DrawerColorVariant
 } from '../';
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
@@ -162,3 +163,27 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
 
   expect(consoleError).not.toHaveBeenCalled();
 });
+
+test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  render(
+    <Drawer data-testid="drawer" isExpanded={true} position="left" isPill>
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>Drawer content text</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
+});

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -158,3 +158,13 @@ test('Style prop overrides boundaryCssVars', () => {
     '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
   });
 });
+
+test(`Renders with class ${styles.modifiers.noGlass} when isPill is true`, () => {
+  render(
+    <Drawer isExpanded isPill>
+      <DrawerPanelContent hasNoGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noGlass);
+});

package/src/components/Drawer/examples/Drawer.md

@@ -17,6 +17,7 @@ propComponents:
   ]
 section: components
 ---
+
 import { Fragment, useRef, useState } from 'react';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
@@ -143,3 +144,15 @@ To customize which element receives focus when the drawer panel expands, use the
 ```ts file="./DrawerFocusTrap.tsx"
 
 ```
+
+### Pill
+
+```ts file="./DrawerBasicPill.tsx"
+
+```
+
+### Pill inline
+
+```ts file="./DrawerPillInline.tsx"
+
+```

package/src/components/Drawer/examples/DrawerBasicPill.tsx

@@ -0,0 +1,57 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerBasicPill: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const drawerRef = useRef<HTMLDivElement>(undefined);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} isPill onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerPillInline.tsx

@@ -0,0 +1,57 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerBasicPill: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const drawerRef = useRef<HTMLDivElement>(undefined);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} isPill isInline onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </Fragment>
+  );
+};

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -44,8 +44,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * use the onToggle property of the expandable section toggle sub-component.
    */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** React node that appears in the attached toggle in place of the toggleText property. */
-  toggleContent?: React.ReactNode;
+  /** React node that appears in the attached toggle in place of the toggleText property.
+   * Can also be a function that receives the expanded state and returns a React node.
+   */
+  toggleContent?: React.ReactNode | ((isExpanded: boolean) => React.ReactNode);
   /** Text that appears in the attached toggle. */
   toggleText?: string;
   /** Text that appears in the attached toggle when collapsed (will override toggleText if
@@ -72,6 +74,11 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * animation will not occur.
    */
   direction?: 'up' | 'down';
+  /** The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level.
+   * When using heading elements, the button will be rendered inside the heading for proper semantics.
+   * This is useful when the toggle text should function as a heading in the document structure.
+   */
+  toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 interface ExpandableSectionState {
@@ -216,6 +223,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       direction,
+      toggleWrapper = 'div',
       ...props
     } = this.props;
 
@@ -246,8 +254,12 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       propOrStateIsExpanded
     );
 
+    const computedToggleContent =
+      typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
+    const ToggleWrapper = toggleWrapper as any;
+
     const expandableToggle = !isDetached && (
-      <div className={`${styles.expandableSection}__toggle`}>
+      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
         <Button
           variant="link"
           {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
@@ -265,9 +277,9 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
           aria-label={toggleAriaLabel}
           aria-labelledby={toggleAriaLabelledBy}
         >
-          {toggleContent || computedToggleText}
+          {computedToggleContent || computedToggleText}
         </Button>
-      </div>
+      </ToggleWrapper>
     );
 
     return (