feat: Support secondaryText and labelTag for button-dropdown

package.json

@@ -166,7 +166,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "890 kB",
+      "limit": "891 kB",
       "ignore": "react-dom"
     }
   ],

pages/button-dropdown/checkboxes.page.tsx

@@ -42,6 +42,35 @@ const getItems = (firstChecked: boolean, secondChecked: boolean, thirdChecked: b
       id: 'id5',
       text: 'Option without checkbox',
     },
+    {
+      id: 'id6',
+      text: 'Disabled option with secondaryText',
+      secondaryText: 'This is a secondary text',
+      disabled: true,
+    },
+    {
+      id: 'id7',
+      text: 'Option with icon and secondaryText',
+      iconName: 'gen-ai',
+      secondaryText: 'This is a secondary text',
+    },
+    {
+      id: 'id8',
+      text: 'Option with checkbox, icon, and secondaryText',
+      iconName: 'gen-ai',
+      secondaryText: 'This is a secondary text',
+      checked: thirdChecked,
+      itemType: 'checkbox',
+    },
+    {
+      id: 'id8',
+      text: 'Option with checkbox, icon, labelTag, and secondaryText',
+      iconName: 'gen-ai',
+      secondaryText: 'This is a secondary text',
+      checked: thirdChecked,
+      itemType: 'checkbox',
+      labelTag: 'Ctrl + L',
+    },
   ];
   return items;
 };

pages/button-dropdown/disabled-reason.page.tsx

