feat(FormField, Input): add read-only styles with fallback text

livechat · Jan 24, 2025 · 67e2fb0 · 67e2fb0
1 parent 0934708
commit 67e2fb0
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 17 deletions.
diff --git a/packages/react-components/src/components/FormField/FormField.stories.tsx b/packages/react-components/src/components/FormField/FormField.stories.tsx
@@ -1,9 +1,18 @@
 import { Info } from '@livechat/design-system-icons';
 import { Meta, StoryFn } from '@storybook/react';
 
+import { ReadOnlyFormFieldContextProvider } from '../../providers/ReadOnlyFormFieldProvider';
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+import { AutoComplete } from '../AutoComplete';
+import { Checkbox } from '../Checkbox';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { IInputProps } from '../Input/types';
+import { NumericInput } from '../NumericInput';
+import { Picker } from '../Picker';
+import { RadioButton } from '../RadioButton';
+import { TagInput } from '../TagInput';
+import { Textarea } from '../Textarea';
 
 import { FormField as FormFieldComponent, FormFieldProps } from './FormField';
 
@@ -94,8 +103,58 @@ export const TextFieldWithError: StoryFn<FormFieldProps> = () => (
   </FormFieldComponent>
 );
 
-export const TextFieldReadOnlyWithInput: StoryFn<FormFieldProps> = () => (
-  <FormFieldComponent labelText="Username" readonly>
-    <ExampleInput />
-  </FormFieldComponent>
+const ReadOnlyTemplate: StoryFn<FormFieldProps> = (args) => (
+  <ReadOnlyFormFieldContextProvider readOnly={args.readOnly}>
+    <div>
+      <StoryDescriptor title="WithInput">
+        <FormFieldComponent {...args}>
+          <ExampleInput value="" />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithPicker">
+        <FormFieldComponent {...args}>
+          <Picker onSelect={() => {}} options={[]} />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithTagInput">
+        <FormFieldComponent {...args}>
+          <TagInput onChange={() => {}} />
+        </FormFieldComponent>
+      </StoryDescriptor>
+
+      {/* // Those also? */}
+      <StoryDescriptor title="WithNumericInput">
+        <FormFieldComponent {...args}>
+          <NumericInput value="456" onChange={() => {}} />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithCheckbox">
+        <FormFieldComponent {...args}>
+          <Checkbox />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithTextarea">
+        <FormFieldComponent {...args}>
+          <Textarea />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithRadio">
+        <FormFieldComponent {...args}>
+          <RadioButton />
+          <RadioButton />
+        </FormFieldComponent>
+      </StoryDescriptor>
+      <StoryDescriptor title="WithAutocomplete">
+        <FormFieldComponent {...args}>
+          <AutoComplete />
+        </FormFieldComponent>
+      </StoryDescriptor>
+    </div>
+  </ReadOnlyFormFieldContextProvider>
 );
+
+export const TextFieldReadOnly = ReadOnlyTemplate.bind({});
+TextFieldReadOnly.args = {
+  labelText: 'My label',
+  readOnly: true,
+};
diff --git a/packages/react-components/src/components/FormField/FormField.tsx b/packages/react-components/src/components/FormField/FormField.tsx
@@ -51,7 +51,7 @@ export interface FormFieldProps {
   /**
    * Whether the form field is read-only
    */
-  readonly?: boolean;
+  readOnly?: boolean;
 }
 
 export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
@@ -64,7 +64,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
   labelFor,
   children,
   labelRightNode,
-  readonly = false,
+  readOnly = false,
 }) => {
   const childrenRef = React.useRef<HTMLDivElement>(null);
   const [labelHeight, setLabelHeight] = React.useState('auto');
@@ -88,7 +88,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
   });
 
   return (
-    <ReadOnlyFormFieldContextProvider readonly={readonly}>
+    <ReadOnlyFormFieldContextProvider readOnly={readOnly}>
       <div className={mergedClassNames}>
         {labelRightNode && inline && (
           <React.Fragment>
@@ -133,7 +133,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
                     className={styles[`${baseClass}__label-left-node`]}
                     htmlFor={labelFor}
                   >
-                    <Text as="span" size="sm" bold={readonly}>
+                    <Text as="span" size="sm">
                       {labelText}
                     </Text>
                   </label>

diff --git a/packages/react-components/src/components/Input/Input.module.scss b/packages/react-components/src/components/Input/Input.module.scss
@@ -82,7 +82,6 @@ $base-class: 'input';
   }
 
   &--read-only {
-    // TODO styles
     border: 0;
     background: none;
   }

diff --git a/packages/react-components/src/components/Input/Input.stories.tsx b/packages/react-components/src/components/Input/Input.stories.tsx
@@ -63,6 +63,9 @@ export const States = (): React.ReactElement => (
     <StoryDescriptor title="Disabled">
       <Input disabled={true} placeholder={placeholderText} />
     </StoryDescriptor>
+    <StoryDescriptor title="ReadOnly">
+      <Input readOnly value="My input test value" />
+    </StoryDescriptor>
   </>
 );
 
@@ -135,6 +138,13 @@ export const InputPromoStates = (): React.ReactElement => (
     <StoryDescriptor title="Disabled">
       <InputPromoComponent disabled={true} placeholder={placeholderText} />
     </StoryDescriptor>
+    <StoryDescriptor title="ReadOnly">
+      <InputPromoComponent
+        readOnly
+        placeholder={placeholderText}
+        value="My test value"
+      />
+    </StoryDescriptor>
   </>
 );
 

diff --git a/packages/react-components/src/components/Input/Input.tsx b/packages/react-components/src/components/Input/Input.tsx
@@ -47,12 +47,14 @@ export const InputComponent = React.forwardRef<
       mainClassName,
       isPromo = false,
       cropOnBlur = true,
+      noDataFallbackText = 'No data',
       ...inputProps
     },
     ref
   ) => {
     const innerRef = React.useRef<HTMLInputElement>(null);
-    const { readonly } = useReadOnlyFormFieldContext();
+    const { readOnly } = useReadOnlyFormFieldContext();
+    const computedReadOnly = readOnly || inputProps.readOnly;
 
     React.useImperativeHandle(ref, () => innerRef.current!, []);
     const [isFocused, setIsFocused] = React.useState(false);
@@ -65,7 +67,7 @@ export const InputComponent = React.forwardRef<
         [styles[`${baseClass}--focused`]]: isFocused,
         [styles[`${baseClass}--error`]]: error,
         [styles[`${baseClass}--crop`]]: cropOnBlur,
-        [styles[`${baseClass}--read-only`]]: readonly || inputProps.readOnly,
+        [styles[`${baseClass}--read-only`]]: computedReadOnly,
       },
       className
     );
