Skip to content

Update TextField disabled and readOnly styles #9761

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
Jul 20, 2023
Merged

Update TextField disabled and readOnly styles #9761

merged 5 commits into from
Jul 20, 2023

Conversation

@aveline
Copy link
Contributor

@aveline aveline commented Jul 19, 2023 •
edited
Loading

WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-summer-editions/issues/99

WHAT is this pull request doing?

Update styles for TextField disabled and readOnly states

Before
Screenshot 2023-07-19 at 10 26 53 AM
After
Screenshot 2023-07-19 at 10 27 09 AM

How to 🎩

Review in Storybook with beta flag switched on

@aveline aveline added the 🤖Skip Changelog Causes CI to ignore changelog update check. label Jul 19, 2023
sarahill
sarahill reviewed Jul 19, 2023
View reviewed changes
Copy link
Contributor

@sarahill sarahill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aveline Can we make the focus state for readOnly the same as default? It looks too much like you can type into the field right now when focused.

proposed
image

current
image

sarahill
sarahill reviewed Jul 19, 2023
View reviewed changes
Copy link
Contributor

@sarahill sarahill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the label for readOnly is still using the default text color. Can we update that to text-subdued?

@aveline
Copy link
Contributor Author

aveline commented Jul 19, 2023

Updated focus state
Screenshot 2023-07-19 at 1 38 35 PM

Updated readOnly label text color
Screenshot 2023-07-19 at 1 37 58 PM

