refactor(mosaic): make card footer buttons full width by default

.changeset/mosaic-card-footer-button-width.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/blocks/confirmation/confirmation.tsx

@@ -57,15 +57,13 @@ export function Confirmation<Payload = void>({ color = 'negative', ...props }: C
                 <Button
                   color='neutral'
                   variant='outline'
-                  fullWidth
                 >
                   {cancelLabel}
                 </Button>
               }
             />
             <SubmitButton
               type='button'
-              fullWidth
               color={color}
               isPending={isPending}
               onClick={confirm}

packages/mosaic/src/blocks/destructive/destructive.tsx

@@ -88,15 +88,13 @@ function DestructiveStep<Payload>({
             <Button
               color='neutral'
               variant='outline'
-              fullWidth
             >
               {cancelLabel}
             </Button>
           }
         />
         <SubmitButton
           form={formId}
-          fullWidth
           color='negative'
           isPending={isPending}
           disabled={!isConfirmed}

packages/mosaic/src/components/button/button.context.ts

@@ -5,10 +5,12 @@ import React from 'react';
 
 import type { ButtonProps } from './button';
 
-export const ButtonContext = React.createContext<
-  Pick<ButtonProps, 'size' | 'shape' | 'variant' | 'color' | 'disabled'> & {
-    styles?: StyleXStyles;
-    sizeStyles?: StyleXStyles;
-    iconStyles?: StyleXStyles;
-  }
->({});
+type ButtonDefaults = Pick<ButtonProps, 'size' | 'shape' | 'variant' | 'color' | 'disabled' | 'fullWidth'> & {
+  styles?: StyleXStyles;
+  sizeStyles?: StyleXStyles;
+  iconStyles?: StyleXStyles;
+};
+
+export const NO_BUTTON_DEFAULTS: ButtonDefaults = {};
+
+export const ButtonContext = React.createContext<ButtonDefaults>(NO_BUTTON_DEFAULTS);

packages/mosaic/src/components/button/button.tsx

@@ -61,7 +61,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
     variant: variantProp,
     size: sizeProp,
     shape: shapeProp,
-    fullWidth = false,
+    fullWidth: fullWidthProp,
     touchTarget = true,
     disabled: disabledProp,
     focusableWhenDisabled = false,
@@ -76,6 +76,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   const variant = variantProp ?? defaults.variant ?? 'filled';
   const size = sizeProp ?? defaults.size ?? 'md';
   const shape = shapeProp ?? defaults.shape ?? 'default';
+  const fullWidth = fullWidthProp ?? defaults.fullWidth ?? false;
   const disabled = defaults.disabled || disabledProp || false;
   const isIconShape = shape === 'square' || shape === 'circle';
   const hasTouchTarget = touchTarget && variant !== 'link';

packages/mosaic/src/components/card/card.test.tsx

@@ -4,6 +4,8 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { Button, SubmitButton } from '../button';
+import { ButtonContext } from '../button/button.context';
 import { Dialog } from '../dialog';
 import { Flow } from '../flow';
 import { Card } from './card';
@@ -753,6 +755,55 @@ describe('Mosaic Card', () => {
   });
 });
 
