Reduced small Select's content height to be consistent with small `…

…ComboBox` (#2362)
iTwin · Dec 10, 2024 · 78ae415 · 78ae415
1 parent ab3fd0d
commit 78ae415
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 2 deletions.
diff --git a/.changeset/forty-garlics-punch.md b/.changeset/forty-garlics-punch.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+`Select` elements with "small" size now have the same height of 24px as other input elements with the size of "small" such as `ComboBox`.
diff --git a/.changeset/large-colts-share.md b/.changeset/large-colts-share.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+`iui-select-button` now has the same height as other field elements with "small" size such as `iui-input`.
diff --git a/...ackstop/results/bitmaps_reference/iTwinUI_select_Sizes_dark_0_demo-sizes_0_.png b/...ackstop/results/bitmaps_reference/iTwinUI_select_Sizes_dark_0_demo-sizes_0_.png
diff --git a/...stop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_dark_0_demo-sizes_0_.png b/...stop/results/bitmaps_reference/iTwinUI_select_Sizes_hc_dark_0_demo-sizes_0_.png
diff --git a/...top/results/bitmaps_reference/iTwinUI_select_Sizes_hc_light_0_demo-sizes_0_.png b/...top/results/bitmaps_reference/iTwinUI_select_Sizes_hc_light_0_demo-sizes_0_.png
diff --git a/...ckstop/results/bitmaps_reference/iTwinUI_select_Sizes_light_0_demo-sizes_0_.png b/...ckstop/results/bitmaps_reference/iTwinUI_select_Sizes_light_0_demo-sizes_0_.png
diff --git a/...op/results/bitmaps_reference/iTwinUI_select_Type_Multi_dark_0_demo-multi_0_.png b/...op/results/bitmaps_reference/iTwinUI_select_Type_Multi_dark_0_demo-multi_0_.png
diff --git a/...results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_dark_0_demo-multi_0_.png b/...results/bitmaps_reference/iTwinUI_select_Type_Multi_hc_dark_0_demo-multi_0_.png
diff --git a/...esults/bitmaps_reference/iTwinUI_select_Type_Multi_hc_light_0_demo-multi_0_.png b/...esults/bitmaps_reference/iTwinUI_select_Type_Multi_hc_light_0_demo-multi_0_.png
diff --git a/...p/results/bitmaps_reference/iTwinUI_select_Type_Multi_light_0_demo-multi_0_.png b/...p/results/bitmaps_reference/iTwinUI_select_Type_Multi_light_0_demo-multi_0_.png
diff --git a/packages/itwinui-css/src/select/select.scss b/packages/itwinui-css/src/select/select.scss
@@ -8,7 +8,7 @@
   padding-block: var(--_iui-select-padding-block);
   padding-inline: var(--iui-size-s);
   user-select: none;
-  line-height: var(--iui-size-l);
+  line-height: var(--_iui-select-line-height);
   cursor: pointer;
   @include iui-select-size;
 
@@ -51,7 +51,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    min-block-size: var(--iui-size-l);
+    min-block-size: var(--_iui-select-block-size);
     color: inherit;
   }
 
@@ -67,14 +67,20 @@
 @mixin iui-select-size($size: medium) {
   @if $size == small {
     --_iui-select-padding-block: 0;
+    --_iui-select-block-size: var(--iui-size-m);
+    --_iui-select-line-height: var(--iui-size-m);
   }
 
   @if $size == medium {
     --_iui-select-padding-block: var(--iui-size-2xs);
+    --_iui-select-block-size: var(--iui-size-l);
+    --_iui-select-line-height: var(--iui-size-l);
   }
 
   @if $size == large {
     --_iui-select-padding-block: var(--iui-size-xs);
+    --_iui-select-block-size: var(--iui-size-l);
+    --_iui-select-line-height: var(--iui-size-l);
   }
 }