@12-apps/ui 6.93.0 → 6.93.1

package/src/components/data-display/AlertDialog/AlertDialog.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { neutralTones } from '../../../tokens/ink';
 
-import { AlertDialogFooter } from './AlertDialog.parts';
+import { ALERT_DIALOG_CONTAINER, AlertDialogFooter, narrowDialog } from './AlertDialog.parts';
 import type { AlertDialogProps } from './AlertDialog.types';
 import { rem, rems } from '../../../tokens/relative';
 
@@ -34,6 +34,15 @@ const pulseAnimation = (theme: Theme) => keyframes`
   }
 `;
 
+/**
+ * The container the narrow layout answers to: the space the dialog is given
+ * (the viewport, or the element a host portals it into), read with a
+ * container query — never a media query (FUT-3831).
+ */
+const QUERY_CONTAINER = {
+  '& .MuiDialog-container': { containerType: 'inline-size', containerName: ALERT_DIALOG_CONTAINER },
+} as const;
+
 const StyledDialog = styled(Dialog, {
   shouldForwardProp: (prop) => 
     !['customVariant', 'glow', 'pulse'].includes(prop as string),
@@ -41,7 +50,7 @@ const StyledDialog = styled(Dialog, {
   customVariant?: string; 
   glow?: boolean; 
   pulse?: boolean; 
-}>(({ theme, customVariant, glow, pulse }) => ({
+}>(QUERY_CONTAINER, ({ theme, customVariant, glow, pulse }) => ({
   '& .MuiDialog-paper': {
     borderRadius: theme.spacing(2),
     transition: 'all 0.3s ease',
@@ -122,7 +131,17 @@ const StyledDialog = styled(Dialog, {
   },
 }));
 
-const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
+/**
+ * The title row. Wide: the icon beside the title, which keeps clear of the
+ * close button. Narrow (a dialog given less than `narrowBelow`, a phone): the
+ * icon ABOVE the title, beside the close button, so the question takes the
+ * paper's whole width — at 320 the icon column and the close button had left
+ * it about two words a line (FUT-3831). Without an icon the title keeps the
+ * close button's clearance at every width.
+ */
+const StyledDialogTitle = styled(DialogTitle, {
+  shouldForwardProp: (prop) => prop !== 'withIcon',
+})<{ withIcon: boolean }>(({ theme, withIcon }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1.5),
@@ -131,6 +150,14 @@ const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
     fontWeight: 600,
     fontSize: rem(theme, 20),
   },
+  ...(withIcon && {
+    [narrowDialog(theme)]: {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      paddingRight: theme.spacing(3),
+      '& > [data-alert-icon]': { display: 'flex', minHeight: rem(theme, 24) },
+    },
+  }),
 }));
 
 const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
@@ -218,9 +245,11 @@ function AlertDialogHeader({
 }): React.ReactElement | null {
   if (!title) return null;
   return (
-    <StyledDialogTitle id={titleId(dataTestId)} data-testid={`${dataTestId}-title`}>
+    <StyledDialogTitle id={titleId(dataTestId)} data-testid={`${dataTestId}-title`} withIcon={icon !== null}>
       {icon !== null && (
-        <span data-testid={`${dataTestId}-icon`}>{variantIcon(variant, icon)}</span>
+        <span data-testid={`${dataTestId}-icon`} data-alert-icon="">
+          {variantIcon(variant, icon)}
+        </span>
       )}
       <Typography variant="h6" component="span">
         {title}

package/src/components/data-display/DayRuler/DayRuler.footer.styles.ts

@@ -0,0 +1,54 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { rem } from '../../../tokens/relative';
+import { signalInk } from '../ScheduleGrid/schedule-tones';
+import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
+
+/**
+ * A marked footer's words (FUT-3882): the warning ink deepened until it reads
+ * at 4.5:1 on the page — `warning.main` is 3.1:1 on white. The outline keeps
+ * `warning.main`: a non-text mark needs 3:1.
+ */
+export function footerInk(theme: Theme, marked: boolean, plain: string): string {
+  return marked ? signalInk(theme, 'warning', theme.palette.background.default) : plain;
+}
+
+/** A group's count line (FUT-3882): plain counts on the hours' columns, a marked hour outlined in the warning ink. */
+export function footerCellSx(marked: boolean): SxProps<Theme> {
+  return (theme: Theme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: rem(theme, M.coverage.font),
+    borderRadius: rem(theme, M.coverage.radius),
+    color: footerInk(theme, marked, theme.palette.text.primary),
+    fontWeight: marked ? 500 : 400,
+    // The hairline is always there, transparent when unmarked, so a mark never shifts a count.
+    border: `1px solid ${marked ? theme.palette.warning.main : 'transparent'}`,
+    minWidth: 0,
+    overflow: 'hidden',
+  });
+}
+
+/**
+ * A footer line's sentence; when the host marks it ("Faltam 2, 20h–22h"), in
+ * the readable warning ink with a warning bar before it — a shape, so colour
+ * is never the only signal.
+ */
+export function footerNoteSx(marked: boolean): SxProps<Theme> {
+  return (theme: Theme) => ({
+    fontSize: rem(theme, M.meta),
+    color: footerInk(theme, marked, theme.palette.text.secondary),
+    fontWeight: marked ? 500 : 400,
+    ...(marked ? { borderLeft: `${rem(theme, 3)} solid ${theme.palette.warning.main}`, paddingLeft: rem(theme, 6) } : {}),
+  });
+}
+
+/** A group's trend line: as tall as the coverage row, drawn in the primary colour. */
+export const trendSx: SxProps<Theme> = (theme: Theme) => ({
+  display: 'block',
+  width: '100%',
+  height: rem(theme, M.coverage.height + M.coverage.height / 2),
+  color: theme.palette.primary.main,
+  overflow: 'visible',
+});

package/src/components/data-display/DayRuler/DayRuler.footer.tsx

@@ -0,0 +1,123 @@
+import Box from '@mui/material/Box/index.js';
+import type * as React from 'react';
+
+import { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';
+import type { RulerScale } from './DayRuler.keyboard';
+import { coverageLabelSx, coverageSx, lineSx } from './DayRuler.styles';
+import { footerCellSx, footerNoteSx, trendSx } from './DayRuler.footer.styles';
+import type { DayRulerFooterCell, DayRulerFooterRow, RulerHour } from './DayRuler.types';
+import { formatHour } from './day-ruler-model';
+
+/** The points of a trend over the hours' centres, in a 100 × 40 box: the highest value near the top, `null` breaks nothing (it is skipped). */
+export function trendPoints(values: readonly (number | null)[], hours: number): string {
+  const present = values.slice(0, hours).filter((value): value is number => value !== null);
+  const max = Math.max(0, ...present);
+  return values
+    .slice(0, hours)
+    .flatMap((value, index) => {
+      if (value === null) return [];
+      const x = ((index + 0.5) * 100) / hours;
+      const y = max > 0 ? 38 - (value / max) * 34 : 38;
+      return [`${x.toFixed(2)},${y.toFixed(2)}`];
+    })
+    .join(' ');
+}
+
+/** One hour's default words: "20:00 · 4"; just the hour when it says nothing. */
+const hourWords = (hour: RulerHour, text: string): string => (text ? `${formatHour(hour)} · ${text}` : formatHour(hour));
+
+/** What a reader hears for a marked hour: the host's `title`, else the hour, its count and that it is short. */
+function markedWords(cell: DayRulerFooterCell, hour: RulerHour, marked: string): string {
+  return cell.title ?? `${hourWords(hour, cell.text)} · ${marked}`;
+}
+
+interface FooterContext {
+  hours: number;
+  from: RulerHour;
+  /** `labels.footerMarked`. */
+  marked: string;
+}
+
+function FooterCells({ cells, ctx }: { cells: readonly DayRulerFooterCell[]; ctx: FooterContext }): React.JSX.Element {
+  return (
+    <Box sx={coverageSx(ctx.hours)}>
+      {Array.from({ length: ctx.hours }, (_, index) => {
+        const cell = cells[index] ?? { text: '' };
+        const hour = ctx.from + index;
+        return (
+          <Box
+            key={index}
+            component="span"
+            sx={footerCellSx(Boolean(cell.marked))}
+            title={cell.marked ? markedWords(cell, hour, ctx.marked) : (cell.title ?? hourWords(hour, cell.text))}
+            data-marked={cell.marked ? '' : undefined}
+          >
+            {/* A marked hour is said in words too, not only by its outline and a tooltip touch never shows. */}
+            {cell.marked ? (
+              <>
+                <span aria-hidden>{cell.text}</span>
+                <Box component="span" sx={SR_ONLY_SX}>
+                  {markedWords(cell, hour, ctx.marked)}
+                </Box>
+              </>
+            ) : (
+              cell.text
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/** A trend's figures in words, for the reader the drawn line does not reach: "11:00 4 · 12:00 6". */
+function trendWords(values: readonly (number | null)[], ctx: FooterContext): string {
+  return values
+    .slice(0, ctx.hours)
+    .flatMap((value, index) => (value === null ? [] : [`${formatHour(ctx.from + index)} ${Math.round(value * 10) / 10}`]))
+    .join(' · ');
+}
+
+function FooterFigures({ row, ctx }: { row: DayRulerFooterRow; ctx: FooterContext }): React.JSX.Element {
+  if (row.trend) {
+    return (
+      <Box component="span" sx={{ display: 'block', minWidth: 0 }}>
+        <Box component="svg" viewBox="0 0 100 40" preserveAspectRatio="none" sx={trendSx} aria-hidden>
+          <polyline fill="none" stroke="currentColor" strokeWidth={1.5} vectorEffect="non-scaling-stroke" points={trendPoints(row.trend, ctx.hours)} />
+        </Box>
+        <Box component="span" sx={SR_ONLY_SX}>
+          {trendWords(row.trend, ctx)}
+        </Box>
+      </Box>
+    );
+  }
+  if (row.note !== undefined) {
+    return (
+      <Box component="span" sx={footerNoteSx(Boolean(row.marked))} data-marked={row.marked ? '' : undefined}>
+        {row.note}
+      </Box>
+    );
+  }
+  return <FooterCells cells={row.cells ?? []} ctx={ctx} />;
+}
+
+/**
+ * A group's lines under its rows (FUT-3882): counts per hour, a trend, or a
+ * sentence, on the tracks' columns. `marked` is `labels.footerMarked`.
+ */
+export function GroupFooter(props: { rows: readonly DayRulerFooterRow[]; scale: RulerScale; testId: string; marked: string }): React.JSX.Element {
+  const { rows, scale, testId } = props;
+  const ctx: FooterContext = { hours: scale.to - scale.from, from: scale.from, marked: props.marked };
+  return (
+    <>
+      {rows.map((row) => (
+        <Box key={row.id} sx={lineSx} data-testid={`${testId}-footer-${row.id}`}>
+          <Box component="span" sx={coverageLabelSx}>
+            {row.label}
+          </Box>
+          <FooterFigures row={row} ctx={ctx} />
+        </Box>
+      ))}
+    </>
+  );
+}

package/src/components/data-display/DayRuler/DayRuler.md

@@ -9,10 +9,11 @@ gestures; hours, limits and refusals are the host's.
 Na escala, por hora   [  ][  ][5][5][5] … [1][1][1][  ][  ]
                       06:00     10:00     …     22:00     02:00
 ENTREGAS
-Luiz entrega          |··········[↻ 20:39–00:00]···|     [Iniciar agora]
-atrasado · era 20:39                        ┃ agora
-Anderson Paiva        |  sem escala · desde 08:26  |     [Encerrar turno]
-                      |  ━━━━━━━━━━━━━━━━━━━━━━━━━┃|
+Luiz entrega          |··········[↻ 20:39–00:00]···|
+atrasado · era 20:39  |                     ┃ agora|
+[Iniciar agora]
+Anderson Paiva        |  sem escala · desde 08:26  |
+[Encerrar turno]      |  ━━━━━━━━━━━━━━━━━━━━━━━━━┃|
 ```
 
 Times are **hours from the day's midnight**, fractions included: `20.75` is 20:45 and a value past
@@ -42,7 +43,7 @@ Times are **hours from the day's midnight**, fractions included: `20.75` is 20:4
 
 | Prop | Type | Description |
 |---|---|---|
-| `rows` | `DayRulerRow[]` | `id`, `label`, `meta?`, `metaTone?`, `nameAdornment?` (node beside the name — a "Freela" tag; it moves under the name when there is no room for both), `chips?` (node — one line, a chip that does not fit shrinks and cuts its label), `actions?` (node — "Encerrar turno", "Iniciar agora"), `blocks` (`id`, `start`, `end`, `label`, `shortLabel?`, `tone`, `movable?`, `resizable?`, `selected?`, `title?`, `breakSpan?` — `{ start, end }` in ruler hours, a meal break drawn as a hatched gap inside the block: it travels with a moved block and is cut to its ends while one is dragged; a span that falls outside the block, is empty or is reversed (`end <= start`) draws nothing; its words are the host's, in `label` / `title`), `actual?` (`start`, `end`), `actualLabel?`, `group?` (a new value starts a new heading), `onLabelClick?`, `labelAccessible?`. |
+| `rows` | `DayRulerRow[]` | `id`, `label`, `meta?`, `metaTone?`, `nameAdornment?` (node beside the name — a "Freela" tag; it moves under the name when there is no room for both), `chips?` (node — one line, a chip that does not fit shrinks and cuts its label), `actions?` (node — "Encerrar turno", "Iniciar agora"; under the name on a computer, beside it when stacked — never a column of their own), `blocks` (`id`, `start`, `end`, `label` (drawn whole or not at all — see Layout), `shortLabel?`, `tone`, `movable?`, `resizable?`, `selected?`, `title?`, `breakSpan?` — `{ start, end }` in ruler hours, a meal break drawn as a hatched gap inside the block: it travels with a moved block and is cut to its ends while one is dragged; a span that falls outside the block, is empty or is reversed (`end <= start`) draws nothing; its words are the host's, in `label` / `title`), `actual?` (`start`, `end`), `actualLabel?`, `group?` (a new value starts a new heading), `onLabelClick?`, `labelAccessible?`. |
 | `from` / `to` | `number` (default 6 / 26) | The ruler's span. |
 | `now` | `number?` | The "agora" line, when on the ruler. |
 | `coverage` | `number[]?` | People per hour, index 0 = `from…from+1`. |
@@ -57,27 +58,50 @@ Times are **hours from the day's midnight**, fractions included: `20.75` is 20:4
 | `loading` / `error` / `empty` | `boolean` / node / node | Skeleton rows with `aria-busy`; the host's error; the host's empty sentence. |
 | `aria-label` | `string?` | The region's name. |
 | `labels` | `Partial<DayRulerLabels>` | `createTrack(row)`, `moved(block, range)`, `resized(block, range)`, `refused`, `loading`, `footerMarked`. Default: the English pack; pt-BR: `DAY_RULER_LABELS['pt-BR']` from `@12-apps/ui/data-display/DayRuler`. |
-| `dataTestId` | `string?` (default `day-ruler`) | Parts: `-coverage`, `-axis`, `-footer-${footerRowId}`, `-row-${rowId}`, `-track-${rowId}`, `-block-${blockId}`, `-handle-l/-r-${blockId}`, `-break-${blockId}`, `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`. |
+| `dataTestId` | `string?` (default `day-ruler`) | Parts: `-coverage`, `-axis`, `-footer-${footerRowId}`, `-row-${rowId}`, `-actions-${rowId}` (only on a row with actions), `-track-${rowId}`, `-block-${blockId}`, `-handle-l/-r-${blockId}`, `-break-${blockId}`, `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`. |
 
 Tones are `ScheduleGrid`'s; on the ruler a `plan` block is a dashed outline over a faint ground.
 
 ## Layout
 
-- **Computer:** name 220px · track (`minmax(0, 1fr)`) · actions 220px (none when no row has
-  `actions`), 16px gap; a hairline between rows. Track 40px tall with a line every hour; blocks 24px at +4px; the actual bar 6px
-  at +31px; the now line the track's full height.
+- **Computer:** name 220px · track (`minmax(0, 1fr)`), 16px gap; a hairline between rows. A
+  row's `actions` sit in the name's column, under the name, meta and chips (8px above them) —
+  **never a column of their own** (FUT-3831). A column reserved for the one row with an "Iniciar
+  agora" used to leave every other row a blank 236px band; a column per row (or per group) would
+  have given those rows a wider track and put their hours out of line with the axis. So every
+  track, with actions or without, is the same width and the hours line up down the whole ruler.
+  Track 40px tall with a line every hour; blocks 24px at +4px; the actual bar 6px at +31px; the
+  now line the track's full height.
+- **The now line is drawn UNDER the blocks** (FUT-3831): it shows above and below each bar, where
+  it overhangs the track, and never through a block's label — it used to run through a late
+  block's "07:30–1|3:00". On a block whose fill is not opaque (the dashed `plan`, the `away` /
+  `uncovered` outline) the label takes an opaque ground of its own (the fill flattened over the
+  cell's ground), so the line may show through the bar but not through its text.
 - **Stacked (a container under 800px: a phone, a tablet in portrait)** — a container query, not a
   media query: name, meta, chips and the actions on top, the track under them at full width, 30px
   tall with a line every `tickHours`; the coverage row (its label above the counts) and the hour
   axis span the same full width. **Under 600px** (a phone-sized pane) there is no coverage row and
-  no axis. Every bound is "from that width up". A block whose range does not fit it, by pixels,
-  says only its `shortLabel` (its start), never a cut "20:39–00:". The 20px blocks and the 24px name buttons
-  answer a 40px finger (an invisible hit area), the look unchanged.
+  no axis. Every bound is "from that width up". The queries read the ruler's own named container
+  (`day-ruler`).
+- **A block's text is drawn whole or not at all, at every width** (FUT-3831). By pixels: the
+  `label` when it fits the bar; else the `shortLabel` (its start, "20:39"); else **nothing** — the
+  bar stays empty rather than showing a cut "20:" or "20:39–00:". 12px is the type's floor, so a
+  text is never drawn smaller to squeeze in. Whatever the bar shows, its tooltip (`title`, default
+  `label`) and its accessible name still carry the whole `label`.
+- **Hit band (stacked):** the 20px bars and the 24px name buttons answer a 40px finger, the look
+  unchanged. A bar's invisible band is 40px tall and **at least 40px wide, centred on the bar** —
+  a 1-hour turno at 320 is a 16px bar (FUT-3831). Where two bars are closer than that, each band
+  stops at the **midpoint of the gap** between them, so neither takes a tap meant for the other;
+  bars that touch or overlap give each other nothing past their own edges, and no band reaches
+  past the track's ends. A press in the band is a press on the block: a tap opens it, a mouse drag
+  moves it (a drag-create starts only on track the bands leave free). The end handles sit above
+  the band, so a press on a bar's end still resizes it.
 
 ## Accessibility
 
 Rows are a `list` per group. Blocks are native buttons with `aria-keyshortcuts`; the `selected`
-block is `aria-current="true"`. An interactive
+block is `aria-current="true"`. A block that shows less than its `label` (its start, or nothing)
+is named by the whole `label` (`aria-label`). An interactive
 track is a focusable `group` named `labels.createTrack(row)`; Enter or Space creates.
 
 ## Related

package/src/components/data-display/DayRuler/DayRuler.metrics.ts

@@ -3,14 +3,18 @@
  * 1280 and the phone rows), in px. The web reads them through `rem`/`sxRem`.
  */
 export const DAY_RULER_METRICS = {
-  /** The name and the actions columns on a computer. */
+  /** The name column on a computer; a row's actions sit in it, under the name (FUT-3831). */
   sideColumn: 220,
   gap: 16,
+  /** Between the name (with its meta and chips) and the row's actions under it, on a computer. */
+  actionsTop: 8,
   /**
    * Below this container width a row stacks: name and actions on top, the
-   * track under them. Two 220px side columns, their gaps and a track of at
-   * least 320px (where the hour labels every 4 hours do not collide): 792,
-   * rounded up.
+   * track under them. Measured when the actions had a 220px column of their
+   * own (two 220px side columns, their gaps and a track of at least 320px,
+   * where the hour labels every 4 hours do not collide: 792, rounded up); kept
+   * when they moved under the name (FUT-3831) so the bound every host was
+   * checked at did not move.
    */
   compactBelow: 800,
   /**
@@ -21,6 +25,12 @@ export const DAY_RULER_METRICS = {
   phoneBelow: 600,
   rowPaddingY: 8,
   track: { height: 40, compactHeight: 30, radius: 8, compactRadius: 6 },
+  /**
+   * `hitArea`: on a narrow ruler the invisible hit band round a bar is this
+   * tall and at least this wide, centred on the bar and cut at the midpoint to
+   * a neighbour (FUT-3831). `font` is the floor: a text that does not fit at
+   * it is not drawn, never drawn smaller.
+   */
   block: { top: 4, height: 24, compactTop: 3, compactHeight: 20, radius: 6, paddingX: 6, font: 12, hitArea: 40 },
   /** The end handles' hit area. */
   handle: 10,
@@ -37,7 +47,7 @@ export const DAY_RULER_METRICS = {
   ringOffset: 1,
   /** The loading row's name bar. */
   skeletonNameRadius: 4,
-  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start on a narrow ruler. */
+  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start. */
   narrowShare: 0.3,
   /** The shortest block a resize leaves, in hours. */
   minHours: 0.5,