@patternfly/react-core 5.1.1-prerelease.12 → 5.1.1-prerelease.14

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.11","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.13","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.11","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.13","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.11","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.13","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.12",
+  "version": "5.1.1-prerelease.14",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "f856af105070fec983e76afa262b37aa99737e63"
+  "gitHead": "e27aac2f35e0a8bb16fa5397eb5ef841b3ecc578"
 }

package/src/components/Checkbox/examples/Checkbox.md

@@ -6,46 +6,52 @@ cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 
-import './checkbox.css';
-
 ## Examples
 
 ### Controlled
 
 ```ts file='./CheckboxControlled.tsx'
+
 ```
 
 ### Uncontrolled
 
 ```ts file='./CheckboxUncontrolled.tsx'
+
 ```
 
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'
+
 ```
 
 ### Checkbox with description
 
 ```ts file='./CheckboxWithDescription.tsx'
+
 ```
 
 ### Checkbox with body
 
 ```ts file='./CheckboxWithBody.tsx'
+
 ```
 
 ### Checkbox with description and body
 
 ```ts file='./CheckboxWithDescriptionBody.tsx'
+
 ```
 
 ### Standalone input
 
 ```ts file='./CheckboxStandaloneInput.tsx'
+
 ```
 
 ### Required input
 
 ```ts file='./CheckboxRequired.tsx'
+
 ```

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -49,22 +49,24 @@ export const CheckboxControlled: React.FunctionComponent = () => {
         onChange={handleChange}
         id="controlled-check-1"
         name="check1"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 1"
-        isChecked={isChecked2}
-        onChange={handleChange}
-        id="controlled-check-2"
-        name="check2"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 2"
-        isChecked={isChecked3}
-        onChange={handleChange}
-        id="controlled-check-3"
-        name="check3"
+        body={
+          <>
+            <Checkbox
+              label="Child CheckBox 1"
+              isChecked={isChecked2}
+              onChange={handleChange}
+              id="controlled-check-2"
+              name="check2"
+            />
+            <Checkbox
+              label="Child CheckBox 2"
+              isChecked={isChecked3}
+              onChange={handleChange}
+              id="controlled-check-3"
+              name="check3"
+            />
+          </>
+        }
       />
       <Checkbox
         label="Controlled CheckBox"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -242,6 +242,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
+                    {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton
                     exitDelay={exitDelay}

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -36,7 +36,7 @@ class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps>
         contentEditable={!isReadOnly}
         {...props}
       >
-        {isCode ? <pre>{children}</pre> : children}
+        {isCode ? <pre dir="ltr">{children}</pre> : children}
       </div>
     );
   }

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
@@ -31,7 +32,9 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     aria-expanded={isExpanded}
     {...props}
   >
-    {isExpanded ? <AngleDownIcon aria-hidden="true" /> : <AngleRightIcon aria-hidden="true" />}
+    <div className={css(styles.clipboardCopyToggleIcon)}>
+      <AngleRightIcon aria-hidden="true" />
+    </div>
   </Button>
 );
 ClipboardCopyToggle.displayName = 'ClipboardCopyToggle';

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap

@@ -7,7 +7,9 @@ exports[`expanded code content render 1`] = `
     contenteditable="true"
     id="id-1"
   >
