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

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -3,39 +3,39 @@
 exports[`slider renders continuous slider 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100
           </div>
@@ -48,18 +48,18 @@ exports[`slider renders continuous slider 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
     </div>
     <div
-      class="pf-c-slider__value"
+      class="pf-v5-c-slider__value"
     >
       <input
         aria-invalid="false"
         aria-label="Slider value input"
-        class="pf-c-form-control pf-c-form-control"
+        class="pf-v5-c-form-control pf-v5-c-form-control"
         data-ouia-component-id="OUIA-Generated-TextInputBase-1"
         data-ouia-component-type="PF4/TextInput"
         data-ouia-safe="true"
@@ -74,45 +74,45 @@ exports[`slider renders continuous slider 1`] = `
 exports[`slider renders continuous slider with custom steps 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0%
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100%
           </div>
@@ -125,7 +125,7 @@ exports[`slider renders continuous slider with custom steps 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
@@ -137,39 +137,39 @@ exports[`slider renders continuous slider with custom steps 1`] = `
 exports[`slider renders disabled slider 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider pf-m-disabled"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
+    class="pf-v5-c-slider pf-m-disabled"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100
           </div>
@@ -182,7 +182,7 @@ exports[`slider renders disabled slider 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="-1"
       />
@@ -194,39 +194,39 @@ exports[`slider renders disabled slider 1`] = `
 exports[`slider renders discrete slider 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 40%; --pf-c-slider__value--c-form-control--width-chars: 2;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 40%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             10
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             110
           </div>
@@ -239,18 +239,18 @@ exports[`slider renders discrete slider 1`] = `
         aria-valuemin="10"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
     </div>
     <div
-      class="pf-c-slider__value"
+      class="pf-v5-c-slider__value"
     >
       <input
         aria-invalid="false"
         aria-label="Slider value input"
-        class="pf-c-form-control pf-c-form-control"
+        class="pf-v5-c-form-control pf-v5-c-form-control"
         data-ouia-component-id="OUIA-Generated-TextInputBase-2"
         data-ouia-component-type="PF4/TextInput"
         data-ouia-safe="true"
@@ -265,74 +265,74 @@ exports[`slider renders discrete slider 1`] = `
 exports[`slider renders discrete slider with custom steps 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0%
           </div>
         </div>
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 25%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 25%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
         </div>
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 50%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 50%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             50%
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 75%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 75%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-tick"
+            class="pf-v5-c-slider__step-tick"
           />
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100%
           </div>
@@ -345,7 +345,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50%"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
@@ -357,39 +357,39 @@ exports[`slider renders discrete slider with custom steps 1`] = `
 exports[`slider renders slider with input 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100
           </div>
@@ -402,21 +402,21 @@ exports[`slider renders slider with input 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
     </div>
     <div
-      class="pf-c-slider__value"
+      class="pf-v5-c-slider__value"
     >
       <div
-        class="pf-c-input-group"
+        class="pf-v5-c-input-group"
       >
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          class="pf-c-form-control pf-c-form-control"
+          class="pf-v5-c-form-control pf-v5-c-form-control"
           data-ouia-component-id="OUIA-Generated-TextInputBase-3"
           data-ouia-component-type="PF4/TextInput"
           data-ouia-safe="true"
@@ -424,7 +424,7 @@ exports[`slider renders slider with input 1`] = `
           value="50"
         />
         <span
-          class="pf-c-input-group__text"
+          class="pf-v5-c-input-group__text"
         >
            %
         </span>
@@ -437,54 +437,54 @@ exports[`slider renders slider with input 1`] = `
 exports[`slider renders slider with input above thumb 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 2;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100
           </div>
         </div>
       </div>
       <div
-        class="pf-c-slider__value pf-m-floating"
+        class="pf-v5-c-slider__value pf-m-floating"
       >
         <div
-          class="pf-c-input-group"
+          class="pf-v5-c-input-group"
         >
           <input
             aria-invalid="false"
             aria-label="Slider value input"
-            class="pf-c-form-control pf-c-form-control"
+            class="pf-v5-c-form-control pf-v5-c-form-control"
             data-ouia-component-id="OUIA-Generated-TextInputBase-4"
             data-ouia-component-type="PF4/TextInput"
             data-ouia-safe="true"
@@ -492,7 +492,7 @@ exports[`slider renders slider with input above thumb 1`] = `
             value="50"
           />
           <span
-            class="pf-c-input-group__text"
+            class="pf-v5-c-input-group__text"
           >
              %
           </span>
@@ -505,7 +505,7 @@ exports[`slider renders slider with input above thumb 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
@@ -517,16 +517,16 @@ exports[`slider renders slider with input above thumb 1`] = `
 exports[`slider renders slider with input actions 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
-      class="pf-c-slider__actions"
+      class="pf-v5-c-slider__actions"
     >
       <button
         aria-disabled="false"
         aria-label="Minus"
-        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"
@@ -534,35 +534,35 @@ exports[`slider renders slider with input actions 1`] = `
       />
     </div>
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100
           </div>
@@ -575,18 +575,18 @@ exports[`slider renders slider with input actions 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />
     </div>
     <div
-      class="pf-c-slider__actions"
+      class="pf-v5-c-slider__actions"
     >
       <button
         aria-disabled="false"
         aria-label="Plus"
-        class="pf-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
@@ -600,39 +600,39 @@ exports[`slider renders slider with input actions 1`] = `
 exports[`slider renders slider with tooltip on thumb 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-slider"
-    style="--pf-c-slider--value: 50%; --pf-c-slider__value--c-form-control--width-chars: 1;"
+    class="pf-v5-c-slider"
+    style="--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
-      class="pf-c-slider__main"
+      class="pf-v5-c-slider__main"
     >
       <div
-        class="pf-c-slider__rail"
+        class="pf-v5-c-slider__rail"
       >
         <div
-          class="pf-c-slider__rail-track"
+          class="pf-v5-c-slider__rail-track"
         />
       </div>
       <div
         aria-hidden="true"
-        class="pf-c-slider__steps"
+        class="pf-v5-c-slider__steps"
       >
         <div
-          class="pf-c-slider__step pf-m-active"
-          style="--pf-c-slider__step--Left: 0%;"
+          class="pf-v5-c-slider__step pf-m-active"
+          style="--pf-v5-c-slider__step--Left: 0%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             0
           </div>
         </div>
         <div
-          class="pf-c-slider__step"
-          style="--pf-c-slider__step--Left: 100%;"
+          class="pf-v5-c-slider__step"
+          style="--pf-v5-c-slider__step--Left: 100%;"
         >
           <div
-            class="pf-c-slider__step-label"
+            class="pf-v5-c-slider__step-label"
           >
             100
           </div>
@@ -645,7 +645,7 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         aria-valuemin="0"
         aria-valuenow="50"
         aria-valuetext="50"
-        class="pf-c-slider__thumb"
+        class="pf-v5-c-slider__thumb"
         role="slider"
         tabindex="0"
       />