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

fix(item): properly align datetime and select without labels and with fixed labels (#22221)

Browse Source 
fixes #18773 fixes #18761 fixes #18779
This commit is contained in:
Brandy Carney
2020-10-01 18:54:19 -04:00
committed by GitHub
parent 18fb8855e0
commit f42c688f46
7 changed files with 189 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/item/item.ios.scss
View File

@ -204,6 +204,15 @@
} }
// iOS Fixed Labels
// --------------------------------------------------
:host(.item-label-fixed) ::slotted(ion-select),
:host(.item-label-fixed) ::slotted(ion-datetime) {
--padding-start: 0;
}
// FROM TEXTAREA // FROM TEXTAREA
// iOS Stacked & Floating Textarea // iOS Stacked & Floating Textarea
// -------------------------------------------------- // --------------------------------------------------

10
core/src/components/item/item.md.scss
View File

@ -212,7 +212,6 @@
} }
// Material Design Floating/Stacked Label // Material Design Floating/Stacked Label
// -------------------------------------------------- // --------------------------------------------------
@ -222,6 +221,15 @@
} }
// Material Design Fixed Labels
// --------------------------------------------------
:host(.item-label-fixed) ::slotted(ion-select),
:host(.item-label-fixed) ::slotted(ion-datetime) {
--padding-start: 8px;
}
// Material Design Toggle/Radio Item // Material Design Toggle/Radio Item
// -------------------------------------------------- // --------------------------------------------------

14
core/src/components/item/item.scss
View File

@ -407,8 +407,16 @@ button, a {
// Item Select // Item Select
// -------------------------------------------------- // --------------------------------------------------
:host(:not(.item-label)) ::slotted(ion-select) {
--padding-start: 0;
max-width: none;
}
:host(.item-label-stacked) ::slotted(ion-select), :host(.item-label-stacked) ::slotted(ion-select),
:host(.item-label-floating) ::slotted(ion-select) { :host(.item-label-floating) ::slotted(ion-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0; --padding-start: 0;
align-self: stretch; align-self: stretch;
@ -422,6 +430,10 @@ button, a {
// Item Datetime // Item Datetime
// -------------------------------------------------- // --------------------------------------------------
:host(:not(.item-label)) ::slotted(ion-datetime) {
--padding-start: 0;
}
:host(.item-label-stacked) ::slotted(ion-datetime), :host(.item-label-stacked) ::slotted(ion-datetime),
:host(.item-label-floating) ::slotted(ion-datetime) { :host(.item-label-floating) ::slotted(ion-datetime) {
--padding-start: 0; --padding-start: 0;
@ -463,4 +475,4 @@ button, a {
ion-ripple-effect { ion-ripple-effect {
color: var(--ripple-color); color: var(--ripple-color);
} }

19
core/src/components/item/test/alignment/e2e.ts Normal file
View File

@ -0,0 +1,19 @@
import { newE2EPage } from '@stencil/core/testing';
test('item: alignment', async () => {
const page = await newE2EPage({
url: '/src/components/item/test/alignment?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('item: alignment-rtl', async () => {
const page = await newE2EPage({
url: '/src/components/item/test/alignment?ionic:_testing=true&rtl=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

135
core/src/components/item/test/alignment/index.html Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item - Alignment</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Item - Alignment</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>Leading Icons</ion-list-header>
<ion-item>
<ion-icon slot="start" name="time"></ion-icon>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-icon slot="start" name="radio-button-off"></ion-icon>
<ion-input placeholder="Choose Starting Point"></ion-input>
</ion-item>
<ion-item>
<ion-icon slot="start" name="pin"></ion-icon>
<ion-select placeholder="Choose Really Really Long Destination Here">
<ion-select-option>Madison, WI</ion-select-option>
<ion-select-option>Atlanta, GA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Default Labels</ion-list-header>
<ion-item>
<ion-label>Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
</ion-item>
<ion-item>
<ion-label>Destination</ion-label>
<ion-select placeholder="Choose Really Really Long Destination Here">
<ion-select-option>Madison, WI</ion-select-option>
<ion-select-option>Atlanta, GA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Fixed Labels</ion-list-header>
<ion-item>
<ion-label position="fixed">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="fixed">From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Destination</ion-label>
<ion-select placeholder="Choose Really Really Long Destination Here">
<ion-select-option>Madison, WI</ion-select-option>
<ion-select-option>Atlanta, GA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Floating Labels</ion-list-header>
<ion-item>
<ion-label position="floating">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">From</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Destination</ion-label>
<ion-select>
<ion-select-option>Madison, WI</ion-select-option>
<ion-select-option>Atlanta, GA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Stacked Labels</ion-list-header>
<ion-item>
<ion-label position="stacked">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="stacked">From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Destination</ion-label>
<ion-select placeholder="Choose Really Really Long Destination Here">
<ion-select-option>Madison, WI</ion-select-option>
<ion-select-option>Atlanta, GA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
<style>
ion-item {
--border-width: 0;
--inner-border-width: 0;
--background: #ddd;
border-radius: 4px;
margin-bottom: 10px;
}
</style>
</body>
</html>

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

@ -38,10 +38,6 @@
@include margin(0, 0, 0, 0); @include margin(0, 0, 0, 0);
} }
:host-context(.item-select).label-floating {
@include transform(translate3d(0, 130%, 0));
}
:host-context(.item-has-focus).label-floating, :host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating, :host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating { :host-context(.item-has-value).label-floating {

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

@ -15,3 +15,7 @@
width: 19px; width: 19px;
height: 19px; height: 19px;
} }
:host-context(.item-label-floating) .select-icon {
@include transform(translate3d(0, -9px, 0));
}