From e9521a043d501216805028e500c4f59424363b1c Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 19 Jul 2023 10:28:16 -0700 Subject: [PATCH 1/5] TextField disabled and readonly styles --- .../src/components/TextField/TextField.scss | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss index e97930d6c7d..c6833f708d3 100644 --- a/polaris-react/src/components/TextField/TextField.scss +++ b/polaris-react/src/components/TextField/TextField.scss @@ -123,12 +123,21 @@ $spinner-icon-size: 12px; } } -.readOnly > .Backdrop { - background-color: var(--p-color-bg-disabled); +.readOnly { + > .Input { + #{$se23} & { + color: var(--p-color-text-subdued); + } + } - #{$se23} & { - // se23 -- specificity bump + > .Backdrop { background-color: var(--p-color-bg-disabled); + + #{$se23} & { + // se23 -- specificity bump + background-color: var(--p-color-bg-transparent-disabled-experimental); + border-color: transparent; + } } } @@ -143,7 +152,7 @@ $spinner-icon-size: 12px; #{$se23} & { border: none; - background-color: var(--p-color-bg-disabled); + background-color: var(--p-color-bg-transparent-disabled-experimental); } } From 3627d7ec03f896864b1dc656152becef1802cb20 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 19 Jul 2023 13:21:12 -0700 Subject: [PATCH 2/5] Update TextField readOnly focus state --- polaris-react/src/components/TextField/TextField.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss index c6833f708d3..3f18c2f3465 100644 --- a/polaris-react/src/components/TextField/TextField.scss +++ b/polaris-react/src/components/TextField/TextField.scss @@ -139,6 +139,15 @@ $spinner-icon-size: 12px; border-color: transparent; } } + + &.focus { + >.Backdrop { + #{$se23} & { + background-color: var(--p-color-bg-transparent-disabled-experimental); + border-color: transparent; + } + } + } } .disabled { From 534c68d7200b52f436fcc277ed881b0b8d48018b Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 19 Jul 2023 13:37:41 -0700 Subject: [PATCH 3/5] Update TextField readOnly label text color --- polaris-react/src/components/Labelled/Labelled.scss | 6 ++++++ polaris-react/src/components/Labelled/Labelled.tsx | 7 +++++++ polaris-react/src/components/TextField/TextField.tsx | 1 + 3 files changed, 14 insertions(+) diff --git a/polaris-react/src/components/Labelled/Labelled.scss b/polaris-react/src/components/Labelled/Labelled.scss index 21421717501..541d7e730a4 100644 --- a/polaris-react/src/components/Labelled/Labelled.scss +++ b/polaris-react/src/components/Labelled/Labelled.scss @@ -18,6 +18,12 @@ } } +.readOnly > .LabelWrapper { + #{$se23} & { + color: var(--p-color-text-subdued); + } +} + .LabelWrapper { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include text-breakword; diff --git a/polaris-react/src/components/Labelled/Labelled.tsx b/polaris-react/src/components/Labelled/Labelled.tsx index d8c60d1e831..43336291d8e 100644 --- a/polaris-react/src/components/Labelled/Labelled.tsx +++ b/polaris-react/src/components/Labelled/Labelled.tsx @@ -7,6 +7,7 @@ import {Label, labelID} from '../Label'; import type {LabelProps} from '../Label'; import {InlineError} from '../InlineError'; import {Text} from '../Text'; +import {useFeatures} from '../../utilities/features'; import styles from './Labelled.scss'; @@ -31,6 +32,8 @@ export interface LabelledProps { requiredIndicator?: boolean; /** Labels signify a disabled control */ disabled?: boolean; + /** Labels signify a readOnly control */ + readOnly?: boolean; } export function Labelled({ @@ -43,11 +46,15 @@ export function Labelled({ labelHidden, requiredIndicator, disabled, + readOnly, ...rest }: LabelledProps) { + const {polarisSummerEditions2023} = useFeatures(); + const className = classNames( labelHidden && styles.hidden, disabled && styles.disabled, + polarisSummerEditions2023 && readOnly && styles.readOnly, ); const actionMarkup = action ? ( diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx index 9270ccbd2a4..942022f8385 100644 --- a/polaris-react/src/components/TextField/TextField.tsx +++ b/polaris-react/src/components/TextField/TextField.tsx @@ -592,6 +592,7 @@ export function TextField({ helpText={helpText} requiredIndicator={requiredIndicator} disabled={disabled} + readOnly={readOnly} >
From 5c03d8cde26d6d3949e09953e99229db72a1f05f Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 19 Jul 2023 14:22:33 -0700 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=91=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/components/TextField/TextField.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss index 3f18c2f3465..69818ed8ce9 100644 --- a/polaris-react/src/components/TextField/TextField.scss +++ b/polaris-react/src/components/TextField/TextField.scss @@ -141,7 +141,8 @@ $spinner-icon-size: 12px; } &.focus { - >.Backdrop { + // stylelint-disable-next-line selector-max-class -- se23 + > .Backdrop { #{$se23} & { background-color: var(--p-color-bg-transparent-disabled-experimental); border-color: transparent; From 4ec06246586d0457fa5e60925847d1c79f7f4821 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 20 Jul 2023 09:13:03 -0700 Subject: [PATCH 5/5] changeset --- .changeset/clever-kiwis-agree.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clever-kiwis-agree.md diff --git a/.changeset/clever-kiwis-agree.md b/.changeset/clever-kiwis-agree.md new file mode 100644 index 00000000000..f602c1bcddf --- /dev/null +++ b/.changeset/clever-kiwis-agree.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added `readOnly` prop to `Labelled` component