Small input's height consistent with other small field elements (#2281)

iTwin · Oct 4, 2024 · 1b654e6 · 1b654e6
1 parent 7130252
commit 1b654e6
Show file tree

Hide file tree

Showing 24 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/hip-seals-study.md b/.changeset/hip-seals-study.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+`iui-input` with "small" size now has the same height as other field elements with "small" size (e.g. `iui-button`).
diff --git a/.changeset/spotty-gorillas-care.md b/.changeset/spotty-gorillas-care.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Inputs (e.g. `<Input>`, `<LabeledInput>`, etc.) with "small" size now have the same height as other field elements with "small" size (e.g. `<Button>`).
diff --git a/...maps_reference/iTwinUI_color-picker_Advanced_dark_0_demo-advanced_0_desktop.png b/...maps_reference/iTwinUI_color-picker_Advanced_dark_0_demo-advanced_0_desktop.png
diff --git a/...s_reference/iTwinUI_color-picker_Advanced_hc_dark_0_demo-advanced_0_desktop.png b/...s_reference/iTwinUI_color-picker_Advanced_hc_dark_0_demo-advanced_0_desktop.png
diff --git a/..._reference/iTwinUI_color-picker_Advanced_hc_light_0_demo-advanced_0_desktop.png b/..._reference/iTwinUI_color-picker_Advanced_hc_light_0_demo-advanced_0_desktop.png
diff --git a/...aps_reference/iTwinUI_color-picker_Advanced_light_0_demo-advanced_0_desktop.png b/...aps_reference/iTwinUI_color-picker_Advanced_light_0_demo-advanced_0_desktop.png
diff --git a/...or-picker_State_focus_color_dot_dark_0_demo-advanced-interactions_0_desktop.png b/...or-picker_State_focus_color_dot_dark_0_demo-advanced-interactions_0_desktop.png
diff --git a/...picker_State_focus_color_dot_hc_dark_0_demo-advanced-interactions_0_desktop.png b/...picker_State_focus_color_dot_hc_dark_0_demo-advanced-interactions_0_desktop.png
diff --git a/...icker_State_focus_color_dot_hc_light_0_demo-advanced-interactions_0_desktop.png b/...icker_State_focus_color_dot_hc_light_0_demo-advanced-interactions_0_desktop.png
diff --git a/...r-picker_State_focus_color_dot_light_0_demo-advanced-interactions_0_desktop.png b/...r-picker_State_focus_color_dot_light_0_demo-advanced-interactions_0_desktop.png
diff --git a/...reference/iTwinUI_information-panel_Type_default_dark_0_demo-edit_0_desktop.png b/...reference/iTwinUI_information-panel_Type_default_dark_0_demo-edit_0_desktop.png
diff --git a/...erence/iTwinUI_information-panel_Type_default_hc_dark_0_demo-edit_0_desktop.png b/...erence/iTwinUI_information-panel_Type_default_hc_dark_0_demo-edit_0_desktop.png
diff --git a/...rence/iTwinUI_information-panel_Type_default_hc_light_0_demo-edit_0_desktop.png b/...rence/iTwinUI_information-panel_Type_default_hc_light_0_demo-edit_0_desktop.png
diff --git a/...eference/iTwinUI_information-panel_Type_default_light_0_demo-edit_0_desktop.png b/...eference/iTwinUI_information-panel_Type_default_light_0_demo-edit_0_desktop.png
diff --git a/...s_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png b/...s_reference/iTwinUI_input_Type_Without_Label_dark_0_demo-no-label_0_desktop.png
diff --git a/...eference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png b/...eference/iTwinUI_input_Type_Without_Label_hc_dark_0_demo-no-label_0_desktop.png
diff --git a/...ference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png b/...ference/iTwinUI_input_Type_Without_Label_hc_light_0_demo-no-label_0_desktop.png
diff --git a/..._reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png b/..._reference/iTwinUI_input_Type_Without_Label_light_0_demo-no-label_0_desktop.png
diff --git a/...t-workshop/cypress-visual-screenshots/baseline/ColorPicker.test.ts-Advanced.png b/...t-workshop/cypress-visual-screenshots/baseline/ColorPicker.test.ts-Advanced.png
diff --git a/...workshop/cypress-visual-screenshots/baseline/ColorPicker.test.ts-With Alpha.png b/...workshop/cypress-visual-screenshots/baseline/ColorPicker.test.ts-With Alpha.png
diff --git a/...workshop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Basic.png b/...workshop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Basic.png
diff --git a/...hop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Horizontal.png b/...hop/cypress-visual-screenshots/baseline/InformationPanel.test.ts-Horizontal.png
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Input.test.ts-Small.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Input.test.ts-Small.png
diff --git a/packages/itwinui-css/src/input/input.scss b/packages/itwinui-css/src/input/input.scss
@@ -4,7 +4,7 @@
 
 @mixin iui-input {
   inline-size: 100%;
-  line-height: var(--iui-size-l);
+  line-height: var(--_iui-input-line-height, var(--iui-size-l));
   appearance: none;
   padding-block: var(--_iui-input-padding-block);
   padding-inline: var(--iui-size-s);
@@ -33,6 +33,7 @@
 @mixin iui-input-size($size: medium) {
   @if $size == small {
     --_iui-input-padding-block: 0;
+    --_iui-input-line-height: var(--iui-size-m);
   }
 
   @if $size == medium {