@visns-studio/visns-components 6.3.2 → 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.2",
+    "version": "6.3.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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;
     }

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;
 }