@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/src/demos/JumpLinks.md

@@ -43,27 +43,38 @@ ScrollspyH2 = () => {
 
   const [isVertical, setIsVertical] = React.useState(true);
   const [offsetHeight, setOffsetHeight] = React.useState(10);
+  const offsetForPadding = 10;
+  let masthead;
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-    const offsetForPadding = 10;
-
-    getResizeObserver(
-      masthead,
-      () => {
-        if (isVertical) {
-          setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-        } else {
-          // Append jump links nav height to the masthead height when value exists.
-          const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-          jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-        }
-      },
-      true
-    );
+    masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
+
+    if (isVertical) {
+      setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+    } else {
+      // Append jump links nav height to the masthead height when value exists.
+      const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+      jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+    }
+
+    
   }, [isVertical]);
 
+  getResizeObserver(
+    document.getElementsByClassName(mastheadStyles.masthead)[0],
+    () => {
+      if (isVertical) {
+        setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+      } else {
+        // Append jump links nav height to the masthead height when value exists.
+        const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+        jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+      }
+    },
+    true
+  );
+
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <PageSection>
@@ -85,7 +96,7 @@ ScrollspyH2 = () => {
                 isVertical={isVertical}
                 isCentered={!isVertical}
                 label="Jump to section"
-                scrollableSelector="#scrollable-element"
+                scrollableSelector=".pf-v6-c-page__main-container"
                 offset={offsetHeight}
                 expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
                 isExpanded

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -174,7 +174,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </>
   );
   const headerToolbar = (
-    <Toolbar isFullHeight>
+    <Toolbar>
       <ToolbarContent>
         <ToolbarGroup align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="action-group-plain">
@@ -242,8 +242,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     John Smith
                   </MenuToggle>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -224,7 +224,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </>
   );
   const headerToolbar = (
-    <Toolbar isFullHeight>
+    <Toolbar>
       <ToolbarContent>
         <ToolbarGroup align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="action-group-plain">
@@ -292,8 +292,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     John Smith
                   </MenuToggle>

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -338,7 +338,7 @@ export const PaginatedTableAction = () => {
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
-        <Toolbar id="toolbar" isFullHeight isStatic>
+        <Toolbar id="toolbar" isStatic>
           <ToolbarContent>
             <ToolbarGroup
               variant="action-group-plain"
@@ -419,8 +419,7 @@ export const PaginatedTableAction = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     {translation.username}
                   </MenuToggle>

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -362,7 +362,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
-        <Toolbar id="toolbar" isFullHeight isStatic>
+        <Toolbar id="toolbar" isStatic>
           <ToolbarContent>
             <ToolbarGroup
               variant="action-group-plain"
@@ -443,8 +443,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     {translation.username}
                   </MenuToggle>

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -23,7 +23,7 @@ import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-cha
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
-import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
+import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 
 export const CardUtilizationDemo3: React.FunctionComponent = () => {
@@ -94,7 +94,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                       { name: 'Low', symbol: { fill: chart_color_yellow_100.value } },
                       { name: 'Important', symbol: { fill: chart_color_yellow_300.value } },
                       { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },
-                      { name: 'Critical', symbol: { fill: chart_color_red_100.value } }
+                      { name: 'Critical', symbol: { fill: chart_color_red_orange_400.value } }
                     ]}
                     legendPosition="bottom-left"
                     height={50}
@@ -113,7 +113,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                         chart_color_yellow_100.value,
                         chart_color_yellow_300.value,
                         chart_color_orange_300.value,
-                        chart_color_red_100.value
+                        chart_color_red_orange_400.value
                       ]}
                     >
                       <ChartBar

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -179,7 +179,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight>
+    <Toolbar id="toolbar">
       <ToolbarContent>
         <PageHorizontalNav />
         <ToolbarGroup
