Update TextField disabled and readOnly styles

.changeset/clever-kiwis-agree.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `readOnly` prop to `Labelled` component

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;

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 ? (

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);
     }
   }
 

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}>