-    <pre>
+    <pre
+      dir="ltr"
+    >
       {
     "name": "@patternfly/react-core",
     "version": "1.33.2"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -15,19 +15,23 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
     id="my-id"
     type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 256 512"
-      width="1em"
+    <div
+      class="pf-v5-c-clipboard-copy__toggle-icon"
     >
-      <path
-        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+        />
+      </svg>
+    </div>
   </button>
 </DocumentFragment>
 `;

package/src/components/Drawer/Drawer.tsx

@@ -11,7 +11,7 @@ export enum DrawerColorVariant {
 export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content rendered in the left hand panel */
+  /** Content rendered in the drawer panel */
   children?: React.ReactNode;
   /** Indicates if the drawer is expanded */
   isExpanded?: boolean;
@@ -19,8 +19,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   isInline?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
-  /** Position of the drawer panel */
-  position?: 'left' | 'right' | 'bottom';
+  /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
+  position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
 }
@@ -39,7 +39,7 @@ export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
   isExpanded: false,
   isStatic: false,
   onExpand: () => {},
-  position: 'right',
+  position: 'end',
   drawerRef: null,
   drawerContentRef: null,
   isInline: false
@@ -51,7 +51,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isExpanded = false,
   isInline = false,
   isStatic = false,
-  position = 'right',
+  position = 'end',
   onExpand = () => {},
   ...props
 }: DrawerProps) => {
@@ -66,7 +66,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
           isStatic && styles.modifiers.static,
-          position === 'left' && styles.modifiers.panelLeft,
+          (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,
           className
         )}

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -87,8 +87,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const previouslyFocusedElement = React.useRef(null);
   let currWidth: number = 0;
   let panelRect: DOMRect;
-  let right: number;
-  let left: number;
+  let end: number;
+  let start: number;
   let bottom: number;
   let setInitialVals: boolean = true;
 
@@ -108,23 +108,52 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
 
-    if (isInline && position === 'right') {
-      splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
-    } else if (isInline && position === 'left') {
-      splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
-      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
-    } else if (position === 'right') {
-      splitterPos =
-        drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-    } else if (position === 'left') {
-      splitterPos =
-        splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+    if (isInline && (position === 'end' || position === 'right')) {
+      if (isRTL) {
+        splitterPos = panel.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+      }
+    } else if (isInline && (position === 'start' || position === 'left')) {
+      if (isRTL) {
+        splitterPos = splitterRef.current.getBoundingClientRect().left - panel.current.getBoundingClientRect().right;
+        drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
+        drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+      }
+    } else if (position === 'end' || position === 'right') {
+      if (isRTL) {
+        splitterPos =
+          drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().left -
+          drawerContentRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos =
+          drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().right -
+          drawerContentRef.current.getBoundingClientRect().left;
+      }
+    } else if (position === 'start' || position === 'left') {
+      if (isRTL) {
+        splitterPos =
+          splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().left -
+          drawerContentRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos =
+          splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().right -
+          drawerContentRef.current.getBoundingClientRect().left;
+      }
     } else if (position === 'bottom') {
       splitterPos =
         drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
@@ -166,6 +195,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+
     e.stopPropagation();
     if (!isResizing) {
       return;
@@ -173,17 +204,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
 
     if (setInitialVals) {
       panelRect = panel.current.getBoundingClientRect();
-      right = panelRect.right;
-      left = panelRect.left;
+      if (isRTL) {
+        start = panelRect.right;
+        end = panelRect.left;
+      } else {
+        end = panelRect.right;
+        start = panelRect.left;
+      }
       bottom = panelRect.bottom;
       setInitialVals = false;
     }
     const mousePos = controlPosition;
     let newSize = 0;
-    if (position === 'right') {
-      newSize = right - mousePos;
-    } else if (position === 'left') {
-      newSize = mousePos - left;
+    if (position === 'end' || position === 'right') {
+      newSize = isRTL ? mousePos - end : end - mousePos;
+    } else if (position === 'start' || position === 'left') {
+      newSize = isRTL ? start - mousePos : mousePos - start;
     } else {
       newSize = bottom - mousePos;
     }
@@ -225,6 +261,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const callbackMouseUp = React.useCallback(handleMouseup, []);
 
   const handleKeys = (e: React.KeyboardEvent) => {
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+
     const key = e.key;
     if (
       key !== 'Escape' &&
@@ -248,9 +286,17 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
     let delta = 0;
     if (key === 'ArrowRight') {
-      delta = position === 'left' ? increment : -increment;
+      if (isRTL) {
+        delta = position === 'left' || position === 'start' ? -increment : increment;
+      } else {
+        delta = position === 'left' || position === 'start' ? increment : -increment;
+      }
     } else if (key === 'ArrowLeft') {
-      delta = position === 'left' ? -increment : increment;
+      if (isRTL) {
+        delta = position === 'left' || position === 'start' ? increment : -increment;
+      } else {
+        delta = position === 'left' || position === 'start' ? -increment : increment;
+      }
     } else if (key === 'ArrowUp') {
       delta = increment;
     } else if (key === 'ArrowDown') {

package/src/components/Drawer/examples/Drawer.md

@@ -26,15 +26,15 @@ section: components
 
 ```
 
-### Panel on right
+### Panel at end
 
-```ts file="./DrawerPanelRight.tsx"
+```ts file="./DrawerPanelEnd.tsx"
 
 ```
 
-### Panel on left
+### Panel at start
 
-```ts file="./DrawerPanelLeft.tsx"
+```ts file="./DrawerPanelStart.tsx"
 
 ```
 
@@ -50,15 +50,15 @@ section: components
 
 ```
 
-### Inline panel on right
+### Inline panel at end
 
-```ts file="./DrawerInlinePanelRight.tsx"
+```ts file="./DrawerInlinePanelEnd.tsx"
 
 ```
 
-### Inline panel on left
+### Inline panel at start
 
-```ts file="./DrawerInlinePanelLeft.tsx"
+```ts file="./DrawerInlinePanelStart.tsx"
 
 ```
 
@@ -100,15 +100,15 @@ section: components
 
 ```
 
-### Resizable on right
+### Resizable at end
 
-```ts file="DrawerResizableOnRight.tsx"
+```ts file="DrawerResizableAtEnd.tsx"
 
 ```
 
-### Resizable on left
+### Resizable at start
 
-```ts file="DrawerResizableOnLeft.tsx"
+```ts file="DrawerResizableAtStart.tsx"
 
 ```
 

package/src/components/Drawer/examples/{DrawerInlinePanelRight.tsx → DrawerInlinePanelEnd.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerInlinePanelRight: React.FunctionComponent = () => {
+export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 

package/src/components/Drawer/examples/{DrawerInlinePanelLeft.tsx → DrawerInlinePanelStart.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerInlinePanelLeft: React.FunctionComponent = () => {
+export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerInlinePanelLeft: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} isInline position="left" onExpand={onExpand}>
+      <Drawer isExpanded={isExpanded} isInline position="start" onExpand={onExpand}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerPanelLeft.tsx → DrawerPanelEnd.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerPanelLeft: React.FunctionComponent = () => {
+export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerPanelLeft: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} position="left" onExpand={onExpand}>
+      <Drawer isExpanded={isExpanded} position="end" onExpand={onExpand}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerPanelRight.tsx → DrawerPanelStart.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerPanelRight: React.FunctionComponent = () => {
+export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerPanelRight: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} position="right" onExpand={onExpand}>
+      <Drawer isExpanded={isExpanded} position="start" onExpand={onExpand}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerResizableOnRight.tsx → DrawerResizableAtEnd.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerResizableOnRight: React.FunctionComponent = () => {
+export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -32,7 +32,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
   };
 
   const panelContent = (
-    <DrawerPanelContent isResizable onResize={onResize} id="right-resize-panel" defaultSize={'500px'} minSize={'150px'}>
+    <DrawerPanelContent isResizable onResize={onResize} id="end-resize-panel" defaultSize={'500px'} minSize={'150px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -52,7 +52,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="right">
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="end">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Drawer/examples/{DrawerResizableOnLeft.tsx → DrawerResizableAtStart.tsx}

@@ -10,7 +10,7 @@ import {
   Button
 } from '@patternfly/react-core';
 
-export const DrawerResizableOnLeft: React.FunctionComponent = () => {
+export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef<HTMLDivElement>();
 
@@ -47,7 +47,7 @@ export const DrawerResizableOnLeft: React.FunctionComponent = () => {
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
-      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="left">
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="start">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Modal/ModalContent.tsx

@@ -148,15 +148,13 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
 
   const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
 
+  const hasNoDescription = !description && !ariaDescribedby;
+  const id = hasNoDescription ? descriptorId : undefined;
+
   const modalBody = hasNoBodyWrapper ? (
     children
   ) : (
-    <ModalBoxBody
-      aria-label={bodyAriaLabel}
-      role={bodyAriaRole || defaultModalBodyAriaRole}
-      {...props}
-      {...(!description && !ariaDescribedby && { id: descriptorId })}
-    >
+    <ModalBoxBody aria-label={bodyAriaLabel} role={bodyAriaRole || defaultModalBodyAriaRole} {...props} id={id}>
       {children}
     </ModalBoxBody>
   );

package/src/components/Slider/SliderStep.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
+import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Additional classes added to the slider step. */
@@ -26,7 +27,7 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { '--pf-v5-c-slider__step--Left': `${value}%` } as React.CSSProperties;
+  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}