Merge pull request #173 from fortanix/mkrause/250420-replace-dropdown-with-listbox

Replace all instances of Dropdown with ListBox, and remove the Dropdown component

Author: mkrause

.github/workflows/ci.yaml

@@ -28,6 +28,5 @@ jobs:
         cache: 'npm'
     - run: npm ci
     #- run: npm run build --if-present
-    - run: npm run verify verify:source
     - run: npm test
     - run: cd tests/installation && npm ci && npm test

.storybook/main.ts

@@ -12,7 +12,9 @@ const config: StorybookConfig = {
   },
   framework: {
     name: '@storybook/react-vite',
-    options: {},
+    options: {
+      strictMode: true,
+    },
   },
   stories: [
     '../src/**/*.mdx',

.vscode/custom.css-data.json

@@ -3,7 +3,9 @@
   "version": 1.1,
   "properties": [
     { "name": "interpolate-size" },
-    { "name": "position-try-fallbacks" }
+    { "name": "position-try-fallbacks" },
+    { "name": "reading-flow" },
+    { "name": "reading-order" }
   ],
   "atDirectives": [
     {

app/Demo.tsx

@@ -27,8 +27,10 @@ export const Demo = () => {
         <Header slot="actions">
           <UserMenu userName="Anand Kashyap"/>
           {/* <UserMenu userName="Anand Kashyap – Very Long Name That Will Overflow"/> */}
-          <AccountSelector className="select-action"/>
-          <SolutionSelector className="select-action"/>
+          <AccountSelector className="select-action" accounts={null}>
+            {accountSelected => accountSelected?.label ?? 'Accounts'}
+          </AccountSelector>
+          <SolutionSelector className="select-action" solutions={null}/>
         </Header>
       </AppLayout.Header>
       {/* Container around the sidebar that grows to full height, allowing the sidebar to be sticky */}

app/lib.ts

@@ -79,7 +79,6 @@ export { Tab, Tabs } from '../src/components/navigations/Tabs/Tabs.tsx';
 export { SpinnerModal } from '../src/components/overlays/SpinnerModal/SpinnerModal.tsx';
 export { DialogModal } from '../src/components/overlays/DialogModal/DialogModal.tsx';
 export { DialogOverlay } from '../src/components/overlays/DialogOverlay/DialogOverlay.tsx';
-export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx';
 export { DropdownMenuProvider } from '../src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx';
 export { ToastProvider, notify } from '../src/components/overlays/ToastProvider/ToastProvider.tsx';
 export { Tooltip } from '../src/components/overlays/Tooltip/Tooltip.tsx';

package.json

@@ -54,7 +54,7 @@
     "lint:style": "stylelint 'src/**/*.scss'",
     "lint:script": "biome lint",
     "lint": "npm run lint:style; npm run lint:script",
-    "test": "npm run check:types && npm run lint:style",
+    "test": "npm run check:types && npm run lint:style && npm run verify verify:source",
     "test-ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "test:storybook": "test-storybook --failOnConsole --browsers chromium --maxWorkers=1",

package.json.js

@@ -79,7 +79,7 @@ const packageConfig = {
     // Test
     // Note: use `vitest run --root=. src/...` to run a single test file
     //'test:unit': 'vitest run --root=.', // Need to specify `--root=.` since the vite root is set to `./app`
-    'test': 'npm run check:types && npm run lint:style', // TODO: add `lint:script`, `test:unit`
+    'test': 'npm run check:types && npm run lint:style && npm run verify verify:source', // TODO: add `lint:script`, `test:unit`
     'test-ui': 'vitest --ui',
     'coverage': 'vitest run --coverage',
 

scripts/import.ts

@@ -216,6 +216,10 @@ const runImportColorsSemantic = async (args: ScriptArgs) => {
       throw new Error(`Should not happen`);
     }
 
+    if (tokenValue.match(/#[a-z0-9]{3,6}/i)) {
+      throw new Error(`Found semantic color token defined using a hardcoded hex color: '${tokenName}'`);
+    }
+    
     // Replace references to primitive color tokens with their Sass variable equivalent
     const color = tokenValue.replaceAll(/var\(--(.+?)-(\d+)\)/g, '\$color-$1-$2');
 

src/components/actions/Button/Button.tsx

@@ -147,7 +147,7 @@ export const Button = (props: ButtonProps) => {
   return (
     <button
       aria-label={accessibleName}
-      aria-disabled={!isInteractive}
+      aria-disabled={isInteractive ? undefined : true}
       disabled={disabled}
       {...propsRest}
       type={buttonType} // Not overridable

src/components/containers/Banner/Banner.module.scss

@@ -34,26 +34,22 @@
     color: bk.$theme-banner-text-default;
 
     .bk-banner__header {
-      display: flex;
-      flex-direction: row;
+      @include bk.flex-row;
       align-items: flex-start;
       gap: bk.$spacing-4;
 
       .bk-banner__header__text {
         margin-inline-end: auto; // Space between text and actions
 
-        min-inline-size: 0;
-        display: flex;
-        flex-flow: row wrap;
+        @include bk.flex-row;
+        flex-wrap: wrap;
         gap: bk.$spacing-1;
 
         .bk-banner__title {
           $icon-size: 1.3em;
           margin-inline-start: calc(-1 * (bk.$spacing-2 + $icon-size));
 
-          min-inline-size: 0;
-          display: flex;
-          flex-direction: row;
+          @include bk.flex-row;
           gap: bk.$spacing-2;
           align-items: center;
 
@@ -73,8 +69,9 @@
         }
       }
       .bk-banner__actions {
-        display: flex;
-        flex-direction: row;
+        flex-shrink: 0;
+        
+        @include bk.flex-row;
         align-items: center;
         gap: bk.$spacing-3 calc(bk.$spacing-6 / 2);