Skip to content

Commit 3f00e69

Browse files
fix(select): ensure select sizes are respected when the label is empty (#30087)
Issue number: internal --------- <!-- 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. --> Currently, the experience planned for ionic select has the sizes fixed and should be respected even when the labels are not presented. https://stackblitz.com/edit/ku3fqz?file=src%2Fmain.tsx ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - When select is used with Ionic-theme, the select should respect the height sizes established. - https://stackblitz.com/edit/ku3fqz-2vnasdmx?file=package-lock.json,package.json - https://ionic-framework-cdtf7hsqy-ionic1.vercel.app/src/components/select/test/size?ionic:theme=ionic ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> --------- Co-authored-by: Maria Hutt <[email protected]>
1 parent b7da1e8 commit 3f00e69

13 files changed

+50
-21
lines changed

core/src/components/select/select.common.scss

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,6 @@
5757
cursor: pointer;
5858
}
5959

60-
/**
61-
* Since the label sits on top of the element,
62-
* the component needs to be taller otherwise the
63-
* label will appear too close to the select text.
64-
*/
65-
:host(.select-label-placement-floating),
66-
:host(.select-label-placement-stacked) {
67-
min-height: 56px;
68-
}
69-
7060
:host(.ion-color) {
7161
--highlight-color-focused: #{current-color(base)};
7262
}
@@ -221,17 +211,6 @@ button {
221211
overflow: hidden;
222212
}
223213

224-
:host(.select-label-placement-stacked) .select-wrapper-inner,
225-
:host(.select-label-placement-floating) .select-wrapper-inner {
226-
/**
227-
* When using a stacked/floating label, the inner wrapper is
228-
* stacked vertically under the label container. This line
229-
* ensures that the inner wrapper fills all the remaining height
230-
* of the component.
231-
*/
232-
flex-grow: 1;
233-
}
234-
235214
// Select Highlight
236215
// ----------------------------------------------------------------
237216

core/src/components/select/select.native.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,27 @@
118118
max-width: calc(100% / #{$form-control-label-stacked-scale});
119119
}
120120

121+
/**
122+
* Since the label sits on top of the element,
123+
* the component needs to be taller otherwise the
124+
* label will appear too close to the select text.
125+
*/
126+
:host(.select-label-placement-floating),
127+
:host(.select-label-placement-stacked) {
128+
min-height: 56px;
129+
}
130+
131+
/**
132+
* When using a stacked/floating label, the inner wrapper is
133+
* stacked vertically under the label container. This line
134+
* ensures that the inner wrapper fills all the remaining height
135+
* of the component.
136+
*/
137+
:host(.select-label-placement-stacked) .select-wrapper-inner,
138+
:host(.select-label-placement-floating) .select-wrapper-inner {
139+
flex-grow: 1;
140+
}
141+
121142
// Start/End Slots
122143
// ----------------------------------------------------------------
123144

core/src/components/select/test/size/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,29 @@ <h2>Small</h2>
4747
<ion-select size="small" fill="outline" label="Label" label-placement="stacked" value="filledText">
4848
<ion-select-option value="filledText">Filled text</ion-select-option>
4949
</ion-select>
50+
<ion-select size="small" fill="outline" label="" label-placement="stacked" value="filledText2">
51+
<ion-select-option value="filledText2">Filled text</ion-select-option>
52+
</ion-select>
5053
</div>
5154

5255
<div class="grid-item">
5356
<h2>Medium</h2>
5457
<ion-select size="medium" fill="outline" label="Label" label-placement="stacked" value="filledText">
5558
<ion-select-option value="filledText">Filled text</ion-select-option>
5659
</ion-select>
60+
<ion-select size="medium" fill="outline" label="" label-placement="stacked" value="filledText2">
61+
<ion-select-option value="filledText2">Filled text</ion-select-option>
62+
</ion-select>
5763
</div>
5864

5965
<div class="grid-item">
6066
<h2>Large</h2>
6167
<ion-select size="large" fill="outline" label="Label" label-placement="stacked" value="filledText">
6268
<ion-select-option value="filledText">Filled text</ion-select-option>
6369
</ion-select>
70+
<ion-select size="large" fill="outline" label="" label-placement="stacked" value="filledText2">
71+
<ion-select-option value="filledText2">Filled text</ion-select-option>
72+
</ion-select>
6473
</div>
6574
</div>
6675
</ion-content>

core/src/components/select/test/size/select.e2e.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,26 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screens
2828

2929
await expect(select).toHaveScreenshot(screenshot(`select-size-${size}`));
3030
});
31+
32+
test(`${size} - should not have visual regressions when label is unset`, async ({ page }) => {
33+
await page.setContent(
34+
`
35+
<ion-select
36+
size="${size}"
37+
fill="outline"
38+
label-placement="stacked"
39+
value="filledText"
40+
>
41+
<ion-select-option value="filledText">Filled text</ion-select-option>
42+
</ion-select>
43+
`,
44+
config
45+
);
46+
47+
const select = page.locator('ion-select');
48+
49+
await expect(select).toHaveScreenshot(screenshot(`select-size-${size}-unset-label`));
50+
});
3151
});
3252
});
3353
});
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)