@visns-studio/visns-components 6.32.0 → 6.32.1

package/README.md

@@ -9,6 +9,19 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.32.1)
+
+### Boxed overview: one card per section, no note accent
+
+Follow-up to 6.32.0's opt-in boxed overview. The tinted heading bar alone did
+not separate sections once every field was a box, so in boxed mode each
+section is now its own bordered card with its heading as the card's header
+strip — Transport and PPE Requirement read as two things rather than one long
+run of boxes. Note-shaped fields (Description, Comments) are ordinary fields
+here too: the same neutral border as every other box, with no accent colour.
+Plain mode renders byte-identical markup; nothing changes for apps that did
+not opt in.
+
 ## Recent Updates (v6.32.0)
 
 ### The pre-6.15 boxed overview is back, as an opt-in

package/package.json

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

package/src/components/generic/GenericDetail.jsx

@@ -300,6 +300,22 @@ function GenericDetail({
     const overviewStyle = resolveOverviewStyle(page?.overviewStyle);
     const overviewIsBoxed = overviewStyle === 'boxed';
 
+    /**
+     * How one overview section is wrapped.
+     *
+     * Boxed mode draws every section as its own card, so it needs a real
+     * element around the heading and the field list. Plain mode must NOT gain
+     * one: its rules are written as `.gridtxt > ul.customer__overview`, and a
+     * wrapper would stop the list being a direct child — so it keeps the
+     * `React.Fragment` it has always used and its markup is unchanged. A
+     * Fragment accepts `key` but nothing else, hence the separate props
+     * object rather than a className passed unconditionally.
+     */
+    const SectionWrap = overviewIsBoxed ? 'section' : React.Fragment;
+    const sectionWrapProps = overviewIsBoxed
+        ? { className: styles.gridtxt__section }
+        : {};
+
     /** Fileupload states */
     const [files, setFiles] = useState([]);
 
@@ -2940,8 +2956,9 @@ function GenericDetail({
                                         >
                                             {activeTabConfig.sections.map(
                                                 (section, sectionIndex) => (
-                                                    <React.Fragment
+                                                    <SectionWrap
                                                         key={`section-${activeTabConfig.id}-${sectionIndex}`}
+                                                        {...sectionWrapProps}
                                                     >
                                                         <div
                                                             className={
@@ -3154,7 +3171,7 @@ function GenericDetail({
                                                                     )}
                                                                 </ul>
                                                             )}
-                                                    </React.Fragment>
+                                                    </SectionWrap>
                                                 )
                                             )}
                                         </div>

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

@@ -485,6 +485,28 @@
    `page.overviewStyle`), GenericDetail adds `.gridtxt--boxed`, and these
    rules put the 5.26 geometry back.
 
+   Each section is also its own card here, wrapped in `.gridtxt__section`.
+   The tinted heading bar on its own was enough to separate sections while the
+   fields below it were plain stacked pairs, but once every field is a tinted,
+   bordered box the bar reads as one more box in the run: bar, boxes, bar,
+   boxes, all inside a single panel, with nothing saying where Transport ends
+   and PPE Requirement begins. So the section gets a bordered card and the
+   heading becomes that card's header strip — square, full-bleed, hairline
+   underneath. Plain mode keeps emitting the header and the `<ul>` as direct
+   children of `.gridtxt` (the rules above depend on it), so every selector
+   below reaches through `> .gridtxt__section >` and only boxed markup has
+   one.
+
+   One thing from 5.26 is deliberately NOT restored: the red accent on a
+   `.notecolor` field. Description and Comments are ordinary fields here too,
+   and the brand red read as an error on a page with nothing wrong — the same
+   reasoning that removed it from the plain overview. There is no boxed
+   `.notecolor` rule below because there does not need to be: the generic
+   boxed `li` rule is `.gridtxt.gridtxt--boxed > .gridtxt__section >
+   ul.customer__overview li` (0,4,2) and the plain accent it has to beat is
+   `.gridtxt > ul .notecolor` (0,2,1), so a note field simply takes the same
+   neutral border and tint as every other box.
+
    Specificity is doing real work here. The rules being undone are
    `.gridtxt > ul.customer__overview li` above AND the bare `.overviewLabel` /
    `.gridtxt__header` in the 2026 pass at the bottom of the file, which win on
@@ -496,11 +518,37 @@
    this file: a bare var() for a token the host has not declared is invalid at
    computed-value time and the declaration is simply dropped. */
 
-/* The heading, back to a centred tinted bar. `display: flex` is kept so a
-   section's optional `.gridtxt__meta` still renders; it is centred with the
-   title rather than pushed to the far edge, since there is no edge to push to
-   once the bar is tinted. */
-.gridtxt.gridtxt--boxed > .gridtxt__header {
+/* The panel's own inset is dialled back once the sections are cards: the tab
+   card already pads, and `.gridtxt`'s 1rem/1.5rem on top of a card border on
+   top of the `<ul>`'s 0.85rem stacked three insets between the panel edge and
+   the first field. Small but not zero — the cards still need to sit off the
+   panel border. */
+.gridtxt.gridtxt--boxed {
+    padding: var(--spacing-sm, 0.5rem);
+}
+
+/* One section, one card. `overflow: hidden` is what lets the square heading
+   strip below sit flush inside the rounded corners. */
+.gridtxt.gridtxt--boxed > .gridtxt__section {
+    display: block;
+    box-sizing: border-box;
+    background: var(--surface-color, #fff);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.12);
+    border-radius: var(--br, 5px);
+    overflow: hidden;
+    margin: 0 0 var(--spacing-md, 1rem);
+}
+
+.gridtxt.gridtxt--boxed > .gridtxt__section:last-child {
+    margin-bottom: 0;
+}
+
+/* The heading, back to a centred tinted bar — and now the card's header
+   strip, so it runs the full width with square corners and a hairline under
+   it. `display: flex` is kept so a section's optional `.gridtxt__meta` still
+   renders; it is centred with the title rather than pushed to the far edge,
+   since there is no edge to push to once the bar is tinted. */
+.gridtxt.gridtxt--boxed > .gridtxt__section > .gridtxt__header {
     width: 100%;
     display: flex;
     align-items: baseline;
@@ -509,8 +557,8 @@
     flex-wrap: wrap;
     box-sizing: border-box;
     padding: 10px 20px;
-    border-bottom: 0;
-    border-radius: var(--br, 5px);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
+    border-radius: 0;
     margin-bottom: 0;
     background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     font-size: var(--font-size-md, 0.9rem);
@@ -523,13 +571,13 @@
 
 /* The meta sits beside the centred title, not opposite it, so it needs its own
    small gap where the header's `space-between` used to provide one. */
-.gridtxt.gridtxt--boxed > .gridtxt__header > .gridtxt__meta {
+.gridtxt.gridtxt--boxed > .gridtxt__section > .gridtxt__header > .gridtxt__meta {
     margin-left: var(--spacing-sm, 0.5rem);
 }
 
 /* A wrapping row of boxes, not a two-column grid: a full-width field can then
    sit between two half-width ones without leaving a hole in a grid track. */
-.gridtxt.gridtxt--boxed > ul.customer__overview {
+.gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview {
     width: 100%;
     display: flex;
     justify-content: flex-start;
@@ -544,7 +592,7 @@
 
 /* The box itself. `display: block` is the whole point — the label and the
    value are inline text in one paragraph, not two stacked rows. */
-.gridtxt.gridtxt--boxed > ul.customer__overview li {
+.gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview li {
     width: auto;
     flex: 0 0 calc(50% - 10px);
     min-width: 0;
@@ -560,16 +608,11 @@
     line-height: 1.45;
 }
 
-.gridtxt.gridtxt--boxed > ul.customer__overview .fw-grid-item {
+.gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview .fw-grid-item {
     flex: 0 0 calc(100% - 10px);
     grid-column: auto;
 }
 
-/* The accent on a note-shaped field, as it was before 6.15. */
-.gridtxt.gridtxt--boxed > ul.customer__overview .notecolor {
-    border: 1px solid var(--secondary-color, #b23c3c);
-}
-
 /* Run-in label: ordinary bold text with a colon after it, not the eyebrow the
    stacked layout wears. */
 .gridtxt--boxed .overviewLabel {
@@ -590,8 +633,8 @@
 
 /* One column on a phone — half of a narrow screen is not a readable box. */
 @media (max-width: 759px) {
-    .gridtxt.gridtxt--boxed > ul.customer__overview li,
-    .gridtxt.gridtxt--boxed > ul.customer__overview .fw-grid-item {
+    .gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview li,
+    .gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview .fw-grid-item {
         flex: 0 0 calc(100% - 10px);
     }
 }