Skip to content

fix(label): do not show placeholder with floating label until focus #22958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 4 commits into from
Mar 1, 2021
Merged

fix(label): do not show placeholder with floating label until focus #22958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87e52da
fix(label): do not show placeholder with floating label until focus
brandyscarney Feb 22, 2021
7f7fb96
Merge remote-tracking branch 'origin/master' into fix-floating-label-…
liamdebeasi Feb 23, 2021
882a40f
add transition to placeholder opacity
liamdebeasi Mar 1, 2021
19cafbe
style(input): lint error
brandyscarney Mar 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions core/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,3 +169,18 @@
:host(.has-focus) button {
pointer-events: auto;
}


// Item Floating: Placeholder
// ----------------------------------------------------------------
// When used with a floating item the placeholder should hide

:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);

opacity: 0;
}

:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
opacity: 1;
}
26 changes: 17 additions & 9 deletions core/src/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,15 +190,6 @@ export class Input implements ComponentInterface {
*/
@Prop({ mutable: true }) value?: string | number | null = '';

/**
* Update the native input element when the value changes
*/
@Watch('value')
protected valueChanged() {
this.emitStyle();
this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() });
}

/**
* Emitted when a keyboard input occurred.
*/
Expand All @@ -225,6 +216,23 @@ export class Input implements ComponentInterface {
*/
@Event() ionStyle!: EventEmitter<StyleEventDetail>;

/**
* Update the item classes when the placeholder changes
*/
@Watch('placeholder')
protected placeholderChanged() {
this.emitStyle();
}

/**
* Update the native input element when the value changes
*/
@Watch('value')
protected valueChanged() {
this.emitStyle();
this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() });
}

componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.el, ['tabindex', 'title']);
}
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/input/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,11 @@
<ion-label>Right</ion-label>
<ion-input class="ion-text-right" value="Narrow input"></ion-input>
</ion-item>

</ion-content>

<script>
document.querySelector('ion-input').addEventListener('ionBlur', (ev) => { console.log(ev)})
document.querySelector('ion-input').addEventListener('ionBlur', (ev) => { console.log(ev)});

function toggleBoolean(id, prop) {
var el = document.getElementById(id);

Expand Down
183 changes: 165 additions & 18 deletions core/src/components/input/test/spec/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,130 @@

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Input - Spec</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Floating Inputs</h1>

<div class="grid">
<div class="column">
<h2>Inactive</h2>
<ion-item>
<ion-label position="floating">Label</ion-label>
<ion-input placeholder="Placeholder Text"></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Focused</h2>
<ion-item class="item-has-focus">
<ion-label position="floating">Label</ion-label>
<ion-input placeholder="Placeholder Text"></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Activated</h2>
<ion-item>
<ion-label position="floating">Label</ion-label>
<ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Hover</h2>
<ion-item class="item-hovered">
<ion-label position="floating">Label</ion-label>
<ion-input></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Disabled</h2>
<ion-item>
<ion-label position="floating">Label</ion-label>
<ion-input disabled></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Toggle Placeholder</h2>
<ion-item>
<ion-label position="floating">Label</ion-label>
<ion-input id="floatingToggle" type="password"></ion-input>
<ion-button fill="clear" slot="end" onClick="togglePlaceholder('#floatingToggle')" class="ion-align-self-center">
Toggle
</ion-button>
</ion-item>
</div>
</div>

<h1>Stacked Inputs</h1>

<div class="grid">
<div class="column">
<h2>Inactive</h2>
<ion-item>
<ion-label position="stacked">Label</ion-label>
<ion-input></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Focused</h2>
<ion-item class="item-has-focus">
<ion-label position="stacked">Label</ion-label>
<ion-input placeholder="Placeholder Text"></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Activated</h2>
<ion-item>
<ion-label position="stacked">Label</ion-label>
<ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Hover</h2>
<ion-item class="item-hovered">
<ion-label position="stacked">Label</ion-label>
<ion-input></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Disabled</h2>
<ion-item>
<ion-label position="stacked">Label</ion-label>
<ion-input disabled></ion-input>
</ion-item>
</div>

<div class="column">
<h2>Toggle Placeholder</h2>
<ion-item>
<ion-label position="stacked">Label</ion-label>
<ion-input id="stackedToggle" type="password"></ion-input>
<ion-button fill="clear" slot="end" onClick="togglePlaceholder('#stackedToggle')" class="ion-align-self-center">
Toggle
</ion-button>
</ion-item>
</div>
</div>

<hr>

<h2>Stacked Div</h2>
<ion-item>
<ion-label position="floating">Floating: input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item class="item-has-focus">
<ion-label position="floating">Floating: input focused value</ion-label>
<ion-input value="value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked: input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked: input value</ion-label>
<ion-input value="value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked: div</ion-label>
<ion-label position="stacked">Label</ion-label>
<div>A div</div>
</ion-item>

<ion-item class="ion-align-items-center">
<ion-icon slot="start" name="planet"></ion-icon>
<ion-label position="stacked">Align items: center</ion-label>
Expand Down Expand Up @@ -68,8 +171,45 @@
</ion-content>

<style>
h1 {
font-size: 14px;
color: #54575e;

margin: 25px 0 5px 25px;
}

h2 {
display: flex;
align-items: center;
justify-content: space-between;

font-size: 12px;
font-weight: normal;

color: #a1a7b0;

margin-top: 10px;
margin-left: 5px;
}

hr {
background: #eff1f3;

margin-top: 18px;
margin-bottom: 25px;
}

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
column-gap: 20px;
padding: 0 20px 20px;
}

ion-item {
--background: #f5f5f5;
--background: #e0e0e0;
--background-hover: #d3d3d3;
}

.custom {
Expand All @@ -84,6 +224,13 @@
color: purple !important;
}
</style>

<script>
function togglePlaceholder(id) {
const input = document.querySelector(id);
input.placeholder = input.placeholder ? undefined : 'Placeholder Text';
}
</script>
</ion-app>
</body>

Expand Down
2 changes: 0 additions & 2 deletions core/src/components/label/label.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,10 @@
}

:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating {
@include transform(translate3d(0, 0, 0), scale(.82));
}


// iOS Typography
// --------------------------------------------------

Expand Down
1 change: 0 additions & 1 deletion core/src/components/label/label.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
}

:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating {
@include transform(translateY(50%), scale(.75));
}
Expand Down