@patternfly/react-core 5.0.0-prerelease.2 → 5.0.0-prerelease.20

package/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches the snapshot 1`] = `
   <p
     class=""
     data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF4/Text"
+    data-ouia-component-type="PF5/Text"
     data-ouia-safe="true"
     data-pf-content="true"
   >

package/src/components/TextArea/TextArea.tsx

@@ -123,7 +123,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
@@ -145,11 +145,11 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
           {...props}
         />
         {hasStatusIcon && (
-          <div className={css(styles.formControlUtilities)}>
+          <span className={css(styles.formControlUtilities)}>
             <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />
-          </div>
+          </span>
         )}
-      </div>
+      </span>
     );
   }
 }

package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-resize-both pf-m-disabled custom class"
     style="height: 6px;"
   >
@@ -12,6 +12,6 @@ exports[`Matches the snapshot 1`] = `
       disabled=""
       required=""
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;

package/src/components/TextInput/TextInput.tsx

@@ -190,7 +190,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
@@ -218,12 +218,12 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         />
         {(customIcon || hasStatusIcon) && (
-          <div className={css(styles.formControlUtilities)}>
+          <span className={css(styles.formControlUtilities)}>
             {customIcon && <FormControlIcon customIcon={customIcon} />}
             {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          </div>
+          </span>
         )}
-      </div>
+      </span>
     );
   }
 

package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -2,167 +2,171 @@
 
 exports[`TextInput default read only text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-readonly"
   >
     <input
       aria-invalid="false"
       aria-label="default read only text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       readonly=""
       type="text"
       value="read only default"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-disabled"
   >
     <input
       aria-invalid="false"
       aria-label="disabled text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       disabled=""
       type="text"
       value=""
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput invalid text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <input
       aria-invalid="true"
       aria-label="invalid text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       type="text"
       value="test input"
     />
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput plain read only text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
   >
     <input
       aria-invalid="false"
       aria-label="plain read only text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       readonly=""
       type="text"
       value="read only plain"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <input
       aria-invalid="false"
       aria-label="read only text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       type="text"
       value="read only"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput simple text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <input
       aria-invalid="false"
       aria-label="simple text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       type="text"
       value="test input"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput validated text input error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <input
       aria-invalid="true"
       aria-label="validated text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-      data-ouia-component-type="PF4/TextInput"
+      data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
       type="text"
       value="test input"
     />
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;

package/src/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap

@@ -79,8 +79,10 @@ exports[`Tile renders with icon 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 448 512"
+          width="1em"
         >
           <path
             d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
@@ -114,8 +116,10 @@ exports[`Tile renders with stacked icon 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 448 512"
+          width="1em"
         >
           <path
             d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
@@ -149,8 +153,10 @@ exports[`Tile renders with stacked large icon 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 448 512"
+          width="1em"
         >
           <path
             d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"

package/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches the snapshot 1`] = `
   <h1
     class="pf-v5-c-title pf-m-2xl"
     data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF4/Title"
+    data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"
   >
     Test

package/src/components/Toolbar/ToolbarContent.tsx

@@ -17,8 +17,10 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Vertical alignment. */
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment of children */
-  alignItems?: 'center' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
   children?: React.ReactNode;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
@@ -55,6 +57,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
+      alignSelf,
       ...props
     } = this.props;
 
@@ -76,8 +79,9 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                 showClearFiltersButton: showClearFiltersButtonContext,
                 toolbarId: toolbarIdContext
               }) => {
-                const expandableContentId = `${toolbarId ||
-                  toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
+                const expandableContentId = `${
+                  toolbarId || toolbarIdContext
+                }-expandable-content-${ToolbarContent.currentId++}`;
                 return (
                   <ToolbarContentContext.Provider
                     value={{
@@ -89,7 +93,12 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                     <div
                       className={css(
                         styles.toolbarContentSection,
-                        alignItems === 'center' && styles.modifiers.alignItemsCenter
+                        alignItems === 'center' && styles.modifiers.alignItemsCenter,
+                        alignItems === 'start' && styles.modifiers.alignItemsStart,
+                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+                        alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+                        alignSelf === 'start' && styles.modifiers.alignSelfStart,
+                        alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline
                       )}
                     >
                       {children}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -32,9 +32,9 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     '2xl'?: 'alignRight' | 'alignLeft';
   };
   /** Vertical alignment of children */
-  alignItems?: 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
-  alignSelf?: 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -53,6 +53,8 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
+  /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;
 }
@@ -69,6 +71,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       className,
       variant,
       children,
+      isOverflowContainer,
       innerRef,
       ...props
     } = this.props;
@@ -84,10 +87,13 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+              alignSelf === 'start' && styles.modifiers.alignSelfStart,
               alignSelf === 'center' && styles.modifiers.alignSelfCenter,
               alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
+              isOverflowContainer && styles.modifiers.overflowContainer,
               className
             )}
             {...props}

