@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.92

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

@@ -3,7 +3,7 @@
 exports[`TextContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-content ''"
+    class="pf-v5-c-content ''"
   >
     ReactNode
   </div>

package/src/components/Text/__tests__/TextContent.test.tsx

@@ -18,7 +18,7 @@ test('Renders children', () => {
 
 test('Renders with class name pf-c-content', () => {
   render(<TextContent>Test</TextContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-content', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-content', { exact: true });
 });
 
 test('Renders with custom class name when className prop is provided', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-content"
+    class="pf-v5-c-content"
   >
     Test
   </div>

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

@@ -69,7 +69,7 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
+  expect(screen.getByRole('textbox')).toHaveClass('pf-v5-c-form-control', { exact: true });
 });
 
 test('Renders validated text area with success className', () => {

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

@@ -5,10 +5,10 @@ exports[`Matches the snapshot 1`] = `
   <textarea
     aria-invalid="false"
     aria-label="test textarea"
-    class="pf-c-form-control custom class"
+    class="pf-v5-c-form-control custom class"
     disabled=""
     required=""
-    style="--pf-c-form-control--textarea--Height: 6px;"
+    style="--pf-v5-c-form-control--textarea--Height: 6px;"
   />
 </DocumentFragment>
 `;

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

@@ -5,7 +5,7 @@ exports[`TextInput default read only text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="default read only text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-5"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -21,7 +21,7 @@ exports[`TextInput disabled text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="disabled text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-3"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -37,7 +37,7 @@ exports[`TextInput invalid text input 1`] = `
   <input
     aria-invalid="true"
     aria-label="invalid text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-7"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -52,7 +52,7 @@ exports[`TextInput plain read only text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="plain read only text input"
-    class="pf-c-form-control pf-m-plain"
+    class="pf-v5-c-form-control pf-m-plain"
     data-ouia-component-id="OUIA-Generated-TextInputBase-6"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -68,7 +68,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
   <input
     aria-invalid="false"
     aria-label="read only text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-4"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -84,7 +84,7 @@ exports[`TextInput simple text input 1`] = `
   <input
     aria-invalid="false"
     aria-label="simple text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-2"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
@@ -99,7 +99,7 @@ exports[`TextInput validated text input error 1`] = `
   <input
     aria-invalid="true"
     aria-label="validated text input"
-    class="pf-c-form-control"
+    class="pf-v5-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-10"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"

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

@@ -22,7 +22,7 @@ describe('TextInputGroup', () => {
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).toHaveClass('pf-c-text-input-group');
+    expect(inputGroup).toHaveClass('pf-v5-c-text-input-group');
   });
 
   it('renders with custom class names provided via prop', () => {

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -25,7 +25,7 @@ describe('TextInputGroupMain', () => {
 
     const inputGroupMain = screen.getByText('Test');
 
-    expect(inputGroupMain).toHaveClass('pf-c-text-input-group__main');
+    expect(inputGroupMain).toHaveClass('pf-v5-c-text-input-group__main');
   });
 
   it('does not render with class pf-m-icon when an icon prop is not passed', () => {
@@ -57,7 +57,7 @@ describe('TextInputGroupMain', () => {
 
     const inputGroupText = screen.getByRole('textbox').parentNode;
 
-    expect(inputGroupText).toHaveClass('pf-c-text-input-group__text');
+    expect(inputGroupText).toHaveClass('pf-v5-c-text-input-group__text');
   });
 
   it('renders the input with class pf-c-text-input-group__text-input', () => {
@@ -65,7 +65,7 @@ describe('TextInputGroupMain', () => {
 
     const input = screen.getByRole('textbox');
 
-    expect(input).toHaveClass('pf-c-text-input-group__text-input');
+    expect(input).toHaveClass('pf-v5-c-text-input-group__text-input');
   });
 
   it('does not render the icon when it is not passed', () => {
@@ -191,7 +191,7 @@ describe('TextInputGroupMain', () => {
     const hintInput = screen.getByRole('textbox', { hidden: true });
 
     expect(hintInput).toHaveClass('pf-m-hint');
-    expect(hintInput).toHaveClass('pf-c-text-input-group__text-input');
+    expect(hintInput).toHaveClass('pf-v5-c-text-input-group__text-input');
   });
 
   it('renders the hint input as disabled', () => {
@@ -285,7 +285,7 @@ describe('TextInputGroupMain', () => {
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
-  it('calls the onBlur callback when the input loses focus', async() => {
+  it('calls the onBlur callback when the input loses focus', async () => {
     const onBlurMock = jest.fn();
     const user = userEvent.setup();
 

package/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx

@@ -23,7 +23,7 @@ describe('TextInputGroupUtilities', () => {
 
     const utilities = screen.getByText('Test');
 
-    expect(utilities).toHaveClass('pf-c-text-input-group__utilities');
+    expect(utilities).toHaveClass('pf-v5-c-text-input-group__utilities');
   });
 
   it('matches the snapshot', () => {

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

@@ -3,7 +3,7 @@
 exports[`TextInputGroup matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-text-input-group"
+    class="pf-v5-c-text-input-group"
   >
     Test
   </div>

package/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroupMain.test.tsx.snap

@@ -3,15 +3,15 @@
 exports[`TextInputGroupMain matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-text-input-group__main"
+    class="pf-v5-c-text-input-group__main"
   >
     Test
     <span
-      class="pf-c-text-input-group__text"
+      class="pf-v5-c-text-input-group__text"
     >
       <input
         aria-label="Type to filter"
-        class="pf-c-text-input-group__text-input"
+        class="pf-v5-c-text-input-group__text-input"
         type="text"
         value=""
       />

package/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroupUtilities.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextInputGroupUtilities matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-text-input-group__utilities"
+    class="pf-v5-c-text-input-group__utilities"
   >
     <button>
       Test

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

@@ -3,15 +3,15 @@
 exports[`Tile basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tile"
+    class="pf-v5-c-tile"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header"
+      class="pf-v5-c-tile__header"
     >
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
@@ -24,15 +24,15 @@ exports[`Tile renders disabled 1`] = `
 <DocumentFragment>
   <div
     aria-disabled="true"
-    class="pf-c-tile pf-m-disabled"
+    class="pf-v5-c-tile pf-m-disabled"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header"
+      class="pf-v5-c-tile__header"
     >
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
@@ -45,15 +45,15 @@ exports[`Tile renders selected 1`] = `
 <DocumentFragment>
   <div
     aria-selected="true"
-    class="pf-c-tile pf-m-selected"
+    class="pf-v5-c-tile pf-m-selected"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header"
+      class="pf-v5-c-tile__header"
     >
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
@@ -65,19 +65,19 @@ exports[`Tile renders selected 1`] = `
 exports[`Tile renders with icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tile"
+    class="pf-v5-c-tile"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header"
+      class="pf-v5-c-tile__header"
     >
       <div
-        class="pf-c-tile__icon"
+        class="pf-v5-c-tile__icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 448 512"
@@ -88,7 +88,7 @@ exports[`Tile renders with icon 1`] = `
         </svg>
       </div>
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
@@ -100,19 +100,19 @@ exports[`Tile renders with icon 1`] = `
 exports[`Tile renders with stacked icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tile"
+    class="pf-v5-c-tile"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header pf-m-stacked"
+      class="pf-v5-c-tile__header pf-m-stacked"
     >
       <div
-        class="pf-c-tile__icon"
+        class="pf-v5-c-tile__icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 448 512"
@@ -123,7 +123,7 @@ exports[`Tile renders with stacked icon 1`] = `
         </svg>
       </div>
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
@@ -135,19 +135,19 @@ exports[`Tile renders with stacked icon 1`] = `
 exports[`Tile renders with stacked large icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tile pf-m-display-lg"
+    class="pf-v5-c-tile pf-m-display-lg"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header pf-m-stacked"
+      class="pf-v5-c-tile__header pf-m-stacked"
     >
       <div
-        class="pf-c-tile__icon"
+        class="pf-v5-c-tile__icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 448 512"
@@ -158,7 +158,7 @@ exports[`Tile renders with stacked large icon 1`] = `
         </svg>
       </div>
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
@@ -170,21 +170,21 @@ exports[`Tile renders with stacked large icon 1`] = `
 exports[`Tile renders with subtext 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tile"
+    class="pf-v5-c-tile"
     role="option"
     tabindex="0"
   >
     <div
-      class="pf-c-tile__header"
+      class="pf-v5-c-tile__header"
     >
       <div
-        class="pf-c-tile__title"
+        class="pf-v5-c-tile__title"
       >
         test
       </div>
     </div>
     <div
-      class="pf-c-tile__body"
+      class="pf-v5-c-tile__body"
     >
       test subtext
     </div>

package/src/components/TimePicker/TimePicker.tsx

@@ -473,7 +473,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       ...props
     } = this.props;
     const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
-    const style = { '--pf-c-date-picker__input--c-form-control--Width': width } as React.CSSProperties;
+    const style = { '--pf-v5-c-date-picker__input--c-form-control--Width': width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
     const randomId = id || getUniqueId('time-picker');

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

@@ -44,10 +44,9 @@ test('Renders with correct datetime attribute with current date by default', ()
   // we want an ISO value without the ms to expect as the datetime value.
   const isoDateWithoutMS = new Date().toISOString().split('.')[0];
 
-  expect(screen.getByText(new Date().toLocaleString(), { normalizer: getDefaultNormalizer({ collapseWhitespace: false }) })).toHaveAttribute(
-    'datetime',
-    expect.stringMatching(isoDateWithoutMS)
-  );
+  expect(
+    screen.getByText(new Date().toLocaleString(), { normalizer: getDefaultNormalizer({ collapseWhitespace: false }) })
+  ).toHaveAttribute('datetime', expect.stringMatching(isoDateWithoutMS));
 });
 
 test('Renders passed in date with default formatting', () => {
@@ -145,7 +144,7 @@ test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', (
 test('Renders with pf-c-timestamp by default', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-c-timestamp');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-v5-c-timestamp');
 });
 
 test('Renders with pf-c-timestamp__text by default', () => {

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

@@ -18,12 +18,12 @@ test('Renders children', () => {
 
 test('Renders with the pf-c-title', () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-c-title');
+  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title');
 });
 
 test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-c-title pf-m-2xl', { exact: true });
+  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title pf-m-2xl', { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

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

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

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

@@ -3,17 +3,17 @@
 exports[`ToggleGroup basic not selected 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toggle-group__item"
+    class="pf-v5-c-toggle-group__item"
   >
     <button
       aria-label="basic not selected"
       aria-pressed="false"
-      class="pf-c-toggle-group__button"
+      class="pf-v5-c-toggle-group__button"
       id="toggleGroupItem"
       type="button"
     >
       <span
-        class="pf-c-toggle-group__text"
+        class="pf-v5-c-toggle-group__text"
       >
         test
       </span>
@@ -25,17 +25,17 @@ exports[`ToggleGroup basic not selected 1`] = `
 exports[`ToggleGroup basic selected 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toggle-group__item"
+    class="pf-v5-c-toggle-group__item"
   >
     <button
       aria-label="basic selected"
       aria-pressed="true"
-      class="pf-c-toggle-group__button pf-m-selected"
+      class="pf-v5-c-toggle-group__button pf-m-selected"
       id="toggleGroupItem"
       type="button"
     >
       <span
-        class="pf-c-toggle-group__text"
+        class="pf-v5-c-toggle-group__text"
       >
         test
       </span>
@@ -47,17 +47,17 @@ exports[`ToggleGroup basic selected 1`] = `
 exports[`ToggleGroup icon variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toggle-group__item"
+    class="pf-v5-c-toggle-group__item"
   >
     <button
       aria-label="icon variant"
       aria-pressed="true"
-      class="pf-c-toggle-group__button pf-m-selected"
+      class="pf-v5-c-toggle-group__button pf-m-selected"
       id="toggleGroupItem"
       type="button"
     >
       <span
-        class="pf-c-toggle-group__icon"
+        class="pf-v5-c-toggle-group__icon"
       >
         icon
       </span>
@@ -70,34 +70,34 @@ exports[`ToggleGroup isCompact 1`] = `
 <DocumentFragment>
   <div
     aria-label="Label"
-    class="pf-c-toggle-group pf-m-compact"
+    class="pf-v5-c-toggle-group pf-m-compact"
     role="group"
   >
     <div
-      class="pf-c-toggle-group__item"
+      class="pf-v5-c-toggle-group__item"
     >
       <button
         aria-pressed="false"
-        class="pf-c-toggle-group__button"
+        class="pf-v5-c-toggle-group__button"
         type="button"
       >
         <span
-          class="pf-c-toggle-group__text"
+          class="pf-v5-c-toggle-group__text"
         >
           Test
         </span>
       </button>
     </div>
     <div
-      class="pf-c-toggle-group__item"
+      class="pf-v5-c-toggle-group__item"
     >
       <button
         aria-pressed="false"
-        class="pf-c-toggle-group__button"
+        class="pf-v5-c-toggle-group__button"
         type="button"
       >
         <span
-          class="pf-c-toggle-group__text"
+          class="pf-v5-c-toggle-group__text"
         >
           Test
         </span>
@@ -110,18 +110,18 @@ exports[`ToggleGroup isCompact 1`] = `
 exports[`ToggleGroup isDisabled 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toggle-group__item"
+    class="pf-v5-c-toggle-group__item"
   >
     <button
       aria-label="isDisabled"
       aria-pressed="false"
-      class="pf-c-toggle-group__button"
+      class="pf-v5-c-toggle-group__button"
       disabled=""
       id="toggleGroupItem"
       type="button"
     >
       <span
-        class="pf-c-toggle-group__text"
+        class="pf-v5-c-toggle-group__text"
       >
         test
       </span>

package/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroupItemElement.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`empty 1`] = `
 exports[`icon variant 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-toggle-group__icon"
+    class="pf-v5-c-toggle-group__icon"
   >
     ICON
   </span>
@@ -21,7 +21,7 @@ exports[`icon variant 1`] = `
 exports[`text variant 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-toggle-group__text"
+    class="pf-v5-c-toggle-group__text"
   >
     Test
   </span>

package/src/components/ToggleGroup/examples/toggleGroup.css

@@ -1,3 +1,3 @@
 #ws-react-c-togglegroup-light-variant {
-  background-color: var(--pf-global--BackgroundColor--200);
+  background-color: var(--pf-v5-global--BackgroundColor--200);
 }

package/src/components/Toolbar/ToolbarItem.tsx

@@ -95,7 +95,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   if (widths) {
     Object.entries(widths || {}).map(
       ([breakpoint, value]) =>
-        (widthStyles[`--pf-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
+        (widthStyles[`--pf-v5-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
     );
   }
 

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

@@ -3,11 +3,11 @@
 exports[`ToolbarChipGroupContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar__content pf-m-hidden string"
+    class="pf-v5-c-toolbar__content pf-m-hidden string"
     hidden=""
   >
     <div
-      class="pf-c-toolbar__group"
+      class="pf-v5-c-toolbar__group"
     />
   </div>
 </DocumentFragment>

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

@@ -3,21 +3,21 @@
 exports[`ToolbarContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar__content string"
+    class="pf-v5-c-toolbar__content string"
   >
     <div
-      class="pf-c-toolbar__content-section"
+      class="pf-v5-c-toolbar__content-section"
     >
       <div>
         ReactNode
       </div>
     </div>
     <div
-      class="pf-c-toolbar__expandable-content"
+      class="pf-v5-c-toolbar__expandable-content"
       id="string-expandable-content-0"
     >
       <div
-        class="pf-c-toolbar__group"
+        class="pf-v5-c-toolbar__group"
       />
     </div>
   </div>