refactor(colorpickers, grid, loaders, notifications, tags tooltips): use transient props where appropriate #1968
Conversation
| fontSize={size!} | ||
| color={color!} | ||
| width="80" | ||
| height="72" |
There was a problem hiding this comment.
I don't think we want these props leaking to the DOM. Also, might need to git-blame, but why do we have these huge width/height values?
|
|
||
| return ( | ||
| <StyledSVG | ||
| $dataGardenId={COMPONENT_ID} |
There was a problem hiding this comment.
| $dataGardenId={COMPONENT_ID} | |
| dataGardenId={COMPONENT_ID} |
The data-garden-id needs to remain intact in the DOM
There was a problem hiding this comment.
dataGardenId would be filtered out by @emotion/is-prop-valid used under the hood in styled-components@v5. I've replaced it with data-garden-id.
There was a problem hiding this comment.
Hmm, bit of a bummer about that filtering.
|
|
||
| interface IStyledSVGProps { | ||
| dataGardenId: string; | ||
| $dataGardenId: string; |
There was a problem hiding this comment.
| $dataGardenId: string; | |
| dataGardenId: string; |
ze-flo
changed the title
ze-flo
force-pushed
the
ze-flo/transient-props-rest
branch
from
2d79c4b to
4bb3bcd
Compare
| const COMPONENT_ID = 'dropdowns.multiselect_input'; | ||
|
|
||
| interface IStyledMultiselectInputProps { | ||
| isCompact: boolean; |
There was a problem hiding this comment.
Not here. This case is tricky to understand. Using $isCompact led to a snapshot mismatches.
TL&DR;
StyledMultiselectInput extends StyledInput, which in turns extends Input, a React FC that returns a StyledTextInput. Input only accepts isCompact, which is received by StyledTextInput after being renamed as transient prop $isCompact.
packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts
Outdated
Show resolved
Hide resolved
packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts
Outdated
Show resolved
Hide resolved
packages/tags/demo/stories/__snapshots__/TagStory.spec.tsx.snap
Outdated
Show resolved
Hide resolved
|
|
||
| return ( | ||
| <StyledSVG | ||
| $dataGardenId={COMPONENT_ID} |
There was a problem hiding this comment.
Hmm, bit of a bummer about that filtering.
Description
This PR updates various components in
react-colorpickers,react-grid,react-notifications,react-loaders, andreact-tooltipsto use transient props where appropriate. These changes are necessary in preparation for the upgrade to[email protected]to ensure we avoid DOM violation errors after the transition.Checklist
👌 design updates will be Garden Designer approved (add the designer as a reviewer)npm start)⬅️ renders as expected with reversed (RTL) direction⚫ renders as expected in dark mode🤘 renders as expected with Bedrock CSS (?bedrock)♿ tested for WCAG 2.1 AA accessibility compliance📝 tested in Chrome, Firefox, Safari, and Edge