Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-4105-…

…codemod-scaffold

.changeset/clever-laws-smile.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-field': patch
+---
+
+Correctly sets the `readOnly` prop in the `useFormFieldProps` hook. Previously, `readOnly` was only added to an input if `disabled` was true. Now, passing the `readOnly` prop adds it to the resulting input.

.changeset/eight-clocks-laugh.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/text-input': patch
+---
+
+Passes `readOnly` prop to `<FormField>` so that it correctly sets the `readOnly` prop.

packages/date-picker/src/DatePicker.stories.tsx

@@ -142,6 +142,11 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
     </div>
   );
 };
+LiveExample.parameters = {
+  chromatic: {
+    disableSnapshots: true,
+  },
+};
 
 export const Uncontrolled: StoryFn<typeof DatePicker> = props => {
   return <DatePicker {...props} />;

packages/form-field/src/FormField.spec.tsx

@@ -544,6 +544,49 @@ describe('packages/form-field', () => {
     expect(label.getAttribute('for')).toBe(id);
   });
 
+  describe('readonly', () => {
+    test('input has readonly prop', () => {
+      const { getByTestId } = render(
+        <FormField label="Label" data-testid="form-field" readOnly>
+          <FormFieldInputContainer>
+            <div data-testid="input" />
+          </FormFieldInputContainer>
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('readonly');
+    });
+
+    test('disabled overrides readOnly prop', () => {
+      const { getByTestId } = render(
+        <FormField
+          label="Label"
+          data-testid="form-field"
+          readOnly={false}
+          disabled
+        >
+          <FormFieldInputContainer>
+            <div data-testid="input" />
+          </FormFieldInputContainer>
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).toHaveAttribute('readonly');
+    });
+
+    test('input does not have readonly prop', () => {
+      const { getByTestId } = render(
+        <FormField label="Label" data-testid="form-field" readOnly={false}>
+          <FormFieldInputContainer>
+            <div data-testid="input" />
+          </FormFieldInputContainer>
+        </FormField>,
+      );
+      const input = getByTestId('input');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('Types', () => {
     render(

packages/form-field/src/FormField/FormField.types.ts

@@ -98,4 +98,9 @@ export type FormFieldProps = Omit<HTMLElementProps<'div'>, 'children'> &
      * Whether or not the field is labeled as optional.
      */
     optional?: boolean;
+
+    /**
+     * Whether or not the field is readonly.
+     */
+    readOnly?: boolean;
   };

packages/form-field/src/FormField/useFormFieldProps.ts

@@ -54,7 +54,7 @@ export const useFormFieldProps = ({
     'aria-describedby': ariaDescribedby,
     'aria-label': ariaLabel,
     'aria-disabled': disabled,
-    readOnly: disabled,
+    readOnly: rest.readOnly ? rest.readOnly : disabled,
     'aria-invalid': ariaInvalid,
   };
 

packages/text-input/src/TextInput/TextInput.tsx

@@ -59,6 +59,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       state = State.None,
       type = TextInputType.Text,
       id,
+      readOnly,
       value: controlledValue,
       className,
       darkMode: darkModeProp,
@@ -158,6 +159,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       optional,
       size,
       state,
+      readOnly,
       ...ariaProps,
     } as const;