Skip to content

Commit b31ecbb

Browse files
fix(input, textarea, select): use consistent sizes (#28390)
aIssue number: resolves #28388 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> We added a `min-height: 56px` to the input, textarea, and select components for MD mode. However, these were added for the outline/solid style inputs to align with the Material Design spec: https://material-components.github.io/material-components-web-catalog/#/component/text-field They should not apply to regular inputs in an item. The end result is inconsistently sized items when used with non-control items. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Non-filled and non-stacked/floating label controls are now have a minimum height of 44px. There should be **no changes** to the following types of controls: 1. iOS controls (all variants) 2. MD filled controls 3. MD stacked controls ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.5.2-dev.11697818830.1a33c881` --------- Co-authored-by: ionitron <[email protected]>
1 parent dc94ae0 commit b31ecbb

File tree

228 files changed

+63
-86
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

228 files changed

+63
-86
lines changed

core/src/components/input/input.ios.scss

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,6 @@
2828
height: 18px;
2929
}
3030

31-
// Input Wrapper
32-
// ----------------------------------------------------------------
33-
34-
:host(:not(.legacy-input)) {
35-
min-height: 44px;
36-
}
37-
38-
/**
39-
* Since the label sits on top of the element,
40-
* the component needs to be taller otherwise the
41-
* label will appear too close to the input text.
42-
*/
43-
:host(.input-label-placement-floating),
44-
:host(.input-label-placement-stacked) {
45-
min-height: 56px;
46-
}
47-
48-
4931
// Input - Disabled
5032
// ----------------------------------------------------------------
5133
// The input, label, helper text, char counter and placeholder

core/src/components/input/input.md.outline.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
--border-radius: 4px;
99
--padding-start: 16px;
1010
--padding-end: 16px;
11+
12+
min-height: 56px;
1113
}
1214

1315
:host(.input-fill-outline.input-shape-round) {

core/src/components/input/input.md.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,6 @@
6060
letter-spacing: .0333333333em;
6161
}
6262

63-
// Input Wrapper
64-
// ----------------------------------------------------------------
65-
66-
:host(:not(.legacy-input)) {
67-
min-height: 56px;
68-
}
69-
7063
// Input Label
7164
// ----------------------------------------------------------------
7265

core/src/components/input/input.md.solid.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
--border-radius: 4px;
1010
--padding-start: 16px;
1111
--padding-end: 16px;
12+
13+
min-height: 56px;
1214
}
1315

1416
/**

core/src/components/input/input.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,23 @@
101101
--highlight-color-focused: #{current-color(base)};
102102
}
103103

104+
// Input Wrapper
105+
// ----------------------------------------------------------------
106+
107+
:host(:not(.legacy-input)) {
108+
min-height: 44px;
109+
}
110+
111+
/**
112+
* Since the label sits on top of the element,
113+
* the component needs to be taller otherwise the
114+
* label will appear too close to the input text.
115+
*/
116+
:host(.input-label-placement-floating),
117+
:host(.input-label-placement-stacked) {
118+
min-height: 56px;
119+
}
120+
104121
// Native Text Input
105122
// --------------------------------------------------
106123

73 Bytes
-140 Bytes
-57 Bytes
72 Bytes
-140 Bytes

0 commit comments

Comments
 (0)