fix(theme): allow for simplified input styling

[tom-engineering]

📝 Description

This change allows users to style Input components via InputGroup without those styles being overridden by the Input itself.

⛳️ Current behavior (updates)

The Input component can be styled by setting some custom CSS variables:

--input-height
--input-font-size
--input-padding
--input-border-radius

These CSS variables are also used by InputGroup and the InputLeftAddon/InputRightAddon and InputLeftElement/InputRightElement components to allow them to share size information with the Input to create a seamless end result.

Unfortunately, if you want to adjust any of these values in a one-off scenario, you have to apply the new value to the InputGroup and to the Input, because the Input has its own copy of the CSS variables which take precedence.

<InputGroup sx={{ '--input-height': '50px' }}>
  <Input placeholder="Search for something..." sx={{ '--input-height': '50px' }} />
  <InputRightElement>
    <Search />
  </InputRightElement>
 </InputGroup>

🚀 New behavior

This PR changes the keys of the CSS variables set on the Input itself to this set:

--input-field-height
--input-field-font-size
--input-field-padding
--input-field-border-radius

It then adjusts the corresponding properties of an Input to use the original set with a fallback to the new set:

height: var(--input-height, var(--input-field-height));
font-size: var(--input-font-size, var(--input-field-font-size));
padding-inline-start: var(--input-padding, var(--input-field-padding));
padding-inline-end: var(--input-padding, var(--input-field-padding));
border-radius: var(--input-border-radius, var(--input-field-border-radius));

This lets a user set the original variable once on the InputGroup and have it inherit throughout the other group components.

💣 Is this a breaking change (Yes/No):

No - if a user is already dealing with this issue by setting the original CSS vars in two places, that will continue to work due to the CSS variable fallback arrangement.

📝 Additional Information

It's my understanding that the reason this has to be solved with two CSS variables is because Chakra doesn't allow theme tokens in CSS variable fallback values. Having the fallback be another variable which can be set with a theme token means we can avoid hard-coding any CSS values.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ad47b8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@chakra-ui/theme	Patch
@chakra-ui/react	Patch
@chakra-ui/test-utils	Patch
@chakra-ui/docs	Patch

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
chakra-ui-storybook	✅ Ready (Inspect)	Visit Preview	Mar 15, 2024 5:39pm
chakra-ui-website	❌ Failed (Inspect)		Mar 15, 2024 5:39pm

[tom-engineering]

Would this work better against the v2 branch?

[segunadebayo]

Thanks for working on this.

Closing this in favor of the upcoming v3 version, which no longer requires InputGroup