From cf37fc9fda4b0fc1a0204c5ac557e2fae94f69cf Mon Sep 17 00:00:00 2001 From: Olga Polikashina Date: Mon, 12 Aug 2024 17:10:11 +0300 Subject: [PATCH] feat: add explicit readonly prop to TextInput --- src/components/controls/TextInput/README.md | 3 ++- .../controls/TextInput/TextInput.scss | 5 ++++ .../controls/TextInput/TextInput.tsx | 10 ++++++-- .../controls/TextInput/TextInputControl.tsx | 2 ++ .../TextInputCustomThemeShowcase.tsx | 12 ++++++++++ .../__stories__/TextInputShowcase.tsx | 24 +++++++++++++++++++ 6 files changed, 53 insertions(+), 3 deletions(-) diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md index 9ebce52aab..f3da177c21 100644 --- 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 index 562a6d045a..e184723fd2 100644 --- 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 index 44b23f0027..3acfd153fd 100644 --- a/src/components/controls/TextInput/TextInput.tsx +++ b/src/components/controls/TextInput/TextInput.tsx @@ -52,6 +52,8 @@ export type TextInputProps = BaseInputControlProps & { 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( value, defaultValue, label, - disabled = false, + disabled: originalDisabled, + readOnly: originalReadOnly, hasClear = false, error, errorMessage: errorMessageProp, @@ -89,6 +92,8 @@ export const TextInput = React.forwardRef( 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( 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( { 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 index a4e7adfbd5..46cc1ae287 100644 --- 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 index 26e90a8346..31a74784c1 100644 --- 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" /> + { errorPlacement="inside" /> + + + + } + rightContent={ + + } + readOnly + />