@12-apps/ui 6.72.0 → 6.73.1

package/src/components/navigation/SectionNav/SectionNav.bar.tsx

@@ -14,26 +14,41 @@ import {
   NOT_LIVE,
   SlotIcon,
   controlProps,
+  useMounted,
   destinationControl,
   focusRing,
 } from './SectionNav.parts';
-import { RaisedActionButton } from './SectionNav.primary';
+import { raisedLift, RaisedActionButton } from './SectionNav.primary';
 import { SectionNavSheet } from './SectionNav.sheet';
 import type { SectionNavAction, SectionNavBadge, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';
 
 /** Which of the bar's two menus is open, if any. */
 type OpenMenu = 'primary' | 'more' | null;
 
-/** The bar's height above the safe area — tall enough for an icon over a label. */
-const barHeight = (theme: Parameters<typeof rem>[0]): string => rem(theme, 60);
+/**
+ * The bar's height above the safe area — tall enough for an icon over a label;
+ * a compact bar holds the icon alone.
+ */
+const barHeight = (theme: Parameters<typeof rem>[0], compact = false): string => rem(theme, compact ? 48 : 60);
+
+/** How the bar is drawn — `compact` is `SectionNavProps.compact`. */
+export interface SectionNavBarOptions {
+  compact?: boolean;
+}
 
 /**
  * The bar's full height on screen, the safe area included — where its sheets
  * stop, and what a host reserves at the foot of its content so nothing it
  * floats (a toast, a receipt) lands under the bar.
  */
-export function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {
-  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;
+export function sectionNavBarInset(theme: Parameters<typeof rem>[0], options: SectionNavBarOptions = {}): string {
+  return `calc(${barHeight(theme, options.compact === true)} + env(safe-area-inset-bottom))`;
+}
+
+/** Where the bar's sheets stop: clear of the raised button's {@link raisedLift}, which drew over their last row (FUT-3399). */
+export function sectionNavSheetOffset(theme: Parameters<typeof rem>[0], raised: boolean, options: SectionNavBarOptions = {}): string {
+  const inset = sectionNavBarInset(theme, options);
+  return raised ? `calc(${inset} + ${rem(theme, raisedLift(options.compact === true))})` : inset;
 }
 
 /**
@@ -62,6 +77,7 @@ function Slot({
   control,
   expanded,
   loading = false,
+  compact = false,
 }: {
   label: string;
   icon: ReactNode;
@@ -73,17 +89,21 @@ function Slot({
   control: Record<string, unknown>;
   expanded?: boolean;
   loading?: boolean;
+  /** Icon only: the label stays the slot's name, out of sight, and its tooltip. */
+  compact?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
+  const animate = useMounted();
   return (
     <Box
       {...control}
+      title={compact ? label : undefined}
       aria-current={current ? 'page' : undefined}
       aria-expanded={expanded}
       aria-busy={loading || undefined}
       data-lit={lit ? 'true' : undefined}
       data-testid={testId}
-      sx={slotSx(theme, lit)}
+      sx={slotSx(theme, lit, compact)}
     >
       <CountedIcon
         icon={
@@ -107,6 +127,7 @@ function Slot({
           lineHeight: 1.3,
           fontWeight: lit ? 700 : 600,
           color: lit ? 'text.primary' : 'inherit',
+          ...labelFoldSx(theme, compact, animate),
         }}
       >
         {label}
@@ -115,6 +136,23 @@ function Slot({
   );
 }
 
+/**
+ * The label folding away in a compact bar: it shrinks to no height and fades
+ * while the bar shrinks, rather than leaving in one frame. Never `display:
+ * none` — it is still the slot's accessible name. With reduced motion it
+ * simply goes.
+ */
+function labelFoldSx(theme: Theme, compact: boolean, animate: boolean): Record<string, unknown> {
+  return {
+    maxHeight: compact ? 0 : rem(theme, 24),
+    opacity: compact ? 0 : 1,
+    transition: animate
+      ? theme.transitions.create(['max-height', 'opacity'], { duration: theme.transitions.duration.shorter })
+      : 'none',
+    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },
+  };
+}
+
 /** The pill behind a slot's icon — tinted while the slot is lit. */
 function pillSx(theme: Theme): SxProps<Theme> {
   return {
@@ -129,7 +167,7 @@ function pillSx(theme: Theme): SxProps<Theme> {
 }
 
 /** A slot's look: icon over label, a pill behind the lit icon, dimmed when disabled. */
-function slotSx(theme: Theme, lit: boolean): SxProps<Theme> {
+function slotSx(theme: Theme, lit: boolean, compact: boolean): SxProps<Theme> {
   return {
     ...CONTROL_RESET,
     ...focusRing(theme),
@@ -139,7 +177,7 @@ function slotSx(theme: Theme, lit: boolean): SxProps<Theme> {
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 0.25,
+    gap: compact ? 0 : 0.25,
     position: 'relative',
     color: lit ? 'primary.main' : 'text.secondary',
     // The current slot is marked by more than its colour: a tinted pill behind
@@ -158,6 +196,7 @@ interface SlotContext {
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   dataTestId: string;
+  compact: boolean;
 }
 
 /** The raised button: an action runs on tap; a menu opens its sheet. */
@@ -175,6 +214,7 @@ function PrimarySlot({
         label={primary.label}
         icon={primary.icon}
         captioned
+        compact={context.compact}
         disabled={primary.disabled}
         loading={primary.loading}
         dataTestId={testId}
@@ -191,6 +231,7 @@ function PrimarySlot({
       icon={primary.icon}
       open={context.open === 'primary'}
       closeLabel={context.copy.close}
+      compact={context.compact}
       disabled={primary.disabled}
       dataTestId={testId}
       onClick={() => context.toggle('primary')}
@@ -211,6 +252,7 @@ function MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContex
       expanded={open === 'more'}
       copy={context.copy}
       testId={more.dataTestId ?? `${context.dataTestId}-more`}
+      compact={context.compact}
       control={controlProps({
         href: undefined,
         linkComponent: context.linkComponent,
@@ -240,6 +282,7 @@ function DestinationSlot({
       copy={context.copy}
       testId={destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`}
       loading={destination.loading === true}
+      compact={context.compact}
       control={destinationControl(destination, context.linkComponent, () => {
         context.close();
         destination.onSelect?.();
@@ -265,6 +308,32 @@ function BarSlotView({
   return <DestinationSlot destination={slot.destination} context={context} />;
 }
 
+/** The bar's own box: docked, a hairline on top, raised over the backdrop only while its sheet is open. */
+function barSx(theme: Theme, sheetOpen: boolean, compact: boolean, animate: boolean): SxProps<Theme> {
+  return {
+    flex: 'none',
+    display: 'flex',
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    height: sectionNavBarInset(theme, { compact }),
+    // Folding to icons and back is a change of height the eye follows;
+    // with reduced motion it simply happens.
+    transition: animate ? theme.transitions.create('height', { duration: theme.transitions.duration.shorter }) : 'none',
+    '@media (prefers-reduced-motion: reduce)': { transition: 'none' },
+    paddingBottom: 'env(safe-area-inset-bottom)',
+    borderTop: `1px solid ${theme.palette.divider}`,
+    bgcolor: 'background.paper',
+    // Above the backdrop ONLY while one of its own sheets is open, so the
+    // primary button can close what it opened. Raised all the time it
+    // would sit over every dialog the page opens, and on a small phone a
+    // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,
+    // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a
+    // stacked sheet catches this bar's OWN sheets too.
+    position: 'relative',
+    zIndex: sheetOpen ? stackedOverlayZIndex(theme) + 1 : 'auto',
+  } as SxProps<Theme>;
+}
+
 /** The phone layout: a bottom bar, with its menus as bottom sheets. */
 export function SectionNavBar({
   label,
@@ -274,10 +343,12 @@ export function SectionNavBar({
   linkComponent,
   copy,
   dataTestId,
+  compact = false,
 }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &
-  Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {
+  Pick<SectionNavProps, 'primary' | 'more' | 'compact'> & { linkComponent: ElementType | undefined }): React.JSX.Element {
   const sheetMenu = isMenu(primary) ? primary : undefined;
   const theme = useTheme();
+  const animate = useMounted();
   const [open, setOpen] = useState<OpenMenu>(null);
   const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));
   const close = (): void => setOpen(null);
@@ -288,24 +359,7 @@ export function SectionNavBar({
         component="nav"
         aria-label={label}
         data-testid={dataTestId}
-        sx={{
-          flex: 'none',
-          display: 'flex',
-          alignItems: 'stretch',
-          boxSizing: 'border-box',
-          height: sectionNavBarInset(theme),
-          paddingBottom: 'env(safe-area-inset-bottom)',
-          borderTop: `1px solid ${theme.palette.divider}`,
-          bgcolor: 'background.paper',
-          // Above the backdrop ONLY while one of its own sheets is open, so the
-          // primary button can close what it opened. Raised all the time it
-          // would sit over every dialog the page opens, and on a small phone a
-          // dialog's own footer is exactly where the bar is. `stackedOverlayZIndex`,
-          // not `zIndex.modal + 1`: a host lifting a bottom Drawer clear of a
-          // stacked sheet catches this bar's OWN sheets too.
-          position: 'relative',
-          zIndex: open === null ? 'auto' : stackedOverlayZIndex(theme) + 1,
-        }}
+        sx={barSx(theme, open !== null, compact, animate)}
       >
         {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (
           <BarSlotView
@@ -313,7 +367,7 @@ export function SectionNavBar({
             slot={slot}
             primary={primary}
             more={more}
-            context={{ open, toggle, close, linkComponent, copy, dataTestId }}
+            context={{ open, toggle, close, linkComponent, copy, dataTestId, compact }}
           />
         ))}
       </Box>
@@ -325,7 +379,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-primary-sheet`}
-          bottomOffset={sectionNavBarInset(theme)}
+          bottomOffset={sectionNavSheetOffset(theme, primary !== undefined, { compact })}
         />
       ) : null}
       {more ? (
@@ -336,7 +390,7 @@ export function SectionNavBar({
           linkComponent={linkComponent}
           copy={copy}
           testId={`${dataTestId}-more-sheet`}
-          bottomOffset={sectionNavBarInset(theme)}
+          bottomOffset={sectionNavSheetOffset(theme, primary !== undefined, { compact })}
         />
       ) : null}
     </>

package/src/components/navigation/SectionNav/SectionNav.md

@@ -19,7 +19,7 @@ action, the sheets, and the rail's sections.
 
 | `layout` | draws | menus |
 |---|---|---|
-| `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar |
+| `bar` | a bottom row: the destinations, `more` last, `primary` raised in the middle | open as bottom sheets over the page, stopping above the bar — and above the raised `primary` when there is one, so it never draws over a sheet |
 | `rail` | a vertical list: `back`, `heading`, a `primary` menu as one button, the destinations, then `more` | `primary` opens as a menu anchored to its button (named by `title`); `more` is listed under its `title` |
 
 Which layout to use is the HOST's call. A bar beside a sidebar is two
@@ -50,6 +50,26 @@ screen.
   carries no words. `PT_BR_SECTION_NAV_COPY` and `EN_US_SECTION_NAV_COPY` are
   named packs; `SECTION_NAV_COPY` is the locale pack.
 - **dataTestId**: the prefix for every test id (`section-nav`).
+- **compact**: `boolean`, default `false`. Icons only, a size down, for a host
+  that folds its chrome so the content gets the screen. See *Compact*.
+
+## Compact
+
+`compact` draws the same navigation as icons only. Nothing is removed: every
+label stays its control's accessible name (out of sight) and its `title`
+tooltip, every count stays on its icon, every menu still opens.
+
+| `layout` | compact draws |
+|---|---|
+| `bar` | 48px instead of 60; each slot its icon, its label folding away (shrinking and fading) as the bar shrinks; the raised button 40px instead of 52, lifted less, with its label as a tooltip and no caption under an action. Height and labels animate (200ms) unless the reader asked for reduced motion. |
+| `rail` | each row, the way back (an arrow when it brings no icon) and a `primary` menu's button as their icon, centred; the heading, `more`'s title and its group titles out of sight. Made for a column 64px wide; the host sets the width. |
+
+`sectionNavBarInset(theme, { compact: true })` is the compact bar's full
+height, so a host's reserved foot follows the bar as it folds.
+
+A slot's name includes its count ("Board, 3 pending") while its tooltip is the
+label alone, so a screen reader may read the label a second time as the
+description; the tooltip is there for a pointer, which sees no words otherwise.
 
 ## A bar of verbs
 
@@ -103,8 +123,8 @@ every label is semibold.
 
 ## Docking the bar
 
-Dock the bar at the foot of a flex column. `sectionNavBarInset(theme)` is its
-full height, the phone's safe area included. Reserve it at the foot of the
+Dock the bar at the foot of a flex column. `sectionNavBarInset(theme)` (with
+`{ compact: true }` for the compact bar) is its full height, the phone's safe area included. Reserve it at the foot of the
 content, so nothing the page floats (a toast, a receipt) lands under the bar.
 
 The bar rises above a modal backdrop only while one of its OWN sheets is open,
@@ -123,7 +143,8 @@ the slot reports the sheet through `aria-expanded`.
 The raised round button on its own, for a host that already draws its own bar:
 drop it between two tabs in a flex row. Without `open` it is a plain action.
 With `captioned` its label is drawn under it, hidden from assistive tech so
-the button is named once. `disabled` is native; `loading` keeps it focusable
+the button is named once. `compact` draws it 40px rather than 52, with no
+caption. `disabled` is native; `loading` keeps it focusable
 with `aria-busy` and `aria-disabled`, and drops the click.
 With `open` it reports `aria-expanded`, takes `closeLabel` as its name, and its
 icon turns 45° while open.

package/src/components/navigation/SectionNav/SectionNav.parts.tsx

@@ -1,9 +1,10 @@
 import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
-import type { ElementType, ReactNode } from 'react';
+import { useEffect, useState, type ElementType, type ReactNode } from 'react';
 
 import { rem } from '../../../tokens/scales';
+import { SR_ONLY_SX } from '../../form/Label/Label.styles';
 import { Badge } from '../../data-display/Badge';
 
 import { shownCount } from './SectionNav.helpers';
@@ -153,4 +154,21 @@ export const CONTROL_RESET = {
   [NOT_LIVE]: { cursor: 'default' },
 } as const;
 
+/**
+ * Out of sight, still read: a compact nav keeps each label as its control's
+ * accessible name. The same box `Label`'s `srOnly` draws.
+ */
+export const VISUALLY_HIDDEN = SR_ONLY_SX;
+
+/**
+ * False on the first render, true from then on — so a fold animates when the
+ * host CHANGES `compact`, never when a page simply opens folded (which drew
+ * the labels sliding out over the neighbouring badges on every load).
+ */
+export function useMounted(): boolean {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
+
 export { Box };

package/src/components/navigation/SectionNav/SectionNav.primary.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 
 import { rem } from '../../../tokens/scales';
 
-import { Box, CONTROL_RESET, NOT_LIVE, SlotIcon, focusRing } from './SectionNav.parts';
+import { Box, CONTROL_RESET, NOT_LIVE, SlotIcon } from './SectionNav.parts';
 
 export interface RaisedActionButtonProps {
   /**
@@ -28,6 +28,12 @@ export interface RaisedActionButtonProps {
    * bar of places can leave its one action to the icon.
    */
   captioned?: boolean;
+  /**
+   * A size down — 40px rather than 52, lifted less — for a compact bar. It
+   * draws no caption: a compact bar is icons only, and the name stays the
+   * button's `aria-label`.
+   */
+  compact?: boolean;
   /** Dimmed and not operable: a native `disabled` button. */
   disabled?: boolean;
   /**
@@ -58,6 +64,7 @@ export function RaisedActionButton({
   open,
   closeLabel,
   captioned = false,
+  compact = false,
   disabled = false,
   loading = false,
   dataTestId = 'raised-action',
@@ -79,18 +86,36 @@ export function RaisedActionButton({
         component="button"
         type="button"
         {...raisedState({ onClick, disabled, loading })}
-        aria-label={expanded && closeLabel ? closeLabel : label}
+        {...raisedNames({ label, closeLabel, expanded, compact })}
         aria-expanded={open}
         data-testid={dataTestId}
-        sx={raisedSx(theme, expanded)}
+        sx={raisedSx(theme, expanded, compact)}
       >
         <SlotIcon icon={icon} loading={loading} />
       </Box>
-      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}
+      <RaisedCaption shown={captioned && !compact} label={label} inert={disabled || loading} />
     </Box>
   );
 }
 
+/**
+ * The button's name — `closeLabel` while what it opened is open — and, on a
+ * compact bar where no word is drawn, the label as its tooltip.
+ */
+function raisedNames({
+  label,
+  closeLabel,
+  expanded,
+  compact,
+}: {
+  label: string;
+  closeLabel: string | undefined;
+  expanded: boolean;
+  compact: boolean;
+}): { 'aria-label': string; title: string | undefined } {
+  return { 'aria-label': expanded && closeLabel ? closeLabel : label, title: compact ? label : undefined };
+}
+
 /**
  * The button's operability. Only `disabled` is native: an in-flight button
  * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.
@@ -114,10 +139,11 @@ function raisedState({
 }
 
 /**
- * The label under a captioned button. Hidden from assistive tech: the button
+ * The label under a captioned button — none on a compact bar. Hidden from assistive tech: the button
  * already carries the same words as its name, and reading them twice is noise.
  */
-function RaisedCaption({ label, inert }: { label: string; inert: boolean }): React.JSX.Element {
+function RaisedCaption({ shown, label, inert }: { shown: boolean; label: string; inert: boolean }): React.JSX.Element | null {
+  if (!shown) return null;
   return (
     <Typography
       component="span"
@@ -130,16 +156,31 @@ function RaisedCaption({ label, inert }: { label: string; inert: boolean }): Rea
   );
 }
 
+/**
+ * How far the round button stands out of the bar's top edge, in design px — what
+ * the bar's sheets must clear so the button never draws over one (FUT-3399).
+ * The compact bar's smaller button stands out less.
+ */
+export const RAISED_LIFT = 18;
+export const RAISED_LIFT_COMPACT = 12;
+
+/** The lift of the round button on a bar of this form. */
+export function raisedLift(compact: boolean): number {
+  return compact ? RAISED_LIFT_COMPACT : RAISED_LIFT;
+}
+
 /** The round button: lifted half out of the bar, its icon turning while what it opened is open. */
-function raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {
-  const size = rem(theme, 52);
+function raisedSx(theme: Theme, expanded: boolean, compact: boolean): SxProps<Theme> {
+  const size = rem(theme, compact ? 40 : 52);
   return {
     ...CONTROL_RESET,
-    ...focusRing(theme),
+    // The ring OUTSIDE the button: the shared ring sits inside the box, in the
+    // primary colour, where this button's own fill swallowed it whole.
+    '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) },
     width: size,
     height: size,
     // Lifted half out of the bar: the one control that is not a place.
-    marginTop: rem(theme, -18),
+    marginTop: rem(theme, -raisedLift(compact)),
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',
@@ -149,7 +190,7 @@ function raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {
     boxShadow: theme.shadows[6],
     [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },
     '& svg': {
-      fontSize: rem(theme, 26),
+      fontSize: rem(theme, compact ? 22 : 26),
       transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),
       transform: expanded ? 'rotate(45deg)' : 'none',
     },