From eafab8cb761e665252c63a4f81d34c6e605b1294 Mon Sep 17 00:00:00 2001 From: John Coburn Date: Fri, 7 Feb 2025 14:00:01 -0600 Subject: [PATCH 1/2] STCOM-1386 Paneset: check for existing id before registering pane (#2395) Panes can exhibit strange behavior in the dev environment that just doesn't happen in production. I believe this is caused by pane registration misbehaving in React StrictMode (where mounting happens twice). This PR dedupes the panes by checking if a pane id already exists in the paneset - and if it does, the pane is not added. Problematic behavior can be seen specifically with panes that have `defaultWidth: "fill"` - they'll be registered twice, and their width calculation (which divides the remaining width among other `fill` panes) will leave them being half the size they should be. Hiding a search/filter pane can leave the results view at only 50% of its width, when it should be the full width of the view when it's the only pane. --- CHANGELOG.md | 1 + lib/Paneset/Paneset.js | 13 +++++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a629a07b0..45530ec4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ * `` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391. * `` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195. * *BREAKING* Update `@csstools` postcss plugins to current versions in sync with `@folio/stripes-cli`. Refs STCOM-1404. +* Paneset - deduplicate panes via `id` prior to registration. Refs STCOM-1386. ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11) [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0) diff --git a/lib/Paneset/Paneset.js b/lib/Paneset/Paneset.js index c6c96e2cb..838dbbd75 100644 --- a/lib/Paneset/Paneset.js +++ b/lib/Paneset/Paneset.js @@ -442,10 +442,15 @@ class Paneset extends React.Component { this.interval = null; }); } else { - // insert sorted by left coordinate of clientrect... - const newPanes = insertByClientRect(newState.panes, paneObject); - newState = Object.assign(newState, { panes: newPanes, changeType: 'added' }); - // newState = this.insertPaneObject(newState, paneObject); + // check for duplicate id's before registering. Registration happens on mount. + // This will help with mount-twice strict mode strangeness + const paneExists = newState.panes.findIndex((p) => p.id === paneObject.id) + if (paneExists === -1) { + // insert sorted by left coordinate of clientrect... + const newPanes = insertByClientRect(newState.panes, paneObject); + newState = Object.assign(newState, { panes: newPanes, changeType: 'added' }); + // newState = this.insertPaneObject(newState, paneObject); + } } return newState; }, () => { From 78586f5a63f5e706cf1bd7babed733366705a35f Mon Sep 17 00:00:00 2001 From: John Coburn Date: Fri, 7 Feb 2025 15:46:31 -0600 Subject: [PATCH 2/2] STCOM - 1390 improve text contrast of disabled text, adjust calendar colors (#2421) These particular changes targeted the calendar UI. The thickness of text was increased as well as colors of inactive days to improve contrast to acceptable levels (4.5:1 minimum). Additionally, changed the hover bg for days during the month. ![dpupdatecolors](https://github.com/user-attachments/assets/1a5d7e30-ed1e-4aa6-8fae-134e27d87e72) --- CHANGELOG.md | 1 + lib/Datepicker/Calendar.css | 7 ++++++- lib/variables.css | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45530ec4f..b9ac3f28e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ * `` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195. * *BREAKING* Update `@csstools` postcss plugins to current versions in sync with `@folio/stripes-cli`. Refs STCOM-1404. * Paneset - deduplicate panes via `id` prior to registration. Refs STCOM-1386. +* Calendar - improved color contrast of edge month days, as per WCAG standards. Changed hover bg color of edge/month days. Increased weight of day numbers overall. Refs STCOM-1390. ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11) [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0) diff --git a/lib/Datepicker/Calendar.css b/lib/Datepicker/Calendar.css index 394db7899..415d9d752 100644 --- a/lib/Datepicker/Calendar.css +++ b/lib/Datepicker/Calendar.css @@ -55,13 +55,18 @@ display: flex; align-items: center; justify-content: center; + font-weight: 600; &:hover { - background-color: #eee; + background-color: var(--color-focus-shadow); } &.muted { color: var(--color-fill-disabled); + + &:hover { + background-color: #eee; + } } &.today { diff --git a/lib/variables.css b/lib/variables.css index 58c45db64..651161ade 100644 --- a/lib/variables.css +++ b/lib/variables.css @@ -14,7 +14,7 @@ --color-fill-table-row-even: rgba(0 0 0 / 3%); --color-fill-form-element: var(--color-fill); --color-fill-current: rgba(0 0 0 / 62%); - --color-fill-disabled: rgba(0 0 0 / 15%); + --color-fill-disabled: rgba(0 0 0 / 54%); --color-fill-hover: rgba(37 118 195 / 20%); --color-fill-focus: rgba(37 118 195 / 20%); --color-focus-shadow: rgba(166 212 255 / 65%);