Pass and sanitize commonProps passed to GroupHeader and Input#4391
Pass and sanitize commonProps passed to GroupHeader and Input#4391
Conversation
🦋 Changeset detectedLatest commit: 665f7ae The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 665f7ae:
|
|
I'm probably missing something, but I don't see how the |
|
Common props weren't being passed and this aims to add them for the sake of consistency. The previous implementation was... const { className, cx, getStyles, theme, selectProps, ...cleanProps } = props;
return (
<div
css={getStyles('groupHeading', { theme, ...cleanProps })}
className={cx({ 'group-heading': true }, className)}
{...cleanProps}
/>
);Both GroupHeading and Input lack The intention with this was to create a function that would cleanse the common props in a similar way, so that all of the commonProps are available to the styles api, but then sanitized for the DOM in a consistent way. |
|
Okay, got it, should we go ahead and pass |
Purpose:
When styling components, it would be beneficial to have
commonPropsaccessible as the documentation states that they should be. This also resolves a bug introduced in v3.2Proposal:
Currently these two components do not use
commonProps. It is likely because they pass extra props directly to the components wrapper as DOM attributes. It's worth noting that they do not follow the sameinnerPropsparadigm as the other components.Since all the cleanedProps are passed directly to the DOM as attributes, it was just a matter of removing the
commonPropkeys from the props as a util function.Resolves:
Issue: "input" object of the styles object should receive the same state as the other components #3982
Issue: Unreported side effect from
Pass down extra props to group header as item.data #3046
Result of the PR is that GroupHeader now renders with data attribute in the DOM represented as
data=[Object Object]The included code resolves this by destructuring
datafrom the sanitized props prior to passing them in as "innerProps"