@@ -81,6 +83,14 @@ export const InputComponent = React.forwardRef<
       innerRef.current?.focus();
     };
 
+    if (computedReadOnly) {
+      return (
+        <Text noMargin semiBold>
+          {inputProps.value || noDataFallbackText}
+        </Text>
+      );
+    }
+
     return (
       <Text
         as="div"
@@ -93,7 +103,7 @@ export const InputComponent = React.forwardRef<
         {shouldRenderLeftIcon && renderIcon(icon, disabled)}
         <input
           {...inputProps}
-          readOnly={readonly}
+          readOnly={computedReadOnly}
           ref={innerRef}
           onFocus={(e) => {
             setIsFocused(true);

diff --git a/packages/react-components/src/components/Input/types.ts b/packages/react-components/src/components/Input/types.ts
@@ -23,6 +23,10 @@ export interface IInputGlobalProps
    * Set to enable ellipsis
    */
   cropOnBlur?: boolean;
+  /**
+   * Set the text to display with read-only state when there is no data. Default to 'No data'
+   */
+  noDataFallbackText?: string;
 }
 
 export interface IInputProps extends IInputGlobalProps {

diff --git a/packages/react-components/src/providers/ReadOnlyFormFieldProvider.tsx b/packages/react-components/src/providers/ReadOnlyFormFieldProvider.tsx
@@ -2,25 +2,25 @@ import { ReactNode, createContext, useContext } from 'react';
 import type { FC } from 'react';
 
 interface ReadOnlyFormFieldContextValue {
-  readonly: boolean;
+  readOnly: boolean;
 }
 
 const ReadOnlyFormFieldContext = createContext<ReadOnlyFormFieldContextValue>({
-  readonly: false,
+  readOnly: false,
 });
 
 export interface ReadOnlyFormFieldContextProps {
-  readonly?: boolean;
+  readOnly?: boolean;
   children?: ReactNode;
 }
 
 export const ReadOnlyFormFieldContextProvider: FC<
   ReadOnlyFormFieldContextProps
-> = ({ children, readonly = false }) => {
+> = ({ children, readOnly = false }) => {
   return (
     <ReadOnlyFormFieldContext.Provider
       value={{
-        readonly,
+        readOnly,
       }}
     >
       {children}