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

.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);
 

src/components/containers/Dialog/Dialog.module.scss

@@ -67,19 +67,17 @@
       margin-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-7 / 2);
       padding-inline: var(--bk-dialog-padding-inline);
 
-      display: flex;
-      flex-direction: row;
-      gap: bk.$spacing-3;
+      @include bk.flex($dir: row, $gap: bk.$spacing-3);
     }
 
     .bk-dialog__content__icon-aside {
       align-self: flex-start;
 
-      display: flex;
-      flex-direction: row;
-      gap: bk.$spacing-3;
+      @include bk.flex-row($gap: bk.$spacing-3);
     }
 
+    .bk-dialog__content__body { --keep: ; }
+
     .bk-dialog__actions {
       position: sticky;
       inset-block-end: -1px; // -1px to prevent bleed through due to pixel rounding

src/components/containers/Dialog/Dialog.stories.tsx

@@ -97,6 +97,7 @@ export const DialogWithAside: Story = {
             </FieldLayout>
           </FormLayout>
         </Form>
+        <p>ThisIsAVeryLongStringOfTextWithoutAnySpacesToTestWhetherWeHandleWordBreaksCorrectlyWhenTheTextOverflowsTheContainingElement</p>
       </Dialog>
     );
   },

src/components/containers/Dialog/Dialog.tsx

@@ -182,7 +182,7 @@ export const Dialog = Object.assign(
               role="document" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role
               // FIXME: make this focusable instead of the <dialog> as per guidelines on MDN?
               //tabIndex={0}
-              className={cx('bk-prose')}
+              className={cx(cl['bk-dialog__content__body'], 'bk-prose')}
             >
               {children}
             </section>

src/components/forms/controls/Input/Input.tsx

@@ -3,8 +3,9 @@
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react';
-import { ClassNameArgument, classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
+import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
 import { mergeRefs, mergeCallbacks } from '../../../../util/reactUtil.ts';
+import * as InputUtil from '../../../util/input_util.tsx';
 
 import { type IconName, Icon } from '../../../graphics/Icon/Icon.tsx';
 import { IconButton } from '../../../actions/IconButton/IconButton.tsx';
@@ -29,19 +30,26 @@ const InputAction = (props: React.ComponentProps<typeof IconButton>) => {
   );
 };
 
-export type InputProps = Omit<ComponentProps<'input'>, 'type'> & {
+type InputSpecificProps = Omit<InputUtil.InputSpecificProps, 'type'>;
+type InputContainerProps = Omit<ComponentProps<'div'>, 'ref' | keyof InputSpecificProps>;
+export type InputProps = InputContainerProps & InputSpecificProps & {
+  ref?: undefined | React.Ref<HTMLInputElement>,
+
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
-  /** Class name to apply to the input element. */
-  inputClassName?: undefined | ClassNameArgument,
-
   /** The type of the input. */
   type?: undefined | Exclude<ComponentProps<'input'>['type'], 'button' | 'submit' | 'reset'>,
 
+  /** Props to apply to the container element. */
+  containerProps?: React.ComponentProps<'div'>,
+
+  /** Props to apply to the inner `<input/>` element. */
+  inputProps?: React.ComponentProps<'input'>,
+
   /** An icon to show before the input. */
   icon?: undefined | IconName,
-
+  
   /** The accessible name for the icon. */
   iconLabel?: undefined | string,
 
@@ -53,25 +61,30 @@ export type InputProps = Omit<ComponentProps<'input'>, 'type'> & {
    * Note that browser support is still somewhat limited:
    * https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
    */
-    automaticResize?: undefined | boolean,
+  automaticResize?: undefined | boolean,
 };
 /**
  * Input control.
  */
 export const Input = Object.assign(
   (props: InputProps) => {
     const {
-      unstyled = false,
       className,
-      inputClassName,
+      ref,
+      unstyled = false,
       type = 'text',
+      containerProps = {},
+      inputProps = {},
       icon,
       iconLabel,
       actions,
       automaticResize,
       ...propsRest
     } = props;
 
+    // Split props into container-specific and input-specific
+    const propsExtracted = InputUtil.extractInputSpecificProps(propsRest);
+
     const inputRef = React.useRef<HTMLInputElement>(null);
 
     // When the user clicks on the container, focus the input
@@ -84,8 +97,11 @@ export const Input = Object.assign(
     }, []);
 
     // Prevent inputs from being used as (form submit) buttons
-    //if (type === 'button' || type === 'submit' || type === 'image' || type === 'reset') {
-    if (['button', 'submit', 'image', 'reset'].includes(type)) {
+    const bannedTypes = ['button', 'submit', 'image', 'reset'];
+    if (bannedTypes.includes(type)) {
+      throw new Error(`Input: unsupported type '${type}'.`);
+    }
+    if (inputProps.type && bannedTypes.includes(inputProps.type)) {
       throw new Error(`Input: unsupported type '${type}'.`);
     }
 
@@ -96,20 +112,27 @@ export const Input = Object.assign(
 
     return (
       <div
+        {...containerProps}
+        {...propsExtracted.containerProps}
         className={cx(
           'bk',
           { [cl['bk-input']]: !unstyled },
           { [cl['bk-input--automatic-resize']]: automaticResize },
+          containerProps.className,
+          propsExtracted.containerProps,
           className,
         )}
-        onMouseDown={mergeCallbacks([handleContainerClick, propsRest.onMouseDown])}
+        onMouseDown={mergeCallbacks(
+          [handleContainerClick, containerProps.onMouseDown, propsExtracted.containerProps.onMouseDown]
+        )}
       >
         {icon && <Icon icon={icon} aria-label={iconLabel}/>}
         <input
-          {...propsRest}
-          ref={mergeRefs(inputRef, propsRest.ref)}
+          {...inputProps}
+          {...propsExtracted.inputProps}
+          ref={mergeRefs(inputRef, inputProps?.ref, ref)}
           type={type}
-          className={cx(cl['bk-input__input'], inputClassName)}
+          className={cx(cl['bk-input__input'], inputProps?.className)}
         />
         {actions}
       </div>