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

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

@@ -4,7 +4,7 @@ exports[`Button aria-disabled is set to true and tabIndex to -1 if component is
 <DocumentFragment>
   <a
     aria-disabled="true"
-    class="pf-c-button pf-m-primary pf-m-disabled"
+    class="pf-v5-c-button pf-m-primary pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-12"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -20,7 +20,7 @@ exports[`Button control button 1`] = `
   <button
     aria-disabled="false"
     aria-label="control"
-    class="pf-c-button pf-m-control"
+    class="pf-v5-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -36,7 +36,7 @@ exports[`Button danger button 1`] = `
   <button
     aria-disabled="false"
     aria-label="danger"
-    class="pf-c-button pf-m-danger"
+    class="pf-v5-c-button pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-danger-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -51,7 +51,7 @@ exports[`Button isAriaDisabled button 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="true"
-    class="pf-c-button pf-m-primary pf-m-aria-disabled"
+    class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-5"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -66,7 +66,7 @@ exports[`Button isAriaDisabled link button 1`] = `
 <DocumentFragment>
   <a
     aria-disabled="true"
-    class="pf-c-button pf-m-primary pf-m-aria-disabled"
+    class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-6"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -80,7 +80,7 @@ exports[`Button isBlock 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-block"
+    class="pf-v5-c-button pf-m-primary pf-m-block"
     data-ouia-component-id="OUIA-Generated-Button-primary-3"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -95,7 +95,7 @@ exports[`Button isDanger link 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-link pf-m-danger"
+    class="pf-v5-c-button pf-m-link pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-link-3"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -110,7 +110,7 @@ exports[`Button isDanger secondary 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-secondary pf-m-danger"
+    class="pf-v5-c-button pf-m-secondary pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Button-secondary-2"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -125,7 +125,7 @@ exports[`Button isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="true"
-    class="pf-c-button pf-m-primary pf-m-disabled"
+    class="pf-v5-c-button pf-m-primary pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-Button-primary-4"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -141,7 +141,7 @@ exports[`Button isInline 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-link pf-m-inline"
+    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-safe="true"
@@ -156,24 +156,24 @@ exports[`Button isLoading 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-progress pf-m-in-progress"
+    class="pf-v5-c-button pf-m-primary pf-m-progress pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-primary-9"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-c-button__progress"
+      class="pf-v5-c-button__progress"
     >
       <svg
         aria-label="Contents"
         aria-valuetext="Loading"
-        class="pf-c-spinner pf-m-md"
+        class="pf-v5-c-spinner pf-m-md"
         role="progressbar"
         viewBox="0 0 100 100"
       >
         <circle
-          class="pf-c-spinner__path"
+          class="pf-v5-c-spinner__path"
           cx="50"
           cy="50"
           fill="none"
@@ -191,24 +191,24 @@ exports[`Button isLoading icon only 1`] = `
   <button
     aria-disabled="false"
     aria-label="Upload"
-    class="pf-c-button pf-m-plain pf-m-in-progress"
+    class="pf-v5-c-button pf-m-plain pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-plain-2"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-c-button__progress"
+      class="pf-v5-c-button__progress"
     >
       <svg
         aria-label="Contents"
         aria-valuetext="Loading"
-        class="pf-c-spinner pf-m-md"
+        class="pf-v5-c-spinner pf-m-md"
         role="progressbar"
         viewBox="0 0 100 100"
       >
         <circle
-          class="pf-c-spinner__path"
+          class="pf-v5-c-spinner__path"
           cx="50"
           cy="50"
           fill="none"
@@ -228,24 +228,24 @@ exports[`Button isLoading inline link 1`] = `
   <button
     aria-disabled="false"
     aria-label="Loading"
-    class="pf-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
+    class="pf-v5-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
     data-ouia-component-id="OUIA-Generated-Button-link-5"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-c-button__progress"
+      class="pf-v5-c-button__progress"
     >
       <svg
         aria-label="Contents"
         aria-valuetext="Loading"
-        class="pf-c-spinner pf-m-inline"
+        class="pf-v5-c-spinner pf-m-inline"
         role="progressbar"
         viewBox="0 0 100 100"
       >
         <circle
-          class="pf-c-spinner__path"
+          class="pf-v5-c-spinner__path"
           cx="50"
           cy="50"
           fill="none"
@@ -263,7 +263,7 @@ exports[`Button link button 1`] = `
   <button
     aria-disabled="false"
     aria-label="link"
-    class="pf-c-button pf-m-link"
+    class="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -278,18 +278,18 @@ exports[`Button link with icon 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-link"
+    class="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-2"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-c-button__icon pf-m-start"
+      class="pf-v5-c-button__icon pf-m-start"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 576 512"
@@ -309,7 +309,7 @@ exports[`Button plain button 1`] = `
   <button
     aria-disabled="false"
     aria-label="plain"
-    class="pf-c-button pf-m-plain"
+    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-safe="true"
@@ -325,7 +325,7 @@ exports[`Button primary button 1`] = `
   <button
     aria-disabled="false"
     aria-label="primary"
-    class="pf-c-button pf-m-primary"
+    class="pf-v5-c-button pf-m-primary"
     data-ouia-component-id="OUIA-Generated-Button-primary-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -341,7 +341,7 @@ exports[`Button secondary button 1`] = `
   <button
     aria-disabled="false"
     aria-label="secondary"
-    class="pf-c-button pf-m-secondary"
+    class="pf-v5-c-button pf-m-secondary"
     data-ouia-component-id="OUIA-Generated-Button-secondary-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -356,7 +356,7 @@ exports[`Button size large 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-display-lg"
+    class="pf-v5-c-button pf-m-primary pf-m-display-lg"
     data-ouia-component-id="OUIA-Generated-Button-primary-8"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -371,7 +371,7 @@ exports[`Button size small 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-small"
+    class="pf-v5-c-button pf-m-primary pf-m-small"
     data-ouia-component-id="OUIA-Generated-Button-primary-7"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -387,7 +387,7 @@ exports[`Button tertiary button 1`] = `
   <button
     aria-disabled="false"
     aria-label="tertiary"
-    class="pf-c-button pf-m-tertiary"
+    class="pf-v5-c-button pf-m-tertiary"
     data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
@@ -403,7 +403,7 @@ exports[`Button warning button 1`] = `
   <button
     aria-disabled="false"
     aria-label="warning"
-    class="pf-c-button pf-m-warning"
+    class="pf-v5-c-button pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Button-warning-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"

package/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap

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

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

@@ -3,7 +3,7 @@
 exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card pf-m-compact"
+    class="pf-v5-c-card pf-m-compact"
     data-ouia-component-id="OUIA-Generated-Card-6"
     data-ouia-component-type="PF4/Card"
     data-ouia-safe="true"
@@ -15,7 +15,7 @@ exports[`Card card with isCompact applied  1`] = `
 exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card"
+    class="pf-v5-c-card"
     data-ouia-component-id="OUIA-Generated-Card-1"
     data-ouia-component-type="PF4/Card"
     data-ouia-safe="true"

package/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardBody body with no-fill applied 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__body pf-m-no-fill"
+    class="pf-v5-c-card__body pf-m-no-fill"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`CardBody body with no-fill applied 1`] = `
 exports[`CardBody renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__body"
+    class="pf-v5-c-card__body"
   />
 </DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardExpandableContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__expandable-content"
+    class="pf-v5-c-card__expandable-content"
   />
 </DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardFooter renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__footer"
+    class="pf-v5-c-card__footer"
   />
 </DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`CardHeader actions are rendered 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__header"
+    class="pf-v5-c-card__header"
   >
     <div
-      class="pf-c-card__actions"
+      class="pf-v5-c-card__actions"
     >
         
     </div>
@@ -17,25 +17,25 @@ exports[`CardHeader actions are rendered 1`] = `
 exports[`CardHeader onExpand adds the toggle button 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__header"
+    class="pf-v5-c-card__header"
   >
     <div
-      class="pf-c-card__header-toggle"
+      class="pf-v5-c-card__header-toggle"
     >
       <button
         aria-disabled="false"
-        class="pf-c-button pf-m-plain"
+        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-safe="true"
         type="button"
       >
         <span
-          class="pf-c-card__header-toggle-icon"
+          class="pf-v5-c-card__header-toggle-icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-svg"
+            class="pf-v5-svg"
             fill="currentColor"
             role="img"
             viewBox="0 0 256 512"

package/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__header-main"
+    class="pf-v5-c-card__header-main"
   >
     text
   </div>

package/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`CardTitle renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-card__title"
+    class="pf-v5-c-card__title"
   >
     <div
-      class="pf-c-card__title-text"
+      class="pf-v5-c-card__title-text"
     >
       text
     </div>

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

@@ -90,7 +90,6 @@ describe('Checkbox', () => {
       <Checkbox component="span" label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
     );
     const span = container.querySelector('span');
-    expect(span).toHaveClass('pf-c-check');
-   
+    expect(span).toHaveClass('pf-v5-c-check');
   });
 });

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

@@ -3,12 +3,12 @@
 exports[`Checkbox controlled - 3rd state 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check pf-m-standalone"
+    class="pf-v5-c-check pf-m-standalone"
   >
     <input
       aria-invalid="false"
       aria-label="check"
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-2"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -22,13 +22,13 @@ exports[`Checkbox controlled - 3rd state 1`] = `
 exports[`Checkbox controlled 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check pf-m-standalone"
+    class="pf-v5-c-check pf-m-standalone"
   >
     <input
       aria-invalid="false"
       aria-label="check"
       checked=""
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-1"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -42,12 +42,12 @@ exports[`Checkbox controlled 1`] = `
 exports[`Checkbox isDisabled 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check pf-m-standalone"
+    class="pf-v5-c-check pf-m-standalone"
   >
     <input
       aria-invalid="false"
       aria-label="check"
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-4"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -62,13 +62,13 @@ exports[`Checkbox isDisabled 1`] = `
 exports[`Checkbox label is function 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check"
+    class="pf-v5-c-check"
   >
     <input
       aria-invalid="false"
       aria-label="check"
       checked=""
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-6"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -76,7 +76,7 @@ exports[`Checkbox label is function 1`] = `
       type="checkbox"
     />
     <label
-      class="pf-c-check__label"
+      class="pf-v5-c-check__label"
       for="check"
     >
       <h1>
@@ -90,13 +90,13 @@ exports[`Checkbox label is function 1`] = `
 exports[`Checkbox label is node 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check"
+    class="pf-v5-c-check"
   >
     <input
       aria-invalid="false"
       aria-label="check"
       checked=""
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-7"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -104,7 +104,7 @@ exports[`Checkbox label is node 1`] = `
       type="checkbox"
     />
     <label
-      class="pf-c-check__label"
+      class="pf-v5-c-check__label"
       for="check"
     >
       <h1>
@@ -118,13 +118,13 @@ exports[`Checkbox label is node 1`] = `
 exports[`Checkbox label is string 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check"
+    class="pf-v5-c-check"
   >
     <input
       aria-invalid="false"
       aria-label="check"
       checked=""
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-5"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -132,7 +132,7 @@ exports[`Checkbox label is string 1`] = `
       type="checkbox"
     />
     <label
-      class="pf-c-check__label"
+      class="pf-v5-c-check__label"
       for="check"
     >
       Label
@@ -144,14 +144,14 @@ exports[`Checkbox label is string 1`] = `
 exports[`Checkbox passing HTML attribute 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check"
+    class="pf-v5-c-check"
   >
     <input
       aria-invalid="false"
       aria-label="check"
       aria-labelledby="labelId"
       checked=""
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-9"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -159,7 +159,7 @@ exports[`Checkbox passing HTML attribute 1`] = `
       type="checkbox"
     />
     <label
-      class="pf-c-check__label"
+      class="pf-v5-c-check__label"
       for="check"
     >
       label
@@ -171,13 +171,13 @@ exports[`Checkbox passing HTML attribute 1`] = `
 exports[`Checkbox passing class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check class-123"
+    class="pf-v5-c-check class-123"
   >
     <input
       aria-invalid="false"
       aria-label="check"
       checked=""
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-8"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"
@@ -185,7 +185,7 @@ exports[`Checkbox passing class 1`] = `
       type="checkbox"
     />
     <label
-      class="pf-c-check__label"
+      class="pf-v5-c-check__label"
       for="check"
     >
       label
@@ -197,12 +197,12 @@ exports[`Checkbox passing class 1`] = `
 exports[`Checkbox uncontrolled 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-check pf-m-standalone"
+    class="pf-v5-c-check pf-m-standalone"
   >
     <input
       aria-invalid="false"
       aria-label="check"
-      class="pf-c-check__input"
+      class="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-3"
       data-ouia-component-type="PF4/Checkbox"
       data-ouia-safe="true"

package/src/components/Checkbox/examples/checkbox.css

@@ -1,3 +1,3 @@
 .ws-react-c-checkbox .pf-c-check.nested {
-  padding-left: var(--pf-global--spacer--md);
+  padding-left: var(--pf-v5-global--spacer--md);
 }

package/src/components/Chip/Chip.tsx

@@ -79,7 +79,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   }
 
   setChipStyle = () => ({
-    '--pf-c-chip__text--MaxWidth': this.props.textMaxWidth
+    '--pf-v5-c-chip__text--MaxWidth': this.props.textMaxWidth
   });
 
   renderOverflowChip = () => {
@@ -157,7 +157,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
             <Button
               onClick={onClick}
               variant="plain"
-              aria-label={closeBtnAriaLabel}  
+              aria-label={closeBtnAriaLabel}
               id={`remove_${id}`}
               aria-labelledby={`remove_${id} ${id}`}
               ouiaId={ouiaId || closeBtnAriaLabel}
@@ -186,7 +186,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     const { isOverflowChip } = this.props;
     return (
       <GenerateId>
-        {randomId => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))}
+        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))}
       </GenerateId>
     );
   }