@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -23,10 +23,8 @@ import {
   DrawerHead,
   DrawerPanelBody,
   DrawerPanelContent,
-  DrawerSection,
   Flex,
   FlexItem,
-  Icon,
   InputGroup,
   InputGroupItem,
   PageSection,
@@ -43,12 +41,13 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
-import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
 interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
 }
@@ -100,8 +99,8 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
     setSelectedDataListItemId('');
   };
 
-  const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" alignItems="center">
+  const toggleGroupItems = (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
       <ToolbarItem>
         <InputGroup>
           <InputGroupItem isFill>
@@ -115,15 +114,11 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button
-              variant={ButtonVariant.control}
-              aria-label="search button for search input"
-              icon={<RhMicronsSearchIcon />}
-            />
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>
-      <ToolbarGroup variant="filter-group" alignItems="center">
+      <ToolbarGroup variant="filter-group">
         <ToolbarItem>
           <Select
             aria-label="Status select"
@@ -173,6 +168,12 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
           </Select>
         </ToolbarItem>
       </ToolbarGroup>
+    </Flex>
+  );
+
+  const ToolbarItems = (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      {toggleGroupItems}
     </ToolbarToggleGroup>
   );
 
@@ -207,224 +208,211 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
   );
 
   const drawerContent = (
-    <DataList
-      aria-label="data list"
-      selectedDataListItemId={selectedDataListItemId}
-      onSelectDataListItem={onSelectDataListItem}
-    >
-      <DataListItem id="inline-modifier-item1">
-        <DataListItemRow>
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="primary-content">
-                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                  <FlexItem>
-                    <p>patternfly</p>
-                    <small>
-                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                    </small>
-                  </FlexItem>
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+    <Fragment>
+      <Toolbar id="inline-modifier-data-toolbar">
+        <ToolbarContent>{ToolbarItems}</ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="data list"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem id="inline-modifier-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                     <FlexItem>
-                      <RhUiBranchFillIcon /> 10
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
                     </FlexItem>
-                    <FlexItem>
-                      <RhUiCodeIcon /> 4
-                    </FlexItem>
-                    <FlexItem>
-                      <RhUiCubesIcon /> 5
-                    </FlexItem>
-                    <FlexItem>Updated 2 days ago</FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <RhUiBranchFillIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiCodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
                   </Flex>
-                </Flex>
-              </DataListCell>,
-              <DataListAction
-                key="actions"
-                aria-labelledby="inline-modifier-item1 inline-modifier-action1"
-                id="inline-modifier-action1"
-                aria-label="Actions"
-              >
-                <Stack>
-                  <StackItem>
-                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                  </StackItem>
-                  <StackItem>
-                    <Button variant={ButtonVariant.link}>Link Button</Button>
-                  </StackItem>
-                </Stack>
-              </DataListAction>
-            ]}
-          />
-        </DataListItemRow>
-      </DataListItem>
-      <DataListItem id="inline-modifier-item2">
-        <DataListItemRow>
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="primary-content">
-                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                  <FlexItem>
-                    <p>patternfly-elements</p>
-                    <small>PatternFly elements</small>
-                  </FlexItem>
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                    <FlexItem>
-                      <RhUiBranchFillIcon /> 10
-                    </FlexItem>
-                    <FlexItem>
-                      <RhUiCodeIcon /> 4
-                    </FlexItem>
-                    <FlexItem>
-                      <RhUiCubesIcon /> 5
-                    </FlexItem>
-                    <FlexItem>
-                      <Icon status="success">
-                        <RhUiCheckCircleFillIcon />
-                      </Icon>
-                      7
-                    </FlexItem>
-                    <FlexItem>
-                      <Icon status="warning">
-                        <RhUiWarningFillIcon />
-                      </Icon>
-                      5
-                    </FlexItem>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item1 inline-modifier-action1"
+                  id="inline-modifier-action1"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="inline-modifier-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                     <FlexItem>
-                      <Icon status="danger">
-                        <RhUiCloseCircleFillIcon />
-                      </Icon>
-                      5
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
                     </FlexItem>