@@ -255,9 +255,8 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -378,7 +378,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   ];
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -456,9 +456,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -126,7 +126,7 @@ export const NavFlyout: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -202,8 +202,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -103,7 +103,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
@@ -180,8 +180,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -152,7 +152,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
@@ -229,8 +229,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Nav/NavManual.tsx

@@ -120,7 +120,7 @@ export const NavManual: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -196,8 +196,7 @@ export const NavManual: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -133,7 +133,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -208,9 +208,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -116,7 +116,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -191,9 +191,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -116,7 +116,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -191,9 +191,8 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -108,7 +108,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -183,9 +183,8 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -5,10 +5,12 @@ import {
   Content,
   Gallery,
   Card,
+  CardHeader,
   CardBody,
   CardTitle,
   Modal,
-  ModalVariant,
+  ModalBody,
+  ModalHeader,
   Tab,
   Tabs,
   TabTitleText,
@@ -20,25 +22,25 @@ import {
 } from '@patternfly/react-core';
 
 interface Product {
-  id: number;
+  id: string;
   name: string;
   description: string;
 }
 
 const products: Product[] = [
   {
-    id: 0,
+    id: 'pf-card',
     name: 'PatternFly',
     description: 'PatternFly is a community project that promotes design commonality and improves user experience.'
   },
   {
-    id: 1,
+    id: 'mq-card',
     name: 'ActiveMQ',
     description:
       'The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.'
   },
   {
-    id: 2,
+    id: 'apache-card',
     name: 'Apache Spark',
     description: 'This documentation page covers the Apache Spark component for the Apache Camel.'
   }
@@ -46,7 +48,7 @@ const products: Product[] = [
 
 export const ModalTabs: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [selectedProduct, setSelectedProduct] = React.useState<Product>(products[0]);
+  const [selectedProduct, setSelectedProduct] = React.useState<Product | undefined>(products[0]);
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
 
   const onCardClick = React.useCallback(
@@ -57,15 +59,6 @@ export const ModalTabs: React.FunctionComponent = () => {
     []
   );
 
-  const onCardKeyPress = React.useCallback(
-    (product: Product) => (event: React.KeyboardEvent<HTMLElement>) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        onCardClick(product)();
-      }
-    },
-    []
-  );
-
   const closeModal = React.useCallback(() => {
     setSelectedProduct(undefined);
     setIsModalOpen(false);
@@ -91,16 +84,23 @@ export const ModalTabs: React.FunctionComponent = () => {
             {products.map((product) => (
               <Card
                 isSelectable
-                isSelectableRaised
-                hasSelectableInput
+                isSelected={selectedProduct?.id === product.id}
                 isCompact
                 key={product.id}
                 id={product.name.replace(/ /g, '-')}
-                onClick={onCardClick(product)}
-                onSelectableInputChange={() => onCardClick(product)()}
-                onKeyPress={onCardKeyPress(product)}
               >
-                <CardTitle>{product.name}</CardTitle>
+                <CardHeader
+                  selectableActions={{
+                    selectableActionId: product.id,
+                    selectableActionAriaLabelledby: 'single-selectable-card-example-1',
+                    name: 'single-selectable-card-example',
+                    variant: 'single',
+                    onChange: onCardClick(product),
+                    hasNoOffset: true
+                  }}
+                >
+                  <CardTitle>{product.name}</CardTitle>
+                </CardHeader>
                 <CardBody>{product.description}</CardBody>
               </Card>
             ))}
@@ -109,33 +109,43 @@ export const ModalTabs: React.FunctionComponent = () => {
       </DashboardWrapper>
 
       {selectedProduct && (
-        <Modal variant={ModalVariant.small} title={selectedProduct.name} isOpen={isModalOpen} onClose={closeModal}>
-          <Grid hasGutter>
-            <GridItem>
-              <Tabs activeKey={activeTabKey} onSelect={onTabSelect} isSecondary hasSecondaryBorderBottom>
-                <Tab eventKey={0} tabContentId="details-tab" title={<TabTitleText>Details</TabTitleText>} />
-                <Tab eventKey={1} tabContentId="doc-tab" title={<TabTitleText>Documentation</TabTitleText>} />
-              </Tabs>
-            </GridItem>
-            <GridItem>
-              <TabContent eventKey={0} id="details-tab" hidden={activeTabKey !== 0}>
-                {selectedProduct.description}
-              </TabContent>
-              <TabContent eventKey={1} id="doc-tab" hidden={activeTabKey !== 1}>
-                <List>
-                  <ListItem>
-                    <a>Doc link 1</a>
-                  </ListItem>
-                  <ListItem>
-                    <a>Doc link 2</a>
-                  </ListItem>
-                  <ListItem>
-                    <a>Doc link 3</a>
-                  </ListItem>
-                </List>
-              </TabContent>
-            </GridItem>
-          </Grid>
+        <Modal
+          variant="small"
+          isOpen={isModalOpen}
+          onClose={closeModal}
+          ouiaId="TabsModal"
+          aria-labelledby="tabs-modal-title"
+          aria-describedby="tabs-modal-box-body-basic"
+        >
+          <ModalHeader title={selectedProduct.name} labelId="tabs-modal-title" />
+          <ModalBody id="tabs-modal-box-body-basic">
+            <Grid hasGutter>
+              <GridItem>
+                <Tabs activeKey={activeTabKey} onSelect={onTabSelect}>
+                  <Tab eventKey={0} tabContentId="details-tab" title={<TabTitleText>Details</TabTitleText>} />
+                  <Tab eventKey={1} tabContentId="doc-tab" title={<TabTitleText>Documentation</TabTitleText>} />
+                </Tabs>
+              </GridItem>
+              <GridItem>
+                <TabContent eventKey={0} id="details-tab" hidden={activeTabKey !== 0}>
+                  {selectedProduct.description}
+                </TabContent>
+                <TabContent eventKey={1} id="doc-tab" hidden={activeTabKey !== 1}>
+                  <List>
+                    <ListItem>
+                      <a>Doc link 1</a>
+                    </ListItem>
+                    <ListItem>
+                      <a>Doc link 2</a>
+                    </ListItem>
+                    <ListItem>
+                      <a>Doc link 3</a>
+                    </ListItem>
+                  </List>
+                </TabContent>
+              </GridItem>
+            </Grid>
+          </ModalBody>
         </Modal>
       )}
     </React.Fragment>

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -43,8 +43,6 @@ export const NestedTabs: React.FunctionComponent = () => {
               <FlexItem>
                 <Tabs
                   activeKey={activeNestedTabKey}
-                  isSecondary
-                  hasSecondaryBorderBottom
                   onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
                   id="nested-tabs-example-nested-tabs-list"
                 >

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -40,8 +40,6 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
       <GridItem>
         <Tabs
           activeKey={activeNestedTabKey}
-          isSecondary
-          hasSecondaryBorderBottom
           onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
           id="nested-tabs-example-nested-tabs-list"
         >

package/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`Matches snapshot 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

package/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`Modal Content Test description 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`Modal Content Test isOpen 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -186,7 +186,7 @@ exports[`Modal Content Test only body 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -261,7 +261,7 @@ exports[`Modal Content Test with footer 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -341,7 +341,7 @@ exports[`Modal Content Test with onclose 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -421,7 +421,7 @@ exports[`Modal Content test without footer 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -496,7 +496,7 @@ exports[`Modal Test with custom footer 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -580,7 +580,7 @@ exports[`Modal Test with custom header 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"

package/src/deprecated/components/Modal/examples/ModalWithHelp.tsx

@@ -29,9 +29,7 @@ export const ModalWithHelp: React.FunctionComponent = () => {
             }
             footerContent="Popover Footer"
           >
-            <Button variant="plain" aria-label="Help">
-              <HelpIcon />
-            </Button>
+            <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
           </Popover>
         }
         isOpen={isModalOpen}