@patternfly/react-core 6.0.0-alpha.81 → 6.0.0-alpha.82

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.80",
+  "version": "6.0.0-alpha.81",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.80",
+  "version": "6.0.0-alpha.81",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.80",
+  "version": "6.0.0-alpha.81",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.81",
+  "version": "6.0.0-alpha.82",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.29",
-    "@patternfly/react-styles": "^6.0.0-alpha.28",
-    "@patternfly/react-tokens": "^6.0.0-alpha.28",
+    "@patternfly/react-icons": "^6.0.0-alpha.30",
+    "@patternfly/react-styles": "^6.0.0-alpha.29",
+    "@patternfly/react-tokens": "^6.0.0-alpha.29",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.180",
+    "@patternfly/patternfly": "6.0.0-alpha.187",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "253f669646aace1f1264ba6f7e11b218fb48f240"
+  "gitHead": "38f193a8eb07223c13de5e466a242f495f8830b0"
 }

package/src/components/Page/Page.tsx

@@ -170,7 +170,7 @@ class Page extends React.Component<PageProps, PageState> {
 
   isMobile = () =>
     // eslint-disable-next-line radix
-    this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10);
+    this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10) * 16;
 
   resize = (_event?: MouseEvent | TouchEvent | React.KeyboardEvent<Element>) => {
     const { onPageResize } = this.props;

package/src/components/Toolbar/Toolbar.tsx

@@ -38,8 +38,6 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
   isStatic?: boolean;
-  /** Flag indicating the toolbar should use the Page insets */
-  usePageInsets?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
   /** Insets at various breakpoints. */
@@ -140,7 +138,6 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       isFullHeight,
       isStatic,
       inset,
-      usePageInsets,
       isSticky,
       ouiaId,
       numberOfFiltersText,
@@ -164,7 +161,6 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
               styles.toolbar,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
-              usePageInsets && styles.modifiers.pageInsets,
               isSticky && styles.modifiers.sticky,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -16,8 +16,6 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Vertical alignment. */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
@@ -56,7 +54,6 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
-      alignSelf,
       ...props
     } = this.props;
 
@@ -100,10 +97,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                         styles.toolbarContentSection,
                         alignItems === 'center' && styles.modifiers.alignItemsCenter,
                         alignItems === 'start' && styles.modifiers.alignItemsStart,
-                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
-                        alignSelf === 'center' && styles.modifiers.alignSelfCenter,
-                        alignSelf === 'start' && styles.modifiers.alignSelfStart,
-                        alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline
+                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline
                       )}
                     >
                       {children}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -6,14 +6,23 @@ import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
-  'icon-button-group' = 'icon-button-group'
+  'action-group' = 'action-group',
+  'action-group-inline' = 'action-group-inline',
+  'action-group-plain' = 'action-group-plain',
+  'label-group' = 'label-group'
 }
 
 export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
-  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group';
+  variant?:
+    | ToolbarGroupVariant
+    | 'filter-group'
+    | 'action-group'
+    | 'action-group-inline'
+    | 'action-group-plain'
+    | 'label-group';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -24,16 +33,16 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
+    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
   };
   /** Vertical alignment of children */
-  alignItems?: 'start' | 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Vertical alignment */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -180,7 +189,15 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
+              variant &&
+                styles.modifiers[
+                  toCamel(variant) as
+                    | 'filterGroup'
+                    | 'actionGroup'
+                    | 'actionGroupInline'
+                    | 'actionGroupPlain'
+                    | 'labelGroup'
+                ],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -28,16 +28,16 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
+    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
   };
   /** Vertical alignment of children */
