@qoretechnologies/reqraft 0.10.66-pr.145.g620503a → 0.10.66-pr.145.g7df2015

package/dist/components/form/engine/FormEngine.d.ts

@@ -286,15 +286,15 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
      */
     compact?: boolean;
     /**
-     * How the form LOOKS — never what it does. `'calm'`, the default, draws the
-     * status boxes as plain panels on the theme's panel surface with label/value
-     * rows split by hairlines, grey labels, an amber "Required · add a value" in
-     * place of red asterisks and messages, quiet counts, no dot on a healthy row,
-     * Yes/No as words, and a readiness meter whose done part is grey. `'classic'`
-     * is the earlier look (tinted boxes, a green meter, a dot on every row), for a
-     * host that asks for it. See {@link TFormEngineAppearance}.
-     *
-     * Inherited: a nested (`arg_schema`) sub-form and every field editor the form mounts
+     * How the form LOOKS — never what it does. `'default'` keeps the established
+     * look; `'calm'` draws the status boxes as plain panels on the theme's panel
+     * surface with label/value rows split by hairlines, grey labels, an amber
+     * "Required · add a value" in place of red asterisks and messages, quiet
+     * counts, no dot on a healthy row, Yes/No as words, and a readiness meter
+     * whose done part is grey. See {@link TFormEngineAppearance}.
+     *
+     * Opt-in, so a consumer that does not pass it is unchanged. Inherited: a
+     * nested (`arg_schema`) sub-form and every field editor the form mounts
      * follow the form's appearance, and a form with no `appearance` of its own
      * follows a `FormAppearanceProvider` above it. Applies to compact mode; the
      * classic collection layout only passes it on to its field editors.

package/dist/components/form/engine/formAppearance.d.ts

@@ -4,17 +4,16 @@ import { IReqoreTheme } from '@qoretechnologies/reqore/dist/constants/theme';
  * How a form looks. The look only: which fields exist, how they bucket, what a
  * click does and what is validated are identical in every appearance.
  *
- * - `'calm'` (the default) — colour only where something needs a person. The
- *   status boxes are plain panels on the theme's panel surface with label/value
- *   rows split by hairlines; labels are grey; a missing required value is an
- *   amber word instead of a red asterisk and message; counts are quiet numbers;
- *   a healthy row carries no dot; Yes/No are plain words; nothing is forced
- *   into uppercase.
- * - `'classic'` — the earlier read-first look, for a host that asks for it:
- *   tinted status boxes, an intent-coloured completion meter, a status dot on
- *   every row.
+ * - `'default'` — the established read-first look: tinted status boxes, an
+ *   intent-coloured completion meter, a status dot on every row.
+ * - `'calm'` — colour only where something needs a person. The status boxes are
+ *   plain panels on the theme's panel surface with label/value rows split by
+ *   hairlines; labels are grey; a missing required value is an amber word
+ *   instead of a red asterisk and message; counts are quiet numbers; a healthy
+ *   row carries no dot; Yes/No are plain words; nothing is forced into
+ *   uppercase. Opt-in, so an app that has not asked for it does not change.
  */
-export type TFormEngineAppearance = 'calm' | 'classic';
+export type TFormEngineAppearance = 'default' | 'calm';
 /**
  * The appearance in force for everything below it: the engine's own rows and
  * toolbar, every field editor it mounts, and every nested (`arg_schema`)
@@ -26,7 +25,7 @@ export type TFormEngineAppearance = 'calm' | 'classic';
  */
 export declare const FormAppearanceContext: import("react").Context<TFormEngineAppearance>;
 export declare const FormAppearanceProvider: import("react").Provider<TFormEngineAppearance>;
-/** The appearance in force here; `'calm'` when nothing set one. */
+/** The appearance in force here; `'default'` when nothing set one. */
 export declare const useFormAppearance: () => TFormEngineAppearance;
 /** Shorthand for the one question most call sites ask. */
 export declare const useIsCalmForm: () => boolean;

