feat(react): add readonly variant styles

wso2 · Oct 17, 2024 · 875aa8f · 875aa8f
1 parent 531d101
commit 875aa8f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/packages/react/src/components/TextField/TextField.stories.mdx b/packages/react/src/components/TextField/TextField.stories.mdx
@@ -1,7 +1,7 @@
 import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
 import dedent from 'ts-dedent';
-import StoryConfig from '../../../.storybook/story-config.ts';
 import TextField from './TextField.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
 
 export const meta = {
   component: TextField,
@@ -58,21 +58,32 @@ A component that wraps an input filed and an input label.
   <Story name="Basic" args={{label: 'Username', placeholder: 'Enter your username'}} />
 </Canvas>
 
+### Readonly
+
+Readonly variation of the text field.
+
+<Canvas>
+  <Story name="Readonly" args={{InputProps: {readOnly: true}, defaultValue: 'johndoe', label: 'Username'}} />
+</Canvas>
+
 ### Password
 
 <Canvas>
-  <Story name="Password" args={{
-    label: 'Password', 
-    placeholder: 'Enter your password', 
-    type: 'password', 
-    id: 'password', 
-    criteria: [
-      'More than 8 characters', 
-      'Atleast one uppercase and lowercase letter', 
-      'Atleast one number', 
-      'Atleast one of the symbols #@!$%'
-    ]
-    }} />
+  <Story
+    name="Password"
+    args={{
+      criteria: [
+        'More than 8 characters',
+        'Atleast one uppercase and lowercase letter',
+        'Atleast one number',
+        'Atleast one of the symbols #@!$%',
+      ],
+      id: 'password',
+      label: 'Password',
+      placeholder: 'Enter your password',
+      type: 'password',
+    }}
+  />
 </Canvas>
 
 ## Usage

diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
@@ -188,7 +188,7 @@ const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> = forw
         {type === TextFieldInputTypes.INPUT_PASSWORD ? (
           <PasswordFieldWithCriteria ref={ref} id={id} variant={variant} type={type} {...rest} />
         ) : (
-          <MuiTextField ref={ref} id={id} variant={variant} type={type} {...rest} />
+          <MuiTextField ref={ref} id={id} variant={variant} className="OxygenTextField-root" type={type} {...rest} />
         )}
       </div>
     );

diff --git a/packages/react/src/components/TextField/text-field.scss b/packages/react/src/components/TextField/text-field.scss
@@ -16,8 +16,16 @@
  * under the License.
  */
 
-.oxygen-text-field {
-  /* Add Styles */
+:root {
+  --oxygen-palette-ReadOnlyInput-bg: #e9ecef;
+}
+
+.OxygenTextField-root {
+  .Mui-readOnly,
+  .MuiInputBase-readOnly {
+    cursor: default;
+    background: var(--oxygen-palette-ReadOnlyInput-bg);
+  }
 }
 
 .oxygen-text-field-tooltip {