Skip to content

fix(steps): anchor the empty-step-content :has to the step item - #255

Merged
lucaspunz merged 5 commits into
mainfrom
lucas/step-anchored-has
Aug 20, 2026
Merged

fix(steps): anchor the empty-step-content :has to the step item#255
lucaspunz merged 5 commits into
mainfrom
lucas/step-anchored-has

Conversation

@lucaspunz

@lucaspunz lucaspunz commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Summary

Removes both sources of universal-subject :has() selectors, which force whole-document style recalc on every DOM mutation in consumers:

  • Steps: group-has-[...]/step:hidden re-anchored to the step item: [[role=listitem]:has(…)_&]:hidden.
  • code.css: the two bare :has(…) > [data-component-part=code-block-root] padding rules could only ever match the CodeBlock root div, which already knows at render time whether it has a header or floating buttons — the root now stamps data-has-header / data-has-floating-buttons and the rules anchor to those. CodeGroup never matched either rule.

Biome GritQL plugins ban both shapes from returning: group-has- in JS/TSX strings, bare :has( selectors in css (anchored :has stays allowed).

Consumer impact: perf-only; the DOM gains one inert data-has-* attribute on the CodeBlock root (snapshot-test churn at bump time).

Test Plan

  • pnpm build: no group-has or universal-subject :has( anywhere in dist
  • pnpm lint:check green; both plugins fire on synthetic violations, silent on anchored :has
  • rendered behavior unchanged: connector hidden on empty step content; code padding identical across header/floating-button/group variants

Note

Low Risk
Performance-oriented selector and attribute changes with no intended behavior change; only an extra inert data-has-* on CodeBlock roots for consumers.

Overview
Eliminates universal-subject :has() patterns that trigger expensive whole-document style recalc on DOM mutations in consuming apps.

Steps: The last-step connector hide rule drops group-has-…/step in favor of an ancestor-anchored variant: [[data-component-part=step-item]:has([data-component-part=step-content]:empty)_&]:hidden (same UX: line hidden when step content is empty).

Code blocks: code.css no longer uses bare :has(…) for padding; the CodeBlock root now sets data-has-header or data-has-floating-buttons at render time, and CSS targets those attributes instead.

Lint: Two Biome Grit plugins block regressions—group-has- in class strings and universal-subject :has( in CSS (anchored :has remains allowed).

Reviewed by Cursor Bugbot for commit 5d81bb0. Bugbot is set up for automated code reviews on this repo. Configure here.

@lucaspunz
lucaspunz force-pushed the lucas/step-anchored-has branch from 9ddfefe to 10861f3 Compare August 20, 2026 00:38
@lucaspunz
lucaspunz force-pushed the lucas/step-anchored-has branch from 10861f3 to e0fbe31 Compare August 20, 2026 00:41
@lucaspunz
lucaspunz force-pushed the lucas/step-anchored-has branch from 897605a to 9a555ed Compare August 20, 2026 00:52
@lucaspunz
lucaspunz marked this pull request as ready for review August 20, 2026 01:11
@lucaspunz lucaspunz mentioned this pull request Aug 20, 2026
Comment thread packages/components/src/components/steps/steps.tsx Outdated
Co-authored-by: Kaishan (Sam) Ding <52273168+dks333@users.noreply.github.com>
@lucaspunz
lucaspunz merged commit c3ccb6a into main Aug 20, 2026
3 checks passed
@lucaspunz
lucaspunz deleted the lucas/step-anchored-has branch August 20, 2026 04:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants