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

fix(list): adjust label margin to align with spec for md (#16751)

Browse Source 
fixes #16643
This commit is contained in:
Brandy Carney
2018-12-14 18:03:25 -05:00
committed by GitHub
parent 7366677b44
commit 60ef98d1a7
5 changed files with 135 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -181,7 +181,7 @@
// --------------------------------------------------
::slotted(ion-label) {
@include margin(13px, 0, 10px, 0);
@include margin($item-md-label-margin-top, $item-md-label-margin-end, $item-md-label-margin-bottom, $item-md-label-margin-start);
}

16
core/src/components/item/item.md.vars.scss
View File

@ -61,6 +61,22 @@ $item-md-input-highlight-color-valid: ion-color(success, base) !default;
$item-md-input-highlight-color-invalid: ion-color(danger, base) !default;
// Item Label
// --------------------------------------------------
/// @prop - Margin top of the label
$item-md-label-margin-top: 11px !default;
/// @prop - Margin end of the label
$item-md-label-margin-end: 0 !default;
/// @prop - Margin bottom of the label
$item-md-label-margin-bottom: 10px !default;
/// @prop - Margin start of the label
$item-md-label-margin-start: 0 !default;
// Item Slots
// --------------------------------------------------

12
core/src/components/label/label.md.vars.scss
View File

@ -10,18 +10,6 @@ $label-md-text-color: $text-color-step-600 !default;
/// @prop - Text color of the stacked/floating label when it is focused
$label-md-text-color-focused: ion-color(primary, base) !default;
/// @prop - Margin top of the label
$label-md-margin-top: 13px !default;
/// @prop - Margin end of the label
$label-md-margin-end: 0 !default;
/// @prop - Margin bottom of the label
$label-md-margin-bottom: 10px !default;
/// @prop - Margin start of the label
$label-md-margin-start: 0 !default;
/// @prop - Line height of the label when the text wraps
$label-md-text-wrap-line-height: 1.5 !default;

10
core/src/components/list/test/icons/e2e.ts Normal file
View File

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

108
core/src/components/list/test/icons/index.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>List - Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>Topics</ion-title>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none">
<ion-item>
<ion-icon name="film" slot="start"></ion-icon>
<ion-label>
Attractions
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="beer" slot="start"></ion-icon>
<ion-label>
Dining
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="create" slot="start"></ion-icon>
<ion-label>
Education
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="heart" slot="start"></ion-icon>
<ion-label>
Health
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="people" slot="start"></ion-icon>
<ion-label>
Family
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="cut" slot="start"></ion-icon>
<ion-label>
Office
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="pricetag" slot="start"></ion-icon>
<ion-label>
Promotions
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="radio" slot="start"></ion-icon>
<ion-label>
Radio
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="pizza" slot="start"></ion-icon>
<ion-label>
Food
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="basketball" slot="start"></ion-icon>
<ion-label>
Sports
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="airplane" slot="start"></ion-icon>
<ion-label>
Travel
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
<style>
body {
margin: 0;
}
</style>
</body>
</html>