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

refactor(item): remove deprecated apis (#29102)

Browse Source 
BREAKING CHANGE:

- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
This commit is contained in:
Liam DeBeasi
2024-03-07 11:37:40 +00:00
committed by GitHub
parent 6852719077
commit 743f517fec
60 changed files with 21 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
core/src/components/label/label.md.scss
View File

@ -52,65 +52,6 @@
@include transform(translateY(50%), scale(.75));
}
/**
* When translating the label inside of an ion-item with `fill="outline"`,
* add pseudo-elements to imitate fieldset-like padding without shifting the label
*/
:host-context(.item-fill-outline.ion-focused).label-floating,
:host-context(.item-fill-outline.item-has-focus).label-floating,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-fill-outline.item-has-value).label-floating {
@include transform(translateY(-6px), scale(.75));
position: relative;
max-width: min-content;
background-color: $item-md-background;
overflow: visible;
// Places the label on top of the item outline
z-index: 3;
&::before,
&::after {
position: absolute;
width: $item-md-fill-outline-label-padding;
height: 100%;
background-color: $item-md-background;
content: "";
}
&::before {
/* stylelint-disable property-disallowed-list */
left: calc(-1 * #{$item-md-fill-outline-label-padding});
/* stylelint-enable property-disallowed-list */
}
&::after {
/* stylelint-disable property-disallowed-list */
right: calc(-1 * #{$item-md-fill-outline-label-padding});
/* stylelint-enable property-disallowed-list */
}
}
:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating {
@include transform(translateX(#{$item-md-fill-outline-label-translate-x}), translateY(-6px), scale(.75));
}
:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl {
@include transform(translateX(calc(-1 * #{$item-md-fill-outline-label-translate-x})), translateY(-6px), scale(.75));
}
:host-context(.ion-focused).label-stacked:not(.ion-color),
:host-context(.ion-focused).label-floating:not(.ion-color),
:host-context(.item-has-focus).label-stacked:not(.ion-color),
@ -125,23 +66,11 @@
color: #{current-color(contrast)};
}
:host-context(.item-fill-solid.ion-focused.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-solid.ion-focused.ion-color).label-floating:not(.ion-color),
:host-context(.item-fill-outline.ion-focused.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-outline.ion-focused.ion-color).label-floating:not(.ion-color),
:host-context(.item-fill-solid.item-has-focus.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-solid.item-has-focus.ion-color).label-floating:not(.ion-color),
:host-context(.item-fill-outline.item-has-focus.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-outline.item-has-focus.ion-color).label-floating:not(.ion-color) {
color: #{current-color(base)};
}
:host-context(.ion-invalid.ion-touched).label-stacked:not(.ion-color),
:host-context(.ion-invalid.ion-touched).label-floating:not(.ion-color) {
color: var(--highlight-color-invalid);
}
// MD Typography
// --------------------------------------------------

7
core/src/components/label/label.scss
View File

@ -22,13 +22,6 @@
box-sizing: border-box;
}
// TODO(FW-5289): remove
:host-context(.item-legacy) {
white-space: nowrap;
overflow: hidden;
}
:host(.ion-color) {
color: current-color(base);
}