fix: align catalog filter checkbox labels#1474
Conversation
Signed-off-by: Yi Nuo <218099172+yi-nuo426@users.noreply.github.com>
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
Stacklayout props (alignItems,justifyContent,gap,px) tosxinFilterSectionoption 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. |
Signed-off-by: Yi Nuo <218099172+yi-nuo426@users.noreply.github.com>
Signed-off-by: Yi Nuo <218099172+yi-nuo426@users.noreply.github.com>
Summary
Stacklayout props inCatalogFilterSectionfrom raw props tosxso they render as CSS instead of leaking into the DOMCatalogFilterSidebaralignitems,justifycontent,gap, orpxreappear on the rendered DOMTest plan
npx eslint src/custom/CatalogFilterSection/FilterSection.tsx src/__testing__/CatalogFilterSection.test.tsxnpx jest src/__testing__/CatalogFilterSection.test.tsx --runInBandnpm testnpm run build