package/dist/components/form/engine/formAppearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formAppearance.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/formAppearance.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAQ7E;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,gDAA8D,CAAC;AAEjG,eAAO,MAAM,sBAAsB,iDAAiC,CAAC;AAErE,mEAAmE;AACnE,eAAO,MAAM,iBAAiB,QAAO,qBACQ,CAAC;AAE9C,0DAA0D;AAC1D,eAAO,MAAM,aAAa,QAAO,OAAyC,CAAC;AAiB3E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,UAAW,YAAY,KAAG,MACmC,CAAC;AAE9F,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB,UAAW,YAAY,KAAG,MACqC,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,gCAA2B,CAAC;AAC5D,eAAO,MAAM,wBAAwB,4BAAuB,CAAC"}
+{"version":3,"file":"formAppearance.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/formAppearance.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAQ7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,gDAA8D,CAAC;AAEjG,eAAO,MAAM,sBAAsB,iDAAiC,CAAC;AAErE,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,QAAO,qBACW,CAAC;AAEjD,0DAA0D;AAC1D,eAAO,MAAM,aAAa,QAAO,OAAyC,CAAC;AAiB3E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,UAAW,YAAY,KAAG,MACmC,CAAC;AAE9F,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB,UAAW,YAAY,KAAG,MACqC,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,gCAA2B,CAAC;AAC5D,eAAO,MAAM,wBAAwB,4BAAuB,CAAC"}

package/dist/components/form/engine/formAppearance.js

@@ -14,8 +14,8 @@ var react_1 = require("react");
  */
 exports.FormAppearanceContext = (0, react_1.createContext)(undefined);
 exports.FormAppearanceProvider = exports.FormAppearanceContext.Provider;
-/** The appearance in force here; `'calm'` when nothing set one. */
-var useFormAppearance = function () { var _a; return (_a = (0, react_1.useContext)(exports.FormAppearanceContext)) !== null && _a !== void 0 ? _a : 'calm'; };
+/** The appearance in force here; `'default'` when nothing set one. */
+var useFormAppearance = function () { var _a; return (_a = (0, react_1.useContext)(exports.FormAppearanceContext)) !== null && _a !== void 0 ? _a : 'default'; };
 exports.useFormAppearance = useFormAppearance;
 /** Shorthand for the one question most call sites ask. */
 var useIsCalmForm = function () { return (0, exports.useFormAppearance)() === 'calm'; };

