[Feature] Textarea adjustments

src/components/index.ts

@@ -28,7 +28,6 @@ export {
 export { Expander, ExpanderProps } from './Expander/Expander';
 export { Paragraph, ParagraphProps } from './Paragraph/Paragraph';
 export { Text, TextProps } from './Text/Text';
-export { Textarea, TextareaProps } from './Form/Textarea';
 export { VisuallyHidden } from './Visually-hidden/Visually-hidden';
 export { RadioButton, RadioButtonProps } from './Form/RadioButton';
 export {

src/core/Form/Textarea/Textarea.baseStyles.tsx

@@ -16,20 +16,12 @@ export const baseStyles = withSuomifiTheme(
       flex-direction: column;
       color: ${theme.colors.blackBase};
 
-      & .fi-textarea_label {
-        ${font({ theme })('actionElementInnerTextBold')};
-        color: ${theme.colors.blackBase};
+      & .fi-label-text_label-span {
+        margin-bottom: 0;
       }
 
-      & .fi-textarea_optionalText {
-        ${theme.typography.bodyTextSmall};
-      }
-
-      & .fi-textarea_hintText {
-        display: block;
-        color: ${theme.colors.blackBase};
-        ${theme.typography.bodyTextSmall};
-        word-break: break-word;
+      & .fi-hint-text {
+        margin-bottom: 0;
       }
 
       & .fi-textarea_textarea-element-container {
@@ -65,13 +57,9 @@ export const baseStyles = withSuomifiTheme(
         }
       }
 
-      & .fi-textarea_statusText {
+      & .fi-status-text {
         display: block;
-        margin-top: ${theme.spacing.xxs};
-        font-size: 14px;
         line-height: 18px;
-        font-weight: 600;
-        word-break: break-word;
       }
 
       &.fi-textarea--disabled {
@@ -87,10 +75,6 @@ export const baseStyles = withSuomifiTheme(
         & .fi-textarea_textarea {
           border: 2px solid ${theme.colors.alertBase};
         }
-
-        & .fi-textarea_statusText {
-          color: ${theme.colors.alertBase};
-        }
       }
     }
   `,

src/core/Form/Textarea/Textarea.test.tsx

@@ -31,7 +31,20 @@ describe('props', () => {
     it('should have label text with correct class', () => {
       const { getByText } = render(DefaultTextareaComponent);
       const label = getByText('Label here');
-      expect(label).toHaveClass('fi-textarea_label');
+      expect(label).toHaveClass('fi-label-text_label-span');
+    });
+
+    it('has user given aria-describedby on textarea', () => {
+      const { getByRole } = render(
+        <Textarea
+          labelText="Label here"
+          aria-describedby="external-component-id"
+        />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        'external-component-id',
+      );
     });
 
     it(
@@ -109,7 +122,7 @@ describe('props', () => {
   });
 
   describe('labelMode', () => {
-    it('hidden: should hide visually-hidden classname   ', () => {
+    it('hidden: should hide label; label to have visually-hidden classname', () => {
       const { getByText } = render(
         <Textarea labelText="To be hidden" labelMode="hidden" />,
       );
@@ -147,7 +160,17 @@ describe('props', () => {
         <Textarea labelText="label" hintText="Example hint text" />,
       );
       const hintText = getByText('Example hint text');
-      expect(hintText).toHaveClass('fi-textarea_hintText');
+      expect(hintText).toHaveClass('fi-hint-text');
+    });
+
+    it('will be added to input aria-describedby', () => {
+      const { getByRole } = render(
+        <Textarea id="123" labelText="label" hintText="Example hint text" />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        '123-hintText',
+      );
     });
   });
 
@@ -157,7 +180,21 @@ describe('props', () => {
         <Textarea labelText="label" statusText="EROR EROR" />,
       );
       const statusText = getByText('EROR EROR');
-      expect(statusText).toHaveClass('fi-textarea_statusText');
+      expect(statusText).toHaveClass('fi-status-text');
+    });
+
+    it('will be added to input aria-describedby', () => {
+      const { getByRole } = render(
+        <Textarea
+          id="123"
+          labelText="label"
+          statusText="Example status text"
+        />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        '123-statusText',
+      );
     });
   });
 
@@ -176,7 +213,7 @@ describe('props', () => {
         <Textarea labelText="label" optionalText="Optional" />,
       );
       const optionalText = getByText('(Optional)');
-      expect(optionalText).toHaveClass('fi-textarea_optionalText');
+      expect(optionalText).toHaveClass('fi-label-text_optionalText');
     });
   });
 
@@ -213,6 +250,7 @@ describe('props', () => {
       expect(textarea).toHaveStyle('resize: none');
     });
   });
+
   describe('name', () => {
     it('has the given name attribute', () => {
       const { getByRole } = render(
@@ -222,4 +260,13 @@ describe('props', () => {
       expect(textarea.name).toBe('test-name');
     });
   });
+
+  describe('id', () => {
+    it('has the given id', () => {
+      const { getByRole } = render(
+        <Textarea labelText="label" id="custom-id" />,
+      );
+      expect(getByRole('textbox')).toHaveAttribute('id', 'custom-id');
+    });
+  });
 });