From a3f2998365a7a56a5b982cd66dc5335181bb63d2 Mon Sep 17 00:00:00 2001 From: Kuai Hu Date: Fri, 29 Aug 2025 14:19:14 -0400 Subject: [PATCH 01/28] feat: Support secondaryText and labelTag for button-dropdown --- package.json | 2 +- pages/button-dropdown/checkboxes.page.tsx | 29 +++++ .../button-dropdown/disabled-reason.page.tsx | 20 +++- pages/button-dropdown/events.page.tsx | 27 ++++- pages/button-dropdown/expandable.page.tsx | 4 + .../button-dropdown/icon-expandable.page.tsx | 3 + .../item-element.permutations.page.tsx | 27 +++++ pages/button-dropdown/main-action.page.tsx | 1 + .../permutations-main-action.page.tsx | 2 + pages/button-dropdown/simple.page.tsx | 33 ++++++ .../utils/button-dropdown-items.ts | 3 + pages/button-dropdown/word-wrap.page.tsx | 5 + .../__snapshots__/documenter.test.ts.snap | 108 +++++++++++++++++- .../__tests__/button-dropdown-items.test.tsx | 20 ++++ .../button-dropdown-keyboard.test.tsx | 16 +++ src/button-dropdown/interfaces.ts | 11 +- src/button-dropdown/item-element/index.tsx | 21 +++- src/button-dropdown/item-element/styles.scss | 18 +++ src/test-utils/dom/button-dropdown/index.ts | 14 +++ 19 files changed, 348 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index f491041e74..cb5834742f 100644 --- a/package.json +++ b/package.json @@ -167,7 +167,7 @@ { "path": "lib/components/internal/widget-exports.js", "brotli": false, - "limit": "869 kB", + "limit": "870 kB", "ignore": "react-dom" } ], diff --git a/pages/button-dropdown/checkboxes.page.tsx b/pages/button-dropdown/checkboxes.page.tsx index 7fa6b3f99c..51850184eb 100644 --- a/pages/button-dropdown/checkboxes.page.tsx +++ b/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; }; diff --git a/pages/button-dropdown/disabled-reason.page.tsx b/pages/button-dropdown/disabled-reason.page.tsx index 6f18521693..6a96b747fe 100644 --- a/pages/button-dropdown/disabled-reason.page.tsx +++ b/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,6 +121,8 @@ export const selectableGroupItems: ButtonDropdownProps.Items = [ itemType: 'checkbox', checked: true, disabled: false, + secondaryText: 'Manage the settings', + labelTag: 'Ctrl + S', }, { text: 'Disabled setting', @@ -119,7 +130,8 @@ export const selectableGroupItems: ButtonDropdownProps.Items = [ 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 ( <> -

Descriptions in ButtonDropdown

+

Failure Reason in ButtonDropdown