fix(core): DataList properly size emptyContent (#4856)

taiga-family · Jul 8, 2023 · a0208cf · a0208cf
1 parent 0d782cb
commit a0208cf
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/projects/core/components/data-list/data-list.style.less b/projects/core/components/data-list/data-list.style.less
@@ -1,4 +1,5 @@
 @import '../../styles/taiga-ui-local.less';
+@import './mixin.style.less';
 
 tui-data-list {
     --tui-data-list-padding: 0.25rem;
@@ -22,15 +23,23 @@ tui-data-list {
     &[data-list-size='s'] {
         /* stylelint-disable-next-line */
         --tui-data-list-margin: 0rem;
+
+        & > .t-empty {
+            .data-list-item('s');
+        }
+    }
+
+    &[data-list-size='m'] > .t-empty {
+        .data-list-item('m');
     }
 
     &[data-list-size='l'] {
         --tui-data-list-padding: 0.375rem;
         --tui-data-list-margin: 0.125rem;
-    }
 
-    & > .t-empty {
-        margin: 0.75rem 1rem;
+        & > .t-empty {
+            .data-list-item('l');
+        }
     }
 }
 

diff --git a/projects/core/components/data-list/mixin.style.less b/projects/core/components/data-list/mixin.style.less
@@ -0,0 +1,24 @@
+.data-list-item(@size: 'm') when (@size = 's'), (@size = 'm'), (@size = 'l') {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin: var(--tui-data-list-margin) 0;
+
+    & when (@size = 's') {
+        font: var(--tui-font-text-s);
+        min-height: 2rem;
+        padding: 0.3125rem 0.5rem;
+    }
+
+    & when (@size = 'm') {
+        font: var(--tui-font-text-s);
+        min-height: 2.5rem;
+        padding: 0.375rem 0.5rem;
+    }
+
+    & when (@size = 'l') {
+        font: var(--tui-font-text-m);
+        min-height: 2.75rem;
+        padding: 0.375rem 0.625rem;
+    }
+}
diff --git a/projects/core/components/data-list/option/option.style.less b/projects/core/components/data-list/option/option.style.less
@@ -1,23 +1,17 @@
 @import '../../../styles/taiga-ui-local.less';
+@import '../mixin.style.less';
 
 :host {
     .clearbtn();
     .transition(background);
-    display: flex;
-    align-items: center;
     justify-content: space-between;
     text-align: left;
-    box-sizing: border-box;
     color: var(--tui-text-01);
     border-radius: var(--tui-radius-s);
     outline: none;
     text-decoration: none;
     cursor: pointer;
     background-clip: padding-box;
-    font: var(--tui-font-text-s);
-    min-height: 2.5rem;
-    padding: 0.375rem 0.5rem;
-    margin: 0.125rem 0;
 
     &:disabled {
         opacity: var(--tui-disabled-opacity);
@@ -34,26 +28,17 @@
     :host-context([data-list-size='xs']),
     &[data-size='s'][data-size='s'],
     &[data-size='xs'][data-size='xs'] {
-        font: var(--tui-font-text-s);
-        min-height: 2rem;
-        padding: 0.3125rem 0.5rem;
-        margin: var(--tui-data-list-margin) 0;
+        .data-list-item('s');
     }
 
     :host-context([data-list-size='m']),
     &[data-size='m'][data-size='m'] {
-        font: var(--tui-font-text-s);
-        min-height: 2.5rem;
-        padding: 0.375rem 0.5rem;
-        margin: var(--tui-data-list-margin) 0;
+        .data-list-item('m');
     }
 
     :host-context([data-list-size='l']),
     &[data-size='l'][data-size='l'] {
-        font: var(--tui-font-text-m);
-        min-height: 2.75rem;
-        padding: 0.375rem 0.625rem;
-        margin: var(--tui-data-list-margin) 0;
+        .data-list-item('l');
     }
 }