fix(select-with-tags): fixed styles (#543)

* fix(select-with-tags): fixed styles * fix(select-with-tags): added description Co-authored-by: Демичев Андрей Валерьевич <ADemichev@alfabank.ru> Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com>
core-ds · Mar 1, 2021 · 206db51 · 206db51
1 parent f62eca5
commit 206db51
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`SelectWithTags Display tests should match snapshot 1`] = `
               class="input"
             >
               <div
-                class="contentWrapper"
+                class="contentWrapper contentWrapperVertical"
               >
                 <input
                   aria-autocomplete="list"
@@ -82,7 +82,7 @@ exports[`SelectWithTags Display tests should match snapshot with selected tags 1
               class="input"
             >
               <div
-                class="contentWrapper hasTags"
+                class="contentWrapper hasTags contentWrapperVertical"
               >
                 <button
                   class="component xs checked tag"

diff --git a/packages/select-with-tags/src/components/tag-list/component.tsx b/packages/select-with-tags/src/components/tag-list/component.tsx
@@ -174,6 +174,13 @@ export const TagList: FC<FieldProps & FormControlProps & TagListOwnProps> = ({
 
     const filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
 
+    /**
+     * Флаг который позволит добавлять класс с вертикальными
+     * отступами если элементы не помещаются в один ряд,
+     * для того чтобы не менялась высота инпута
+     */
+    const shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !label);
+
     return (
         <div
             ref={wrapperRef}
@@ -203,6 +210,7 @@ export const TagList: FC<FieldProps & FormControlProps & TagListOwnProps> = ({
                     className={cn(styles.contentWrapper, {
                         [styles.hasLabel]: Boolean(label),
                         [styles.hasTags]: selectedMultiple.length > 0,
+                        [styles.contentWrapperVertical]: shouldAddVerticalMargin,
                     })}
                     ref={contentWrapperRef}
                 >

diff --git a/packages/select-with-tags/src/components/tag-list/index.module.css b/packages/select-with-tags/src/components/tag-list/index.module.css
@@ -5,11 +5,26 @@
 }
 
 .component.m .contentWrapper {
-    padding: var(--gap-m) var(--gap-m);
+    padding: var(--gap-m) var(--gap-s);
 }
 
 .component.s .contentWrapper {
-    padding: var(--gap-s) var(--gap-m);
+    padding: var(--gap-s) var(--gap-s);
+}
+
+.component.l .contentWrapperVertical {
+    padding-top: var(--gap-l);
+    padding-bottom: var(--gap-l);
+}
+
+.component.m .contentWrapperVertical {
+    padding-top: var(--gap-s);
+    padding-bottom: var(--gap-s);
+}
+
+.component.s .contentWrapperVertical {
+    padding-top: var(--gap-xs);
+    padding-bottom: var(--gap-xs);
 }
 
 .component .contentWrapper {
@@ -18,6 +33,11 @@
     width: 100%;
     margin: var(--gap-2xs-neg);
 
+    &:not(.contentWrapperVertical):not(.hasLabel) {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
     &.hasLabel {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
@@ -93,12 +113,17 @@
 }
 
 .component.s .label {
-    top: 4px;
-    left: 16px;
+    top: 5px;
+    left: 12px;
 }
 
 .component.m .label {
-    top: 6px;
+    top: 8px;
+    left: 12px;
+}
+
+.component.l .label {
+    top: 14px;
     left: 16px;
 }