feat: add explicit readonly prop to TextArea

gravity-ui · Aug 13, 2024 · 3a91e65 · 3a91e65
1 parent cf37fc9
commit 3a91e65
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md
@@ -239,6 +239,7 @@ LANDING_BLOCK-->
 | pin             | The control's border view                                                                                                         |                      `string`                       | `"round-round"` |
 | placeholder     | Text that appears in the control when no value is set                                                                             |                      `string`                       |                 |
 | qa              | Test id attribute (`data-qa`)                                                                                                     |                      `string`                       |                 |
+| readOnly        | Indicates that the user cannot change control's value                                                                             |                      `boolean`                      |     `false`     |
 | rows            | The number of visible text lines for the control. If unspecified, the hight will be calculated automatically based on the content |                      `number`                       |                 |
 | size            | The control's size                                                                                                                |              `"s"` `"m"` `"l"` `"xl"`               |      `"m"`      |
 | tabIndex        | The control's `tabindex` attribute                                                                                                |                      `string`                       |                 |

diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
@@ -172,6 +172,11 @@ $block: '.#{variables.$ns}text-area';
         $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/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
@@ -32,6 +32,8 @@ export type TextAreaProps = BaseInputControlProps<HTMLTextAreaElement> & {
     maxRows?: number;
     /** 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 TextAreaPin = InputControlPin;
 export type TextAreaSize = InputControlSize;
@@ -47,7 +49,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
             name,
             value,
             defaultValue,
-            disabled = false,
+            disabled: originalDisabled,
+            readOnly: originalReadOnly,
             hasClear = false,
             error,
             errorMessage: errorMessageProp,
@@ -63,6 +66,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
             onUpdate,
             onChange,
         } = props;
+        const disabled = originalDisabled ?? controlProps?.disabled;
+        const readOnly = originalReadOnly ?? controlProps?.readOnly;
 
         const {errorMessage, validationState} = errorPropsMapper({
             error,
@@ -79,7 +84,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
         const innerId = useUniqId();
 
         const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage);
-        const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
+        const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue);
         const id = originalId || innerId;
 
         const errorMessageId = useUniqId();
@@ -150,6 +155,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
                     {
                         view,
                         size,
+                        readonly: readOnly,
                         disabled,
                         state,
                         pin: view === 'clear' ? undefined : pin,

diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -45,6 +45,7 @@ export function TextAreaControl(props: Props) {
         maxRows,
         autoFocus,
         disabled,
+        readOnly,
         onChange,
         onFocus,
         onBlur,
@@ -112,6 +113,7 @@ export function TextAreaControl(props: Props) {
             onKeyUp={onKeyUp}
             onKeyPress={onKeyPress}
             disabled={disabled ?? controlProps.disabled}
+            readOnly={readOnly ?? controlProps.readOnly}
         />
     );
 }
diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
@@ -62,6 +62,13 @@ export function TextAreaShowcase() {
                         />
                     </div>
                     <TextArea {...textAreaProps} placeholder="disabled" disabled rows={2} />
+                    <TextArea
+                        {...textAreaProps}
+                        placeholder="readonly"
+                        value="readonly value"
+                        readOnly
+                        rows={2}
+                    />
                     <TextArea {...textAreaProps} placeholder="rows = 4 & clear" hasClear rows={4} />
                     <TextArea
                         {...textAreaProps}
@@ -113,6 +120,13 @@ value`.trim()}
                 <TextArea {...textAreaProps} />
                 <TextArea {...textAreaProps} value={undefined} defaultValue="has clear" hasClear />
                 <TextArea {...textAreaProps} disabled />
+                <TextArea
+                    {...textAreaProps}
+                    placeholder="readonly"
+                    value="readonly value"
+                    readOnly
+                    rows={2}
+                />
                 <TextArea {...textAreaProps} error="Error message" />
             </div>
             <div className={b('custom-theme')}>
@@ -127,6 +141,13 @@ value`.trim()}
                 <TextArea {...textAreaProps} />
                 <TextArea {...textAreaProps} value={undefined} defaultValue="has clear" hasClear />
                 <TextArea {...textAreaProps} disabled />
+                <TextArea
+                    {...textAreaProps}
+                    placeholder="readonly"
+                    value="readonly value"
+                    readOnly
+                    rows={2}
+                />
                 <TextArea {...textAreaProps} error="Error message" />
             </div>
         </div>