@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.20

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

@@ -1,48 +1,92 @@
 import React from 'react';
-
-import { render, screen } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
+import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
 
-import { ClipboardCopyToggle, ClipboardCopyToggleProps } from '../ClipboardCopyToggle';
-
-const props: ClipboardCopyToggleProps = {
-  id: 'my-id',
-  textId: 'my-text-id',
-  contentId: 'my-content-id',
-  isExpanded: false,
-  className: 'myclassName',
-  onClick: jest.fn()
+const onClickMock = jest.fn();
+const requiredProps = {
+  id: 'main-id',
+  textId: 'text-id',
+  contentId: 'content-id',
+  onClick: onClickMock
 };
 
-describe('ClipboardCopyToggle', () => {
-  test('toggle button render', () => {
-    const desc = 'toggle content';
-    const { asFragment } = render(<ClipboardCopyToggle {...props} aria-label={desc} />);
+// Must be kept as first test to avoid Button's ouiaId updating in snapshots
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ClipboardCopyToggle {...requiredProps} />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with id prop', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id);
+});
+
+test('Renders with aria-labelledby concatenated from id and textId props', () => {
+  render(
+    <>
+      <ClipboardCopyToggle aria-label="Toggle content" {...requiredProps} />
+      <span id={requiredProps.textId}>Test content</span>
+    </>
+  );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
+});
+
+test('Renders with aria-controls with passed in contentId prop', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-controls', requiredProps.contentId);
+});
 
-  test('toggle button onClick', async () => {
-    const onclick = jest.fn();
-    const user = userEvent.setup();
+test('Renders with aria-expanded of false by default', () => {
+  render(<ClipboardCopyToggle {...requiredProps} />);
 
-    render(<ClipboardCopyToggle {...props} onClick={onclick} />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+});
 
-    await user.click(screen.getByRole('button'));
-    expect(onclick).toHaveBeenCalled();
-  });
+test('Renders with aria-expanded based on isExpanded prop', () => {
+  render(<ClipboardCopyToggle isExpanded={true} {...requiredProps} />);
 
-  test('has aria-expanded set to true when isExpanded is true', () => {
-    render(<ClipboardCopyToggle {...props} isExpanded />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+});
 
-    const toggleButton = screen.getByRole('button');
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
-  });
+test('Calls onClick when clipboard toggle is clicked', async () => {
+  const user = userEvent.setup();
+  render(<ClipboardCopyToggle {...requiredProps} />);
+
+  await user.click(screen.getByRole('button'));
+  expect(onClickMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onClick when clipboard toggle is not clicked', async () => {
+  const user = userEvent.setup();
+  render(
+    <>
+      <ClipboardCopyToggle {...requiredProps} />
+      <button>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+  expect(onClickMock).not.toHaveBeenCalled();
+});
 
-  test('has aria-expanded set to false when isExpanded is false', () => {
-    render(<ClipboardCopyToggle {...props} />);
+test('Spreads additional props to container', () => {
+  render(<ClipboardCopyToggle data-prop="test" {...requiredProps} />);
 
-    const toggleButton = screen.getByRole('button');
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
-  });
+  expect(screen.getByRole('button')).toHaveAttribute('data-prop', 'test');
 });

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-clipboard-copy"
+    data-ouia-component-id="snapshot"
+    data-ouia-component-type="PF5/ClipboardCopy"
+    data-ouia-safe="true"
+    id="snapshot"
+  >
+    <div
+      class="pf-v5-c-clipboard-copy__group"
+    >
+      <span
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Copyable input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-26"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          id="text-input-34"
+          type="text"
+          value="Copyable text"
+        />
+      </span>
+      <div
+        data-testid="clipboardCopyButton-mock"
+      >
+        <p>
+          exitDelay: 1500
+        </p>
+        <p>
+          entryDelay: 300
+        </p>
+        <p>
+          maxWidth: 150px
+        </p>
+        <p>
+          position: top
+        </p>
+        <p>
+          button-ariaLabel: Copy to clipboard
+        </p>
+        <div>
+          children: Copy to clipboard
+        </div>
+        <button>
+          Test CCB clicker
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v5-c-clipboard-copy__actions-item"
+  >
+    Action text
+  </span>
+</DocumentFragment>
+`;

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

@@ -1,31 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`copy button render 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="click this button to copy text"
-    aria-labelledby="my-id my-text-id"
-    class="pf-v5-c-button pf-m-control fancy-copy-button"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    id="my-id"
-    type="button"
+  <div
+    data-testid="tooltip-mock"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 448 512"
-      width="1em"
+    <div
+      data-testid="tooltip-mock-content"
     >
-      <path
-        d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-      />
-    </svg>
-  </button>
+      <div>
+        Button content
+      </div>
+    </div>
+    <p>
+      exitDelay: 0
+    </p>
+    <p>
+      entryDelay: 300
+    </p>
+    <p>
+      maxWidth: 100px
+    </p>
+    <p>
+      position: top
+    </p>
+    <a>
+      onTooltipHidden clicker
+    </a>
+    <button
+      aria-disabled="false"
+      aria-label="Copyable input"
+      aria-labelledby="button-id text-id"
+      class="pf-v5-c-button pf-m-control"
+      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-type="PF5/Button"
+      data-ouia-safe="true"
+      id="button-id"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 448 512"
+        width="1em"
+      >
+        <path
+          d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;

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

@@ -1,32 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`expanded code content render 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-clipboard-copy__expandable-content class-1"
+    class="pf-v5-c-clipboard-copy__expandable-content"
     contenteditable="true"
-    id="id-1"
   >
-    <pre
-      dir="ltr"
-    >
-      {
-    "name": "@patternfly/react-core",
-    "version": "1.33.2"
-  }
-    </pre>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`expanded content render 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-clipboard-copy__expandable-content class-1"
-    contenteditable="true"
-    id="id-1"
-  >
-    This is my text
+    Expanded content
   </div>
 </DocumentFragment>
 `;

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

@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClipboardCopyToggle toggle button render 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
-    aria-controls="my-id my-content-id"
+    aria-controls="content-id"
     aria-disabled="false"
     aria-expanded="false"
-    aria-label="toggle content"
-    aria-labelledby="my-id my-text-id"
-    class="pf-v5-c-button pf-m-control myclassName"
+    aria-labelledby="main-id text-id"
+    class="pf-v5-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
-    id="my-id"
+    id="main-id"
     type="button"
   >
     <div

package/src/components/CodeBlock/CodeBlockAction.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block';
 
 export interface CodeBlockActionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the code block action */
@@ -13,7 +14,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
+  <div className={css(`${styles.codeBlockActions}-item`, className)} {...props}>
     {children}
   </div>
 );

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

@@ -14,6 +14,7 @@ import { DataListContent } from '../DataListContent';
 import { Button } from '../../Button';
 import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown';
 import { MenuToggle } from '../../MenuToggle';
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
 describe('DataList', () => {
   test('List default', () => {
@@ -176,7 +177,7 @@ describe('DataList', () => {
         test
       </DataListItem>
     );
-    expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-data-list__item pf-m-expanded');
+    expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`);
   });
 
   test('Item', () => {
@@ -233,8 +234,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-        : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass(styles.dataListCell)
+        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
     });
   });
 
@@ -256,8 +257,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-        : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass(styles.dataListCell)
+        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
     });
   });
 

