Merge pull request #413 from vrk-kpa/feature/textarea-adjustments

[Feature] Textarea adjustments
vrk-kpa · Dec 7, 2020 · 2fd08c9 · 2fd08c9
2 parents de3ba04 + c381c40
commit 2fd08c9
Show file tree

Hide file tree

Showing 13 changed files with 367 additions and 341 deletions.
diff --git a/src/components/Form/Textarea.tsx b/src/components/Form/Textarea.tsx
diff --git a/src/components/index.ts b/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 {

diff --git a/src/components/utils/aria.ts b/src/components/utils/aria.ts
diff --git a/src/core/Form/Textarea/Textarea.baseStyles.tsx b/src/core/Form/Textarea/Textarea.baseStyles.tsx
@@ -15,21 +15,14 @@ export const baseStyles = withSuomifiTheme(
       display: flex;
       flex-direction: column;
       color: ${theme.colors.blackBase};
+      width: 290px;
 
-      & .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 +58,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,11 +76,11 @@ export const baseStyles = withSuomifiTheme(
         & .fi-textarea_textarea {
           border: 2px solid ${theme.colors.alertBase};
         }
-
-        & .fi-textarea_statusText {
-          color: ${theme.colors.alertBase};
-        }
       }
     }
+
+    &.fi-textarea--full-width {
+      width: 100%;
+    }
   `,
 );
diff --git a/src/core/Form/Textarea/Textarea.md b/src/core/Form/Textarea/Textarea.md
@@ -55,3 +55,22 @@ import { Textarea } from 'suomifi-ui-components';
   </Textarea>
 </>;
 ```
+
+```js
+import { Textarea } from 'suomifi-ui-components';
+
+<>
+  <Textarea labelText="Textarea with 100% width" fullWidth>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+    vestibulum iaculis augue, sit amet tincidunt ipsum.
+  </Textarea>
+
+  <Textarea
+    labelText="Textarea with fixed width of 250px"
+    containerProps={{ style: { width: '250px' } }}
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+    vestibulum iaculis augue, sit amet tincidunt ipsum.
+  </Textarea>
+</>;
+```