Init AxoIconButton

Author: jamiebuilds-signal

ts/axo/AxoButton.dom.tsx

@@ -11,6 +11,8 @@ import { SpinnerV2 } from '../components/SpinnerV2.dom.js';
 
 const Namespace = 'AxoButton';
 
+type GenericButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
 const baseAxoButtonStyles = tw(
   'relative inline-flex max-w-full items-center-safe justify-center-safe rounded-full select-none',
   'outline-0 outline-border-focused focused:outline-[2.5px]',
@@ -133,11 +135,6 @@ const AxoButtonSizes = {
   sm: tw('min-w-12 px-2 py-1 type-body-small font-medium'),
 } as const satisfies Record<string, TailwindStyles>;
 
-type BaseButtonAttrs = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'className' | 'style' | 'children'
->;
-
 type AxoButtonVariant = keyof typeof AxoButtonVariants;
 type AxoButtonSize = keyof typeof AxoButtonSizes;
 
@@ -215,16 +212,19 @@ export namespace AxoButton {
     full: tw('w-full'),
   };
 
-  export type RootProps = BaseButtonAttrs &
-    Readonly<{
-      variant: AxoButtonVariant;
-      size: AxoButtonSize;
-      width?: Width;
-      symbol?: AxoSymbol.InlineGlyphName;
-      arrow?: boolean;
-      experimentalSpinner?: { 'aria-label': string } | null;
-      children: ReactNode;
-    }>;
+  export type RootProps = Readonly<{
+    variant: AxoButtonVariant;
+    size: AxoButtonSize;
+    width?: Width;
+    symbol?: AxoSymbol.InlineGlyphName;
+    arrow?: boolean;
+    experimentalSpinner?: { 'aria-label': string } | null;
+    disabled?: GenericButtonProps['disabled'];
+    onClick?: GenericButtonProps['onClick'];
+    children: ReactNode;
+    // Note: Technically we forward all props for Radix, but we restrict the
+    // props that the type accepts
+  }>;
 
   export const Root: FC<RootProps> = memo(
     forwardRef((props, ref: ForwardedRef<HTMLButtonElement>) => {
@@ -251,9 +251,9 @@ export namespace AxoButton {
       return (
         <button
           ref={ref}
+          {...rest}
           type="button"
           className={tw(variantStyles, sizeStyles, widthStyles)}
-          {...rest}
         >
           <span
             className={tw(

ts/axo/AxoDialog.dom.stories.tsx

@@ -41,6 +41,7 @@ function Template(props: {
   back?: boolean;
   contentSize: AxoDialog.ContentSize;
   bodyPadding?: AxoDialog.BodyPadding;
+  iconAction?: boolean;
   footerContent?: ReactNode;
   children: ReactNode;
 }): JSX.Element {
@@ -68,12 +69,26 @@ function Template(props: {
             </AxoDialog.FooterContent>
           )}
           <AxoDialog.Actions>
-            <AxoDialog.Action variant="secondary" onClick={action('onCancel')}>
-              Cancel
-            </AxoDialog.Action>
-            <AxoDialog.Action variant="primary" onClick={action('onSave')}>
-              Save
-            </AxoDialog.Action>
+            {props.iconAction ? (
+              <AxoDialog.IconAction
+                aria-label="Send"
+                variant="primary"
+                symbol="send-fill"
+                onClick={action('onSend')}
+              />
+            ) : (
+              <>
+                <AxoDialog.Action
+                  variant="secondary"
+                  onClick={action('onCancel')}
+                >
+                  Cancel
+                </AxoDialog.Action>
+                <AxoDialog.Action variant="primary" onClick={action('onSave')}>
+                  Save
+                </AxoDialog.Action>
+              </>
+            )}
           </AxoDialog.Actions>
         </AxoDialog.Footer>
       </AxoDialog.Content>
@@ -102,6 +117,14 @@ export function Large(): JSX.Element {
   return <Template contentSize="lg">{TEXT_LONG}</Template>;
 }
 
+export function IconAction(): JSX.Element {
+  return (
+    <Template contentSize="sm" iconAction>
+      {TEXT_SHORT}
+    </Template>
+  );
+}
+
 export function LongContent(): JSX.Element {
   return (
     <Template contentSize="md">
@@ -166,7 +189,8 @@ function TextInputField(props: { placeholder: string }) {
           'w-full px-3 py-1.5',
           'border-[0.5px] border-border-primary shadow-elevation-0',
           'rounded-lg bg-fill-primary',
-          'placeholder:text-label-placeholder'
+          'placeholder:text-label-placeholder',
+          'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]'
         )}
       />
     </div>
@@ -193,7 +217,10 @@ export function ExampleNicknameAndNoteDialog(): JSX.Element {
             encrypted. They are only visible to you.
           </p>
           <div
-            className={tw('mx-auto size-20 rounded-full bg-color-fill-primary')}
+            className={tw(
+              'mx-auto size-20 rounded-full bg-color-fill-primary',
+              'forced-colors:border'
+            )}
           />
           <Spacer height={12} />
           <TextInputField placeholder="First name" />
@@ -331,7 +358,10 @@ export function ExampleLanguageDialog(): JSX.Element {
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             placeholder="Search languages"
-            className={tw('w-full rounded-lg bg-fill-secondary px-3 py-[5px]')}
+            className={tw(
+              'w-full rounded-lg bg-fill-secondary px-3 py-[5px]',
+              'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]'
+            )}
           />
         </AxoDialog.ExperimentalSearch>
         <AxoDialog.Body padding="only-scrollbar-gutter">

ts/axo/AxoDialog.dom.tsx

@@ -16,6 +16,7 @@ import { tw } from './tw.dom.js';
 import { AxoScrollArea } from './AxoScrollArea.dom.js';
 import { getScrollbarGutters } from './_internal/scrollbars.dom.js';
 import { AxoButton } from './AxoButton.dom.js';
+import { AxoIconButton } from './AxoIconButton.dom.js';
 
 const Namespace = 'AxoDialog';
 
@@ -237,9 +238,11 @@ export namespace AxoDialog {
   export const Back: FC<BackProps> = memo(props => {
     return (
       <div className={tw('col-[back-slot] text-start')}>
-        <HeaderIconButton
-          label={props['aria-label']}
+        <AxoIconButton.Root
+          size="sm"
+          variant="borderless-secondary"
           symbol="chevron-[start]"
+          aria-label={props['aria-label']}
         />
       </div>
     );
@@ -260,7 +263,12 @@ export namespace AxoDialog {
     return (
       <div className={tw('col-[close-slot] text-end')}>
         <Dialog.Close asChild>
-          <HeaderIconButton label={props['aria-label']} symbol="x" />
+          <AxoIconButton.Root
+            size="sm"
+            variant="borderless-secondary"
+            symbol="x"
+            aria-label={props['aria-label']}
+          />
         </Dialog.Close>
       </div>
     );
@@ -462,4 +470,31 @@ export namespace AxoDialog {
   });
 
   Action.displayName = `${Namespace}.Action`;
+
+  /**
+   * Component: <AxoDialog.Actions>
+   * ------------------------------
+   */
+
+  export type IconActionVariant = 'primary' | 'destructive' | 'secondary';
+
+  export type IconActionProps = Readonly<{
+    'aria-label': string;
+    variant: ActionVariant;
+    symbol: AxoSymbol.IconName;
+    onClick: () => void;
+  }>;
+
+  export const IconAction: FC<IconActionProps> = memo(props => {
+    return (
+      <AxoIconButton.Root
+        aria-label={props['aria-label']}
+        variant={props.variant}
+        size="md"
+        symbol={props.symbol}
+      />
+    );
+  });
+
+  IconAction.displayName = `${Namespace}.IconAction`;
 }