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

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>

package/src/demos/DashboardHeader.tsx

@@ -99,7 +99,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
         <Toolbar id="toolbar" isFullHeight isStatic>
           <ToolbarContent>
             <ToolbarGroup
-              variant="icon-button-group"
+              variant="action-group-plain"
               align={{ default: 'alignEnd' }}
               gap={{ default: 'gapNone', md: 'gapMd' }}
             >
@@ -113,7 +113,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                   />
                 </ToolbarItem>
               )}
-              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
                   <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
                 </ToolbarItem>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -177,7 +177,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     <Toolbar isFullHeight>
       <ToolbarContent>
         <ToolbarGroup align={{ default: 'alignEnd' }}>
-          <ToolbarGroup variant="icon-button-group">
+          <ToolbarGroup variant="action-group-plain">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge
                 variant={getNumberUnread() === 0 ? 'read' : 'unread'}
@@ -189,7 +189,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               </NotificationBadge>
             </ToolbarItem>
             <ToolbarGroup
-              variant="icon-button-group"
+              variant="action-group-plain"
               visibility={{
                 default: 'hidden',
                 lg: 'visible'

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -227,7 +227,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     <Toolbar isFullHeight>
       <ToolbarContent>
         <ToolbarGroup align={{ default: 'alignEnd' }}>
-          <ToolbarGroup variant="icon-button-group">
+          <ToolbarGroup variant="action-group-plain">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge
                 variant={getNumberUnread(null) === 0 ? 'read' : 'unread'}
@@ -239,7 +239,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               </NotificationBadge>
             </ToolbarItem>
             <ToolbarGroup
-              variant="icon-button-group"
+              variant="action-group-plain"
               visibility={{
                 default: 'hidden',
                 lg: 'visible'

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -340,11 +340,11 @@ export const PaginatedTableAction = () => {
         <Toolbar id="toolbar" isFullHeight isStatic>
           <ToolbarContent>
             <ToolbarGroup
-              variant="icon-button-group"
+              variant="action-group-plain"
               align={{ default: 'alignEnd' }}
               gap={{ default: 'gapNone', md: 'gapMd' }}
             >
-              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
                   <Button
                     aria-label={translation.kebabDropdown.settings}

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -364,11 +364,11 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
         <Toolbar id="toolbar" isFullHeight isStatic>
           <ToolbarContent>
             <ToolbarGroup
-              variant="icon-button-group"
+              variant="action-group-plain"
               align={{ default: 'alignEnd' }}
               gap={{ default: 'gapNone', md: 'gapMd' }}
             >
-              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
                   <Button
                     aria-label={translation.kebabDropdown.settings}

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -184,14 +184,14 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
       <ToolbarContent>
         <PageHorizontalNav />
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -381,14 +381,14 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
               <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
             </ToolbarItem>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -128,14 +128,14 @@ export const NavFlyout: React.FunctionComponent = () => {
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -107,14 +107,14 @@ export const NavHorizontal: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -156,14 +156,14 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Nav/NavManual.tsx

@@ -123,14 +123,14 @@ export const NavManual: React.FunctionComponent = () => {
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -136,14 +136,14 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -119,14 +119,14 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -119,14 +119,14 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -111,14 +111,14 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
         <ToolbarGroup
-          variant="icon-button-group"
+          variant="action-group-plain"
           align={{ default: 'alignEnd' }}
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
-          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -627,7 +627,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <PageSection isFilled padding={{ default: 'noPadding' }}>
-        <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={onDelete}>
+        <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
           <ToolbarContent>{toolbarItems}</ToolbarContent>
         </Toolbar>
         <Divider component="div" />

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -210,7 +210,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
 
   const drawerContent = (
     <React.Fragment>
-      <Toolbar id="content-padding-data-toolbar" usePageInsets>
+      <Toolbar id="content-padding-data-toolbar">
         <ToolbarContent>{ToolbarItems}</ToolbarContent>
       </Toolbar>
       <DataList

package/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx

@@ -91,7 +91,7 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
 
   const drawerContent = (
     <React.Fragment>
-      <Toolbar id="data-list-data-toolbar" usePageInsets>
+      <Toolbar id="data-list-data-toolbar">
         <ToolbarContent>
           <ToolbarItem>
             <Dropdown

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -210,7 +210,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
 
   const drawerContent = (
     <React.Fragment>
-      <Toolbar id="full-page-data-toolbar" usePageInsets>
+      <Toolbar id="full-page-data-toolbar">
         <ToolbarContent>{ToolbarItems}</ToolbarContent>
       </Toolbar>
       <DataList

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -210,7 +210,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
 
   const drawerContent = (
     <React.Fragment>
-      <Toolbar id="inline-modifier-data-toolbar" usePageInsets>
+      <Toolbar id="inline-modifier-data-toolbar">
         <ToolbarContent>{ToolbarItems}</ToolbarContent>
       </Toolbar>
       <DataList

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -177,7 +177,7 @@ export const TablesAndTabs = () => {
   );
 
   const toolbar = (
-    <Toolbar id="page-layout-table-column-management-action-toolbar-top" usePageInsets>
+    <Toolbar id="page-layout-table-column-management-action-toolbar-top">
       <ToolbarContent>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarItem>

package/src/helpers/constants.ts

@@ -39,19 +39,19 @@ export const KeyTypes = {
 };
 
 export const globalWidthBreakpoints = {
-  sm: parseInt(globalBreakpointSm.value),
-  md: parseInt(globalBreakpointMd.value),
-  lg: parseInt(globalBreakpointLg.value),
-  xl: parseInt(globalBreakpointXl.value),
-  '2xl': parseInt(globalBreakpoint2xl.value)
+  sm: parseInt(globalBreakpointSm.value) * 16,
+  md: parseInt(globalBreakpointMd.value) * 16,
+  lg: parseInt(globalBreakpointLg.value) * 16,
+  xl: parseInt(globalBreakpointXl.value) * 16,
+  '2xl': parseInt(globalBreakpoint2xl.value) * 16
 };
 
 export const globalHeightBreakpoints = {
-  sm: parseInt(globalHeightBreakpointSm.value),
-  md: parseInt(globalHeightBreakpointMd.value),
-  lg: parseInt(globalHeightBreakpointLg.value),
-  xl: parseInt(globalHeightBreakpointXl.value),
-  '2xl': parseInt(globalHeightBreakpoint2xl.value)
+  sm: parseInt(globalHeightBreakpointSm.value) * 16,
+  md: parseInt(globalHeightBreakpointMd.value) * 16,
+  lg: parseInt(globalHeightBreakpointLg.value) * 16,
+  xl: parseInt(globalHeightBreakpointXl.value) * 16,
+  '2xl': parseInt(globalHeightBreakpoint2xl.value) * 16
 };
 
 export const statusIcons = {