From df9727810faa04d2cdf143b3ccc1e3e79fb92b99 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 16 May 2024 12:47:21 +0200
Subject: [PATCH] feat(Textarea): add shorthand sizes

---
 packages/css/textarea.css                                 | 6 +++---
 .../src/components/form/Textarea/Textarea.stories.tsx     | 2 +-
 packages/react/src/components/form/Textarea/Textarea.tsx  | 8 ++------
 .../react/src/components/form/Textarea/useTextarea.ts     | 6 +++++-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/css/textarea.css b/packages/css/textarea.css
index 79ae64f659..9fd10077d1 100644
--- a/packages/css/textarea.css
+++ b/packages/css/textarea.css
@@ -41,15 +41,15 @@
     resize: vertical;
   }
 
-  .fds-textarea--small .fds-textarea__input {
+  .fds-textarea--sm .fds-textarea__input {
     padding: var(--fds-spacing-2);
   }
 
-  .fds-textarea--medium .fds-textarea__input {
+  .fds-textarea--md .fds-textarea__input {
     padding: var(--fds-spacing-3);
   }
 
-  .fds-textarea--large .fds-textarea__input {
+  .fds-textarea--lg .fds-textarea__input {
     padding: var(--fds-spacing-4);
   }
 
diff --git a/packages/react/src/components/form/Textarea/Textarea.stories.tsx b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
index 3263923d4e..8b60fff987 100644
--- a/packages/react/src/components/form/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
@@ -17,7 +17,7 @@ export const Preview: Story = {
     label: 'Label',
     disabled: false,
     readOnly: false,
-    size: 'medium',
+    size: 'md',
     description: '',
     error: '',
     hideLabel: false,
diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
index e12fc77f77..c747471a7f 100644
--- a/packages/react/src/components/form/Textarea/Textarea.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -16,10 +16,6 @@ export type TextareaProps = {
   label?: ReactNode;
   /** Visually hides `label` and `description` (still available for screen readers)  */
   hideLabel?: boolean;
-  /** Changes field size and paddings
-   * @default medium
-   */
-  size?: 'small' | 'medium' | 'large';
   /**
    *  The characterLimit function calculates remaining characters based on `maxCount`
    *
@@ -30,7 +26,7 @@ export type TextareaProps = {
    *  Defaults to Norwegian if no labels are provided.
    */
   characterLimit?: CharacterLimitProps;
-} & Omit<FormFieldProps, 'size'> &
+} & FormFieldProps &
   TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /** Textarea field
@@ -57,7 +53,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       descriptionId,
       hasError,
       errorId,
-      size = 'medium',
+      size = 'md',
       readOnly,
     } = useTextarea(props);
 
diff --git a/packages/react/src/components/form/Textarea/useTextarea.ts b/packages/react/src/components/form/Textarea/useTextarea.ts
index 80788c5cb0..b544f2da47 100644
--- a/packages/react/src/components/form/Textarea/useTextarea.ts
+++ b/packages/react/src/components/form/Textarea/useTextarea.ts
@@ -4,6 +4,7 @@ import { useContext } from 'react';
 import type { FormField } from '../useFormField';
 import { useFormField } from '../useFormField';
 import { FieldsetContext } from '../Fieldset/FieldsetContext';
+import { getSize } from '../../../utilities/getSize';
 
 import type { TextareaProps } from './Textarea';
 
@@ -20,10 +21,13 @@ export const useTextarea: UseTextarea = (props) => {
   const fieldset = useContext(FieldsetContext);
   const { inputProps, readOnly, ...rest } = useFormField(props, 'textarea');
 
+  const size =
+    fieldset?.size ?? (getSize(props.size ?? 'md') as FormField['size']);
+
   return {
     ...rest,
     readOnly,
-    size: fieldset?.size ?? props.size,
+    size,
     textareaProps: {
       ...inputProps,
       readOnly,