Modal components update

.storybook/preview.tsx

@@ -63,10 +63,13 @@ const preview = {
             ],
             'overlays',
             [
+              'ModalProvider',
+              'SpinnerModal',
+              'DialogModal',
               'Tooltip',
               'TooltipProvider',
-              'Dropdown',
-              'Modal',
+              'DropdownMenu',
+              'Toast',
             ],
             'lists',
             [

app/lib.ts

@@ -62,9 +62,11 @@ export { Stepper } from '../src/components/navigations/Stepper/Stepper.tsx';
 export { Tab, Tabs } from '../src/components/navigations/Tabs/Tabs.tsx';
 
 // Overlays
+export { ModalProvider } from '../src/components/overlays/ModalProvider/ModalProvider.tsx';
+export { SpinnerModal } from '../src/components/overlays/SpinnerModal/SpinnerModal.tsx';
+export { DialogModal } from '../src/components/overlays/DialogModal/DialogModal.tsx';
 export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx';
 export { DropdownMenuProvider } from '../src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx';
-export { Modal } from '../src/components/overlays/Modal/Modal.tsx';
 export { type ToastContent, ToastProvider, ToastMessage } from '../src/components/overlays/Toast/Toast.tsx';
 export { Tooltip } from '../src/components/overlays/Tooltip/Tooltip.tsx';
 export { TooltipProvider } from '../src/components/overlays/Tooltip/TooltipProvider.tsx';

package.json.js

@@ -168,6 +168,7 @@ const packageConfig = {
     'react': '^19.0.0',
     'react-dom': '^19.0.0',
     'react-error-boundary': '^4.1.2',
+    //'@uidotdev/usehooks': '^2.4.1',
 
     '@floating-ui/react': '^0.26.28',
     'react-toastify': '^10.0.6',

plopfile.ts

@@ -64,7 +64,7 @@ const componentTemplate = {
       /** Whether this component should be unstyled. */
       unstyled?: undefined | boolean,
 
-      /** Some property specific to \`{{{component-name}}}\` */
+      /** Some property specific to \`{{{component-name}}}\`. */
       variant?: undefined | 'x' | 'y',
     }>;
     {{"\\n"~}}
@@ -78,12 +78,13 @@ const componentTemplate = {
       return (
         <{{{element-type}}}
           {...propsRest}
-          className={cx({
-            bk: true,
-            [cl['bk-{{{kebabCase component-name}}}']]: !unstyled,
-            [cl['bk-{{{kebabCase component-name}}}--x']]: variant === 'x',
-            [cl['bk-{{{kebabCase component-name}}}--y']]: variant === 'y',
-          }, propsRest.className)}
+          className={cx(
+            'bk',
+            { [cl['bk-{{{kebabCase component-name}}}']]: !unstyled },
+            { [cl['bk-{{{kebabCase component-name}}}--x']]: variant === 'x' },
+            { [cl['bk-{{{kebabCase component-name}}}--y']]: variant === 'y' },
+            propsRest.className,
+          )}
         />
       );
     };
@@ -173,21 +174,24 @@ const componentTemplate = {
 
     export default {
       component: {{{component-name}}},
+      tags: ['autodocs'],
       parameters: {
         layout: '{{storybook-layout}}',
       },
-      tags: ['autodocs'],
-      argTypes: {
-      },
+      argTypes: {},
       args: {
         children: 'Example',
       },
       render: (args) => <{{{component-name}}} {...args}/>,
     } satisfies Meta<{{{component-name}}}Args>;
 
 
-    export const Standard: Story = {
-      name: '{{{component-name}}}',
+    export const {{{component-name}}}Standard: Story = {};
+
+    export const {{{component-name}}}WithVariant: Story = {
+      args: {
+        variant: 'x',
+      },
     };
   ` + '\n',
 };

src/components/actions/Button/Button.tsx

@@ -32,9 +32,16 @@ export type ButtonProps = React.PropsWithChildren<Omit<ComponentProps<'button'>,
   /** What variant the button is, from higher prominance to lower. */
   variant?: undefined | 'primary' | 'secondary' | 'tertiary',
 
+  /**
+   * Whether the button is disabled. This is meant for essentially permanent disabled buttons, not for buttons that
+   * are just temporarily non-interactive. Use `nonactive` for the latter. Disabled buttons cannot be focused.
+   */
+  disabled?: undefined | boolean,
+
   /**
    * Whether the button is in "nonactive" state. This is a variant of `disabled`, but instead of completely graying
-   * out the button, it only becomes a muted variation of the button's appearance. When true, also implies `disabled`.
+   * out the button, it only becomes a muted variation of the button's appearance. Nonactive buttons are useful for
+   * temporarily states such as while an action is currently ongoing. Nonactive buttons are still focusable.
    */
   nonactive?: undefined | boolean,
 
@@ -53,6 +60,7 @@ export const Button = (props: ButtonProps) => {
     unstyled = false,
     trimmed = false,
     label,
+    disabled = false,
     nonactive = false,
     variant = 'tertiary',
     onPress,
@@ -63,24 +71,31 @@ export const Button = (props: ButtonProps) => {
   const [isPressPending, startPressTransition] = React.useTransition();
 
   const isPending = isPressPending;
-  const isInteractive = !propsRest.disabled && !nonactive && !isPending;
+  const isInteractive = !disabled && !nonactive && !isPending;
   const isNonactive = nonactive || isPending;
 
   const handlePress = React.useCallback(() => {
     if (typeof onPress !== 'function') { return; }
 
-    startPressTransition(async () => {
-      await Promise.race([onPress(), timeout(asyncTimeout)]);
-    });
+    const onPressResult = onPress();
+
+    // Note: do not start a transition unless `onPress` is actually async, because otherwise sync press actions
+    // will cause a brief rerender with disabled state and loading indicator, which messes with things like
+    // button focus.
+    if (onPressResult instanceof Promise) {
+      startPressTransition(async () => {
+        await Promise.race([onPressResult, timeout(asyncTimeout)]);
+      });
+    }
   }, [onPress, asyncTimeout]);
 
   const handleClick = React.useCallback(async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    if (!isInteractive) { return; }
+
     // `onClick` should not be used in most cases, only if the consumer needs low level control over click events.
     // Instead, use `onPress` or a `<form>` component with `action`.
     props.onClick?.(event); // Call this first, to allow cancellation
 
-    if (!isInteractive) { return; }
-
     if (typeof onPress === 'function') {
       event.preventDefault();
       handlePress();
@@ -122,9 +137,10 @@ export const Button = (props: ButtonProps) => {
   return (
     <button
       aria-label={accessibleName}
+      aria-disabled={!isInteractive}
+      disabled={disabled}
       {...propsRest}
       type={buttonType} // Not overridable
-      disabled={!isInteractive}
       className={cx({
         bk: true,
         [cl['bk-button']]: !unstyled,

src/components/containers/Banner/Banner.tsx

@@ -72,7 +72,7 @@ const ActionIcon = ({ tooltip, ...buttonProps }: ActionIconProps) => {
 
 
 export type BannerProps = Omit<ComponentProps<'div'>, 'title'> & {
-  /** Whether the component should include the default styling. Defaults to false. */
+  /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
   /** Whether to trim this component (strip any spacing around the element). */

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

@@ -14,6 +14,10 @@
     --bk-dialog-padding-block: #{bk.$spacing-8};
     --bk-dialog-padding-inline: #{bk.$spacing-8};
 
+    // The default `auto` inherits from the parent, which we do not want. In the future if `contain: user-select`
+    // becomes supported, we could use that instead.
+    user-select: text;
+
     margin: 0;
     padding: 0; // Do not apply padding on the outermost container (do it on the lower level elements instead)
 
@@ -22,6 +26,8 @@
       border: none;
       border-radius: 0;
     }
+    background: var(--bk-dialog-background-color);
+    color: bk.$theme-modal-text-default;
 
     display: flex;
     flex-direction: column;
@@ -32,10 +38,11 @@
 
     .bk-dialog__header {
       position: sticky;
-      top: 0;
+      top: -1px; // -1px to prevent bleed through due to pixel rounding
       z-index: 1;
 
       padding-block: var(--bk-dialog-padding-block) calc(bk.$spacing-7 / 2);
+      padding-block-start: calc(var(--bk-dialog-padding-block) + 1px); // 1px to compensate for `top: -1px`
       padding-inline: var(--bk-dialog-padding-inline);
       background: var(--bk-dialog-background-color);
 
@@ -56,6 +63,7 @@
     }
 
     .bk-dialog__content {
+      scroll-margin-top: 100lh; // Workaround for an issue where the content scroll behind the header on focus
       flex: 1;
 
       margin-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-7 / 2);
@@ -64,10 +72,10 @@
 
     .bk-dialog__actions {
       position: sticky;
-      bottom: 0;
+      bottom: -1px; // -1px to prevent bleed through due to pixel rounding
       z-index: 1;
 
-      padding-block: calc(bk.$spacing-7 / 2) bk.$spacing-9;
+      padding-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-9 + 1px); // 1px to compensate for `bottom: -1px`
       padding-inline: var(--bk-dialog-padding-inline);
       // In Figma, actions have an indent. But that might be only if the content itself has an indent, need to check.
       //padding-inline-start: calc(var(--bk-dialog-padding-inline) + bk.$spacing-8);
@@ -81,7 +89,6 @@
 
       .bk-dialog__action { --keep: ; }
       .bk-dialog__action--icon { --keep: ; }
-      .bk-dialog__action--button { --keep: ; }
     }
 
     // State: focus

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

@@ -8,8 +8,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { LayoutDecorator } from '../../../util/storybook/LayoutDecorator.tsx';
 import { loremIpsum, LoremIpsum } from '../../../util/storybook/LoremIpsum.tsx';
 
-import { Button } from '../../actions/Button/Button.tsx';
-
 import { Dialog } from './Dialog.tsx';
 
 
@@ -28,9 +26,7 @@ export default {
   args: {
     title: 'Dialog title',
     children: <LoremIpsum paragraphs={3}/>,
-    actions: (
-      <Button variant="primary" label="Submit"/>
-    ),
+    actions: <Dialog.SubmitAction/>,
     onRequestClose: () => {},
   },
 } satisfies Meta<DialogArgs>;