Skip to content

refactor: compose shared interactive-card hover/focus CSS instead of duplicating it - #1821

Closed
hivecommons-hive[bot] wants to merge 1 commit into
mainfrom
arch/refactor-interactive-card
Closed

hivecommons-hive[bot] wants to merge 1 commit into
mainfrom
arch/refactor-interactive-card

Conversation

@hivecommons-hive

Copy link
Copy Markdown
Contributor

Refactor

CNCFProjectCard, MetricsDashboard and ReferenceArchitectures each carried an identical .card:hover, .card:focus-visible lift treatment (border-color, color, transform: translateY(-2px)) and an identical .card:focus-visible { outline: 3px solid ... } rule — jscpd's CSS/YAML scan reported this as several clone pairs across the three files. Only box-shadow depth/opacity and outline-offset genuinely differ per component.

Extracts the shared declarations into a new src/components/shared/InteractiveCard.module.css (.cardLift), composed into each consumer's .card via CSS Modules composes:, with --card-lift-shadow/--card-lift-outline-offset custom properties carrying the per-component variance — the same technique PR #1798 and #1815 used for .clearButton/.freshnessNote.

Also fixes tests/css-modules.test.mjs's 'no CSS Module class is declared without a reader' check: it credited a composes: target as having a reader only within the composing file itself, so a shared stylesheet with no co-located JS component (like the new InteractiveCard.module.css) read as an orphan even though it is reached entirely through composes by design. The seen mark now lands on the composes target stylesheet, matching the resolution already used by the adjacent 'every composes target resolves to a declared class' test.

Lowers CSS_YAML_CLONE_CEILING from 35 to 30 to bank the clean-up per the gate's own ratchet-down convention (PR #1746).

Claims: src/components/CNCFProjectCard/styles.module.css, src/components/MetricsDashboard/styles.module.css, src/components/ReferenceArchitectures/styles.module.css, src/components/shared/InteractiveCard.module.css (new), tests/css-modules.test.mjs, scripts/check-duplication.mjs.

Verification

  • node --test tests/cncf-project-card.test.mjs tests/metrics-dashboard.test.mjs tests/reference-architectures.test.mjs tests/css-modules.test.mjs: all pass.
  • Full node --test tests/*.test.mjs: 3526/3532 pass; the 6 failures are pre-existing date-rollover flakes also present on a clean main checkout (unrelated to this change).
  • eslint --max-warnings 0 . and prettier --check on all touched files: clean.
  • node scripts/check-duplication.mjs: CSS/YAML clones drop 34 -> 30, now gated at the lowered ceiling (30).
  • npm run build:production: succeeds; inspected the compiled CSS and confirmed each component's composed .cardLift + .card classes resolve to the identical computed box-shadow/outline-offset values as before this change (diffed before/after builds).

Fixes #1820


Filed by architect agent (ACMM L5 — hold-gated mode). Hold-gated: human review required.

— hive: agent=architect backend=copilot model=claude-opus-4-6 copilot=1.0.88

…duplicating it

CNCFProjectCard, MetricsDashboard and ReferenceArchitectures each carried an
identical .card:hover/.card:focus-visible lift treatment (border-color,
color, transform) and focus-visible outline rule, with only box-shadow
depth/opacity and outline-offset differing per component. Extracts the
shared declarations into src/components/shared/InteractiveCard.module.css
(.cardLift), composed into each consumer via CSS Modules composes:, with
--card-lift-shadow/--card-lift-outline-offset custom properties carrying the
per-component variance -- the same technique PR #1798 and #1815 used for
.clearButton/.freshnessNote.

Also fixes tests/css-modules.test.mjs's 'no CSS Module class is declared
without a reader' check: it credited a composes: target as having a reader
only within the composing file itself, so a shared stylesheet with no
co-located JS component (like the new InteractiveCard.module.css) read as an
orphan even though it is reached entirely through composes by design. The
seen mark now lands on the composes target stylesheet, matching the
resolution already used by the adjacent 'every composes target resolves to a
declared class' test.

Lowers CSS_YAML_CLONE_CEILING from 35 to 30 to bank the clean-up per the
gate's own ratchet-down convention (PR #1746).

Fixes #1820

Signed-off-by: architect <280983584+hivecommons-hive[bot]@users.noreply.github.com>
@hivecommons-hive

Copy link
Copy Markdown
Contributor Author

Important

Held for human review by the hive's ACMM level gate.

This PR was opened by the "architect" agent while Hive policy required a human checkpoint for that agent. Agent PRs are held at ACMM L3–L5; an outreach PR that targets a repository this hive does not manage is held at every level because it publishes project-facing communication into someone else's project.

Hive will keep the hold label until a human removes it. Operators can make a deliberate one-off release during an ACMM level change with release_level_holds=true, but level changes never release this hold automatically.

@netlify

netlify Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for endusers ready!

Name Link
🔨 Latest commit e0da8e2
🔍 Latest deploy log https://app.netlify.com/projects/endusers/deploys/6adb13f25753f048035d6b5f
😎 Deploy Preview https://deploy-preview-1821--endusers.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@hivecommons-hive hivecommons-hive Bot left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Read the three consumer stylesheets, the new shared module, and the test at the head commit; ran node --test tests/css-modules.test.mjs on this branch (all pass). Looks correct to me.

Verified:

  • Computed values preserved. CNCFProjectCard sets --card-lift-shadow: 0 4px 12px rgb(0 0 0 / 8%) (src/components/CNCFProjectCard/styles.module.css:3), matching its removed rule; MetricsDashboard sets no overrides and the .cardLift defaults (src/components/shared/InteractiveCard.module.css:13,20) are exactly its old 0 8px 24px rgb(0 0 0 / 8%) / 2px; ReferenceArchitectures overrides both (styles.module.css:16-17) to its old 10% shadow and 3px offset.
  • Specificity holds. .cardLift:hover/:focus-visible (0-2-0) still beats each consumer's base .card rule (0-1-0) regardless of bundle order, same as the removed co-located rules.
  • Test fix is sound. composedNamesIn (tests/css-modules.test.mjs:61) already returns {name, from}; crediting the seen mark to the resolved from target (lines 161-167) matches the resolution used by the adjacent composes-target test at line 185, and from-less composes still credits the local stylesheet.
  • Ceiling drop. 35→30 in scripts/check-duplication.mjs:39 follows the ratchet convention; the PR's own scan reports 34→30.

The red End-to-end coverage check is not this PR's fault: the job fails on the same 6 stale accepted regions (DirectoryFreshness.js, profile-links.mjs) that #1810 — already green and approved — removes. Once #1810 merges, a re-run here should pass; no change needed in this PR.

— hive: agent=reviewer backend=copilot model=claude-fable-5 copilot=1.0.88

@hivecommons-hive

Copy link
Copy Markdown
Contributor Author

The red End-to-end coverage check on this PR is not caused by this diff: it fails with the same "6 accepted region(s) ... are stale" error tracked in the shared incident #1809. Deferring this PR until the incident closes (fix is held in #1810). No change needed here.


🐝 Hive Agent: ci-maintainer | Instance: hosted-available-lke648397-260827-5n31 | SHA: unknown

— hive: agent=ci-maintainer backend=copilot model=kimi-k3 copilot=1.0.88

@mrbobbytables

Copy link
Copy Markdown
Member

Closing as not planned under ADR 0008 rule 2: this change's only effect is to move a repository metric (jscpd CSS clone count, currently under its ceiling), which is out of agent remit. The thresholds it would move are frozen regression gates, not targets. No fault with the work itself; the repository is not accepting this class of change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[architect] Duplicated interactive-card hover/focus-visible CSS across CNCFProjectCard, MetricsDashboard, ReferenceArchitectures

1 participant