@aveline aveline requested a review from sarahill July 19, 2023 20:40
@aveline aveline requested a review from sam-b-rose July 19, 2023 22:37
@aveline aveline removed the 🤖Skip Changelog Causes CI to ignore changelog update check. label Jul 20, 2023
@aveline aveline merged commit ce3e516 into main Jul 20, 2023
@aveline aveline deleted the text-field-disabled branch July 20, 2023 16:59
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Jul 20, 2023
Merged
mattkubej pushed a commit that referenced this pull request Jul 21, 2023
@shopify-github-actions-access @github-actions
Version Packages (#9778)
e956178 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.6.0

### Minor Changes

- [#9777](#9777)
[`8228de0f6`](8228de0)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added social
media icons

## @shopify/polaris@11.9.0

### Minor Changes

- [#9761](#9761)
[`ce3e516a2`](ce3e516)
Thanks [@aveline](https://github.com/aveline)! - Added `readOnly` prop
to `Labelled` component


- [#9770](#9770)
[`571acc166`](571acc1)
Thanks [@zaquille-oneil](https://github.com/zaquille-oneil)! - Updating
TextField to support ArrowUp and ArrowDown keypresses for "integer" type

### Patch Changes

- [#9765](#9765)
[`541e5920b`](541e592)
Thanks [@mattkubej](https://github.com/mattkubej)! - [TopBar] convert to
grid and center align search field

- Updated dependencies
\[[`8228de0f6`](8228de0)]:
    -   @shopify/polaris-icons@7.6.0

## @shopify/polaris-cli@0.2.24



## polaris.shopify.com@0.56.2

### Patch Changes

- Updated dependencies
\[[`ce3e516a2`](ce3e516),
[`8228de0f6`](8228de0),
[`571acc166`](571acc1),
[`541e5920b`](541e592)]:
    -   @shopify/polaris@11.9.0
    -   @shopify/polaris-icons@7.6.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@aveline @juzser
Update TextField disabled and readOnly styles (Shopify#9761)
bbe13f9 
### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-summer-editions/issues/99

### WHAT is this pull request doing?
Update styles for TextField `disabled` and `readOnly` states

Before
<img width="789" alt="Screenshot 2023-07-19 at 10 26 53 AM"
src="https://github.com/Shopify/polaris/assets/3474483/5f30c7ae-ba8c-47b4-b7b7-13d586eee259">
After
<img width="791" alt="Screenshot 2023-07-19 at 10 27 09 AM"
src="https://github.com/Shopify/polaris/assets/3474483/beea7152-af38-4638-8342-2ce93889b68b">



### How to 🎩
Review in Storybook with beta flag switched on
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#9778)
8149966 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.6.0

### Minor Changes

- [Shopify#9777](Shopify#9777)
[`8228de0f6`](Shopify@8228de0)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added social
media icons

## @shopify/polaris@11.9.0

### Minor Changes

- [Shopify#9761](Shopify#9761)
[`ce3e516a2`](Shopify@ce3e516)
Thanks [@aveline](https://github.com/aveline)! - Added `readOnly` prop
to `Labelled` component


- [Shopify#9770](Shopify#9770)
[`571acc166`](Shopify@571acc1)
Thanks [@zaquille-oneil](https://github.com/zaquille-oneil)! - Updating
TextField to support ArrowUp and ArrowDown keypresses for "integer" type

### Patch Changes

- [Shopify#9765](Shopify#9765)
[`541e5920b`](Shopify@541e592)
Thanks [@mattkubej](https://github.com/mattkubej)! - [TopBar] convert to
grid and center align search field

- Updated dependencies
\[[`8228de0f6`](Shopify@8228de0)]:
    -   @shopify/polaris-icons@7.6.0

## @shopify/polaris-cli@0.2.24



## polaris.shopify.com@0.56.2

### Patch Changes

- Updated dependencies
\[[`ce3e516a2`](Shopify@ce3e516),
[`8228de0f6`](Shopify@8228de0),
[`571acc166`](Shopify@571acc1),
[`541e5920b`](Shopify@541e592)]:
    -   @shopify/polaris@11.9.0
    -   @shopify/polaris-icons@7.6.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@aveline
Update TextField disabled and readOnly styles (Shopify#9761)
4ac8815 
### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-summer-editions/issues/99

### WHAT is this pull request doing?
Update styles for TextField `disabled` and `readOnly` states

Before
<img width="789" alt="Screenshot 2023-07-19 at 10 26 53 AM"
src="https://github.com/Shopify/polaris/assets/3474483/5f30c7ae-ba8c-47b4-b7b7-13d586eee259">
After
<img width="791" alt="Screenshot 2023-07-19 at 10 27 09 AM"
src="https://github.com/Shopify/polaris/assets/3474483/beea7152-af38-4638-8342-2ce93889b68b">



### How to 🎩
Review in Storybook with beta flag switched on
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#9778)
7fb9040 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.6.0

### Minor Changes

- [Shopify#9777](Shopify#9777)
[`8228de0f6`](Shopify@920f1c3)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added social
media icons

## @shopify/polaris@11.9.0

### Minor Changes

- [Shopify#9761](Shopify#9761)
[`ce3e516a2`](Shopify@4ac8815)
Thanks [@aveline](https://github.com/aveline)! - Added `readOnly` prop
to `Labelled` component


- [Shopify#9770](Shopify#9770)
[`571acc166`](Shopify@6ff428e)
Thanks [@zaquille-oneil](https://github.com/zaquille-oneil)! - Updating
TextField to support ArrowUp and ArrowDown keypresses for "integer" type

### Patch Changes

- [Shopify#9765](Shopify#9765)
[`541e5920b`](Shopify@7040c61)
Thanks [@mattkubej](https://github.com/mattkubej)! - [TopBar] convert to
grid and center align search field

- Updated dependencies
\[[`8228de0f6`](Shopify@920f1c3)]:
    -   @shopify/polaris-icons@7.6.0

## @shopify/polaris-cli@0.2.24



## polaris.shopify.com@0.56.2

### Patch Changes

- Updated dependencies
\[[`ce3e516a2`](Shopify@4ac8815),
[`8228de0f6`](Shopify@920f1c3),
[`571acc166`](Shopify@6ff428e),
[`541e5920b`](Shopify@7040c61)]:
    -   @shopify/polaris@11.9.0
    -   @shopify/polaris-icons@7.6.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sarahill sarahill sarahill approved these changes

@sam-b-rose sam-b-rose sam-b-rose approved these changes

@aaronccasanova aaronccasanova Awaiting requested review from aaronccasanova

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@aveline @sarahill @sam-b-rose