Allow easy styling autofilled of Inputs #1811

hasparus · 2021-06-10T12:16:08Z

Release Notes

Background color of autofilled inputs will now default to theme.colors.background. It can be changed by setting autofillBackgroundColor prop.

📦 Published PR as canary version: 0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/color@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/components@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/core@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/css@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/custom-properties@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/editor@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install gatsby-plugin-theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install gatsby-theme-style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install gatsby-theme-ui-layout@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/match-media@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/mdx@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/parse-props@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-base@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-bootstrap@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-bulma@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-dark@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-deep@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-funk@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-future@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-polaris@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-roboto@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-sketchy@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-swiss@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-system@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/preset-tosh@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/presets@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/prism@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/sidenav@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/tachyons@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/theme-provider@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
npm install @theme-ui/typography@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
# or 
yarn add @theme-ui/color-modes@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/color@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/components@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/core@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/css@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/custom-properties@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/editor@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add gatsby-plugin-theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add gatsby-theme-style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add gatsby-theme-ui-layout@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/match-media@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/mdx@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/parse-props@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-base@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-bootstrap@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-bulma@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-dark@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-deep@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-funk@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-future@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-polaris@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-roboto@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-sketchy@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-swiss@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-system@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/preset-tosh@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/presets@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/prism@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/sidenav@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/tachyons@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/theme-provider@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
yarn add @theme-ui/typography@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0

vercel · 2021-06-10T12:16:10Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/5jouzaxFcW2fbVmDnNDzFJbNQvJ5
✅ Preview: https://theme-ui-git-autofill-input-bg-systemui.vercel.app

packages/components/src/Input.js

hasparus · 2021-06-11T06:45:27Z

@flo-sch you might be interested in this PR (BTW, is there a way to contact you outside of GitHub?)

flo-sch · 2021-06-11T07:19:58Z

Nice feature :)

The interwebs provide many ways, are you thinking of a specific one?

hasparus · 2021-06-11T07:30:48Z

The interwebs provide many ways, are you thinking of a specific one?

Okay, I've sent you an e-mail through the contact form :)

hasparus · 2021-06-19T16:42:44Z

🚀 PR was released in v0.10.0 🚀

flo-sch · 2021-10-12T22:15:06Z

Hello @hasparus, small related question before I open another issue / PR, seems like the autofillBackgroundColor is missing in the Input types maybe?

Property 'autofillBackgroundColor' does not exist on type 'IntrinsicAttributes & Pick<InputProps, "name" | "form" | "p" | "slot" | "style" | "title" | "pattern" | "className" | "key" | "autoComplete" | ... 311 more ... | "step"> & RefAttributes<...> & SxProp'.ts

Also a small question/suggestion: what about defining a specific key under theme.colors so that we could directly set it as part of the theme (or a variant), instead of having to set it as a prop (on each <Input />)?
I was thinking about changing the prop default value:

Not sure if there is an extra smart way to achieve that, but maybe something like (potentially breaking change?):

sx={{
  '--theme-ui-input-autofill-bg': (theme) => get(
    theme.colors,
    // first try to apply theme.colors.autofillBackgroundColor if it is defined
    'autofillBackgroundColor',
    // fallback to the prop value otherwise
    get(theme.colors, autofillBackgroundColor, null)
  ),
  ...sx,
}}

hasparus · 2021-10-13T08:27:29Z

Hello @hasparus, small related question before I open another issue / PR, seems like the autofillBackgroundColor is missing in the Input types maybe?

Oh, that's definitely a bug. Do you wanna add it?

Not sure if there is an extra smart way to achieve that, but maybe something like (potentially breaking change?):

To be fair, I'm not sure about it. If we're editing the theme already we might pass this color to a variant?

flo-sch · 2021-10-14T08:59:26Z

Oh, that's definitely a bug. Do you wanna add it?

Yep, I can take that :)

To be fair, I'm not sure about it. If we're editing the theme already we might pass this color to a variant?

I have tried to add it as a variant but somehow it always gets overridden by the prop (even when not set --> fallback to background), I think because the <Input /> __css (with default style, including that autofill rule) is placed after sx={{ ... }} and is evaluated afterwards (as "more specific") by the browser? 🤔

