@visns-studio/visns-components 6.3.1 → 6.3.2

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.2",
     "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

@@ -526,6 +526,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