@patternfly/react-core 6.0.0-prerelease.9 → 6.0.0

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -1,7 +1,7 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-v5-c-overflow-menu
+cssPrefix: pf-v6-c-overflow-menu
 propComponents:
   [
     'OverflowMenu',

package/src/components/Page/Page.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
-import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
+import { Drawer, DrawerContent, DrawerPanelContent } from '../Drawer';
 import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb';
 import { PageGroup, PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -345,9 +345,7 @@ class Page extends React.Component<PageProps, PageState> {
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>
               <Drawer isExpanded={isNotificationDrawerExpanded} onExpand={(event) => onNotificationDrawerExpand(event)}>
-                <DrawerContent panelContent={panelContent}>
-                  <DrawerContentBody>{main}</DrawerContentBody>
-                </DrawerContent>
+                <DrawerContent panelContent={panelContent}>{main}</DrawerContent>
               </Drawer>
             </div>
           )}

package/src/components/Page/examples/Page.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-v5-c-page
+cssPrefix: pf-v6-c-page
 propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
@@ -115,7 +115,7 @@ To add additional components and information to a group, you may use the followi
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v5-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v6-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -57,6 +57,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   containerRef?: React.RefObject<HTMLDivElement>;
   /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag indicating if scroll on focus of the first menu item should occur. */
+  shouldPreventScrollOnItemFocus?: boolean;
+  /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
+  focusTimeoutDelay?: number;
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -81,7 +85,9 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   toggleTemplate,
   onPerPageSelect = () => null as any,
   containerRef,
-  appendTo
+  appendTo,
+  shouldPreventScrollOnItemFocus = true,
+  focusTimeoutDelay = 0
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
@@ -134,8 +140,8 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled)');
-          firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+          firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldPreventScrollOnItemFocus });
+        }, focusTimeoutDelay);
       }
 
       // If the event is not on the toggle, close the menu
@@ -155,7 +161,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef]);
+  }, [focusTimeoutDelay, isOpen, menuRef, shouldPreventScrollOnItemFocus]);
 
   const renderItems = () =>
     perPageOptions.map(({ value, title }) => (

package/src/components/Pagination/examples/Pagination.md

@@ -1,7 +1,7 @@
 ---
 id: Pagination
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-pagination
 propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
 ouia: true
 ---

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-v5-c-panel
+cssPrefix: pf-v6-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/examples/Popover.md

@@ -1,7 +1,7 @@
 ---
 id: Popover
 section: components
-cssPrefix: pf-v5-c-popover
+cssPrefix: pf-v6-c-popover
 propComponents: ['Popover']
 ---
 

package/src/components/Progress/examples/Progress.md

@@ -1,7 +1,7 @@
 ---
 id: Progress
 section: components
-cssPrefix: pf-v5-c-progress
+cssPrefix: pf-v6-c-progress
 propComponents: ['Progress']
 ---
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,7 +1,7 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-v5-c-progress-stepper
+cssPrefix: pf-v6-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-radio
+cssPrefix: pf-v6-c-radio
 propComponents: ['Radio']
 ouia: true
 ---

package/src/components/SearchInput/examples/SearchInput.md

@@ -1,7 +1,7 @@
 ---
 id: 'Search input'
 section: components
-cssPrefix: 'pf-v5-c-search-input'
+cssPrefix: 'pf-v6-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 ---
 

package/src/components/Select/Select.tsx

@@ -78,6 +78,10 @@ export interface SelectProps extends MenuProps, OUIAProps {
   maxMenuHeight?: string;
   /** Indicates if the select menu should be scrollable */
   isScrollable?: boolean;
+  /** Flag indicating if scroll on focus of the first menu item should occur. */
+  shouldPreventScrollOnItemFocus?: boolean;
+  /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
+  focusTimeoutDelay?: number;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -88,7 +92,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   selected,
   toggle,
   shouldFocusToggleOnSelect = false,
-  shouldFocusFirstItemOnOpen = true,
+  shouldFocusFirstItemOnOpen = false,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
   isPlain,
@@ -99,6 +103,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   menuHeight,
   maxMenuHeight,
   isScrollable,
+  shouldPreventScrollOnItemFocus = true,
+  focusTimeoutDelay = 0,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -116,8 +122,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
       setTimeout(() => {
         const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+        firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldPreventScrollOnItemFocus });
+      }, focusTimeoutDelay);
     }
 
     prevIsOpen.current = isOpen;
