Merge pull request #14776 from apapadopoulou/ap/custom-toolbar-items-labels

Addon-toolbars: Add optional label for toolbar items

addons/toolbars/src/components/MenuToolbar.tsx

@@ -9,7 +9,7 @@ export const MenuToolbar: FC<MenuToolbarProps> = ({
   id,
   name,
   description,
-  toolbar: { icon, items },
+  toolbar: { icon, items, showName },
 }) => {
   const [globals, updateGlobals] = useGlobals();
   const selectedValue = globals[id];
@@ -43,6 +43,7 @@ export const MenuToolbar: FC<MenuToolbarProps> = ({
       {selectedIcon ? (
         <IconButton key={name} active={active} title={description}>
           <Icons icon={selectedIcon} />
+          {showName ? `\xa0${name}` : null}
         </IconButton>
       ) : (
         <TabButton active={active}>{name}</TabButton>

addons/toolbars/src/types.ts

@@ -12,6 +12,7 @@ export interface ToolbarItem {
 export interface NormalizedToolbarConfig {
   icon?: IconsProps['icon'];
   items: ToolbarItem[];
+  showName?: boolean;
 }
 
 export type NormalizedToolbarArgType = ArgType & {

docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx

@@ -10,6 +10,8 @@ export const globalTypes = {
       icon: 'circlehollow',
       // array of plain string values or MenuItem shape (see below)
       items: ['light', 'dark'],
+      // property that specifies if the name of the item will be displayed
+      showName: True,
     },
   },
 };

examples/official-storybook/preview.js

@@ -209,6 +209,7 @@ export const globalTypes = {
         { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
         { value: 'stacked', icon: 'bottombar', title: 'stacked' },
       ],
+      showName: true,
     },
   },
   locale: {