Skip to content

fix: align catalog filter checkbox labels#1474

Merged
ritzorama merged 3 commits intolayer5io:masterfrom
miacycle:fix/catalog-filter-checkbox-alignment
May 3, 2026
Merged

fix: align catalog filter checkbox labels#1474
ritzorama merged 3 commits intolayer5io:masterfrom
miacycle:fix/catalog-filter-checkbox-alignment

Conversation

@miacycle
Copy link
Copy Markdown
Contributor

@miacycle miacycle commented May 3, 2026

Summary

  • move Stack layout props in CatalogFilterSection from raw props to sx so they render as CSS instead of leaking into the DOM
  • restore vertical centering between filter checkboxes and labels across consumers of CatalogFilterSidebar
  • add a regression test that fails if raw layout attributes like alignitems, justifycontent, gap, or px reappear on the rendered DOM

Test plan

  • npx eslint src/custom/CatalogFilterSection/FilterSection.tsx src/__testing__/CatalogFilterSection.test.tsx
  • npx jest src/__testing__/CatalogFilterSection.test.tsx --runInBand
  • npm test
  • npm run build

Signed-off-by: Yi Nuo <218099172+yi-nuo426@users.noreply.github.com>
Copilot AI review requested due to automatic review settings May 3, 2026 19:33
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request migrates styling properties on Stack components in FilterSection.tsx to the sx prop to prevent attribute leakage to the DOM, supported by a new regression test. Feedback suggests optimizing performance by extracting static sx objects into constants outside the component to prevent re-allocations during renders, and improving test robustness by verifying that styles are correctly applied while extending coverage to all modified elements.

Comment thread src/custom/CatalogFilterSection/FilterSection.tsx Outdated
Comment thread src/__testing__/CatalogFilterSection.test.tsx Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes layout prop leakage from CatalogFilterSection option rows into the rendered DOM (which can break alignment/styling across consumers) by moving layout-related props onto sx, and adds a regression test to detect reintroducing those raw attributes.

Changes:

  • Migrate Stack layout props (alignItems, justifyContent, gap, px) to sx in FilterSection option rows.
  • Restore consistent vertical centering between filter checkboxes and labels.
  • Add a Jest regression test to prevent layout prop attributes from appearing on rendered DOM nodes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
src/custom/CatalogFilterSection/FilterSection.tsx Moves layout props into sx on option row Stacks to avoid leaking invalid DOM attributes and preserve alignment.
src/testing/CatalogFilterSection.test.tsx Adds a regression test intended to catch leaked layout attributes in rendered output.

Comment thread src/__testing__/CatalogFilterSection.test.tsx Outdated
yi-nuo426 added 2 commits May 3, 2026 14:37
Signed-off-by: Yi Nuo <218099172+yi-nuo426@users.noreply.github.com>
Signed-off-by: Yi Nuo <218099172+yi-nuo426@users.noreply.github.com>
@ritzorama ritzorama merged commit 179bd6f into layer5io:master May 3, 2026
5 checks passed
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.

4 participants