// CustomTheme.ts
{
  forms: {
    someVariant: {
      // ...
      '--theme-ui-input-autofill-bg': (theme) => get(theme.colors || {}, 'highlight', null) as string,
    }
  }
}

--> The default Input style overrides it anyway

I could make it work by re-adding the same rules as part of the variant, bit cumbersome but it works:

// CustomTheme.ts
{
  forms: {
    someVariant: {
      // ...
      ':autofill, :autofill:hover, :autofill:focus': {
        boxShadow: (theme) =>
          `inset 0 0 0 1000px ${get(theme.colors || {}, 'highlight', 'lightgrey') as string}`
      },
      ':-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus': {
        boxShadow: (theme) =>
          `inset 0 0 0 1000px ${get(theme.colors || {}, 'muted', 'lightgrey') as string}`
      }
    }
  }
}

(Is there any better way to type get()? 🤔 )

xyzzyxyzzy0077 · 2022-02-04T05:45:48Z

Thanks for the great work! Is there any update on fixing autofillBackgroundColor not in the input types issue?

lachlanjc · 2022-02-04T15:18:58Z

Not that I'm aware of, @xyzzyxyzzy0077! @flo-sch did you end up looking into that?

flo-sch · 2022-02-04T15:20:11Z

Ah, I forgot about that sorry, but I should be able to very soon!

hasparus added 3 commits June 10, 2021 14:10

feat(components): style autofilled Input background

03e6c43

docs(components): move Select ##Variants section above custom arrow docs

dfda364

docs: set <meta name='color-scheme'

5178a47

hasparus added enhancement New feature or request @theme-ui/components labels Jun 10, 2021

hasparus requested a review from lachlanjc June 10, 2021 12:16

test: uppdate snapshots

f4482c1

hasparus force-pushed the autofill-input-bg branch from bcb607e to f4482c1 Compare June 10, 2021 12:17

vercel bot deployed to Preview June 10, 2021 12:17 View deployment

lachlanjc reviewed Jun 10, 2021

View reviewed changes

packages/components/src/Input.js Show resolved Hide resolved

hasparus added the patch Increment the patch version when merged label Jun 10, 2021

hasparus merged commit aeb44b8 into develop Jun 12, 2021

hasparus deleted the autofill-input-bg branch June 12, 2021 06:41

This was referenced Jun 15, 2021

chore(deps-dev): bump @babel/preset-react from 7.13.13 to 7.14.5 #1828

Merged

Fix typo #1835

Merged

hasparus added the released This issue/pull request has been released. label Jun 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow easy styling autofilled of Inputs #1811

Allow easy styling autofilled of Inputs #1811

hasparus commented Jun 10, 2021 •

edited

vercel bot commented Jun 10, 2021 •

edited

hasparus commented Jun 11, 2021

flo-sch commented Jun 11, 2021

hasparus commented Jun 11, 2021

hasparus commented Jun 19, 2021

flo-sch commented Oct 12, 2021

hasparus commented Oct 13, 2021

flo-sch commented Oct 14, 2021

xyzzyxyzzy0077 commented Feb 4, 2022

lachlanjc commented Feb 4, 2022

flo-sch commented Feb 4, 2022 •

edited

Allow easy styling autofilled of Inputs #1811

Allow easy styling autofilled of Inputs #1811

Conversation

hasparus commented Jun 10, 2021 • edited

Release Notes

vercel bot commented Jun 10, 2021 • edited

hasparus commented Jun 11, 2021

flo-sch commented Jun 11, 2021

hasparus commented Jun 11, 2021

hasparus commented Jun 19, 2021

flo-sch commented Oct 12, 2021

hasparus commented Oct 13, 2021

flo-sch commented Oct 14, 2021

xyzzyxyzzy0077 commented Feb 4, 2022

lachlanjc commented Feb 4, 2022

flo-sch commented Feb 4, 2022 • edited

hasparus commented Jun 10, 2021 •

edited

vercel bot commented Jun 10, 2021 •

edited

flo-sch commented Feb 4, 2022 •

edited