@@ -7,11 +7,18 @@ import { ButtonDropdown, ButtonDropdownProps } from '~components';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const actionsItems: ButtonDropdownProps.Items = [
-  { id: 'connect', text: 'Connect', disabledReason: 'Instance must be running.', disabled: true },
-  { id: 'details', text: 'View details', disabledReason: 'A single instance needs to be selected.', disabled: true },
+  { id: 'connect', text: 'Connect', disabledReason: 'Instance must be running.', disabled: true, labelTag: 'Disabled' },
+  {
+    id: 'details',
+    text: 'View details',
+    disabledReason: 'A single instance needs to be selected.',
+    disabled: true,
+    labelTag: 'Disabled',
+  },
   {
     id: 'manage-state',
     text: 'Manage instance state',
+    secondaryText: 'Option to start/stop/edit instance',
     disabledReason: 'Instance state must not be pending or stopping.',
     disabled: true,
   },
@@ -22,6 +29,7 @@ const actionsItems: ButtonDropdownProps.Items = [
       {
         id: 'auto-scaling',
         text: 'Attach to Auto Scaling Group',
+        secondaryText: 'Manage the Instance to Auto Scaling Group',
         disabledReason: 'Instance must be running and not already be attached to an Auto Scaling Group.',
         disabled: true,
       },
@@ -32,6 +40,7 @@ const actionsItems: ButtonDropdownProps.Items = [
       {
         id: 'stop-protection',
         text: 'Change stop protection',
+        labelTag: 'Ctrl + D',
       },
       {
         id: 'shutdown-behavior',
@@ -112,14 +121,17 @@ export const selectableGroupItems: ButtonDropdownProps.Items = [
         itemType: 'checkbox',
         checked: true,
         disabled: false,
+        secondaryText: 'Manage the settings',
+        labelTag: 'Ctrl + S',
       },
       {
         text: 'Disabled setting',
         id: 'setting',
         itemType: 'checkbox',
         checked: true,
         disabled: true,
-        disabledReason: 'disabled reason',
+        disabledReason: '',
+        secondaryText: "Can't be modified",
       },
     ],
   },
@@ -130,7 +142,7 @@ export default function DescriptionPage() {
   const [isRightAligned, setIsRightAligned] = useState(false);
   return (
     <>
-      <h1>Descriptions in ButtonDropdown</h1>
+      <h1>Failure Reason in ButtonDropdown</h1>
       <label>
         <input
           type="checkbox"

pages/button-dropdown/events.page.tsx

@@ -10,19 +10,32 @@ const dropdownItems = [
   {
     text: 'enabled category',
     items: [
-      { id: 'c1long1', text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown' },
-      { id: 'c1_disabled_item', text: 'disabled item', disabled: true },
+      {
+        id: 'c1long1',
+        text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
+        secondaryText: 'Very long option',
+      },
+      { id: 'c1_disabled_item', text: 'disabled item', disabled: true, secondaryText: 'Disabled option' },
       { id: 'c1_enabled_item', text: 'option2' },
-      { id: 'c1long2', text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown', disabled: true },
-      { id: 'c1i3', text: 'option3' },
-      { id: 'c1i4', text: 'option4' },
+      {
+        id: 'c1long2',
+        text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
+        disabled: true,
+        secondaryText: 'Very long option',
+      },
+      { id: 'c1i3', text: 'option3', secondaryText: 'option 3' },
+      { id: 'c1i4', text: 'option4', secondaryText: 'option 4' },
     ],
   },
   {
     text: 'disabled category',
     disabled: true,
     items: [
-      { id: 'dci1', text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown' },
+      {
+        id: 'dci1',
+        text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
+        secondaryText: 'Very long option',
+      },
       { id: 'item_in_disabled_category', text: 'option4' },
       { id: 'dci5', text: 'option5' },
     ],
@@ -35,11 +48,13 @@ const dropdownItems = [
     id: 'individual_disabled_item',
     text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
     disabled: true,
+    labelTag: 'Disabled',
   },
   {
     id: 'plain_href',
     text: 'option6',
     href: '#',
+    labelTag: 'Link',
   },
   {
     id: 'plain_href_prevented',

pages/button-dropdown/expandable.page.tsx

@@ -14,6 +14,7 @@ export const items: ButtonDropdownProps['items'] = [
     items: [...Array(2)].map((_, index) => ({
       id: 'category1Subitem' + index,
       text: 'Sub item ' + index,
+      secondaryText: `Option ${index}`,
     })),
   },
   {
@@ -22,11 +23,13 @@ export const items: ButtonDropdownProps['items'] = [
     items: [...Array(50)].map((_, index) => ({
       id: 'category2Subitem' + index,
       text: 'Cat 2 Sub item ' + index,
+      secondaryText: `Option ${index}`,
     })),
   },
   ...[...Array(10)].map((_, index) => ({
     id: 'item' + index,
     text: 'Item ' + index,
+    secondaryText: `Option ${index}`,
   })),
   {
     id: 'category3',
@@ -45,6 +48,7 @@ export const items: ButtonDropdownProps['items'] = [
   {
     id: 'item10',
     text: 'Item 10',
+    secondaryText: 'This is the last option',
   },
 ];
 

pages/button-dropdown/icon-expandable.page.tsx

@@ -19,6 +19,7 @@ export const items: ButtonDropdownProps['items'] = [
     items: [...Array(2)].map((_, index) => ({
       id: 'category1Subitem' + index,
       text: 'Sub item ' + index,
+      secondaryText: `Option ${index}`,
     })),
   },
   {
@@ -35,6 +36,7 @@ export const items: ButtonDropdownProps['items'] = [
     id: 'item1',
     text: 'Item 1',
     iconName: 'settings',
+    secondaryText: 'Option 1',
   },
   {
     id: 'category3',
@@ -50,6 +52,7 @@ export const items: ButtonDropdownProps['items'] = [
     items: [...Array(2)].map((_, index) => ({
       id: 'category3Subitem' + index,
       text: 'Sub item ' + index,
+      labelTag: ' Number ' + index,
     })),
   },
 ];

pages/button-dropdown/item-element.permutations.page.tsx

@@ -50,6 +50,33 @@ const permutations = createPermutations<ItemProps>([
     onItemActivate: [() => {}],
     highlightItem: [() => {}],
   },
+
+  // With secondaryText
+  {
+    item: [
+      { id: '1', text: 'Option', secondaryText: 'This is the first option' },
+      { id: '2', text: 'Option 2', secondaryText: 'This is the second option' },
+    ],
+    disabled: [false, true],
+    highlighted: [false, true],
+    hasCategoryHeader: [false],
+    showDivider: [false],
+    onItemActivate: [() => {}],
+    highlightItem: [() => {}],
+  },
+  // With labelTag
+  {
+    item: [
+      { id: '1', text: 'Option', labelTag: 'This is a label tag' },
+      { id: '2', text: 'Option 2', secondaryText: 'This is the second option', labelTag: 'This is a label tag' },
+    ],
+    disabled: [false, true],
+    highlighted: [false, true],
+    hasCategoryHeader: [false],
+    showDivider: [false],
+    onItemActivate: [() => {}],
+    highlightItem: [() => {}],
+  },
   // With icons
   {
     item: [

pages/button-dropdown/main-action.page.tsx

@@ -22,6 +22,7 @@ export default function ButtonDropdownPage() {
               {
                 text: 'Launch instance from template',
                 id: 'launch-instance-from-template',
+                secondaryText: 'Use the existing templates',
               },
             ]}
             onItemClick={() => setClickedButton('Launch instance from template')}

pages/button-dropdown/permutations-main-action.page.tsx

@@ -17,13 +17,15 @@ const launchInstanceItem = {
 const launchInstanceFromTemplateItem = {
   text: 'Launch instance from template',
   iconName: 'file',
+  secondaryText: 'Use an existing template',
 } as const;
 
 const viewInstancesItem = {
   text: 'View instances',
   href: 'https://instances.com',
   external: true,
   externalIconAriaLabel: '(opens in new tab)',
+  labelTag: 'Ctrl + Click',
 } as const;
 
 const permutations = createPermutations<ButtonDropdownProps>([

pages/button-dropdown/simple.page.tsx

@@ -40,6 +40,22 @@ const items: ButtonDropdownProps['items'] = [
     text: 'Option 6',
     disabled: true,
   },
+  {
+    id: 'id7',
+    text: 'Option 7',
+    secondaryText: 'This is option 7',
+  },
+  {
+    id: 'id8',
+    text: 'Option 8',
+    labelTag: 'Ctrl + 8',
+  },
+  {
+    id: 'id9',
+    text: 'Option 9',
+    secondaryText: 'This is option 9',
+    labelTag: 'Ctrl + 9',
+  },
 ];
 
 const withNestedOptions: ButtonDropdownProps['items'] = [
@@ -49,10 +65,14 @@ const withNestedOptions: ButtonDropdownProps['items'] = [
       {
         id: '1',
         text: 'Destroy',
+        secondaryText: 'This is the Destroy option',
+        labelTag: 'Ctrl + D',
       },
       {
         id: '2',
         text: 'Restart',
+        secondaryText: 'This is the Restart option',
+        labelTag: 'Ctrl + R',
       },
     ],
   },
@@ -77,10 +97,13 @@ const withExpandedGroups: ButtonDropdownProps['items'] = [
   {
     id: 'connect',
     text: 'Connect',
+    secondaryText: 'This is the Connect option',
+    labelTag: 'Ctrl + C',
   },
   {
     id: 'password',
     text: 'Get password',
+    secondaryText: 'This is the Get password option',
   },
   {
     id: 'states',
@@ -89,29 +112,39 @@ const withExpandedGroups: ButtonDropdownProps['items'] = [
       {
         id: 'start',
         text: 'Start',
+        secondaryText: 'This is the Start option',
+        labelTag: 'Ctrl + S',
       },
       {
         id: 'stop',
         text: 'Stop',
+        secondaryText: 'This is the Stop Option',
         disabled: true,
       },
       {
         id: 'hibernate',
         text: 'Hibernate',
+        secondaryText: 'This is the Hibernate Option',
+        labelTag: 'Ctrl + H',
         disabled: true,
       },
       {
         id: 'reboot',
         text: 'Reboot',
+        secondaryText: 'This is the Reboot Option',
+        labelTag: 'Ctrl + B',
         disabled: true,
       },
       {
         id: 'terminate',
         text: 'Terminate',
+        secondaryText: 'This is the Terminate Option',
       },
       {
         id: 'external',
         text: 'Root Page',
+        secondaryText: '',
+        labelTag: 'Ctrl + P',
         external: true,
         href: '/#/light/',
       },

pages/button-dropdown/utils/button-dropdown-items.ts

@@ -11,10 +11,13 @@ const dropdownItems = [
     id: 'id7',
     text: 'option5',
     disabled: true,
+    secondaryText: 'This is a disabled option',
+    labelTag: 'Disabled',
   },
   {
     id: 'id8',
     text: 'VeryLongOptionTextValueHereToTestTheCaseWithThisDropdown',
+    secondaryText: 'This is the option with a long description, This is the option with a long description',
   },
   { id: 'id9', text: 'option6' },
 ];