feat(text-input): support read-only variant

COMPONENT_INDEX.md

@@ -4072,7 +4072,8 @@ None.
 | warn        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state    |
 | warnText    | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                |
 | required    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required   |
-| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use inline version           |
+| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the inline variant       |
+| readonly    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the read-only variant    |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -10416,7 +10416,17 @@
         {
           "name": "inline",
           "kind": "let",
-          "description": "Set to `true` to use inline version",
+          "description": "Set to `true` to use the inline variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "readonly",
+          "kind": "let",
+          "description": "Set to `true` to use the read-only variant",
           "type": "boolean",
           "value": "false",
           "isFunction": false,

docs/src/pages/components/TextInput.svx

@@ -23,10 +23,14 @@ components: ["TextInput", "TextInputSkeleton"]
 
 <TextInput light labelText="User name" placeholder="Enter user name..." />
 
-### Inline
+### Inline variant
 
 <TextInput inline labelText="User name" placeholder="Enter user name..." />
 
+### Read-only variant
+
+<TextInput readonly labelText="User name" value="IBM" />
+
 ### Extra-large size
 
 <TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

src/TextInput/TextInput.svelte

@@ -59,12 +59,16 @@
   /** Set to `true` to mark the field as required */
   export let required = false;
 
-  /** Set to `true` to use inline version */
+  /** Set to `true` to use the inline variant */
   export let inline = false;
 
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
   import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
 
   const ctx = getContext("Form");
 
@@ -77,6 +81,8 @@
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
   class:bx--text-input-wrapper--inline="{inline}"
+  class:bx--text-input-wrapper--light="{light}"
+  class:bx--text-input-wrapper--readonly="{readonly}"
   on:click
   on:mouseover
   on:mouseenter
@@ -142,6 +148,9 @@
             bx--text-input__invalid-icon--warning"
         />
       {/if}
+      {#if readonly}
+        <EditOff16 class="bx--text-input__readonly-icon" />
+      {/if}
       <input
         bind:this="{ref}"
         data-invalid="{invalid || undefined}"
@@ -155,6 +164,7 @@
         type="{type}"
         value="{value}"
         required="{required}"
+        readonly="{readonly}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"

types/TextInput/TextInput.d.ts

@@ -104,10 +104,16 @@ export interface TextInputProps
   required?: boolean;
 
   /**
-   * Set to `true` to use inline version
+   * Set to `true` to use the inline variant
    * @default false
    */
   inline?: boolean;
+
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
 }
 
 export default class TextInput extends SvelteComponentTyped<