From d0b4ab70e7834fedfa1a2d02dc1bb7b7a84cf4fa Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sat, 26 Sep 2026 06:47:42 +0000 Subject: [PATCH] The filters toggle is .button.compact.link, and we were missing four of its declarations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit rega measured it on /regions/ethiopia: ours 25.44px tall against their 37.63. Their height reconciles exactly once the right rules are in. _buttons.scss gives .button { border: 1px solid var(--button-border-color, transparent); line-height: var(--line-height-none); border-radius: 100px }, .button.compact { padding: var(--spacing-xs) var(--spacing-2xl) }, and .button.link sets --button-border-color to transparent: line-height 15.625 + 2x10 padding + 2x1 border = 37.63 Ours declared NO padding, so the UA's 1px showed, plus border:0, and font:inherit pulled the base line-height 1.5 through as 23.44. All four declarations are portable, so all four are ported and the geometry now matches. THE ONE SUBSTITUTION, documented rather than silently skipped: their .button also sets font-family: var(--font-family-buttons), which resolves to Brandon Grotesque — commercial, and blocked on the Driver. So this control keeps our stand-in face and the family stays the single measured difference. That is the RULE 1 shape: port everything portable, document the one thing that cannot be, with the reason. Both of this pair came from rega measuring text leaves I had not thought to compare, then re-measuring every hit against the PREVIOUS tree so "already wrong" could be told apart from "my regression". Neither would have surfaced from my side: the stat shrink looked like a deliberate rule with a comment justifying it, and this button looked like a plain button because ours had made it one. --- .../regions-dashboard/src/UupgsList.vue | 17 ++++++++++++++++- public/dx-maps/doxa-maps-spa/manifest.json | 8 ++++---- public/dx-maps/manifest.json | 8 ++++---- .../region-dashboards/index.html | 2 +- .../regions-dashboard/regions-dashboard.js | 2 +- .../regions-dashboard/regions-list/index.html | 2 +- .../regions-dashboard/regions-mfe/index.html | 2 +- 7 files changed, 28 insertions(+), 13 deletions(-) diff --git a/plugin-designs/regions-dashboard/src/UupgsList.vue b/plugin-designs/regions-dashboard/src/UupgsList.vue index fff40b090..0b2fefec2 100644 --- a/plugin-designs/regions-dashboard/src/UupgsList.vue +++ b/plugin-designs/regions-dashboard/src/UupgsList.vue @@ -344,7 +344,22 @@ useShadowStyles( '.search-icon{ position:absolute; inset-inline-start:1em; top:0; bottom:0; margin:auto 0;' + ' width:1em; height:1em; fill:none; stroke:var(--dx-muted); stroke-width:2; pointer-events:none; }' + // .filters__toggle — centred, chevron rotates when expanded - '.filters__toggle{ background:none; border:0; cursor:pointer; font:inherit; font-size:var(--font-size-sm);' + + // ★ THEIRS IS .button.compact.link, NOT A BARE BUTTON, and ours was missing four of its + // declarations. rega measured the gap on /regions/ethiopia: ours 25.44px tall against their 37.63. + // Their numbers reconcile exactly once the right rules are applied -- _buttons.scss gives + // .button { border:1px solid var(--button-border-color, transparent); line-height: + // var(--line-height-none); border-radius:100px } and .button.compact { padding: var(--spacing-xs) + // var(--spacing-2xl) }, with .button.link setting --button-border-color: transparent: + // line-height 15.63 (font-size-sm x 1) + 2x10 padding + 2x1 border = 37.63 + // Ours declared NO padding (so the UA's 1px showed) and border:0, and font:inherit pulled the + // base line-height 1.5 through as 23.44. All four are portable, so all four are ported. + // THE ONE SUBSTITUTION, documented rather than silently skipped: their .button also sets + // font-family: var(--font-family-buttons), which resolves to Brandon Grotesque. That face is + // commercial and BLOCKED ON THE DRIVER, so this button keeps our stand-in and the family remains + // the one measured difference here. Everything geometric now matches. + '.filters__toggle{ background:none; cursor:pointer; font:inherit; font-size:var(--font-size-sm);' + + ' padding:var(--spacing-xs) var(--spacing-2xl); border:1px solid transparent; border-radius:100px;' + + ' line-height:var(--line-height-none);' + ' display:inline-flex; align-items:center; gap:var(--spacing-2xs); margin-inline:auto; color:var(--dx-text); }' + '.filters__toggle svg{ transition:transform 200ms ease; }' + '.filters__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }' + diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json index 8442514d0..69136dd61 100644 --- a/public/dx-maps/doxa-maps-spa/manifest.json +++ b/public/dx-maps/doxa-maps-spa/manifest.json @@ -887,7 +887,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-/yyyFg2PRW3AhvfyT2rEX6eaZvCpym7lykp/twZVgmPFI7ednM1RAnsk03IN5yeo", + "integrity": "sha384-vtLU1KzPE5yyGPSDzM/tfowtT8xYy5Q8tKlISnwEt/ZBX6B74UJYsKeUEcByfzZo", "elements": [ "regions-dashboard" ], @@ -907,7 +907,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -921,7 +921,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -935,7 +935,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 8442514d0..69136dd61 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -887,7 +887,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-/yyyFg2PRW3AhvfyT2rEX6eaZvCpym7lykp/twZVgmPFI7ednM1RAnsk03IN5yeo", + "integrity": "sha384-vtLU1KzPE5yyGPSDzM/tfowtT8xYy5Q8tKlISnwEt/ZBX6B74UJYsKeUEcByfzZo", "elements": [ "regions-dashboard" ], @@ -907,7 +907,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -921,7 +921,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -935,7 +935,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ] diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html index 59db5fe08..8225f322d 100644 --- a/public/dx-maps/regions-dashboard/region-dashboards/index.html +++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html @@ -36,7 +36,7 @@ - + - + - +