@@ -156,7 +162,16 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
+  }, [
+    isOpen,
+    menuRef,
+    toggleRef,
+    onOpenChange,
+    onOpenChangeKeys,
+    shouldPreventScrollOnItemFocus,
+    shouldFocusFirstItemOnOpen,
+    focusTimeoutDelay
+  ]);
 
   const menu = (
     <Menu

package/src/components/Select/examples/Select.md

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-select
+cssPrefix: pf-v6-c-select
 propComponents:
   ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
 ouia: true

package/src/components/Sidebar/examples/Sidebar.md

@@ -1,6 +1,6 @@
 ---
 id: Sidebar
-cssPrefix: pf-v5-c-sidebar
+cssPrefix: pf-v6-c-sidebar
 section: components
 propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 ---
@@ -43,4 +43,4 @@ A `tabIndex` should be added to the `Sidebar` when there is scrollable content i
 
 ### Padding on content
 ```ts file="./SidebarPaddingContent.tsx"
-```
+```

package/src/components/SimpleList/examples/SimpleList.md

@@ -1,7 +1,7 @@
 ---
 id: Simple list
 section: components
-cssPrefix: pf-v5-c-simple-list
+cssPrefix: pf-v6-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
 

package/src/components/Skeleton/examples/Skeleton.md

@@ -1,17 +1,17 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-v5-c-skeleton
+cssPrefix: pf-v6-c-skeleton
 propComponents: ['Skeleton']
 ---
 
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 ## Examples
 

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

@@ -1,35 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
 /* eslint-disable camelcase */
-import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
-import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
-import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
-import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
-import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
-import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
-import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
+import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
+import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
+import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
+import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
+import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
+import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    {global_font_size_4xl.name}
+    {t_global_font_size_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    {global_font_size_3xl.name}
+    {t_global_font_size_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    {global_font_size_2xl.name}
+    {t_global_font_size_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    {global_font_size_xl.name}
+    {t_global_font_size_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    {global_font_size_lg.name}
+    {t_global_font_size_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    {global_font_size_md.name}
+    {t_global_font_size_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    {global_font_size_sm.name}
+    {t_global_font_size_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

package/src/components/SkipToContent/examples/SkipToContent.md

@@ -1,7 +1,7 @@
 ---
 id: Skip to content
 section: components
-cssPrefix: pf-v5-c-skip-to-content
+cssPrefix: pf-v6-c-skip-to-content
 propComponents: ['SkipToContent']
 ---
 

package/src/components/Slider/examples/Slider.md

@@ -1,7 +1,7 @@
 ---
 id: Slider
 section: components
-cssPrefix: pf-v5-c-slider
+cssPrefix: pf-v6-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 

package/src/components/Spinner/examples/Spinner.md

@@ -1,7 +1,7 @@
 ---
 id: Spinner
 section: components
-cssPrefix: pf-v5-c-spinner
+cssPrefix: pf-v6-c-spinner
 propComponents: ['Spinner']
 ---
 

package/src/components/Switch/examples/Switch.md

@@ -1,7 +1,7 @@
 ---
 id: Switch
 section: components
-cssPrefix: pf-v5-c-switch
+cssPrefix: pf-v6-c-switch
 propComponents: ['Switch']
 ouia: true
 ---

package/src/components/Tabs/OverflowTab.tsx

@@ -21,6 +21,10 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   toggleAriaLabel?: string;
   /** z-index of the overflow tab */
   zIndex?: number;
+  /** Flag indicating if scroll on focus of the first menu item should occur. */
+  shouldPreventScrollOnItemFocus?: boolean;
+  /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
+  focusTimeoutDelay?: number;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
@@ -30,6 +34,8 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   defaultTitleText = 'More',
   toggleAriaLabel,
   zIndex = 9999,
+  shouldPreventScrollOnItemFocus = true,
+  focusTimeoutDelay = 0,
   ...props
 }: OverflowTabProps) => {
   const menuRef = React.useRef<HTMLDivElement>();
@@ -78,9 +84,9 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     setTimeout(() => {
       if (menuRef?.current) {
         const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
+        firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldPreventScrollOnItemFocus });
       }
-    }, 0);
+    }, focusTimeoutDelay);
   };
 
   const overflowTab = (

package/src/components/Tabs/examples/Tabs.md

@@ -1,7 +1,7 @@
 ---
 id: Tabs
 section: components
-cssPrefix: pf-v5-c-tabs
+cssPrefix: pf-v6-c-tabs
 propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---

package/src/components/TextArea/examples/TextArea.md

@@ -2,7 +2,7 @@
 id: Text area
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 

package/src/components/TextInput/examples/TextInput.md

@@ -2,7 +2,7 @@
 id: Text input
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Text input group
 section: components
-cssPrefix: pf-v5-c-text-input-group
+cssPrefix: pf-v6-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 
@@ -10,19 +10,27 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
 
-### Basic
+### Basic text input group 
+
+A basic text input group updates its contents as users enter text.
 
 ```ts file="./TextInputGroupBasic.tsx"
 
 ```
 
-### Disabled
+### Disabled text input group
+
+To prevent users from making edits to a text input group, you can disable it using `isDisabled`.
 
 ```ts file="./TextInputGroupDisabled.tsx"
 
 ```
 
-### Utilities and icon
+### With icon and utilities
+
+To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to `icon` within `<TextInputGroupMain>`.
+
+You can also add additional actions or utilities via `<TextInputGroupUtilities>`. The following example includes a clear button that allows users to remove their previous input. 
 
 ```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
 
@@ -36,7 +44,9 @@ You can add a validation status to a `<TextInputGroup>` by passing the `validate
 
 ```
 
-### Filters
+### With filters
+
+When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a `<LabelGroup>` to `<TextInputGroupMain>`, with all of the labels that a user has selected. Users can interact with these labels as needed.
 
 ```ts file="./TextInputGroupFilters.tsx"
 

package/src/components/TimePicker/examples/TimePicker.md

@@ -2,7 +2,7 @@
 id: Time picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-time-picker
+cssPrefix: pf-v6-c-time-picker
 propComponents: ['TimePicker']
 ---
 

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

@@ -3,10 +3,10 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-timestamp"
+    class="pf-v6-c-timestamp"
   >
     <time
-      class="pf-v5-c-timestamp__text"
+      class="pf-v6-c-timestamp__text"
       datetime="2022-01-01T00:00:00.000Z"
     >
       1/1/2022, 12:00:00 AM

package/src/components/Timestamp/examples/Timestamp.md

@@ -1,7 +1,7 @@
 ---
 id: Timestamp
 section: components
-cssPrefix: pf-v5-c-timestamp
+cssPrefix: pf-v6-c-timestamp
 propComponents: ['Timestamp', 'TimestampTooltip']
 ---
 

package/src/components/Title/examples/Title.md

@@ -1,7 +1,7 @@
 ---
 id: Title
 section: components
-cssPrefix: pf-v5-c-title
+cssPrefix: pf-v6-c-title
 propComponents: ['Title']
 ---
 

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Toggle group
 section: components
-cssPrefix: pf-v5-c-toggle-group
+cssPrefix: pf-v6-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
@@ -58,4 +58,4 @@ When space in a UI is limited, you can use a compact toggle group.
 To apply compact styling to a `<ToggleGroup>`, use `isCompact`.
 
 ```ts file="./ToggleGroupCompact.tsx"
-```
+```

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { RefObject } from 'react';
-import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
-import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
+import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
+import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_2xl';
 
 export interface ToolbarContextProps {
   isExpanded: boolean;

package/src/components/Toolbar/examples/Toolbar.md

@@ -1,6 +1,6 @@
 ---
 id: Toolbar
-cssPrefix: pf-v5-c-toolbar
+cssPrefix: pf-v6-c-toolbar
 propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
 section: components
 ---

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -260,15 +260,13 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                   isExpanded={isSplitButtonDropdownOpen}
                   onClick={onSplitButtonToggle}
                   aria-label="Toolbar stacked example split toggle"
-                  splitButtonOptions={{
-                    items: [
-                      <MenuToggleCheckbox
-                        key="toolbar-stacked-split-button-checkbox-1"
-                        id="toolbar-stacked-split-button-checkbox-1"
-                        aria-label="Select all"
-                      />
-                    ]
-                  }}
+                  splitButtonItems={[
+                    <MenuToggleCheckbox
+                      key="toolbar-stacked-split-button-checkbox-1"
+                      id="toolbar-stacked-split-button-checkbox-1"
+                      aria-label="Select all"
+                    />
+                  ]}
                 />
               )}
             >

package/src/components/Tooltip/examples/Tooltip.md

@@ -1,7 +1,7 @@
 ---
 id: Tooltip
 section: components
-cssPrefix: pf-v5-c-tooltip
+cssPrefix: pf-v6-c-tooltip
 propComponents: ['Tooltip']
 ---
 

package/src/components/TreeView/examples/TreeView.md

@@ -1,7 +1,7 @@
 ---
 id: Tree view
 section: components
-cssPrefix: pf-v5-c-tree-view
+cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 

package/src/components/Truncate/examples/Truncate.md

@@ -1,6 +1,7 @@
 ---
 id: Truncate
 section: components
+cssPrefix: pf-v6-c-truncate
 propComponents: [Truncate]
 ---