-  alignItems?: 'start' | 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Vertical alignment */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -69,6 +69,8 @@ class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentP
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;
+    const showNumberOfFilters = collapseListedFilters && numberOfFilters > 0 && !isExpanded;
+    const showDefaultClearFilter = showClearFiltersButton && !isExpanded && !customLabelGroupContent;
 
     return (
       <div
@@ -82,19 +84,19 @@ class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentP
           {...(collapseListedFilters && { hidden: true })}
           {...(collapseListedFilters && { 'aria-hidden': true })}
         />
-        {collapseListedFilters && numberOfFilters > 0 && !isExpanded && (
-          <ToolbarGroup>
-            <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
+        {(showNumberOfFilters || showDefaultClearFilter || customLabelGroupContent) && (
+          <ToolbarGroup variant="action-group-inline">
+            {showNumberOfFilters && <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>}
+            {showDefaultClearFilter && (
+              <ToolbarItem>
+                <Button variant="link" onClick={clearLabelGroups} isInline>
+                  {clearFiltersButtonText}
+                </Button>
+              </ToolbarItem>
+            )}
+            {customLabelGroupContent && customLabelGroupContent}
           </ToolbarGroup>
         )}
-        {showClearFiltersButton && !isExpanded && !customLabelGroupContent && (
-          <ToolbarItem>
-            <Button variant="link" onClick={clearLabelGroups} isInline>
-              {clearFiltersButtonText}
-            </Button>
-          </ToolbarItem>
-        )}
-        {customLabelGroupContent && customLabelGroupContent}
       </div>
     );
   }

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -27,14 +27,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
-  };
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -176,7 +168,6 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       variant,
       visibility,
       breakpoint,
-      alignment,
       gap,
       columnGap,
       rowGap,
@@ -260,10 +251,17 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
+                          variant &&
+                            styles.modifiers[
+                              toCamel(variant) as
+                                | 'filterGroup'
+                                | 'actionGroup'
+                                | 'actionGroupInline'
+                                | 'actionGroupPlain'
+                                | 'labelGroup'
+                            ],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -45,8 +45,8 @@ export const ToolbarContentContext = React.createContext<ToolbarContentContextPr
 });
 
 export const globalBreakpoints = {
-  md: parseInt(globalBreakpointMd.value),
-  lg: parseInt(globalBreakpointLg.value),
-  xl: parseInt(globalBreakpointXl.value),
-  '2xl': parseInt(globalBreakpoint2xl.value)
+  md: parseInt(globalBreakpointMd.value) * 16,
+  lg: parseInt(globalBreakpointLg.value) * 16,
+  xl: parseInt(globalBreakpointXl.value) * 16,
+  '2xl': parseInt(globalBreakpoint2xl.value) * 16
 };

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