package/dist/components/form/engine/formAppearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"formAppearance.js","sourceRoot":"","sources":["../../../../src/components/form/engine/formAppearance.ts"],"names":[],"mappings":";;;AACA,uEAIsD;AACtD,+BAAkD;AAkBlD;;;;;;;;GAQG;AACU,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAAoC,SAAS,CAAC,CAAC;AAEpF,QAAA,sBAAsB,GAAG,6BAAqB,CAAC,QAAQ,CAAC;AAErE,mEAAmE;AAC5D,IAAM,iBAAiB,GAAG,sBAC/B,OAAA,MAAA,IAAA,kBAAU,EAAC,6BAAqB,CAAC,mCAAI,MAAM,CAAA,EAAA,CAAC;AADjC,QAAA,iBAAiB,qBACgB;AAE9C,0DAA0D;AACnD,IAAM,aAAa,GAAG,cAAe,OAAA,IAAA,yBAAiB,GAAE,KAAK,MAAM,EAA9B,CAA8B,CAAC;AAA9D,QAAA,aAAa,iBAAiD;AAE3E,8EAA8E;AAC9E,IAAM,uBAAuB,GAAG,UAC9B,KAAmB;IAEnB,IAAM,MAAM,GAAG,KAGd,CAAC;IACF,6EAA6E;IAC7E,6EAA6E;IAC7E,OAAO,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;QAClF,MAAM,CAAC,KAAK;QACd,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC;AAEF;;;;;GAKG;AACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB,gBACrD,OAAA,MAAA,MAAA,uBAAuB,CAAC,KAAK,CAAC,0CAAE,IAAI,mCAAI,IAAA,uBAAc,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC;AADjF,QAAA,mBAAmB,uBAC8D;AAE9F,0EAA0E;AACnE,IAAM,oBAAoB,GAAG,UAAC,KAAmB,gBACtD,OAAA,MAAA,MAAA,uBAAuB,CAAC,KAAK,CAAC,0CAAE,MAAM,mCAAI,IAAA,wBAAe,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC;AADpF,QAAA,oBAAoB,wBACgE;AAEjG;;;;GAIG;AACU,QAAA,mBAAmB,GAAG,wBAAwB,CAAC;AAC/C,QAAA,wBAAwB,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"formAppearance.js","sourceRoot":"","sources":["../../../../src/components/form/engine/formAppearance.ts"],"names":[],"mappings":";;;AACA,uEAIsD;AACtD,+BAAkD;AAiBlD;;;;;;;;GAQG;AACU,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAAoC,SAAS,CAAC,CAAC;AAEpF,QAAA,sBAAsB,GAAG,6BAAqB,CAAC,QAAQ,CAAC;AAErE,sEAAsE;AAC/D,IAAM,iBAAiB,GAAG,sBAC/B,OAAA,MAAA,IAAA,kBAAU,EAAC,6BAAqB,CAAC,mCAAI,SAAS,CAAA,EAAA,CAAC;AADpC,QAAA,iBAAiB,qBACmB;AAEjD,0DAA0D;AACnD,IAAM,aAAa,GAAG,cAAe,OAAA,IAAA,yBAAiB,GAAE,KAAK,MAAM,EAA9B,CAA8B,CAAC;AAA9D,QAAA,aAAa,iBAAiD;AAE3E,8EAA8E;AAC9E,IAAM,uBAAuB,GAAG,UAC9B,KAAmB;IAEnB,IAAM,MAAM,GAAG,KAGd,CAAC;IACF,6EAA6E;IAC7E,6EAA6E;IAC7E,OAAO,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;QAClF,MAAM,CAAC,KAAK;QACd,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC;AAEF;;;;;GAKG;AACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB,gBACrD,OAAA,MAAA,MAAA,uBAAuB,CAAC,KAAK,CAAC,0CAAE,IAAI,mCAAI,IAAA,uBAAc,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC;AADjF,QAAA,mBAAmB,uBAC8D;AAE9F,0EAA0E;AACnE,IAAM,oBAAoB,GAAG,UAAC,KAAmB,gBACtD,OAAA,MAAA,MAAA,uBAAuB,CAAC,KAAK,CAAC,0CAAE,MAAM,mCAAI,IAAA,wBAAe,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC;AADpF,QAAA,oBAAoB,wBACgE;AAEjG;;;;GAIG;AACU,QAAA,mBAAmB,GAAG,wBAAwB,CAAC;AAC/C,QAAA,wBAAwB,GAAG,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.10.66-pr.145.g620503a",
+  "version": "0.10.66-pr.145.g7df2015",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/engine/FormEngine.stories.tsx

@@ -39,7 +39,6 @@ import {
   IOptionsSchemaArg,
 } from './FormEngine';
 import { basicFormValue, getBasicFormOptions as getOptions } from './__fixtures__/basicFormOptions';
-import { CALM_REQUIRED_LABEL, CALM_REQUIRED_READ_LABEL } from './formAppearance';
 import { chromeFieldBases, metaFieldBases } from './__fixtures__/fieldChromeOptions';
 
 /** The first status box: "To fill in" while nothing in it is a fault (a new form),
@@ -632,7 +631,7 @@ export const OptionDependsOnOptionInRequiredGroup: Story = {
     await waitFor(() =>
       expect(
         [...document.querySelectorAll('.system-option')].some(
-          (row) => row.textContent?.includes('Required Option 6') && row.textContent?.includes(CALM_REQUIRED_LABEL)
+          (row) => row.textContent?.includes('Required Option 6') && row.textContent?.includes('This field is required')
         )
       ).toBe(true)
     );
@@ -2851,8 +2850,7 @@ export const Compact: Story = {
     await _testsWaitForText('order-fulfilment');
     await _testsWaitForText('orders, batch');
     await _testsWaitForText('Yes');
-    // The empty required Description says so where its value would be.
-    await _testsWaitForText(CALM_REQUIRED_LABEL);
+    await _testsWaitForText('—');
   },
 };
 
@@ -3174,7 +3172,7 @@ export const CompactEmpty: Story = {
     docs: {
       description: {
         story:
-          'Renders the Compact fixture with no value — the two empty required fields say "Required · add a value" where the value would be, the four empty optional fields render a dash placeholder, and those four sit in the collapsed Optional box.',
+          'Renders the Compact fixture with no value — all six empty fields render a dash placeholder and the four optional fields sit in the collapsed Optional box.',
       },
     },
   },
@@ -3189,9 +3187,9 @@ export const CompactEmpty: Story = {
     // The four empty OPTIONAL fields live in the (collapsed) Optional box — open
     // it so all six empty fields are on screen.
     await _expandOptionalBox();
-    // Both required fields say what they need; the four optional ones read as a dash.
-    await _testsWaitForTextsCount(CALM_REQUIRED_LABEL, undefined, 2);
-    await _testsWaitForTextsCount('—', undefined, 4);
+    // Both required fields read as unset; the four optional ones as "Not set".
+    // All six empty fields read as a calm dash (the red asterisk marks required).
+    await _testsWaitForTextsCount('—', undefined, 6);
   },
 };
 
@@ -3380,7 +3378,7 @@ export const CompactReadOnlyRichText: Story = {
     // A read view says what is wrong with the record, as an editable one does:
     // the fixture's invalid value and its empty required fields say so.
     await _testsWaitForText('Text value is empty');
-    await _testsWaitForText(CALM_REQUIRED_READ_LABEL);
+    await _testsWaitForText('This field is required');
 
     const row = (name: string) => document.querySelector(`.readfirst-row[data-field="${name}"]`);
     // Richtext: the text and its chip, no Slate.
@@ -3539,7 +3537,7 @@ export const CompactReadOnlyValues: Story = {
     docs: {
       description: {
         story:
-          'Read-only as a fact sheet, not a disabled editor: no completion meter, no Needs attention / Set / Optional boxes, no required asterisks; an optional field nobody set is not listed, a required one nobody set is listed and says "Required · not set"; every value is drawn in full in its row — long text wrapped under a Show more cap, the whole code block, every field of the hash, the chosen option with its description — and no row is a control: nothing is a button, and a click opens nothing.',
+          'Read-only as a fact sheet, not a disabled editor: no completion meter, no Needs attention / Set / Optional boxes, no required asterisks; an optional field nobody set is not listed, a required one nobody set reads as unset without the amber and says "This field is required"; every value is drawn in full in its row — long text wrapped under a Show more cap, the whole code block, every field of the hash, the chosen option with its description — and no row is a control: nothing is a button, and a click opens nothing.',
       },
     },
     chromatic: { disable: true },
@@ -3573,7 +3571,7 @@ export const CompactReadOnlyValues: Story = {
       )
     ).toBeNull();
     expect(document.querySelector('.readfirst-row[data-field="owner"]')?.textContent).toContain(
-      CALM_REQUIRED_READ_LABEL
+      'This field is required'
     );
 
     const row = (name: string) =>
@@ -4164,8 +4162,8 @@ export const CompactReadFirstEditing: Story = {
     // Booleans render as Yes/No, allowed_values as their display label.
     await _testsWaitForText('Yes');
     await _testsWaitForText('Python');
-    // The required-but-empty field says so instead of showing an editor.
-    await _testsWaitForText(CALM_REQUIRED_LABEL);
+    // The required-but-empty field shows its placeholder instead of an editor.
+    await _testsWaitForText('—');
     // No field editor (textarea) is mounted while everything is collapsed.
     await expect(document.querySelectorAll('.reqore-textarea')).toHaveLength(0);
 
@@ -8553,7 +8551,7 @@ export const CompactMaxFieldsShown: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form with `maxFieldsShown: 3`, so each status box shows three rows and folds the rest behind a quiet "N more fields" last row. Clicking that row reveals the remainder and the label becomes "Show fewer".',
+          'Renders a compact form with `maxFieldsShown: 3`, so each status box shows three rows and folds the rest behind a dashed "N more fields" row. Clicking that row reveals the remainder and the label becomes "Show fewer".',
       },
     },
   },
@@ -8585,12 +8583,13 @@ export const CompactMaxFieldsShown: Story = {
     expect(more.classList.contains('readfirst-row')).toBe(true);
     expect(more.getAttribute('aria-expanded')).toBe('false');
 
-    // A quiet last row: the same 1px hairline above it as between the fields, and
-    // no dashed box around it (the classic look draws one).
+    // The dashed edge is the thing that says "not a field". Asserting the
+    // COMPUTED style, because the first cut of this took its colour from the
+    // inter-row divider tint (~8% of the text colour) and rendered an invisible
+    // border — the rule was there, the affordance was not.
     const edge = getComputedStyle(more);
-    expect(edge.borderTopStyle).toBe('solid');
+    expect(edge.borderStyle).toBe('dashed');
     expect(edge.borderTopWidth).toBe('1px');
-    expect(edge.borderBottomStyle).toBe('none');
     // …and it inherits the rows' geometry rather than inventing its own
     expect(edge.paddingLeft).toBe(
       getComputedStyle(
@@ -9429,7 +9428,7 @@ export const ANewFormSaysWhatIsRequired: Story = {
     docs: {
       description: {
         story:
-          'A brand-new form with two empty required fields. Each says "Required · add a value" from the start, including the first one, which opens for editing, without waiting for the author to visit it. Saying what is required is not saying something is wrong: the first box reads "To fill in", in the quiet colour, until a field has been visited and left empty.',
+          'A brand-new form with two empty required fields. Each says "This field is required" from the start, including the first one, which opens for editing, without waiting for the author to visit it. Saying what is required is not saying something is wrong: the first box reads "To fill in", in the quiet colour, until a field has been visited and left empty.',
       },
     },
   },
@@ -9446,8 +9445,8 @@ export const ANewFormSaysWhatIsRequired: Story = {
     await waitFor(() => {
       const title = canvasElement.querySelector('[data-field="title"]');
       const owner = canvasElement.querySelector('[data-field="owner"]');
-      expect(title?.textContent).toContain(CALM_REQUIRED_LABEL);
-      expect(owner?.textContent).toContain(CALM_REQUIRED_LABEL);
+      expect(title?.textContent).toContain('This field is required');
+      expect(owner?.textContent).toContain('This field is required');
     });
   },
 };
@@ -9457,7 +9456,7 @@ export const AReadOnlyFormShowsWhatIsWrong: Story = {
     docs: {
       description: {
         story:
-          'A read-only form shows the same validation messages as an editable one: the empty required Title and Owner say "Required · not set" where the value would be, and Kind says its stored value is not one of the choices. Each requirement is stated once.',
+          'A read-only form shows the same validation messages as an editable one: the empty required Title and Owner say "This field is required", and Kind says its stored value is not one of the choices. Each empty value slot keeps its plain "—", so each requirement is stated once.',
       },
     },
   },
@@ -9472,12 +9471,11 @@ export const AReadOnlyFormShowsWhatIsWrong: Story = {
     await _testsWaitForText('"sideways" is not one of the choices');
     await waitFor(() => {
       const title = canvasElement.querySelector('[data-field="title"]');
-      expect(title?.textContent?.split(CALM_REQUIRED_READ_LABEL)).toHaveLength(2);
-      expect(title?.querySelector('.options-readfirst-valuetext')?.textContent).toBe(
-        CALM_REQUIRED_READ_LABEL
-      );
+      expect(title?.textContent).toContain('This field is required');
+      expect(title?.textContent?.split('This field is required')).toHaveLength(2);
+      expect(title?.querySelector('.options-readfirst-valuetext')?.textContent).toBe('—');
       expect(canvasElement.querySelector('[data-field="owner"]')?.textContent).toContain(
-        CALM_REQUIRED_READ_LABEL
+        'This field is required'
       );
     });
   },

package/src/components/form/engine/FormEngine.tsx

@@ -871,15 +871,15 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
    */
   compact?: boolean;
   /**
-   * How the form LOOKS — never what it does. `'calm'`, the default, draws the
-   * status boxes as plain panels on the theme's panel surface with label/value
-   * rows split by hairlines, grey labels, an amber "Required · add a value" in
-   * place of red asterisks and messages, quiet counts, no dot on a healthy row,
-   * Yes/No as words, and a readiness meter whose done part is grey. `'classic'`
-   * is the earlier look (tinted boxes, a green meter, a dot on every row), for a
-   * host that asks for it. See {@link TFormEngineAppearance}.
+   * How the form LOOKS — never what it does. `'default'` keeps the established
+   * look; `'calm'` draws the status boxes as plain panels on the theme's panel
+   * surface with label/value rows split by hairlines, grey labels, an amber
+   * "Required · add a value" in place of red asterisks and messages, quiet
+   * counts, no dot on a healthy row, Yes/No as words, and a readiness meter
+   * whose done part is grey. See {@link TFormEngineAppearance}.
    *
-   * Inherited: a nested (`arg_schema`) sub-form and every field editor the form mounts
+   * Opt-in, so a consumer that does not pass it is unchanged. Inherited: a
+   * nested (`arg_schema`) sub-form and every field editor the form mounts
    * follow the form's appearance, and a form with no `appearance` of its own
    * follows a `FormAppearanceProvider` above it. Applies to compact mode; the
    * classic collection layout only passes it on to its field editors.

package/src/components/form/engine/FormEngineAppearance.stories.tsx

@@ -17,7 +17,7 @@ import {
 import { CALM_REQUIRED_LABEL, CALM_REQUIRED_READ_LABEL } from './formAppearance';
 
 /*
- * The calm appearance (the default) against the classic one, over the fields a workflow
+ * The calm appearance against the default one, over the fields a workflow
  * creator actually serves (display names, groups and descriptions as the Qorus
  * server's workflow metadata gives them), so the comparison is about the look
  * and nothing else.
@@ -252,21 +252,18 @@ const expectNoDot = (field: string) => {
  * Stories
  * ------------------------------------------------------------------------ */
 
