@rojaostudio/ds 2.0.0-next.24 → 2.0.0-next.26

package/dist/components/form-actions.d.ts

@@ -1,28 +1,60 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type FormActionsLayout = 'inline' | 'stacked';
+type FormActionsLayout = 'inline' | 'stacked' | 'bar';
 interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The buttons (Figma: slot `actions`, up to 3), always in reading order: Cancelar first, the primary
      * last. In `stacked` the primary goes on top, and it is moved first in the page too, so the focus
-     * order follows what is seen.
+     * order follows what is seen. In `bar`, compact (below 1024), only the last one (the primary) is shown.
      */
     children: ReactNode;
-    /** A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). */
+    /**
+     * A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). It is a live region
+     * (`role="status"`): when it changes (say, "Falta preço e prazo"), it is said without moving focus.
+     */
     helper?: ReactNode;
     /**
-     * inline (desktop: floats and hugs its content, sentence left, actions right) or stacked (phone: edge
-     * to edge at the foot, primary full width on top) (Figma: `layout`).
+     * inline (desktop: floats and hugs its content, sentence left, actions right), stacked (phone, a task
+     * with no way out in the topbar: edge to edge at the foot, primary full width on top) or bar (the foot of
+     * a create form: the SavingBar's skeleton, neutral; expanded from 1024, compact in one row below it)
+     * (Figma: `layout`).
      */
     layout?: FormActionsLayout;
+    /**
+     * `bar` only, with a `helper`: turns the helper into a button that opens what is missing (a Drawer with
+     * the checklist), in the compact arrangement only; expanded, the helper stays text (Figma: `showDetails`).
+     */
+    onDetails?: () => void;
+    /** Said after the helper in the details button's accessible name, hidden on screen. */
+    detailsLabel?: string;
+    /** Whether the panel the details button opens is open (aria-expanded). */
+    detailsExpanded?: boolean;
+    /** The id of that panel (aria-controls). */
+    detailsControls?: string;
 }
 /**
  * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or a task,
  * there from the first second. Where it sticks is the page's job: `position: sticky` at the bottom of
- * the scrolling container, with `scroll-padding-bottom` equal to its height, so a focused field is never
- * hidden behind it (WCAG 2.4.11). Styles: form-actions.css.
+ * the scrolling container. Styles: form-actions.css.
+ *
+ * `layout="bar"` is the foot of a create form: the SavingBar's skeleton (68 expanded, 64 plus the safe area
+ * compact, 24 at the sides, the primary in the same place), but neutral: form-actions/bar/background
+ * (surface/page) with the hairline form-actions/border on top, never the brand's colour (that is the
+ * SavingBar's signal, for a pending edit). Below 1024 (the screen width, as the SavingBar) it is one row:
+ * the helper on the left (at most 2 lines; with `onDetails`, the button that opens what is missing) and only
+ * the primary on the right.
+ *
+ * The app's rules around it:
+ * - The primary is never disabled: validate on click, show the error on the field and move the focus to the
+ *   first pending one.
+ * - The scrolling container takes `scroll-padding-bottom` equal to the bar's height plus
+ *   `env(safe-area-inset-bottom)`, so a focused field is never hidden behind it (WCAG 2.4.11).
+ * - On the phone the bar leaves while the on-screen keyboard is open (it would cover the field being typed).
+ * - Compact has no Cancelar: the way out is back or X in the topbar, with an AlertDialog "Sair sem criar?"
+ *   ([Continuar editando] [Sair sem criar]) when something was typed. Cancelar can also go in the footer of
+ *   the details Drawer.
  */
-declare function FormActions({ children, helper, layout, className, ...rest }: FormActionsProps): react.JSX.Element;
+declare function FormActions({ children, helper, layout, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: FormActionsProps): react.JSX.Element;
 
 export { FormActions, type FormActionsLayout, type FormActionsProps };

package/dist/components/form-actions.js

@@ -3,17 +3,65 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children } from "react";
+import { ChevronUpIcon } from "./internal/icons.js";
 function FormActions(_a) {
-  var _b = _a, { children, helper, layout = "inline", className } = _b, rest = __objRest(_b, ["children", "helper", "layout", "className"]);
+  var _b = _a, {
+    children,
+    helper,
+    layout = "inline",
+    onDetails,
+    detailsLabel = "Ver o que falta",
+    detailsExpanded,
+    detailsControls,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "helper",
+    "layout",
+    "onDetails",
+    "detailsLabel",
+    "detailsExpanded",
+    "detailsControls",
+    "className"
+  ]);
   const actions = Children.toArray(children);