package/src/components/Toolbar/ToolbarItem.tsx

@@ -47,8 +47,10 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment of children */
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
-  alignSelf?: 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -70,6 +72,8 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
   isAllExpanded?: boolean;
+  /** Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** Content to be rendered inside the data toolbar item */
   children?: React.ReactNode;
 }
@@ -82,9 +86,11 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   widths,
   align,
   alignSelf,
+  alignItems,
   id,
   children,
   isAllExpanded,
+  isOverflowContainer,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -116,9 +122,14 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
                   | 'chipGroup'
               ],
             isAllExpanded && styles.modifiers.expanded,
+            isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            alignItems === 'start' && styles.modifiers.alignItemsStart,
+            alignItems === 'center' && styles.modifiers.alignItemsCenter,
+            alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+            alignSelf === 'start' && styles.modifiers.alignSelfStart,
             alignSelf === 'center' && styles.modifiers.alignSelfCenter,
             alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
             className

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolbarGroup } from '../ToolbarGroup';
+
+describe('ToolbarItem', () => {
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
+  });
+});

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
@@ -16,4 +16,9 @@ describe('ToolbarItem', () => {
     const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarItem data-testid="toolbaritem" isOverflowContainer>Test</ToolbarItem>);
+    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
+  });
 });

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Toolbar should render inset 1`] = `
   <div
     class="pf-v5-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
     data-ouia-component-id="OUIA-Generated-Toolbar-1"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >
@@ -60,7 +60,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
   <div
     class="pf-v5-c-toolbar pf-m-toggle-group-container"
     data-ouia-component-id="OUIA-Generated-Toolbar-3"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
   >
@@ -83,7 +83,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               aria-label="Show Filters"
               class="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
             />
@@ -119,7 +119,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               aria-disabled="false"
               class="pf-v5-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-3"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
             >
@@ -133,7 +133,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               aria-disabled="false"
               class="pf-v5-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-4"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
             >
@@ -157,7 +157,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           <div
             aria-labelledby="pf-random-id-0"
             class="pf-v5-c-chip-group pf-m-category"
-            data-ouia-component-type="PF4/ChipGroup"
+            data-ouia-component-type="PF5/ChipGroup"
             data-ouia-safe="true"
             role="group"
           >
@@ -181,7 +181,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   <div
                     class="pf-v5-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
-                    data-ouia-component-type="PF4/Chip"
+                    data-ouia-component-type="PF5/Chip"
                     data-ouia-safe="true"
                   >
                     <span
@@ -203,7 +203,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
                         class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
-                        data-ouia-component-type="PF4/Button"
+                        data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
                         id="remove_pf-random-id-1"
                         type="button"
@@ -212,8 +212,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
                           aria-hidden="true"
                           class="pf-v5-svg"
                           fill="currentColor"
+                          height="1em"
                           role="img"
                           viewBox="0 0 352 512"
+                          width="1em"
                         >
                           <path
                             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -229,7 +231,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   <div
                     class="pf-v5-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-2"
-                    data-ouia-component-type="PF4/Chip"
+                    data-ouia-component-type="PF5/Chip"
                     data-ouia-safe="true"
                   >
                     <span
@@ -251,7 +253,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
                         class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
-                        data-ouia-component-type="PF4/Button"
+                        data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
                         id="remove_pf-random-id-2"
                         type="button"
@@ -260,8 +262,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
                           aria-hidden="true"
                           class="pf-v5-svg"
                           fill="currentColor"
+                          height="1em"
                           role="img"
                           viewBox="0 0 352 512"
+                          width="1em"
                         >
                           <path
                             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -282,7 +286,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="Close chip group"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_group_pf-random-id-0"
                 type="button"
@@ -291,8 +295,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   aria-hidden="true"
                   class="pf-v5-svg"
                   fill="currentColor"
+                  height="1em"
                   role="img"
                   viewBox="0 0 512 512"
+                  width="1em"
                 >
                   <path
                     d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -319,7 +325,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           aria-disabled="false"
           class="pf-v5-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-1"
-          data-ouia-component-type="PF4/Button"
+          data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
         >
@@ -333,7 +339,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           aria-disabled="false"
           class="pf-v5-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-2"
-          data-ouia-component-type="PF4/Button"
+          data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
         >
@@ -350,7 +356,7 @@ exports[`Toolbar should render with page inset flag 1`] = `
   <div
     class="pf-v5-c-toolbar pf-m-page-insets"
     data-ouia-component-id="OUIA-Generated-Toolbar-2"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >