@visns-studio/visns-components 6.3.1 → 6.3.3

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.3.1",
+    "version": "6.3.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -4630,44 +4630,37 @@ const DataGrid = forwardRef(
 
                 {/* Opt-in colour legend (config key `legend`: array of
                     {colour, label}); entries without a colour render as
-                    plain lead-in text */}
+                    plain lead-in text.
+
+                    Styling lives in DataGrid.module.scss (`.legend` and
+                    friends) rather than inline, so a consuming project can
+                    actually reach it — see the notes there. The only inline
+                    style left is the swatch's own fill, which is data from
+                    the config rather than a design decision. */}
                 {Array.isArray(legend) && legend.length > 0 && (
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexWrap: 'wrap',
-                            alignItems: 'center',
-                            gap: '14px',
-                            padding: '6px 4px 8px',
-                            fontSize: '0.8rem',
-                            color: '#555',
-                        }}
-                    >
-                        {legend.map((item, index) => (
-                            <span
-                                key={index}
-                                style={{
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: '6px',
-                                }}
-                            >
-                                {(item.colour || item.color) && (
-                                    <span
-                                        style={{
-                                            width: '14px',
-                                            height: '14px',
-                                            borderRadius: '3px',
-                                            backgroundColor:
-                                                item.colour || item.color,
-                                            display: 'inline-block',
-                                            flexShrink: 0,
-                                        }}
-                                    />
-                                )}
-                                {item.label}
-                            </span>
-                        ))}
+                    <div className={styles.legend}>
+                        {legend.map((item, index) => {
+                            const swatch = item.colour || item.color;
+
+                            return (
+                                <span
+                                    key={index}
+                                    className={
+                                        swatch
+                                            ? styles.legendItem
+                                            : `${styles.legendItem} ${styles.legendLead}`
+                                    }
+                                >
+                                    {swatch && (
+                                        <span
+                                            className={styles.legendSwatch}
+                                            style={{ backgroundColor: swatch }}
+                                        />
+                                    )}
+                                    {item.label}
+                                </span>
+                            );
+                        })}
                     </div>
                 )}
 

package/src/components/styles/DataGrid.module.scss

@@ -205,8 +205,16 @@
     }
 }
 
+/* The gallery modal's close control — this class is consumed by
+   modals/GalleryModal.jsx, which imports this stylesheet (DataGrid.jsx itself
+   never uses it). Same hardening as the header close in Form.module.scss; the
+   long note on the svg block there explains why a close glyph needs an
+   explicit box and `flex: none` rather than trusting its size attributes. */
 .modal__close {
     width: max-content;
+    min-width: 2rem;
+    min-height: 2rem;
+    box-sizing: border-box;
     background: rgba(var(--paragraph-rgb), 0.05);
     cursor: pointer;
     padding: 0.25rem;
@@ -225,6 +233,9 @@
     }
 
     svg {
+        width: 1.25rem;
+        height: 1.25rem;
+        flex: none;
         color: var(--primary-color);
         display: block;
     }
@@ -526,6 +537,94 @@
     justify-content: flex-end;
 }
 
+/* ============================================================================
+   Colour legend
+   ----------------------------------------------------------------------------
+   The opt-in caption above the grid (config key `legend`: an array of
+   `{ colour | color, label }`, where an entry carrying no colour renders as
+   lead-in text introducing the swatches after it).
+
+   This was inline styles on the elements themselves — `fontSize: '0.8rem'`,
+   `color: '#555'`, a hardcoded 14px swatch, `padding: '6px 4px 8px'`. Inline
+   styles are unreachable from a consuming project's stylesheet, so the one
+   thing a legend needs to be — tuned to the app it sits in — was the one
+   thing it could not be. It was also set off any scale in the library: 0.8rem
+   falls between two steps of the type ramp, and #555 is a grey that appears
+   nowhere else.
+
+   It is a caption for the table below it, so it is set as one: the same
+   `--font-size-xs`, `--muted-color` and `--font-weight-semibold` the grid's
+   own header row uses, so the two label rows stacked above the data read as
+   one family. It deliberately stops short of that header's uppercase and
+   0.06em tracking — legend labels are sentences ("No Goods Received entered
+   yet"), not column names, and setting a sentence in caps would undo the
+   quiet the rest of this is after.
+
+   Density hooks, following the `--nav-*` set documented at the top of
+   Navigation.module.scss: every declaration below is written
+   `var(--hook, <the value it always had>)`, so an unset hook is a no-op and a
+   project retunes from `:root` with no fork, no prop and no class of its own.
+   The plant-floor tablet case is the one that needs them — 12px is small when
+   the screen is at arm's length on a bench.
+
+     --grid-legend-font-size    label type size.
+                                default: var(--font-size-xs, 0.75rem)
+     --grid-legend-gap          space between entries along a line.
+                                default: var(--spacing-md, 1rem)
+     --grid-legend-swatch-size  the colour chip.        default: 0.875rem (14px)
+   ========================================================================= */
+
+.legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    /* Row gap and column gap differ on purpose: a legend that wraps (despatch
+       runs to seven entries) needs its lines closer together than its entries
+       are along a line, or the wrapped rows read as separate captions. */
+    gap: var(--spacing-sm, 0.5rem)
+        var(--grid-legend-gap, var(--spacing-md, 1rem));
+    /* A caption belongs to the thing it describes, so it sits nearer the grid
+       than the toolbar row above it — which is also what stops it crowding
+       that row, the complaint this change came from. No horizontal padding:
+       `.dataGridContainer` has none either, so the caption starts on the
+       grid's own left edge rather than floating 4px off it. */
+    margin: var(--spacing-md, 1rem) 0 var(--spacing-sm, 0.5rem);
+    padding: 0;
+    font-size: var(--grid-legend-font-size, var(--font-size-xs, 0.75rem));
+    line-height: 1.4;
+    color: var(--muted-color, #6b7688);
+}
+
+.legendItem {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs, 0.25rem);
+}
+
+/* The lead-in entry: a legend line with no colour of its own, labelling the
+   swatches that follow. Weight and a darker ink rather than a different size,
+   so it introduces the row without breaking its line. */
+.legendLead {
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--paragraph-color, #374151);
+}
+
+.legendSwatch {
+    width: var(--grid-legend-swatch-size, 0.875rem);
+    height: var(--grid-legend-swatch-size, 0.875rem);
+    flex-shrink: 0;
+    display: inline-block;
+    border-radius: var(--radius-sm, 6px);
+    /* These are row tints, so they are pale by design — #FFEAEA has no edge
+       of its own against a white page and the swatch dissolves into it. A
+       low-alpha ink hairline gives every chip its shape back while staying
+       invisible against the darker ones. `--border-color` is the wrong token
+       here: it is tuned to be barely there on a white surface, which is
+       exactly where it is needed most. */
+    border: 1px solid rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.18);
+    box-sizing: border-box;
+}
+
 /* Date field styling for uniform width */
 :global {
     // Target date cells specifically

package/src/components/styles/Field.module.scss

@@ -708,24 +708,52 @@ input[type='file']:hover {
                 font-size: 1.15em;
             }
 
+            /* The "Edit Canvas" modal's close control (Field.jsx). Hardened
+               the same way as the header close in Form.module.scss — see the
+               note on the svg block there. */
             .modal__close {
                 width: max-content;
+                min-width: 2rem;
+                min-height: 2rem;
                 position: absolute;
                 right: 5px;
                 top: 5px;
                 box-sizing: border-box;
-                background: rgba(var(--primary-color), 1.08);
+                /* Was `rgba(var(--primary-color), 1.08)`, which is not a
+                   colour: `--primary-color` is a hex, rgba() wants three
+                   channels, and an alpha above 1 is out of range either way.
+                   The declaration was invalid and dropped, so this button had
+                   no background at all. It sits on `&__header`, which is
+                   `var(--primary-color)`, so what it wants is a light lift off
+                   that ground — the same treatment the equivalent control in
+                   GenericFormBuilder.module.scss uses on its coloured header. */
+                background: rgba(255, 255, 255, 0.15);
                 cursor: pointer;
                 padding: 8px 8px;
                 margin: 0;
                 outline: none;
                 border: none;
                 border-radius: var(--br);
-                display: block;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 line-height: 1;
+                transition: background 0.2s ease;
+
+                &:hover {
+                    background: rgba(255, 255, 255, 0.25);
+                }
 
                 svg {
-                    color: var(--secondary-color);
+                    width: 1.25rem;
+                    height: 1.25rem;
+                    flex: none;
+                    /* The header behind this is `--primary-color`, so the
+                       glyph is set against it rather than in a brand hue that
+                       may be a near-match for it. Field.jsx also passes
+                       `color="#FFF"`, which lucide writes as a `stroke`
+                       attribute; this keeps the two in agreement. */
+                    color: #fff;
                     display: block;
                 }
             }

package/src/components/styles/Form.module.scss

@@ -242,23 +242,63 @@ input[type='file'] {
     justify-content: center;
     width: 2rem;
     height: 2rem;
+    /* The box is stated three ways on purpose. `width`/`height` alone is not a
+       box a consuming app cannot move: every one of these buttons lives under
+       whatever ambient `button { … }` rule the host stylesheet carries, and
+       with the library's own `* { box-sizing: border-box }` in play, a host
+       padding rule eats this button's *content* box rather than growing it.
+       The min-* pair holds the outer size and `box-sizing` states the
+       assumption rather than inheriting it — but see the svg block for what
+       actually keeps the glyph safe. */
+    min-width: 2rem;
+    min-height: 2rem;
+    box-sizing: border-box;
     flex: none;
     background: none;
     cursor: pointer;
     padding: 0;
     margin: 0;
     border: none;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-sm, 6px);
     line-height: 1;
-    transition: background-color var(--speed) var(--ease);
+    transition: background-color var(--speed, 0.18s) var(--ease, ease);
 
     &:hover {
-        background: var(--hover-color);
+        background: var(--hover-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.06));
     }
 
     svg {
-        color: var(--muted-color);
+        /* This is the rule that stops the icon disappearing.
+
+           An `<svg width="24" height="24">` inside a flex container is a flex
+           item with the default `flex-shrink: 1`, so when the button's content
+           box is squeezed the glyph shrinks with it — all the way down.
+           Hartway's plant-floor stylesheet carries
+           `body.tablet-mode button:not([class*='InovuaReactDataGrid'])
+            { padding: 8px 14px }`,
+           which outweighs this module's single class (0,2,2 against 0,1,0) and
+           left a 2rem border-box button with a 4px content box; the X
+           collapsed with it and read as a smudge at the end of the header.
+
+           `flex: none` refuses to shrink, and the explicit width/height also
+           makes the glyph immune to the `width: 100%` sizing pattern used on
+           svgs elsewhere in this library. Both are needed: the size fixes the
+           basis, `flex: none` stops it being overruled. Sized here rather than
+           trusting the `size` prop at each call site, so every modal header
+           agrees on one glyph. */
+        width: 1.25rem;
+        height: 1.25rem;
+        flex: none;
+        /* Recessive, but a control the user has to be able to find has no
+           business being fainter than the body text around it. */
+        color: var(--muted-color, #6b7688);
         display: block;
+        transition: color var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    &:hover svg,
+    &:focus-visible svg {
+        color: var(--paragraph-color, #374151);
     }
 }
 

package/src/components/styles/GenericFormBuilder.module.scss

@@ -741,8 +741,13 @@ select:not(:placeholder-shown) + .fi__span {
     letter-spacing: 0.01em;
 }
 
+/* The form builder's modal close control (GenericFormBuilder.jsx, two call
+   sites). Hardened the same way as the header close in Form.module.scss — see
+   the note on the svg block there. */
 .modal__close {
     width: max-content;
+    min-width: 2rem;
+    min-height: 2rem;
     position: absolute;
     right: 8px;
     top: 8px;
@@ -754,7 +759,9 @@ select:not(:placeholder-shown) + .fi__span {
     outline: none;
     border: none;
     border-radius: 6px;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     line-height: 1;
     transition: background 0.2s ease;
 
@@ -764,7 +771,13 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .modal__close svg {
-    color: var(--secondary-color);
+    width: 1.25rem;
+    height: 1.25rem;
+    flex: none;
+    /* `.modal__header` above is `var(--primary-color)`, so the glyph is set
+       against that ground rather than in a second brand hue that may be a
+       near-match for it — which is what `--secondary-color` was doing here. */
+    color: #fff;
     display: block;
 }