package/src/components/DataList/examples/DataList.md

@@ -23,6 +23,10 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 ## Examples
 

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -19,6 +19,11 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+/* eslint-disable camelcase */
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
@@ -45,9 +50,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     display: 'block',
     width: '100%',
     padding: '.25rem .5rem',
-    color: 'var(--pf-v5-global--Color--100)',
-    backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
-    border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid'
+    color: global_Color_100.var,
+    backgroundColor: global_BackgroundColor_200.var,
+    border: `${global_BorderWidth_sm.var} ${global_BorderColor_100.var} solid`
   };
 
   return (

package/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_width_chars';
 
 /** Props that customize the requirement of a date */
 export interface DatePickerRequiredObject {
@@ -131,7 +132,7 @@ const DatePickerBase = (
   const [pristine, setPristine] = React.useState(true);
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
-  const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
+  const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();

package/src/components/DescriptionList/DescriptionList.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
+import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
+import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
 export interface BreakpointModifiers {
   default?: string;
@@ -102,19 +105,19 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+      ...setBreakpointModifiers(cssGridTemplateColumnsMin.name, autoFitMinModifier)
     };
   }
   if (termWidth) {
     style = {
       ...style,
-      ...{ '--pf-v5-c-description-list__term--width': termWidth }
+      ...{ [cssTermWidth.name]: termWidth }
     };
   }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+      ...setBreakpointModifiers(cssHorizontalTermWidth.name, horizontalTermWidthModifier)
     };
   }
 

