Update TextField disabled and readOnly styles (#9761)

### WHY are these changes introduced? Part of Shopify/archive-polaris-backlog-2024#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
Shopify · Jul 20, 2023 · ce3e516 · ce3e516
1 parent e45ac63
commit ce3e516
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/.changeset/clever-kiwis-agree.md b/.changeset/clever-kiwis-agree.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `readOnly` prop to `Labelled` component
diff --git 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
@@ -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.scss b/polaris-react/src/components/TextField/TextField.scss
@@ -123,12 +123,31 @@ $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;
+    }
+  }
+
+  &.focus {
+    // stylelint-disable-next-line selector-max-class -- se23
+    > .Backdrop {
+      #{$se23} & {
+        background-color: var(--p-color-bg-transparent-disabled-experimental);
+        border-color: transparent;
+      }
+    }
   }
 }
 
@@ -143,7 +162,7 @@ $spinner-icon-size: 12px;
 
     #{$se23} & {
       border: none;
-      background-color: var(--p-color-bg-disabled);
+      background-color: var(--p-color-bg-transparent-disabled-experimental);
     }
   }
 

diff --git 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}
     >
       <Connected left={connectedLeft} right={connectedRight}>
         <div className={className} onClick={handleClick}>