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
// iOS Stacked & Floating Textarea
// --------------------------------------------------

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

@ -212,7 +212,6 @@
}
// 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
// --------------------------------------------------

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

@ -407,8 +407,16 @@ button, a {
// 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-floating) ::slotted(ion-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;
align-self: stretch;
@ -422,6 +430,10 @@ button, a {
// Item Datetime
// --------------------------------------------------
:host(:not(.item-label)) ::slotted(ion-datetime) {
--padding-start: 0;
}
:host(.item-label-stacked) ::slotted(ion-datetime),
:host(.item-label-floating) ::slotted(ion-datetime) {
--padding-start: 0;

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);
}
:host-context(.item-select).label-floating {
@include transform(translate3d(0, 130%, 0));
}
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).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;
height: 19px;
}
:host-context(.item-label-floating) .select-icon {
@include transform(translate3d(0, -9px, 0));
}