package/src/components/DragDrop/Draggable.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
+import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor';
 
 export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside DragDrop */
@@ -276,7 +277,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       left: rect.x,
       width: rect.width,
       height: rect.height,
-      '--pf-v5-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging),
+      [cssDraggingBackgroundColor.name]: getInheritedBackgroundColor(dragging),
       position: 'fixed',
       zIndex: 5000
     } as any;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -2,9 +2,12 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
-import { formatBreakpointMods } from '../../helpers/util';
+import { formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
+import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
+import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
+import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
 
 export interface DrawerPanelFocusTrapObject {
   /** Enables a focus trap on the drawer panel content. This will also automatically
@@ -108,7 +111,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
       if (isRTL) {
@@ -195,7 +198,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     e.stopPropagation();
     if (!isResizing) {
@@ -227,7 +230,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
@@ -261,7 +264,7 @@ 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 isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     const key = e.key;
     if (
@@ -306,19 +309,19 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};
   if (defaultSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis'] = defaultSize;
+    boundaryCssVars[cssPanelMdFlexBasis.name] = defaultSize;
   }
   if (minSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--min'] = minSize;
+    boundaryCssVars[cssPanelMdFlexBasisMin.name] = minSize;
   }
   if (maxSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--max'] = maxSize;
+    boundaryCssVars[cssPanelMdFlexBasisMax.name] = maxSize;
   }
 
   const isValidFocusTrap = focusTrap?.enabled && !isStatic;

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

@@ -18,6 +18,8 @@ propComponents:
 section: components
 ---
 
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Examples
 
 ### Basic

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -8,7 +8,8 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
-  Button
+  Button,
+  Title
 } from '@patternfly/react-core';
 
 export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
@@ -30,9 +31,9 @@ export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
   const panelContent = (
     <DrawerPanelContent>
       <DrawerHead>
-        <h3 className="pf-v5-c-title pf-m-2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+        <Title headingLevel="h3" size="2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer title{' '}
-        </h3>
+        </Title>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -9,6 +9,7 @@ import {
   DrawerCloseButton,
   Button
 } from '@patternfly/react-core';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -44,7 +45,7 @@ export const DrawerStatic: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button className="pf-v5-u-hidden-on-md" aria-expanded={isExpanded} onClick={onClick}>
+      <Button className={accessibility.hiddenOnMd} aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
       <Drawer isStatic isExpanded={isExpanded} onExpand={onExpand}>

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,8 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
   /** The container to append the popper to. Defaults to 'inline'. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface DropdownToggleProps {

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Tooltip } from '../Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 
 /** Renders an individual control button for moving selected options between each
  * dual list selector pane.
@@ -40,7 +41,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css('pf-v5-c-dual-list-selector__controls-item', className)} {...props}>
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}