+  const bar = layout === "bar";
+  const details = bar && helper != null && helper !== false && onDetails !== void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: ["rds-form-actions", `rds-form-actions--${layout}`, className].filter(Boolean).join(" "),
       children: [
-        helper && /* @__PURE__ */ jsx("p", { className: "rds-form-actions__helper", children: helper }),
+        helper && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: ["rds-form-actions__helper", details && "rds-form-actions__helper--details"].filter(Boolean).join(" "),
+            role: "status",
+            children: bar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "rds-form-actions__text", children: helper }),
+              details && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "rds-form-actions__details",
+                  "aria-expanded": detailsExpanded != null ? detailsExpanded : false,
+                  "aria-controls": detailsControls,
+                  onClick: onDetails,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "rds-form-actions__text", children: helper }),
+                    /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
+                      ", ",
+                      detailsLabel
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "rds-form-actions__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
+                  ]
+                }
+              )
+            ] }) : helper
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children: layout === "stacked" ? actions.reverse() : actions })
       ]
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.24",
+  "version": "2.0.0-next.26",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.9"
+    "@rojaostudio/ds-core": "1.1.0-next.10"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -4639,6 +4639,16 @@ input:focus-visible + .rds-checkbox__box {
  * FormActions (Actions collection, form-actions/*): the actions at the end of a form, on the card
  * surface with a hairline. inline floats (container radius, raised elevation, 16 24 padding, 24 between
  * sentence and actions); stacked sticks to the foot edge to edge (16 padding, hairline on top).
+ * bar is the foot of a create form, the SavingBar's skeleton but neutral: form-actions/bar/background
+ * (surface/page) with the hairline form-actions/border on top (drawn inside, so it adds no height), full
+ * width (at least 320), 16 between the helper and the actions (8 apart). Two arrangements by the screen
+ * width, as the SavingBar (layout/compact below lg 1024): expanded, 12 24 padding (68 = 12 + 44 + 12), the
+ * helper grows (at least 160) beside Cancelar and the primary; compact, one row, 10 24 padding
+ * (64 = 10 + 44 + 10) plus the safe area at the bottom, the helper (flex 1, at most 2 lines) on the left and
+ * only the last action (the primary) on the right.
+ * Details (showDetails, onDetails in code): compact, the helper becomes a text button with chevron-up 20 at
+ * the right (12 apart); hover underlines, focus draws form-actions/focus/ring (focus/ring-width, radius/focus);
+ * the touch area is 44 tall without changing the drawing. Expanded, the helper stays text.
  */
 .rds-form-actions {
   box-sizing: border-box;
@@ -4694,10 +4704,125 @@ input:focus-visible + .rds-checkbox__box {
   width: 100%;
 }
 
+/* bar: the foot of a create form, the SavingBar's skeleton, neutral. */
+.rds-form-actions--bar {
+  gap: var(--space-16);
+  justify-content: flex-end;
+  width: 100%;
+  min-width: min(320px, 100%);
+  padding: var(--space-12) var(--space-24);
+  background: var(--form-actions-bar-background);
+  /* The hairline on top, inside: the bar stays 68 / 64 tall. */
+  box-shadow: inset 0 var(--border-width) 0 var(--form-actions-border);
+}
+
+.rds-form-actions--bar .rds-form-actions__helper {
+  display: flex;
+  flex: 1 1 160px;
+  align-items: center;
+  min-width: 160px;
+}
+
+.rds-form-actions--bar .rds-form-actions__actions {
+  flex: none;
+  flex-wrap: nowrap;
+}
+
+.rds-form-actions__text {
+  display: -webkit-box;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.rds-form-actions__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--size-20);
+  height: var(--size-20);
+}
+
+.rds-form-actions__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rds-form-actions__details {
+  position: relative;
+  display: none;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-12);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-focus);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* The touch area: 44 tall around the helper, invisible. */
+.rds-form-actions__details::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  min-height: 44px;
+  height: 100%;
+  transform: translateY(-50%);
+}
+
+.rds-form-actions__details:hover .rds-form-actions__text {
+  text-decoration: underline;
+}
+
+.rds-form-actions__details:focus-visible {
+  outline: var(--focus-ring-width) solid var(--form-actions-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+/* Compact: by the screen width (the Figma viewport mode), as the SavingBar, not a container query. */
+@media (max-width: 1023px) {
+  .rds-form-actions--bar {
+    padding-block: 10px;
+    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .rds-form-actions--bar .rds-form-actions__helper {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  /* Only the primary (the last action): Cancelar is the topbar's back or X, or the details Drawer's footer. */
+  .rds-form-actions--bar .rds-form-actions__actions > :not(:last-child) {
+    display: none;
+  }
+
+  .rds-form-actions__helper--details > .rds-form-actions__text {
+    display: none;
+  }
+
+  .rds-form-actions__details {
+    display: flex;
+  }
+}
+
 @media (forced-colors: active) {
   .rds-form-actions {
     border-color: CanvasText;
   }
+
+  .rds-form-actions--bar {
+    border-top: var(--border-width) solid CanvasText;
+  }
 }
 
 /* components/google-account-chooser.css */

package/styles/rds/components.css

@@ -124,6 +124,8 @@
   --savingbar-button-fill-background: var(--text-on-primary);
   --savingbar-button-fill-label: var(--colors-primary-default);
   --savingbar-button-ghost-label: var(--text-on-primary);
+  --form-actions-bar-background: var(--surface-page);
+  --form-actions-focus-ring: var(--focus-ring);
 
   /* blocks */
   --topnav-background: var(--surface-card);