Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add styling for readonly, fix AutoComplete inset focus background color #2218

Merged
merged 9 commits into from
Aug 29, 2022

Conversation

langermank
Copy link
Contributor

@langermank langermank commented Aug 26, 2022

Co-authored-by: Eric Bailey [email protected]

What are you trying to accomplish?

This pull request addresses issues https://github.com/github/primer/issues/1230 and https://github.com/github/primer/issues/1208. It:

  1. Adds styling for input, select, and textarea elements if a readonly attribute is applied to it.
  2. Adds readonly support to Storybook.
  3. Updates the background color of an AutoComplete inset input field to match the focus background color treatment of other input fields.

What approach did you choose and why?

readonly

We added a readonly attribute selector scoped to the.FormControl-input, .FormControl-select, and .FormControl-textarea selector grouping. This scopes it to only Primer-related inputs, matching the treatment approach we use for the disabled attribute.

We also added logic for Storybook to let it display the readonly attribute, if toggled.

AutoComplete focus background color

We added a :focus-visible and :focus selector grouping to .FormControl-inset to adjust the background color to use --color-canvas-default on the input's background, matching the treatment used on other Primer inputs.

What should reviewers focus on?

Are the declarations applied to the most relevant selector set?

Can these changes ship as is?

Yes.

  • Yes, this PR does not depend on additional changes. 🚢

Co-authored-by: Eric Bailey <[email protected]>
@langermank langermank requested a review from a team as a code owner August 26, 2022 17:32
@langermank langermank requested a review from simurai August 26, 2022 17:32
@changeset-bot
Copy link

changeset-bot bot commented Aug 26, 2022

🦋 Changeset detected

Latest commit: 514d29b

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

This PR includes changesets to release 1 package
Name Type
@primer/css 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

@github-actions github-actions bot temporarily deployed to Storybook Preview August 26, 2022 17:39 Inactive
@langermank langermank temporarily deployed to github-pages August 26, 2022 17:42 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview August 26, 2022 17:43 Inactive
@langermank langermank temporarily deployed to github-pages August 26, 2022 17:50 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview August 26, 2022 17:50 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview August 26, 2022 17:57 Inactive
@ericwbailey ericwbailey changed the title WIP Add styling for readonly, fix AutoComplete inset focus background color Aug 26, 2022
@langermank langermank temporarily deployed to github-pages August 26, 2022 19:04 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview August 26, 2022 19:05 Inactive
@ericwbailey ericwbailey merged commit 6205337 into main Aug 29, 2022
@ericwbailey ericwbailey deleted the form-bug-fixes branch August 29, 2022 16:57
@primer-css primer-css mentioned this pull request Aug 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants