Merge branch 'main' into steph/ccp-select

.changeset/early-buttons-agree.md

@@ -0,0 +1,7 @@
+---
+'@lg-chat/message-feedback': minor
+---
+
+[LG-4144](https://jira.mongodb.org/browse/LG-4144)
+
+Updates spacing in `InlineMessageFeedback` component due to updated styling in `TextArea` component

.changeset/pretty-toes-tan.md

@@ -0,0 +1,31 @@
+---
+'@leafygreen-ui/text-area': major
+---
+
+[LG-4144](https://jira.mongodb.org/browse/LG-4144)
+
+1. `FormField` styling changes apply to `TextArea`. [See style changes here](https://github.com/mongodb/leafygreen-ui/blob/main/packages/form-field/CHANGELOG.md#102)
+
+2. A default `errorMessage` of `'This input needs your attention'` will render below text area when state is invalid.
+
+3. A default `successMessage` of `'Success'` will render when state is valid. `successMessage` prop accepts a custom string.
+
+4. Disabled `TextArea` component no longer renders the `disabled` attribute and instead relies on `aria-disabled` and `readonly` attributes.
+
+The last change is made to ensure that disabled components are still focusable to users using keyboard navigation.
+
+For more on `aria-disabled` see the [documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
+
+#### Migration guide
+
+Functionally, migration should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.
+
+##### Jest/RTL
+
+Generally, only this repo should need to test that these components have a specific attribute. We recommend updating unit tests to check that some event was or was not called.
+
+However, there are cases where this may still need to be tested. In cases where a test checks `expect(textArea).toBeDisabled()`, you can replace and use [test harnesses](https://github.com/mongodb/leafygreen-ui/blob/main/packages/text-area/README.md#test-harnesses).
+
+##### Cypress
+
+Similar to unit tests, you should generally test functionality and not implementation details. However, to test this in Cypress replace any `cy.get(textArea).should('be.disabled');` checks with `cy.get(textArea).invoke('attr', 'aria-disabled').should('eq', 'true');`

chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.styles.ts

@@ -15,8 +15,12 @@ export const labelStyles = css`
   padding-top: 3px; // to match icon button padding
 `;
 
+export const textAreaStyle = css`
+  margin-top: ${spacing[100]}px;
+`;
+
 export const actionContainerStyles = css`
-  margin-top: ${spacing[2]}px;
+  margin-top: ${spacing[200]}px;
   display: flex;
   gap: ${spacing[2]}px;
   justify-content: end;

chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx

@@ -25,6 +25,7 @@ import {
   baseStyles,
   labelContainerStyles,
   labelStyles,
+  textAreaStyle,
 } from './InlineMessageFeedback.styles';
 import { InlineMessageFeedbackProps } from '.';
 
@@ -97,6 +98,7 @@ export const InlineMessageFeedback = forwardRef(
                 aria-labelledby={labelId}
                 /* eslint-disable-next-line jsx-a11y/no-autofocus */
                 autoFocus={true}
+                className={textAreaStyle}
                 {...textareaProps}
                 ref={(el: HTMLTextAreaElement) => {
                   if (textareaProps?.ref) {

packages/text-area/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "^4.0.8",
+    "@leafygreen-ui/form-field": "^1.0.1",
     "@leafygreen-ui/hooks": "^8.1.3",
     "@leafygreen-ui/icon": "^12.1.0",
     "@leafygreen-ui/lib": "^13.4.0",

packages/text-area/src/TextArea/TextArea.spec.tsx

@@ -5,12 +5,11 @@ import { axe } from 'jest-axe';
 
 import { getTestUtils } from '../utils';
 
-import { State, TextArea, TextAreaProps } from '.';
+import { TextArea, TextAreaProps } from '.';
 
 const onChange = jest.fn();
 
 const labelProp = 'Test Area Label';
-const errorMessage = 'This is an error message';
 const defaultProps = {
   className: 'test-text-area-class',
   description: 'This is the description',
@@ -85,30 +84,6 @@ describe('packages/text-area', () => {
     expect((textArea as HTMLTextAreaElement).value).toBe('a');
   });
 
-  describe('when the "state" prop is set to error, and an "errorMessage" is set', () => {
-    test('the error message appears in the DOM', () => {
-      const { isError, getErrorMessage } = renderTextArea({
-        state: State.Error,
-        errorMessage,
-      });
-
-      expect(isError()).toBe(true);
-      expect(getErrorMessage()).toHaveTextContent(errorMessage);
-    });
-  });
-
-  describe('when the "state" props is set to "none', () => {
-    test('error icon is not present', () => {
-      const { isError } = renderTextArea();
-      expect(isError()).toBe(false);
-    });
-
-    test('error message returns null', () => {
-      const { getErrorMessage } = renderTextArea();
-      expect(getErrorMessage()).not.toBeInTheDocument();
-    });
-  });
-
   test('onBlur is invoked when focus leaves the textarea', () => {
     const onBlur = jest.fn();
 
@@ -176,20 +151,6 @@ describe('packages/text-area', () => {
     });
   });
 
-  describe('disabled', () => {
-    test('is true', () => {
-      const { isDisabled } = renderTextArea({ disabled: true });
-
-      expect(isDisabled()).toBe(true);
-    });
-
-    test('is false', () => {
-      const { isDisabled } = renderTextArea();
-
-      expect(isDisabled()).toBe(false);
-    });
-  });
-
   describe('returns correct value', () => {
     test('when uncontrolled', () => {
       const { textArea, getInputValue } = renderTextArea();

packages/text-area/src/TextArea/TextArea.styles.ts

@@ -1,146 +1,18 @@
 import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  focusRing,
-  fontFamilies,
-  fontWeights,
-  hoverRing,
-  spacing,
-  transitionDuration,
-} from '@leafygreen-ui/tokens';
+import { spacing } from '@leafygreen-ui/tokens';
 
-export const containerStyles = css`
+const TEXT_AREA_MIN_HEIGHT = 64;
+
+export const textAreaContainerStyles = css`
+  height: auto;
   display: flex;
-  flex-direction: column;
+  padding: 0;
 `;
 
-export const textAreaStyle = css`
-  font-family: ${fontFamilies.default};
+export const textAreaStyles = css`
   width: 100%;
-  min-height: ${spacing[6]}px;
-  resize: none;
-  margin: 0;
-  padding: 8px 12px 1px 12px;
-  font-size: 14px;
-  font-weight: ${fontWeights.regular};
-  line-height: 16px;
-  border: 1px solid;
-  border-radius: 6px;
-  transition: ${transitionDuration.default}ms ease-in-out;
-  transition-property: border-color, box-shadow;
-  margin-top: 4px;
-
-  &:focus {
-    outline: none;
-    border-color: transparent;
-    box-shadow: ${focusRing[Theme.Light].input};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-
-export const errorContainerStyle = css`
+  min-height: ${TEXT_AREA_MIN_HEIGHT}px;
   display: flex;
-  height: 20px;
-  margin-top: 5px;
-  align-items: center;
-  font-weight: ${fontWeights.regular};
-`;
-
-export const errorMessageLabelStyles = css`
-  line-height: 1;
-`;
-
-export const errorIconStyle = css`
-  margin-right: 3px;
+  resize: none;
+  padding: ${spacing[200]}px ${spacing[300]}px;
 `;
-
-interface ColorSets {
-  textArea: string;
-  errorBorder: string;
-  errorIcon: string;
-}
-
-export const colorSets: Record<Theme, ColorSets> = {
-  [Theme.Light]: {
-    textArea: css`
-      color: ${palette.gray.dark3};
-      background-color: ${palette.white};
-      border-color: ${palette.gray.base};
-
-      &:hover:not(:disabled):not(:focus) {
-        border-color: ${palette.gray.base};
-        box-shadow: ${hoverRing[Theme.Light].gray};
-      }
-
-      &:disabled {
-        color: ${palette.gray.base};
-        background-color: ${palette.gray.light2};
-        border-color: ${palette.gray.light1};
-
-        &::placeholder {
-          color: inherit;
-        }
-      }
-    `,
-
-    errorBorder: css`
-      border-color: ${palette.red.base};
-
-      &:hover:not(:disabled):not(:focus) {
-        border-color: ${palette.red.base};
-        box-shadow: ${hoverRing[Theme.Light].red};
-      }
-
-      &:disabled {
-        border-color: ${palette.gray.light1};
-      }
-    `,
-
-    errorIcon: css`
-      color: ${palette.red.base};
-    `,
-  },
-  [Theme.Dark]: {
-    textArea: css`
-      color: ${palette.gray.light3};
-      background-color: ${palette.gray.dark4};
-      border-color: ${palette.gray.base};
-
-      &:hover:not(:disabled):not(:focus) {
-        border-color: ${palette.gray.base};
-        box-shadow: ${hoverRing[Theme.Dark].gray};
-      }
-
-      &:disabled {
-        color: ${palette.gray.dark1};
-        background-color: ${palette.gray.dark3};
-        border-color: ${palette.gray.dark2};
-
-        &::placeholder {
-          color: inherit;
-        }
-      }
-    `,
-
-    errorBorder: css`
-      border-color: ${palette.red.light1};
-
-      &:hover:not(:disabled):not(:focus) {
-        border-color: ${palette.red.light1};
-        box-shadow: ${hoverRing[Theme.Dark].red};
-      }
-
-      &:disabled {
-        border-color: ${palette.gray.dark2};
-      }
-    `,
-
-    errorIcon: css`
-      color: ${palette.red.light1};
-    `,
-  },
-};