javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-divider): update design to match native iOS (#20854)

Browse Source
This commit is contained in:
Brandy Carney
2020-03-24 12:03:41 -04:00
committed by GitHub
parent 976e68da5b
commit 8660e61b96
9 changed files with 177 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/item-divider/item-divider.ios.scss
View File

@ -5,16 +5,20 @@
// --------------------------------------------------
:host {
--background: #{$item-ios-divider-background};
--color: #{$item-ios-divider-color};
--padding-start: #{$item-ios-divider-padding-start};
--inner-padding-end: #{$item-ios-divider-padding-end / 2};
--background: #{$item-divider-ios-background};
--color: #{$item-divider-ios-color};
--padding-start: #{$item-divider-ios-padding-start};
--inner-padding-end: #{$item-divider-ios-padding-end / 2};
@include border-radius(0);
position: relative;
font-size: $item-ios-divider-font-size;
min-height: $item-divider-ios-min-height;
font-size: $item-divider-ios-font-size;
font-weight: $item-divider-ios-font-weight;
}
@ -35,14 +39,6 @@
}
// Material Design Slotted Label
// --------------------------------------------------
::slotted(ion-label) {
@include margin(10px, 8px, 10px, 0);
}
// iOS Item Divider Content
// --------------------------------------------------

16
core/src/components/item-divider/item-divider.ios.vars.scss
View File

@ -4,17 +4,23 @@
// iOS Item Divider
// --------------------------------------------------
/// @prop - Minimum height for the divider
$item-divider-ios-min-height: 28px !default;
/// @prop - Font size of the item
$item-ios-divider-font-size: 17px !default;
$item-divider-ios-font-size: 17px !default;
/// @prop - Font weight of the item
$item-divider-ios-font-weight: 600 !default;
/// @prop - Background for the divider
$item-ios-divider-background: $background-color-step-50 !default;
$item-divider-ios-background: $background-color-step-100 !default;
/// @prop - Color for the divider
$item-ios-divider-color: $text-color-step-150 !default;
$item-divider-ios-color: $text-color-step-150 !default;
/// @prop - Padding start for the divider
$item-ios-divider-padding-start: $item-ios-padding-start !default;
$item-divider-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Padding end for the divider
$item-ios-divider-padding-end: $item-ios-padding-end !default;
$item-divider-ios-padding-end: $item-ios-padding-end !default;

14
core/src/components/item-divider/item-divider.md.scss
View File

@ -5,14 +5,16 @@
// --------------------------------------------------
:host {
--background: #{$item-md-divider-background};
--color: #{$item-md-divider-color};
--padding-start: #{$item-md-divider-padding-start};
--inner-padding-end: #{$item-md-divider-padding-end};
--background: #{$item-divider-md-background};
--color: #{$item-divider-md-color};
--padding-start: #{$item-divider-md-padding-start};
--inner-padding-end: #{$item-divider-md-padding-end};
border-bottom: $item-md-divider-border-bottom;
min-height: $item-divider-md-min-height;
font-size: $item-md-divider-font-size;
border-bottom: $item-divider-md-border-bottom;
font-size: $item-divider-md-font-size;
}

15
core/src/components/item-divider/item-divider.md.vars.scss
View File

@ -4,20 +4,23 @@
// Material Design Item Divider
// --------------------------------------------------
/// @prop - Minimum height for the divider
$item-divider-md-min-height: 30px !default;
/// @prop - Color for the divider
$item-md-divider-color: $text-color-step-600 !default;
$item-divider-md-color: $text-color-step-600 !default;
/// @prop - Background for the divider
$item-md-divider-background: $background-color !default;
$item-divider-md-background: $background-color !default;
/// @prop - Font size for the divider
$item-md-divider-font-size: 14px !default;
$item-divider-md-font-size: 14px !default;
/// @prop - Border bottom for the divider
$item-md-divider-border-bottom: 1px solid $item-md-border-color !default;
$item-divider-md-border-bottom: 1px solid $item-md-border-color !default;
/// @prop - Padding start for the divider
$item-md-divider-padding-start: $item-md-padding-start !default;
$item-divider-md-padding-start: $item-md-padding-start !default;
/// @prop - Padding end for the divider
$item-md-divider-padding-end: 0 !default;
$item-divider-md-padding-end: 0 !default;

1
core/src/components/item-divider/item-divider.scss
View File

@ -44,7 +44,6 @@
justify-content: space-between;
width: 100%;
min-height: $item-divider-min-height;
background: var(--background);
color: var(--color);

19
core/src/components/item-divider/test/spec/e2e.ts Normal file
View File

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

121
core/src/components/item-divider/test/spec/index.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item Divider - Spec</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 Divider - Spec</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>
Item Groups
</ion-label>
</ion-list-header>
<ion-item-group>
<ion-item-divider>
<ion-label>A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label><b>Abigail</b></ion-label>
</ion-item>
<ion-item>
<ion-label>Jesse <b>Adams</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Alan</b></ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider>
<ion-label>B</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>James <b>Bach</b></ion-label>
</ion-item>
<ion-item>
<ion-label>Flora <b>Ball</b></ion-label>
</ion-item>
<ion-item>
<ion-label>London <b>Black</b></ion-label>
</ion-item>
<ion-item>
<ion-label>Alisha <b>Brady</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Brianna</b></ion-label>
</ion-item>
<ion-item>
<ion-label>Monica <b>Brown</b></ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider>
<ion-label>C</ion-label>
</ion-item-divider>
<ion-item>
<ion-label><b>Carla</b></ion-label>
</ion-item>
<ion-item>
<ion-label>Brian <b>Clark</b></ion-label>
</ion-item>
<ion-item>
<ion-label>Robert <b>Cline</b></ion-label>
</ion-item>
</ion-item-group>
</ion-list>
</ion-content>
</ion-app>
</body>
<style>
.ios ion-item {
--min-height: 44px;
}
.ios ion-item ion-label {
margin: 0;
}
.ios ion-item:last-of-type {
--inner-border-width: 0;
}
.md ion-item:last-of-type {
--inner-border-width: 0;
--border-width: 0 0 1px 0;
}
</style>
</html>

5
core/src/components/item-group/item-group.ios.scss
View File

@ -4,8 +4,3 @@
// iOS Item Group
// --------------------------------------------------
.item-group-ios ion-item:last-child,
.item-group-ios ion-item-sliding:last-child .item {
--border-width: 0;
}

5
core/src/components/item-group/item-group.md.scss
View File

@ -4,8 +4,3 @@
// Material Design Item Group
// --------------------------------------------------
.item-group-md ion-item:last-child,
.item-group-md ion-item-sliding:last-child ion-item {
--border-width: 0;
}