javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): modern component takes up full line (#26670)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-24 15:21:33 -05:00
committed by GitHub
parent cfde2fdf4f
commit 4d24b328e2
4 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/select/select.ios.scss
View File

@ -4,6 +4,7 @@
// iOS Select // iOS Select
// -------------------------------------------------- // --------------------------------------------------
// TODO FW-3194 - Remove this
:host(.legacy-select) { :host(.legacy-select) {
--padding-top: #{$select-ios-padding-top}; --padding-top: #{$select-ios-padding-top};
--padding-end: #{$select-ios-padding-end}; --padding-end: #{$select-ios-padding-end};
@ -11,6 +12,7 @@
--padding-start: #{$select-ios-padding-start}; --padding-start: #{$select-ios-padding-start};
} }
// TODO FW-3194 - Move this to host
:host(:not(.legacy-select)) { :host(:not(.legacy-select)) {
min-height: 44px; min-height: 44px;
} }

2
core/src/components/select/select.md.scss
View File

@ -11,6 +11,7 @@
--border-color: #{$item-md-border-color}; --border-color: #{$item-md-border-color};
} }
// TODO FW-3194 - Remove this
:host(.legacy-select) { :host(.legacy-select) {
--padding-top: #{$select-md-padding-top}; --padding-top: #{$select-md-padding-top};
--padding-end: #{$select-md-padding-end}; --padding-end: #{$select-md-padding-end};
@ -18,6 +19,7 @@
--padding-start: #{$select-md-padding-start}; --padding-start: #{$select-md-padding-start};
} }
// TODO FW-3194 - Move this to host
:host(:not(.legacy-select)) { :host(:not(.legacy-select)) {
min-height: 56px; min-height: 56px;
} }

13
core/src/components/select/select.scss
View File

@ -55,10 +55,16 @@
z-index: $z-index-item-input; z-index: $z-index-item-input;
} }
// TODO FW-3194 - Move this to host
:host(:not(.legacy-select)) {
width: 100%;
}
:host(.ion-color) { :host(.ion-color) {
--highlight-color-focused: #{current-color(base)}; --highlight-color-focused: #{current-color(base)};
} }
// TODO FW-3194 - Remove this
:host(.legacy-select) { :host(.legacy-select) {
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@ -71,17 +77,13 @@
// Select Used in ion-item // Select Used in ion-item
// -------------------------------------------------- // --------------------------------------------------
// TODO FW-3194 - Remove this
:host(.in-item.legacy-select) { :host(.in-item.legacy-select) {
position: static; position: static;
max-width: 45%; max-width: 45%;
} }
:host(.in-item:not(.legacy-select)) {
width: 100%;
height: 100%;
}
:host(.select-disabled) { :host(.select-disabled) {
opacity: .4; opacity: .4;
pointer-events: none; pointer-events: none;
@ -97,6 +99,7 @@
opacity: var(--placeholder-opacity); opacity: var(--placeholder-opacity);
} }
// TODO FW-3194 - Remove this
:host(.legacy-select) label { :host(.legacy-select) label {
@include input-cover(); @include input-cover();

1
core/src/components/select/select.tsx
View File

@ -751,6 +751,7 @@ export class Select implements ComponentInterface {
); );
} }
// TODO FW-3194 - Remove this
private renderLegacySelect() { private renderLegacySelect() {
if (!this.hasLoggedDeprecationWarning) { if (!this.hasLoggedDeprecationWarning) {
printIonWarning( printIonWarning(