From 02af0fed4c23a0327a12b2d1c9441144d0eeb170 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Thu, 21 Sep 2023 10:23:20 -0400
Subject: [PATCH] [CL-113] add readonly styles to bitInput (#6220)

* add readonly styles and story

* only add style to input & textarea
---
 .../src/form-field/form-field.stories.ts       | 18 ++++++++++++++++++
 libs/components/src/input/input.directive.ts   |  1 +
 2 files changed, 19 insertions(+)

diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts
index 4c85a18607..305b514266 100644
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -157,6 +157,24 @@ export const Disabled: Story = {
   args: {},
 };
 
+export const Readonly: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-form-field>
+        <bit-label>Input</bit-label>
+        <input bitInput value="Foobar" readonly />
+      </bit-form-field>
+
+      <bit-form-field>
+        <bit-label>Textarea</bit-label>
+        <textarea bitInput rows="4" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
+      </bit-form-field>
+    `,
+  }),
+  args: {},
+};
+
 export const InputGroup: Story = {
   render: (args) => ({
     props: args,
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index 60589208d5..b9f71ff8d5 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -44,6 +44,7 @@ export class BitInputDirective implements BitFormFieldControl {
       "focus:tw-ring-primary-700",
       "focus:tw-z-10",
       "disabled:tw-bg-secondary-100",
+      "[&:is(input,textarea):read-only]:tw-bg-secondary-100",
     ].filter((s) => s != "");
   }