-export const ClassicLook: Story = {
-  args: {
-    appearance: 'classic',
-  },
+export const DefaultLook: Story = {
   parameters: {
     docs: {
       description: {
         story:
-          '`appearance="classic"` over a filled workflow form, for comparison with **Calm**: tinted Set box, a green Ready and meter, a green dot on every filled row, upper-case group labels and a red/green Yes/No chip. Only a form that asks for it looks like this.',
+          'The default appearance over a filled workflow form, for comparison with **Calm**: tinted Set box, a green Ready and meter, a green dot on every filled row, upper-case group labels and a red/green Yes/No chip.',
       },
     },
   },
   play: async () => {
     await _testsWaitForText('Supplier Payment Release');
-    // The classic look is the one asked for: the tinted box and its count tag.
+    // The default look is untouched: the tinted box and its count tag.
     await waitFor(() => expect(box('set')).toBeTruthy());
     expect(box('set')!.querySelector('.reqore-panel-title .reqore-tag')).toBeTruthy();
     expect(row('display_name')!.querySelector('.options-readfirst-status-dot')).toBeTruthy();
@@ -274,11 +271,14 @@ export const ClassicLook: Story = {
 };
 
 export const Calm: Story = {
+  args: {
+    appearance: 'calm',
+  },
   parameters: {
     docs: {
       description: {
         story:
-          'The default appearance (calm) over the same filled form, with no `appearance` passed: the sections are plain panels on the theme’s panel surface with label/value rows split by hairlines, labels grey, group headings in sentence case, the count a quiet number, no dot on a healthy row, No as a word, and a short meter whose done part is grey.',
+          '`appearance="calm"` over the same filled form: the sections are plain panels on the theme’s panel surface with label/value rows split by hairlines, labels grey, group headings in sentence case, the count a quiet number, no dot on a healthy row, No as a word, and a short meter whose done part is grey.',
       },
     },
   },
@@ -350,6 +350,7 @@ export const Calm: Story = {
 
 export const CalmNeedsAttention: Story = {
   args: {
+    appearance: 'calm',
     value: newFormValue,
     // After a submit attempt: every empty required field is now a fault. A form nobody
     // has been to yet reads "To fill in" instead (CalmNewForm).
@@ -402,6 +403,9 @@ export const CalmNeedsAttention: Story = {
 };
 
 export const CalmChoiceHeading: Story = {
+  args: {
+    appearance: 'calm',
+  },
   parameters: {
     docs: {
       description: {
@@ -422,6 +426,7 @@ export const CalmChoiceHeading: Story = {
 
 export const CalmReadOnly: Story = {
   args: {
+    appearance: 'calm',
     readOnly: true,
     value: { ...filledValue, version: { type: 'string', value: '' } },
   },
@@ -447,6 +452,7 @@ export const CalmReadOnly: Story = {
 
 export const CalmNewForm: Story = {
   args: {
+    appearance: 'calm',
     value: newFormValue,
   },
   parameters: {
@@ -499,6 +505,7 @@ export const CalmNewForm: Story = {
 
 export const CalmOnAPhone: Story = {
   args: {
+    appearance: 'calm',
     value: newFormValue,
   },
   parameters: {

package/src/components/form/engine/formAppearance.ts

@@ -10,17 +10,16 @@ import { createContext, useContext } from 'react';
  * How a form looks. The look only: which fields exist, how they bucket, what a
  * click does and what is validated are identical in every appearance.
  *
- * - `'calm'` (the default) — colour only where something needs a person. The
- *   status boxes are plain panels on the theme's panel surface with label/value
- *   rows split by hairlines; labels are grey; a missing required value is an
- *   amber word instead of a red asterisk and message; counts are quiet numbers;
- *   a healthy row carries no dot; Yes/No are plain words; nothing is forced
- *   into uppercase.
- * - `'classic'` — the earlier read-first look, for a host that asks for it:
- *   tinted status boxes, an intent-coloured completion meter, a status dot on
- *   every row.
+ * - `'default'` — the established read-first look: tinted status boxes, an
+ *   intent-coloured completion meter, a status dot on every row.
+ * - `'calm'` — colour only where something needs a person. The status boxes are
+ *   plain panels on the theme's panel surface with label/value rows split by
+ *   hairlines; labels are grey; a missing required value is an amber word
+ *   instead of a red asterisk and message; counts are quiet numbers; a healthy
+ *   row carries no dot; Yes/No are plain words; nothing is forced into
+ *   uppercase. Opt-in, so an app that has not asked for it does not change.
  */
-export type TFormEngineAppearance = 'calm' | 'classic';
+export type TFormEngineAppearance = 'default' | 'calm';
 
 /**
  * The appearance in force for everything below it: the engine's own rows and
@@ -35,9 +34,9 @@ export const FormAppearanceContext = createContext<TFormEngineAppearance | undef
 
 export const FormAppearanceProvider = FormAppearanceContext.Provider;
 
-/** The appearance in force here; `'calm'` when nothing set one. */
+/** The appearance in force here; `'default'` when nothing set one. */
 export const useFormAppearance = (): TFormEngineAppearance =>
-  useContext(FormAppearanceContext) ?? 'calm';
+  useContext(FormAppearanceContext) ?? 'default';
 
 /** Shorthand for the one question most call sites ask. */
 export const useIsCalmForm = (): boolean => useFormAppearance() === 'calm';