+describe('Card.Footer buttons', () => {
+  it('makes buttons full width by default', () => {
+    render(
+      <Card.Footer>
+        <Button>Cancel</Button>
+        <SubmitButton>Save</SubmitButton>
+      </Card.Footer>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Cancel' })).toHaveAttribute('data-full-width', '');
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('data-full-width', '');
+  });
+
+  it('lets a button opt out', () => {
+    render(
+      <Card.Footer>
+        <Button fullWidth={false}>Sign in</Button>
+      </Card.Footer>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Sign in' })).not.toHaveAttribute('data-full-width');
+  });
+
+  it('keeps button defaults from an enclosing provider', () => {
+    render(
+      <ButtonContext.Provider value={{ disabled: true }}>
+        <Card.Footer>
+          <Button>Save</Button>
+        </Card.Footer>
+      </ButtonContext.Provider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+  });
+
+  it('leaves buttons outside the footer alone', () => {
+    render(
+      <Card.Root>
+        <Card.Content>
+          <Button>Inside content</Button>
+        </Card.Content>
+        <Card.Footer />
+      </Card.Root>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Inside content' })).not.toHaveAttribute('data-full-width');
+  });
+});
+
 describe('Card surface', () => {
   // Written out rather than imported, so a drift from `card.styles.ts` fails here instead of passing silently.
   const probe = stylex.create({

packages/mosaic/src/components/card/card.tsx

@@ -13,6 +13,7 @@ import type { BannerRootProps } from '../banner';
 import { Banner } from '../banner';
 import { Branding } from '../branding';
 import { Button } from '../button';
+import { ButtonContext } from '../button/button.context';
 import type { DialogContextValue } from '../dialog';
 import { Dialog, DialogContext, isInDialog } from '../dialog';
 import { Icon } from '../icon';
@@ -251,7 +252,9 @@ const Footer = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
   ref,
 ) {
   const elevation = React.useContext(CardContext)?.elevation ?? DEFAULT_ELEVATION;
-  return useRender({
+  const parentButtonDefaults = React.useContext(ButtonContext);
+  const buttonDefaults = React.useMemo(() => ({ ...parentButtonDefaults, fullWidth: true }), [parentButtonDefaults]);
+  const element = useRender({
     defaultTagName: 'div',
     render,
     ref,
@@ -263,6 +266,8 @@ const Footer = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
       ),
     },
   });
+
+  return <ButtonContext.Provider value={buttonDefaults}>{element}</ButtonContext.Provider>;
 });
 
 /**

packages/mosaic/src/components/dialog/__tests__/dialog.test.tsx

@@ -6,6 +6,8 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import type { MosaicComponentProps } from '../../../props';
 import { colorVars, radiusVars, space } from '../../../tokens.stylex';
+import { Button } from '../../button';
+import { ButtonContext } from '../../button/button.context';
 import { Card } from '../../card';
 import type { DialogVariant } from '../dialog';
 import { Dialog } from '../dialog';
@@ -395,6 +397,38 @@ describe('stacked backdrops', () => {
   });
 });
 
+describe('button defaults', () => {
+  it('does not inherit full width from a card footer it is opened from', () => {
+    render(
+      <Card.Footer>
+        <Dialog.Root defaultOpen>
+          <Dialog.Popup>
+            <Surface title='Nested' />
+            <Button>Inside popup</Button>
+          </Dialog.Popup>
+        </Dialog.Root>
+      </Card.Footer>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Inside popup' })).not.toHaveAttribute('data-full-width');
+  });
+
+  it('does not inherit disabled from an enclosing provider', () => {
+    render(
+      <ButtonContext.Provider value={{ disabled: true }}>
+        <Dialog.Root defaultOpen>
+          <Dialog.Popup>
+            <Surface title='Nested' />
+            <Button>Inside popup</Button>
+          </Dialog.Popup>
+        </Dialog.Root>
+      </ButtonContext.Provider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Inside popup' })).toBeEnabled();
+  });
+});
+
 describe('Dialog.CloseButton', () => {
   it('closes the dialog and carries a default accessible name', async () => {
     const user = userEvent.setup();

packages/mosaic/src/components/dialog/dialog.tsx

@@ -16,6 +16,7 @@ import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { reset } from '../../styles/reset.styles';
 import { Button } from '../button';
+import { ButtonContext, NO_BUTTON_DEFAULTS } from '../button/button.context';
 import { Icon } from '../icon';
 import { ToastProvider } from '../toast/toast';
 import {
@@ -475,7 +476,11 @@ const Popup = React.forwardRef<HTMLDivElement, DialogPopupProps>(function Dialog
   );
 
   return (
-    <Primitive.Portal>{holdsProfile(variant) ? <ToastProvider>{viewport}</ToastProvider> : viewport}</Primitive.Portal>
+    <Primitive.Portal>
+      <ButtonContext.Provider value={NO_BUTTON_DEFAULTS}>
+        {holdsProfile(variant) ? <ToastProvider>{viewport}</ToastProvider> : viewport}
+      </ButtonContext.Provider>
+    </Primitive.Portal>
   );
 });
 

packages/mosaic/src/components/popover/popover.test.tsx

@@ -4,6 +4,9 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { Button } from '../button';
+import { ButtonContext } from '../button/button.context';
+import { Card } from '../card';
 import { Popover } from './popover';
 
 afterEach(() => cleanup());
@@ -14,6 +17,36 @@ const settle = () =>
     await new Promise(resolve => setTimeout(resolve, 0));
   });
 
+describe('button defaults', () => {
+  it('does not inherit full width from a card footer it is opened from', () => {
+    render(
+      <Card.Footer>
+        <Popover.Root defaultOpen>
+          <Popover.Popup aria-label='Panel'>
+            <Button>Inside popup</Button>
+          </Popover.Popup>
+        </Popover.Root>
+      </Card.Footer>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Inside popup' })).not.toHaveAttribute('data-full-width');
+  });
+
+  it('does not inherit disabled from an enclosing provider', () => {
+    render(
+      <ButtonContext.Provider value={{ disabled: true }}>
+        <Popover.Root defaultOpen>
+          <Popover.Popup aria-label='Panel'>
+            <Button>Inside popup</Button>
+          </Popover.Popup>
+        </Popover.Root>
+      </ButtonContext.Provider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Inside popup' })).toBeEnabled();
+  });
+});
+
 describe('Mosaic Popover', () => {
   it('uses a custom anchor and restores the trigger when it is removed', async () => {
     const anchor = document.createElement('div');

packages/mosaic/src/components/popover/popover.tsx

@@ -7,6 +7,7 @@ import { Popover as Primitive } from '../../primitives/popover';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { reset } from '../../styles/reset.styles';
+import { ButtonContext, NO_BUTTON_DEFAULTS } from '../button/button.context';
 import { sizes, styles } from './popover.styles';
 
 export type PopoverSize = 'sm' | 'md' | 'lg' | 'anchor';
@@ -98,14 +99,16 @@ const Popup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(function Popov
         {...(ariaLabel == null ? {} : { 'aria-label': ariaLabel })}
         {...(ariaLabelledby == null ? {} : { 'aria-labelledby': ariaLabelledby })}
       >
-        <Primitive.Popup
-          ref={ref}
-          {...mergeStyleProps(
-            themeProps('popover-popup', { size }),
-            stylex.props(reset.base, styles.popup, sizes[size], xstyle),
-            rest,
-          )}
-        />
+        <ButtonContext.Provider value={NO_BUTTON_DEFAULTS}>
+          <Primitive.Popup
+            ref={ref}
+            {...mergeStyleProps(
+              themeProps('popover-popup', { size }),
+              stylex.props(reset.base, styles.popup, sizes[size], xstyle),
+              rest,
+            )}
+          />
+        </ButtonContext.Provider>
       </Positioner>
     </Primitive.Portal>
   );

packages/mosaic/src/features/api-keys/create-api-key.dialog.tsx

@@ -163,7 +163,6 @@ function CreateKeyStep(props: CreateAPIKeyDialogProps & { inputRef: Ref<HTMLInpu
       <Card.Footer>
         <SubmitButton
           form={form.id}
-          fullWidth
           isPending={form.isSubmitting}
           disabled={!form.canSubmit}
           focusableWhenDisabled
@@ -223,12 +222,7 @@ function CopyKeyStep(props: CreateAPIKeyDialogProps) {
         </Field.Root>
       </Card.Content>
       <Card.Footer>
-        <SubmitButton
-          form={formId}
-          fullWidth
-        >
-          {m.copyAndClose}
-        </SubmitButton>
+        <SubmitButton form={formId}>{m.copyAndClose}</SubmitButton>
       </Card.Footer>
     </>
   );

packages/mosaic/src/features/create-organization/create-organization.view.tsx

@@ -147,7 +147,6 @@ function CreateStep({ form, slugEnabled, onNameChange, onCancel }: CreateOrganiz
           <Button
             variant='outline'
             color='neutral'
-            fullWidth
             disabled={form.isSubmitting}
             onClick={onCancel}
           >
@@ -156,7 +155,6 @@ function CreateStep({ form, slugEnabled, onNameChange, onCancel }: CreateOrganiz
         ) : null}
         <SubmitButton
           form={form.id}
-          fullWidth
           isPending={form.isSubmitting}
           disabled={!form.canSubmit}
           focusableWhenDisabled
@@ -303,15 +301,13 @@ function InviteStep({ invite, onFinish }: CreateOrganizationStepsProps) {
         <Button
           variant='outline'
           color='neutral'
-          fullWidth
           disabled={invite.isPending}
           onClick={onFinish}
         >
           {m.invite.skip}
         </Button>
         <SubmitButton
           form={formId}
-          fullWidth
           isPending={invite.isPending}
           disabled={!canSubmit}
           focusableWhenDisabled
@@ -336,7 +332,6 @@ function SentStep({ onFinish }: CreateOrganizationStepsProps) {
       <Card.Footer>
         <Button
           ref={finishButton}
-          fullWidth
           onClick={onFinish}
         >
           {m.sent.finish}

packages/mosaic/src/features/organization-list/organization-list.view.tsx

@@ -151,7 +151,6 @@ function ListStep({
             ref={createButton}
             variant='outline'
             color='neutral'
-            fullWidth
             disabled={Boolean(pendingKey)}
             focusableWhenDisabled
             onClick={onCreateOrganization}

packages/mosaic/src/features/organization-profile/organization-profile-members-panel/organization-profile-invite-members.dialog.tsx

@@ -104,15 +104,13 @@ export function OrganizationProfileInviteMembersDialog({
                 <Button
                   variant='outline'
                   color='neutral'
-                  fullWidth
                 >
                   {m.cancel}
                 </Button>
               }
             />
             <SubmitButton
               form={formId}
-              fullWidth
               isPending={isPending}
               disabled={!canSubmit}
               focusableWhenDisabled