-                    <FlexItem>Updated 2 days ago</FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <RhUiBranchFillIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiCodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiCheckCircleFillIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiWarningFillIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
                   </Flex>
-                </Flex>
-              </DataListCell>,
-              <DataListAction
-                key="actions"
-                aria-labelledby="inline-modifier-item2 inline-modifier-action2"
-                id="inline-modifier-action2"
-                aria-label="Actions"
-              >
-                <Stack>
-                  <StackItem>
-                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                  </StackItem>
-                  <StackItem>
-                    <Button variant={ButtonVariant.link}>Link Button</Button>
-                  </StackItem>
-                </Stack>
-              </DataListAction>
-            ]}
-          />
-        </DataListItemRow>
-      </DataListItem>
-      <DataListItem id="inline-modifier-item3">
-        <DataListItemRow>
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="primary-content">
-                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                  <FlexItem>
-                    <p>patternfly</p>
-                    <small>
-                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                    </small>
-                  </FlexItem>
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                    <FlexItem>
-                      <RhUiBranchFillIcon /> 10
-                    </FlexItem>
-                    <FlexItem>
-                      <RhUiCodeIcon /> 4
-                    </FlexItem>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item2 inline-modifier-action2"
+                  id="inline-modifier-action2"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="inline-modifier-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                     <FlexItem>
-                      <RhUiCubesIcon /> 5
+                      <p>patternfly</p>
+                      <small>
+                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
+                      </small>
                     </FlexItem>
-                    <FlexItem>Updated 2 days ago</FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <RhUiBranchFillIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiCodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
                   </Flex>
-                </Flex>
-              </DataListCell>,
-              <DataListAction
-                key="actions"
-                aria-labelledby="inline-modifier-item3 inline-modifier-action3"
-                id="inline-modifier-action3"
-                aria-label="Actions"
-              >
-                <Stack>
-                  <StackItem>
-                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                  </StackItem>
-                  <StackItem>
-                    <Button variant={ButtonVariant.link}>Link Button</Button>
-                  </StackItem>
-                </Stack>
-              </DataListAction>
-            ]}
-          />
-        </DataListItemRow>
-      </DataListItem>
-      <DataListItem id="inline-modifier-item4">
-        <DataListItemRow>
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="primary-content">
-                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                  <FlexItem>
-                    <p>patternfly-elements</p>
-                    <small>PatternFly elements</small>
-                  </FlexItem>
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                    <FlexItem>
-                      <RhUiBranchFillIcon /> 10
-                    </FlexItem>
-                    <FlexItem>
-                      <RhUiCodeIcon /> 4
-                    </FlexItem>
-                    <FlexItem>
-                      <RhUiCubesIcon /> 5
-                    </FlexItem>
-                    <FlexItem>
-                      <Icon status="success">
-                        <RhUiCheckCircleFillIcon />
-                      </Icon>
-                      7
-                    </FlexItem>
-                    <FlexItem>
-                      <Icon status="warning">
-                        <RhUiWarningFillIcon />
-                      </Icon>
-                      5
-                    </FlexItem>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item3 inline-modifier-action3"
+                  id="inline-modifier-action3"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem id="inline-modifier-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary-content">
+                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                     <FlexItem>
-                      <Icon status="danger">
-                        <RhUiCloseCircleFillIcon />
-                      </Icon>
-                      5
+                      <p>patternfly-elements</p>
+                      <small>PatternFly elements</small>
                     </FlexItem>
-                    <FlexItem>Updated 2 days ago</FlexItem>
+                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
+                      <FlexItem>
+                        <RhUiBranchFillIcon /> 10
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiCodeIcon /> 4
+                      </FlexItem>
+                      <FlexItem>
+                        <CubeIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiCheckCircleFillIcon /> 7
+                      </FlexItem>
+                      <FlexItem>
+                        <RhUiWarningFillIcon /> 5
+                      </FlexItem>
+                      <FlexItem>
+                        <TimesCircleIcon /> 5
+                      </FlexItem>
+                      <FlexItem>Updated 2 days ago</FlexItem>
+                    </Flex>
                   </Flex>
