feat: add explicit readonly prop to TextInput

gravity-ui · Aug 13, 2024 · cf37fc9 · cf37fc9
1 parent 4a14815
commit cf37fc9
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 3 deletions.
diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md
@@ -260,7 +260,8 @@ LANDING_BLOCK-->
 | onUpdate        | Fires when the input’s value is changed by the user. Provides new value as an callback's argument                       |                              `function`                               |                 |
 | pin             | The control's border view                                                                                               |                               `string`                                | `'round-round'` |
 | placeholder     | Text that appears in the control when it has no value set                                                               |                               `string`                                |                 |
-| qa              | Test ID attribute (`data-qa`)                                                                                           |                               `string`                                |                 |
+| qa              | Test ID attribute (`data-qa`)                                                                                           |                               `string`                                |
+| readOnly        | Indicates that the user cannot change control's value                                                                   |                               `boolean`                               |     `false`     |
 | rightContent    | User`s node rendered after the input node and clear button                                                              |                           `React.ReactNode`                           |                 |
 | size            | The size of the control                                                                                                 |                       `"s"` `"m"` `"l"` `"xl"`                        |      `"m"`      |
 | tabIndex        | The `tabindex` attribute of the control                                                                                 |                               `string`                                |                 |

diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
@@ -300,6 +300,11 @@ $block: '.#{variables.$ns}text-input';
         $append: false
     );
 
+    &_readonly {
+        --_--background-color: var(--g-color-base-generic-accent-disabled);
+        --_--border-color: transparent;
+    }
+
     &_disabled {
         --_--text-color: var(--g-color-text-hint);
         --_--background-color: var(--g-color-base-generic-accent-disabled);

diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
@@ -52,6 +52,8 @@ export type TextInputProps = BaseInputControlProps<HTMLInputElement> & {
     endContent?: React.ReactNode;
     /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */
     note?: React.ReactNode;
+    /** Indicates that the user cannot change control's value */
+    readOnly?: boolean;
 };
 export type TextInputPin = InputControlPin;
 export type TextInputSize = InputControlSize;
@@ -68,7 +70,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             value,
             defaultValue,
             label,
-            disabled = false,
+            disabled: originalDisabled,
+            readOnly: originalReadOnly,
             hasClear = false,
             error,
             errorMessage: errorMessageProp,
@@ -89,6 +92,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             onUpdate,
             onChange,
         } = props;
+        const disabled = originalDisabled ?? originalControlProps?.disabled;
+        const readOnly = originalReadOnly ?? originalControlProps?.readOnly;
 
         const {errorMessage, errorPlacement, validationState} = errorPropsMapper({
             error,
@@ -110,7 +115,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside';
         const isErrorIconVisible =
             validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside';
-        const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
+        const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue);
         const isStartContentVisible = Boolean(startContent);
         const isEndContentVisible = Boolean(endContent);
         const isAutoCompleteOff =
@@ -197,6 +202,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
                     {
                         view,
                         size,
+                        readonly: readOnly,
                         disabled,
                         state,
                         pin: view === 'clear' ? undefined : pin,

diff --git a/src/components/controls/TextInput/TextInputControl.tsx b/src/components/controls/TextInput/TextInputControl.tsx
@@ -25,6 +25,7 @@ export function TextInputControl(props: Props) {
         defaultValue,
         autoFocus,
         disabled,
+        readOnly,
         onChange,
         onFocus,
         onBlur,
@@ -54,6 +55,7 @@ export function TextInputControl(props: Props) {
             onKeyUp={onKeyUp}
             onKeyPress={onKeyPress}
             disabled={disabled ?? controlProps.disabled}
+            readOnly={readOnly ?? controlProps.readOnly}
         />
     );
 }
diff --git a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
@@ -45,6 +45,12 @@ export const CustomThemeShowcase = () => {
                     errorPlacement="inside"
                 />
                 <TextInput {...textInputProps} placeholder="disabled" disabled />
+                <TextInput
+                    {...textInputProps}
+                    placeholder="disabled"
+                    value="readonlyValue"
+                    readOnly
+                />
                 <TextInput {...textInputProps} placeholder="clear" hasClear />
                 <TextInput
                     {...textInputProps}
@@ -82,6 +88,12 @@ export const CustomThemeShowcase = () => {
                     errorPlacement="inside"
                 />
                 <TextInput {...textInputProps} placeholder="disabled" disabled />
+                <TextInput
+                    {...textInputProps}
+                    placeholder="disabled"
+                    value="readonlyValue"
+                    readOnly
+                />
                 <TextInput {...textInputProps} placeholder="clear" hasClear />
                 <TextInput
                     {...textInputProps}

diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
@@ -84,6 +84,12 @@ export function TextInputShowcase() {
                         />
                     </div>
                     <TextInput {...textInputProps} placeholder="disabled" disabled />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="readonly"
+                        value="readonlyValue"
+                        readOnly
+                    />
                     <TextInput {...textInputProps} placeholder="clear" hasClear />
                     <TextInput
                         {...textInputProps}
@@ -128,6 +134,13 @@ export function TextInputShowcase() {
                         />
                     </div>
                     <TextInput {...textInputProps} placeholder="disabled" label={LABEL} disabled />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="readonly"
+                        value="readonlyValue"
+                        label={LABEL}
+                        readOnly
+                    />
                     <TextInput {...textInputProps} placeholder="clear" label={LABEL} hasClear />
                     <TextInput
                         {...textInputProps}
@@ -234,6 +247,17 @@ export function TextInputShowcase() {
                         }
                         disabled
                     />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="readonly"
+                        type={additionalContentExmpleInputType}
+                        value="readonlyValue"
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        readOnly
+                    />
                     <TextInput
                         {...textInputProps}
                         placeholder="clear"