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

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

@@ -18,12 +18,12 @@ test('Renders children', () => {
 
 test('Renders with only class name pf-c-sidebar by default', () => {
   render(<Sidebar>Test</Sidebar>);
-  expect(screen.getByText('Test').parentElement).toHaveClass('pf-c-sidebar', { exact: true });
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar', { exact: true });
 });
 
 test('Renders with class name pf-c-sidebar', () => {
   render(<Sidebar>Test</Sidebar>);
-  expect(screen.getByText('Test').parentElement).toHaveClass('pf-c-sidebar');
+  expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar');
 });
 
 test('Renders with custom class name when className prop is provided', () => {
@@ -63,7 +63,7 @@ test('Renders with class name pf-m-gutter when hasGutter prop is passed', () =>
 
 test('Renders with class name pf-m-sidebar__main by default for child component', () => {
   render(<Sidebar>Test</Sidebar>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__main');
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__main');
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -9,12 +9,12 @@ test('Renders children', () => {
 
 test('Renders with only class name pf-c-sidebar__content by default', () => {
   render(<SidebarContent>Test</SidebarContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__content', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content', { exact: true });
 });
 
 test('Renders with class name pf-c-sidebar__content', () => {
   render(<SidebarContent>Test</SidebarContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__content');
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content');
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -9,12 +9,12 @@ test('Renders children', () => {
 
 test('Renders with with only class name pf-c-sidebar__panel by default', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__panel', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel', { exact: true });
 });
 
 test('Renders with with class name pf-c-sidebar__panel', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-c-sidebar__panel');
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel');
 });
 
 test('Renders with custom class name when className prop is provided', () => {

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

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

package/src/components/Sidebar/__tests__/__snapshots__/SidebarContent.test.tsx.snap

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

package/src/components/Sidebar/__tests__/__snapshots__/SidebarPanel.test.tsx.snap

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

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListGroup.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-simple-list__section"
+    class="pf-v5-c-simple-list__section"
   >
     <h2
       aria-hidden="true"
-      class="pf-c-simple-list__title ''"
+      class="pf-v5-c-simple-list__title ''"
       id="''"
     />
     <ul

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListItem.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`SimpleListItem should match snapshot (auto-generated) 1`] = `
     class="''"
   >
     <button
-      class="pf-c-simple-list__item-link ''"
+      class="pf-v5-c-simple-list__item-link ''"
       type="button"
     >
       ReactNode

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

@@ -3,7 +3,7 @@
 exports[`SimpleList renders aria-labelled content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-simple-list"
+    class="pf-v5-c-simple-list"
   >
     <ul
       aria-label="This is a simple list"
@@ -13,7 +13,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
         class=""
       >
         <button
-          class="pf-c-simple-list__item-link"
+          class="pf-v5-c-simple-list__item-link"
           type="button"
         >
           Item 1
@@ -23,7 +23,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
         class=""
       >
         <button
-          class="pf-c-simple-list__item-link"
+          class="pf-v5-c-simple-list__item-link"
           type="button"
         >
           Item 2
@@ -33,7 +33,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
         class=""
       >
         <button
-          class="pf-c-simple-list__item-link"
+          class="pf-v5-c-simple-list__item-link"
           type="button"
         >
           Item 3
@@ -47,7 +47,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
 exports[`SimpleList renders content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-simple-list"
+    class="pf-v5-c-simple-list"
   >
     <ul
       role="list"
@@ -56,7 +56,7 @@ exports[`SimpleList renders content 1`] = `
         class=""
       >
         <button
-          class="pf-c-simple-list__item-link"
+          class="pf-v5-c-simple-list__item-link"
           type="button"
         >
           Item 1
@@ -66,7 +66,7 @@ exports[`SimpleList renders content 1`] = `
         class=""
       >
         <button
-          class="pf-c-simple-list__item-link"
+          class="pf-v5-c-simple-list__item-link"
           type="button"
         >
           Item 2
@@ -76,7 +76,7 @@ exports[`SimpleList renders content 1`] = `
         class=""
       >
         <button
-          class="pf-c-simple-list__item-link"
+          class="pf-v5-c-simple-list__item-link"
           type="button"
         >
           Item 3
@@ -90,14 +90,14 @@ exports[`SimpleList renders content 1`] = `
 exports[`SimpleList renders grouped content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-simple-list"
+    class="pf-v5-c-simple-list"
   >
     <section
-      class="pf-c-simple-list__section"
+      class="pf-v5-c-simple-list__section"
     >
       <h2
         aria-hidden="true"
-        class="pf-c-simple-list__title"
+        class="pf-v5-c-simple-list__title"
         id=""
       >
         Group 1
@@ -111,7 +111,7 @@ exports[`SimpleList renders grouped content 1`] = `
           class=""
         >
           <button
-            class="pf-c-simple-list__item-link"
+            class="pf-v5-c-simple-list__item-link"
             type="button"
           >
             Item 1
@@ -121,7 +121,7 @@ exports[`SimpleList renders grouped content 1`] = `
           class=""
         >
           <button
-            class="pf-c-simple-list__item-link"
+            class="pf-v5-c-simple-list__item-link"
             type="button"
           >
             Item 2
@@ -131,7 +131,7 @@ exports[`SimpleList renders grouped content 1`] = `
           class=""
         >
           <button
-            class="pf-c-simple-list__item-link"
+            class="pf-v5-c-simple-list__item-link"
             type="button"
           >
             Item 3

package/src/components/Skeleton/Skeleton.tsx

@@ -27,7 +27,7 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
   ...props
 }: SkeletonProps) => {
   const fontHeightClassName = fontSize
-    ? Object.values(styles.modifiers).find(key => key === `pf-m-text-${fontSize}`)
+    ? Object.values(styles.modifiers).find((key) => key === `pf-m-text-${fontSize}`)
     : undefined;
 
   return (
@@ -42,13 +42,13 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
       )}
       {...((width || height) && {
         style: {
-          '--pf-c-skeleton--Width': width ? width : undefined,
-          '--pf-c-skeleton--Height': height ? height : undefined,
+          '--pf-v5-c-skeleton--Width': width ? width : undefined,
+          '--pf-v5-c-skeleton--Height': height ? height : undefined,
           ...props.style
         } as React.CSSProperties
       })}
     >
-      <span className="pf-u-screen-reader">{screenreaderText}</span>
+      <span className="pf-v5-u-screen-reader">{screenreaderText}</span>
     </div>
   );
 };

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

@@ -3,10 +3,10 @@
 exports[`skeleton circle skeleton 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-circle"
+    class="pf-v5-c-skeleton pf-m-circle"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -15,10 +15,10 @@ exports[`skeleton circle skeleton 1`] = `
 exports[`skeleton default 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
+    class="pf-v5-c-skeleton"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -27,10 +27,10 @@ exports[`skeleton default 1`] = `
 exports[`skeleton skeleton with 2xl font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-2xl"
+    class="pf-v5-c-skeleton pf-m-text-2xl"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -39,10 +39,10 @@ exports[`skeleton skeleton with 2xl font size 1`] = `
 exports[`skeleton skeleton with 3xl font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-3xl"
+    class="pf-v5-c-skeleton pf-m-text-3xl"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -51,10 +51,10 @@ exports[`skeleton skeleton with 3xl font size 1`] = `
 exports[`skeleton skeleton with 4xl font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-4xl"
+    class="pf-v5-c-skeleton pf-m-text-4xl"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -63,11 +63,11 @@ exports[`skeleton skeleton with 4xl font size 1`] = `
 exports[`skeleton skeleton with 25% height 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Height: 25%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Height: 25%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -76,11 +76,11 @@ exports[`skeleton skeleton with 25% height 1`] = `
 exports[`skeleton skeleton with 25% width 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Width: 25%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Width: 25%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -89,11 +89,11 @@ exports[`skeleton skeleton with 25% width 1`] = `
 exports[`skeleton skeleton with 33% height 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Height: 33%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Height: 33%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -102,11 +102,11 @@ exports[`skeleton skeleton with 33% height 1`] = `
 exports[`skeleton skeleton with 33% width 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Width: 33%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Width: 33%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -115,11 +115,11 @@ exports[`skeleton skeleton with 33% width 1`] = `
 exports[`skeleton skeleton with 50% height 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Height: 50%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Height: 50%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -128,11 +128,11 @@ exports[`skeleton skeleton with 50% height 1`] = `
 exports[`skeleton skeleton with 50% width 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Width: 50%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Width: 50%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -141,11 +141,11 @@ exports[`skeleton skeleton with 50% width 1`] = `
 exports[`skeleton skeleton with 66% height 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Height: 66%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Height: 66%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -154,11 +154,11 @@ exports[`skeleton skeleton with 66% height 1`] = `
 exports[`skeleton skeleton with 66% width 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Width: 66%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -167,11 +167,11 @@ exports[`skeleton skeleton with 66% width 1`] = `
 exports[`skeleton skeleton with 75% height 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Height: 75%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Height: 75%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -180,11 +180,11 @@ exports[`skeleton skeleton with 75% height 1`] = `
 exports[`skeleton skeleton with 75% width 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Width: 75%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Width: 75%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -193,11 +193,11 @@ exports[`skeleton skeleton with 75% width 1`] = `
 exports[`skeleton skeleton with 100% height 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Height: 100%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Height: 100%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -206,10 +206,10 @@ exports[`skeleton skeleton with 100% height 1`] = `
 exports[`skeleton skeleton with lg font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-lg"
+    class="pf-v5-c-skeleton pf-m-text-lg"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -218,10 +218,10 @@ exports[`skeleton skeleton with lg font size 1`] = `
 exports[`skeleton skeleton with md font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-md"
+    class="pf-v5-c-skeleton pf-m-text-md"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -230,10 +230,10 @@ exports[`skeleton skeleton with md font size 1`] = `
 exports[`skeleton skeleton with sm font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-sm"
+    class="pf-v5-c-skeleton pf-m-text-sm"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -242,10 +242,10 @@ exports[`skeleton skeleton with sm font size 1`] = `
 exports[`skeleton skeleton with xl font size 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-text-xl"
+    class="pf-v5-c-skeleton pf-m-text-xl"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -254,10 +254,10 @@ exports[`skeleton skeleton with xl font size 1`] = `
 exports[`skeleton square skeleton 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skeleton pf-m-square"
+    class="pf-v5-c-skeleton pf-m-square"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </DocumentFragment>

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -3,25 +3,25 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    --pf-global--FontSize--4xl
+    --pf-v5-global--FontSize--4xl
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    --pf-global--FontSize--3xl
+    --pf-v5-global--FontSize--3xl
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    --pf-global--FontSize--2xl
+    --pf-v5-global--FontSize--2xl
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    --pf-global--FontSize--xl
+    --pf-v5-global--FontSize--xl
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    --pf-global--FontSize--lg
+    --pf-v5-global--FontSize--lg
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    --pf-global--FontSize--md
+    --pf-v5-global--FontSize--md
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    --pf-global--FontSize--sm
+    --pf-v5-global--FontSize--sm
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

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

@@ -3,11 +3,11 @@
 exports[`Verify Skip To Content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-skip-to-content"
+    class="pf-v5-c-skip-to-content"
   >
     <a
       aria-disabled="false"
-      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"

package/src/components/Slider/Slider.tsx

@@ -127,9 +127,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
 
   // calculate style value percentage
   const stylePercent = ((localValue - min) * 100) / (max - min);
-  const style = { '--pf-c-slider--value': `${stylePercent}%` } as React.CSSProperties;
+  const style = { '--pf-v5-c-slider--value': `${stylePercent}%` } as React.CSSProperties;
   const widthChars = React.useMemo(() => localInputValue.toString().length, [localInputValue]);
-  const inputStyle = { '--pf-c-slider__value--c-form-control--width-chars': widthChars } as React.CSSProperties;
+  const inputStyle = { '--pf-v5-c-slider__value--c-form-control--width-chars': widthChars } as React.CSSProperties;
 
   const onChangeHandler = (value: string) => {
     setLocalInputValue(Number(value));
@@ -201,7 +201,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const onSliderRailClick = (e: any) => {
     handleThumbMove(e);
     if (snapValue && !areCustomStepsContinuous) {
-      thumbRef.current.style.setProperty('--pf-c-slider--value', `${snapValue}%`);
+      thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${snapValue}%`);
       setValue(snapValue);
       if (onChange) {
         onChange(e, snapValue);
@@ -233,7 +233,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
 
     const newPercentage = getPercentage(newPosition, end);
 
-    thumbRef.current.style.setProperty('--pf-c-slider--value', `${newPercentage}%`);
+    thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${newPercentage}%`);
     // convert percentage to value
     const newValue = Math.round(((newPercentage * (max - min)) / 100 + min) * 100) / 100;
     setValue(newValue);
@@ -241,7 +241,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (!customSteps) {
       // snap to new value if not custom steps
       snapValue = Math.round((Math.round((newValue - min) / step) * step + min) * 100) / 100;
-      thumbRef.current.style.setProperty('--pf-c-slider--value', `${snapValue}%`);
+      thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${snapValue}%`);
       setValue(snapValue);
     }
 
@@ -307,7 +307,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
 
     if (newValue !== localValue) {
-      thumbRef.current.style.setProperty('--pf-c-slider--value', `${newValue}%`);
+      thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${newValue}%`);
       setValue(newValue);
       if (onChange) {
         onChange(e, newValue);

package/src/components/Slider/SliderStep.tsx

@@ -26,7 +26,7 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { '--pf-c-slider__step--Left': `${value}%` } as React.CSSProperties;
+  const style = { '--pf-v5-c-slider__step--Left': `${value}%` } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}