feat(TextField): add withReadOnlyStyle prop (#1924)

mondaycom · Feb 5, 2024 · 830c613 · 830c613
1 parent 90cd93a
commit 830c613
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/src/components/TextField/TextField.module.scss b/src/components/TextField/TextField.module.scss
@@ -69,6 +69,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--primary-text-color);
+
+  &.readOnly.withReadOnlyStyle {
+    background-color: var(--allgrey-background-color);
+    border: none;
+  }
 }
 
 .textField .inputWrapper .input.inputHover {

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -81,6 +81,10 @@ interface TextFieldProps extends VibeComponentProps {
   tabIndex?: number;
   name?: string;
   underline?: boolean;
+  /**
+   * Apply new style for read only, use along with `readonly` prop
+   */
+  withReadOnlyStyle?: boolean;
 }
 
 const TextField: VibeComponent<TextFieldProps, unknown> & {
@@ -131,7 +135,8 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
       secondaryDataTestId,
       tabIndex,
       underline = false,
-      name
+      name,
+      withReadOnlyStyle
     },
     ref
   ) => {
@@ -223,7 +228,10 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
             {/*eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}
             <input
               className={cx(className, styles.input, {
-                [styles.inputHasIcon]: !!hasIcon
+                [styles.inputHasIcon]: !!hasIcon,
+                [styles.readOnly]: readonly,
+                // TODO: use `readonly` prop next major instead of withReadOnlyStyle
+                [styles.withReadOnlyStyle]: withReadOnlyStyle
               })}
               placeholder={placeholder}
               autoComplete={autoComplete}

diff --git a/src/components/TextField/__stories__/TextField.stories.js b/src/components/TextField/__stories__/TextField.stories.js
@@ -35,6 +35,12 @@ export const Overview = {
     wrapperClassName: "monday-storybook-text-field_size",
     showCharCount: true,
     placeholder: "Placeholder text here"
+  },
+  parameters: {
+    controls: {
+      // TODO: remove exclusion when prop is removed in next major
+      exclude: ["withReadOnlyStyle"]
+    }
   }
 };
 

diff --git a/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap b/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap
@@ -171,7 +171,7 @@ exports[`TextField renders correctly when readonly 1`] = `
         aria-label=""
         aria-owns=""
         autoComplete="off"
-        className="input"
+        className="input readOnly"
         data-testid="text-field_input"
         disabled={false}
         id="input"