-                </Flex>
-              </DataListCell>,
-              <DataListAction
-                key="actions"
-                aria-labelledby="inline-modifier-item4 inline-modifier-action4"
-                id="inline-modifier-action4"
-                aria-label="Actions"
-              >
-                <Stack>
-                  <StackItem>
-                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                  </StackItem>
-                  <StackItem>
-                    <Button variant={ButtonVariant.link}>Link Button</Button>
-                  </StackItem>
-                </Stack>
-              </DataListAction>
-            ]}
-          />
-        </DataListItemRow>
-      </DataListItem>
-    </DataList>
+                </DataListCell>,
+                <DataListAction
+                  key="actions"
+                  aria-labelledby="inline-modifier-item4 inline-modifier-action4"
+                  id="inline-modifier-action4"
+                  aria-label="Actions"
+                >
+                  <Stack>
+                    <StackItem>
+                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button variant={ButtonVariant.link}>Link Button</Button>
+                    </StackItem>
+                  </Stack>
+                </DataListAction>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </Fragment>
   );
 
   return (
@@ -438,18 +426,9 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
           </p>
         </Content>
       </PageSection>
+      <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
         <Drawer isExpanded={isDrawerExpanded} isInline>
-          <DrawerSection>
-            <Toolbar
-              id="inline-modifier-data-toolbar"
-              inset={{ default: 'insetLg' }}
-              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
-            >
-              <ToolbarContent alignItems="center">{ToolbarItems}</ToolbarContent>
-            </Toolbar>
-            <Divider component="div" />
-          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
           </DrawerContent>

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

@@ -0,0 +1,114 @@
+import { Fragment, useState } from 'react';
+import {
+  Card,
+  Content,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  PageSection,
+  Progress,
+  SimpleList,
+  SimpleListGroup,
+  SimpleListItem,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const onSelectListItem = (_listItem, listItemProps) => {
+    const id = listItemProps.children;
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ xl: 'width_75' }}>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          {`List item ${drawerPanelBodyContent} details`}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <Fragment>
+      <SimpleList onSelect={onSelectListItem}>
+        <SimpleListGroup title="Section 1" id="simple-list-section-1">
+          <SimpleListItem key="item1" isActive>
+            List item 1
+          </SimpleListItem>
+          <SimpleListItem key="item2">List item 2</SimpleListItem>
+          <SimpleListItem key="item3">List item 3</SimpleListItem>
+          <SimpleListItem key="item4">List item 4</SimpleListItem>
+        </SimpleListGroup>
+        <SimpleListGroup title="Section 2" id="section-2">
+          <SimpleListItem key="item5">List item 5</SimpleListItem>
+          <SimpleListItem key="item6">List item 6</SimpleListItem>
+          <SimpleListItem key="item7">List item 7</SimpleListItem>
+          <SimpleListItem key="item8">List item 8</SimpleListItem>
+          <SimpleListItem key="item9">List item 9</SimpleListItem>
+        </SimpleListGroup>
+      </SimpleList>
+    </Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection aria-labelledby="main-title">
+        <Content>
+          <h1 id="main-title">Main title</h1>
+          <p>
+            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
+            of it’s relative line height of 1.5.
+          </p>
+        </Content>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection aria-label="Card with drawer content">
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

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

@@ -52,8 +52,8 @@ import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { KeyTypes } from '../../../helpers';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
@@ -178,7 +178,7 @@ export const TablesAndTabs = () => {
   const toolbar = (
     <Toolbar id="page-layout-table-column-management-action-toolbar-top">
       <ToolbarContent>
-        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarItem>
             <MenuToggle>Name</MenuToggle>
           </ToolbarItem>