@@ -43,25 +43,6 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render with page inset flag', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const { asFragment } = render(
-      <Toolbar id="toolbar" usePageInsets>
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with custom label content', () => {
     const items = (
       <React.Fragment>

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

@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-3"
+    data-ouia-component-id="OUIA-Generated-Toolbar-2"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
@@ -259,98 +259,51 @@ exports[`Toolbar should render with custom label content 1`] = `
         </div>
       </div>
       <div
-        class="pf-v6-c-toolbar__group"
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
       >
         <div
           class="pf-v6-c-toolbar__item"
         >
           2 filters applied
         </div>
-      </div>
-      <div
-        class="pf-v6-c-toolbar__item"
-      >
-        <button
-          aria-disabled="false"
-          class="pf-v6-c-button pf-m-link pf-m-inline"
-          data-ouia-component-id="OUIA-Generated-Button-link-1"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <span
-            class="pf-v6-c-button__text"
-          >
-            Save filters
-          </span>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-toolbar__item"
-      >
-        <button
-          aria-disabled="false"
-          class="pf-v6-c-button pf-m-link pf-m-inline"
-          data-ouia-component-id="OUIA-Generated-Button-link-2"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <span
-            class="pf-v6-c-button__text"
-          >
-            Clear all filters
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Toolbar should render with page inset flag 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-toolbar pf-m-page-insets"
-    data-ouia-component-id="OUIA-Generated-Toolbar-2"
-    data-ouia-component-type="PF6/Toolbar"
-    data-ouia-safe="true"
-    id="toolbar"
-  >
-    <div
-      class="pf-v6-c-toolbar__content"
-    >
-      <div
-        class="pf-v6-c-toolbar__content-section"
-      >
         <div
           class="pf-v6-c-toolbar__item"
         >
-          Test
-        </div>
-        <div
-          class="pf-v6-c-toolbar__item"
-        >
-          Test 2
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Save filters
+            </span>
+          </button>
         </div>
-        <hr
-          class="pf-v6-c-divider pf-m-vertical"
-        />
         <div
           class="pf-v6-c-toolbar__item"
         >
-          Test 3 
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="OUIA-Generated-Button-link-2"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear all filters
+            </span>
+          </button>
         </div>
       </div>
     </div>
-    <div
-      class="pf-v6-c-toolbar__content pf-m-hidden"
-      hidden=""
-    >
-      <div
-        class="pf-v6-c-toolbar__group"
-      />
-    </div>
   </div>
 </DocumentFragment>
 `;

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

@@ -172,7 +172,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
       <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
-      <ToolbarGroup variant="icon-button-group">
+      <ToolbarGroup variant="action-group-plain">
         <ToolbarItem>
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>

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

@@ -182,8 +182,8 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
       <ToolbarGroup variant="filter-group">{filterGroupItems}</ToolbarGroup>
-      <ToolbarGroup variant="icon-button-group">{iconButtonGroupItems}</ToolbarGroup>
-      <ToolbarGroup>{buttonGroupItems}</ToolbarGroup>
+      <ToolbarGroup variant="action-group-plain">{iconButtonGroupItems}</ToolbarGroup>
+      <ToolbarGroup variant="action-group">{buttonGroupItems}</ToolbarGroup>
     </React.Fragment>
   );
 

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

@@ -5,27 +5,31 @@ import { Button } from '@patternfly/react-core';
 export const ToolbarInsets: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
+      <ToolbarGroup variant="action-group">
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="primary">Action</Button>
-      </ToolbarItem>
+      <ToolbarGroup variant="action-group">
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="primary">Action</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup>
+      <ToolbarGroup variant="action-group">
         <ToolbarItem>
           <Button variant="secondary">Action</Button>
         </ToolbarItem>

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

@@ -5,27 +5,31 @@ import { Button } from '@patternfly/react-core';
 export const ToolbarSpacers: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
+      <ToolbarGroup variant="action-group">
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary">Action</Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="primary">Action</Button>
-      </ToolbarItem>
+      <ToolbarGroup variant="action-group" gap={{ lg: 'gapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="primary">Action</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup gap={{ lg: 'gapLg' }}>
+      <ToolbarGroup variant="action-group" gap={{ lg: 'gapLg' }}>
         <ToolbarItem>
           <Button variant="secondary">Action</Button>
         </ToolbarItem>

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

@@ -203,11 +203,11 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <React.Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
+          <ToolbarToggleGroup variant="label-group" toggleIcon={<FilterIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
           <ToolbarItem>
-            <OverflowMenu breakpoint="2xl">
+            <OverflowMenu breakpoint="xl">
               <OverflowMenuContent>
                 <OverflowMenuGroup groupType="button">
                   <OverflowMenuItem>

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

@@ -15,7 +15,7 @@ export const ToolbarSticky: React.FunctionComponent = () => {
             <ToolbarItem>
               <SearchInput aria-label="Sticky example search input" />
             </ToolbarItem>
-            <ToolbarItem>
+            <ToolbarItem alignSelf="center">
               <Checkbox
                 label="Show only even number items"
                 isChecked={showEvenOnly}

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

@@ -208,7 +208,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
-      <ToolbarGroup variant="icon-button-group">
+      <ToolbarGroup variant="action-group-plain">
         <ToolbarItem>
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>