feat(textarea): changed size L (72 → 64), added size XL (72)

BREAKING CHANGE: size L changed to size XL
core-ds · Mar 2, 2021 · 175e360 · 175e360
1 parent af5dc6a
commit 175e360
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/packages/textarea/src/Component.stories.mdx b/packages/textarea/src/Component.stories.mdx
@@ -19,7 +19,7 @@ import { name, version } from '../package.json';
     <Textarea
         autosize={boolean('autosize', true)}
         block={boolean('block', false)}
-        size={select('size', ['s', 'm', 'l'], 's')}
+        size={select('size', ['s', 'm', 'l', 'xl'], 's')}
         disabled={boolean('disabled', false)}
         placeholder={text('placeholder', '')}
         resize={select('resize', ['none', 'vertical'], 'none')}

diff --git a/packages/textarea/src/Component.tsx b/packages/textarea/src/Component.tsx
@@ -36,7 +36,7 @@ export type TextareaProps = Omit<
     /**
      * Размер компонента
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
 
     /**
      * Отображение ошибки

diff --git a/packages/textarea/src/index.module.css b/packages/textarea/src/index.module.css
@@ -5,12 +5,15 @@
     --textarea-s-min-height: var(--form-control-s-min-height);
     --textarea-m-min-height: var(--form-control-m-min-height);
     --textarea-l-min-height: var(--form-control-l-min-height);
+    --textarea-xl-min-height: var(--form-control-xl-min-height);
     --textarea-s-padding-top: 14px;
     --textarea-m-padding-top: 18px;
-    --textarea-l-padding-top: 24px;
+    --textarea-l-padding-top: 22px;
+    --textarea-xl-padding-top: 24px;
     --textarea-s-filled-margin-top: 23px;
     --textarea-m-filled-margin-top: 28px;
-    --textarea-l-filled-margin-top: 34px;
+    --textarea-l-filled-margin-top: 32px;
+    --textarea-xl-filled-margin-top: 34px;
     --textarea-s-filled-min-height: calc(
         var(--textarea-s-min-height) - var(--textarea-s-filled-margin-top)
     );
@@ -20,6 +23,9 @@
     --textarea-l-filled-min-height: calc(
         var(--textarea-l-min-height) - var(--textarea-l-filled-margin-top)
     );
+    --textarea-xl-filled-min-height: calc(
+        var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
+    );
 }
 
 .textarea {
@@ -53,6 +59,11 @@
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
+
+    &.xl {
+        padding-top: var(--textarea-xl-padding-top);
+        padding-bottom: var(--gap-xs);
+    }
 }
 
 .textarea::placeholder {
@@ -83,6 +94,10 @@
     &.l {
         min-height: var(--textarea-l-min-height);
     }
+
+    &.xl {
+        min-height: var(--textarea-xl-min-height);
+    }
 }
 
 /* DISABLED STATE */
@@ -135,4 +150,10 @@
         min-height: var(--textarea-l-filled-min-height);
         height: var(--textarea-l-filled-min-height);
     }
+
+    &.xl {
+        margin-top: var(--textarea-xl-filled-margin-top);
+        min-height: var(--textarea-xl-filled-min-height);
+        height: var(--textarea-xl-filled-min-height);
+    }
 }