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

BREAKING CHANGE: size L changed to size XL
core-ds · Mar 2, 2021 · ea43560 · ea43560
1 parent 523b96f
commit ea43560
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/packages/tag/src/Component.stories.mdx b/packages/tag/src/Component.stories.mdx
@@ -6,7 +6,7 @@ import Icon from '@alfalab/icons-glyph/CopyMIcon';
 import { Tag } from './Component';
 import { name, version } from '../package.json';
 
-export const SIZES = ['xs', 's', 'm', 'l'];
+export const SIZES = ['xs', 's', 'm', 'l', 'xl'];
 
 
 <Meta

diff --git a/packages/tag/src/Component.tsx b/packages/tag/src/Component.tsx
@@ -16,7 +16,7 @@ export type TagProps = Omit<NativeProps, 'onClick'> & {
     /**
      * Размер компонента
      */
-    size?: 'xs' | 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
 
     /**
      * Слот слева

diff --git a/packages/tag/src/index.module.css b/packages/tag/src/index.module.css
@@ -32,7 +32,7 @@
     font-family: var(--font-family);
     text-decoration: none;
     border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
-    border-radius: var(--tag-border-radius);
+    border-radius: 99px;
     background-color: var(--tag-background-color);
     transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
     box-sizing: border-box;
@@ -99,9 +99,8 @@
     min-width: 60px;
     min-height: 32px;
     padding: var(--gap-2xs) var(--gap-m);
-    border-radius: 32px;
     font-size: 14px;
-    line-height: 18px;
+    line-height: 20px;
     font-weight: normal;
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -115,7 +114,6 @@
     min-width: 80px;
     min-height: 48px;
     padding: var(--gap-2xs) var(--gap-m);
-    border-radius: 48px;
     font-size: 16px;
     line-height: 20px;
     font-weight: normal;
@@ -132,7 +130,6 @@
     min-width: 96px;
     min-height: 56px;
     padding: var(--gap-2xs) var(--gap-xl);
-    border-radius: 56px;
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
@@ -142,17 +139,27 @@
 }
 
 .l {
+    @mixin action_primary_large;
+    min-width: 120px;
+    min-height: 64px;
+    padding: var(--gap-2xs) var(--gap-2xl);
+
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
+        Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
+        height: 64px;
+    }
+}
+
+.xl {
+    @mixin action_primary_large;
     min-width: 120px;
-    min-height: 68px;
+    min-height: 72px;
     padding: var(--gap-2xs) var(--gap-2xl);
-    border-radius: 68px;
-    font-size: 18px;
-    line-height: 22px;
-    font-weight: 500;
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
-        height: 68px;
+        height: 72px;
     }
 }