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

Co-authored-by: Eric Bailey <ericwbailey@users.noreply.github.com>
Co-authored-by: Actions Auto Build <actions@github.com>

.changeset/brown-grapes-swim.md

@@ -0,0 +1,6 @@
+---
+"@primer/css": patch
+---
+
+- Adding readonly styles
+- Fixing focus background color for inset field 

docs/src/stories/rails-form-framework/TextInput.stories.jsx

@@ -146,6 +146,13 @@ export default {
       table: {
         category: 'Input'
       }
+    },
+    readOnly: {
+      description: 'readonly styles',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Input'
+      }
     }
   }
 }
@@ -173,7 +180,8 @@ export const InputTemplate = ({
   caption,
   validation,
   trailingActionDivider,
-  validationStatus
+  validationStatus,
+  readOnly
 }) => (
   <>
     <div className={clsx('FormControl', fullWidth && 'FormControl--fullWidth')}>
@@ -212,6 +220,7 @@ export const InputTemplate = ({
             placeholder={placeholder}
             id="input-id"
             type="text"
+            readonly={readOnly ? 'true' : undefined}
             className={clsx(
               'FormControl-input',
               size && `${size}`,
@@ -253,6 +262,7 @@ export const InputTemplate = ({
           id="input-id"
           type="text"
           disabled={disabled ? 'true' : undefined}
+          readonly={readOnly ? 'true' : undefined}
           className={clsx(
             'FormControl-input',
             size && `${size}`,
@@ -307,5 +317,6 @@ Playground.args = {
   visuallyHidden: false,
   validation: '',
   trailingActionDivider: false,
-  validationStatus: 0
+  validationStatus: 0,
+  readOnly: false
 }

src/forms/FormControl.scss

@@ -133,6 +133,10 @@
     }
   }
 
+  &[readonly] {
+    background-color: var(--color-input-disabled-bg);
+  }
+
   ::placeholder {
     color: var(--color-fg-subtle);
     opacity: 1;
@@ -161,6 +165,11 @@
 
   &.FormControl-inset {
     background-color: var(--color-canvas-inset);
+
+    &:focus-visible,
+    &:focus {
+      background-color: var(--color-canvas-default);
+    }
   }
 
   &.FormControl-monospace {