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

fix(label): keep color when focused on a floating or stacked label (#18576)

Browse Source 
fixes #18531
This commit is contained in:
Vlad Topala
2020-10-07 20:32:15 +03:00
committed by GitHub
parent 6549330815
commit 992580a383
6 changed files with 101 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,11 +44,16 @@
@include transform(translateY(50%), scale(.75));
}
:host-context(.item-has-focus).label-stacked,
:host-context(.item-has-focus).label-floating {
:host-context(.item-has-focus).label-stacked:not(.ion-color),
:host-context(.item-has-focus).label-floating:not(.ion-color) {
color: $label-md-text-color-focused;
}
:host-context(.item-has-focus.ion-color).label-stacked:not(.ion-color),
:host-context(.item-has-focus.ion-color).label-floating:not(.ion-color) {
color: #{current-color(contrast)};
}
// MD Typography
// --------------------------------------------------

21
core/src/components/label/label.tsx
View File

@ -32,6 +32,12 @@ export class Label implements ComponentInterface {
*/
@Prop() position?: 'fixed' | 'stacked' | 'floating';
/**
* Emitted when the color changes.
* @internal
*/
@Event() ionColor!: EventEmitter<StyleEventDetail>;
/**
* Emitted when the styles change.
* @internal
@ -44,6 +50,7 @@ export class Label implements ComponentInterface {
this.inRange = !!this.el.closest('ion-range');
this.noAnimate = (this.position === 'floating');
this.emitStyle();
this.emitColor();
}
componentDidLoad() {
@ -54,11 +61,25 @@ export class Label implements ComponentInterface {
}
}
@Watch('color')
colorChanged() {
this.emitColor();
}
@Watch('position')
positionChanged() {
this.emitStyle();
}
private emitColor() {
const { color } = this;
this.ionColor.emit({
'item-label-color': color !== undefined,
[`ion-color-${color}`]: color !== undefined
});
}
private emitStyle() {
const { inRange, position } = this;

43
core/src/components/label/test/basic/index.html
View File

@ -17,6 +17,11 @@
<ion-header>
<ion-toolbar>
<ion-title>Label - Basic</ion-title>
<ion-buttons slot="end">
<ion-button onClick="changeColors()">
Color Change
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
@ -58,10 +63,37 @@
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item class="floating-color">
<ion-label position="floating" color="success">Floating: Success</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item class="stacked-color">
<ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
<ion-list>
<ion-item color="tertiary">
<ion-label position="floating">(Item: Tertiary) Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item color="primary">
<ion-label position="stacked">(Item: Primary) Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item class="floating-color" color="tertiary">
<ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item class="stacked-color" color="primary">
<ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
</ion-content>
@ -70,6 +102,17 @@
color: lightblue;
}
</style>
<script>
const labels = document.querySelectorAll('.floating-color ion-label, .stacked-color ion-label');
function changeColors() {
for (label of labels) {
const currentColor = label.color;
label.color = currentColor === 'success' ? 'danger' : 'success';
}
}
</script>
</ion-app>
</body>