Skip to content

Commit 60ef98d

Browse files
brandyscarneybrandyscarney
authored
fix(list): adjust label margin to align with spec for md (#16751)
fixes #16643
1 parent 7366677 commit 60ef98d

File tree

5 files changed

+135
-13
lines changed

5 files changed

+135
-13
lines changed

‎core/src/components/item/item.md.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@
181181
// --------------------------------------------------
182182

183183
::slotted(ion-label) {
184-
@include margin(13px, 0, 10px, 0);
184+
@include margin($item-md-label-margin-top, $item-md-label-margin-end, $item-md-label-margin-bottom, $item-md-label-margin-start);
185185
}
186186

187187

‎core/src/components/item/item.md.vars.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,22 @@ $item-md-input-highlight-color-valid: ion-color(success, base) !default;
6161
$item-md-input-highlight-color-invalid: ion-color(danger, base) !default;
6262

6363

64+
// Item Label
65+
// --------------------------------------------------
66+
67+
/// @prop - Margin top of the label
68+
$item-md-label-margin-top: 11px !default;
69+
70+
/// @prop - Margin end of the label
71+
$item-md-label-margin-end: 0 !default;
72+
73+
/// @prop - Margin bottom of the label
74+
$item-md-label-margin-bottom: 10px !default;
75+
76+
/// @prop - Margin start of the label
77+
$item-md-label-margin-start: 0 !default;
78+
79+
6480
// Item Slots
6581
// --------------------------------------------------
6682

‎core/src/components/label/label.md.vars.scss

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,6 @@ $label-md-text-color: $text-color-step-600 !default;
1010
/// @prop - Text color of the stacked/floating label when it is focused
1111
$label-md-text-color-focused: ion-color(primary, base) !default;
1212

13-
/// @prop - Margin top of the label
14-
$label-md-margin-top: 13px !default;
15-
16-
/// @prop - Margin end of the label
17-
$label-md-margin-end: 0 !default;
18-
19-
/// @prop - Margin bottom of the label
20-
$label-md-margin-bottom: 10px !default;
21-
22-
/// @prop - Margin start of the label
23-
$label-md-margin-start: 0 !default;
24-
2513
/// @prop - Line height of the label when the text wraps
2614
$label-md-text-wrap-line-height: 1.5 !default;
2715

‎core/src/components/list/test/icons/e2e.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
test('list: icons', async () => {
4+
const page = await newE2EPage({
5+
url: '/src/components/list/test/icons?ionic:_testing=true'
6+
});
7+
8+
const compare = await page.compareScreenshot();
9+
expect(compare).toMatchScreenshot();
10+
});

‎core/src/components/list/test/icons/index.html

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>List - Icons</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<link href="../../../../../css/core.css" rel="stylesheet">
9+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
10+
<script src="../../../../../dist/ionic.js"></script>
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-header>
16+
<ion-toolbar color="tertiary">
17+
<ion-title>Topics</ion-title>
18+
<ion-buttons slot="end">
19+
<ion-button>
20+
<ion-icon slot="icon-only" name="search"></ion-icon>
21+
</ion-button>
22+
<ion-button>
23+
<ion-icon slot="icon-only" name="more"></ion-icon>
24+
</ion-button>
25+
</ion-buttons>
26+
</ion-toolbar>
27+
</ion-header>
28+
<ion-content>
29+
<ion-list lines="none">
30+
<ion-item>
31+
<ion-icon name="film" slot="start"></ion-icon>
32+
<ion-label>
33+
Attractions
34+
</ion-label>
35+
</ion-item>
36+
<ion-item>
37+
<ion-icon name="beer" slot="start"></ion-icon>
38+
<ion-label>
39+
Dining
40+
</ion-label>
41+
</ion-item>
42+
<ion-item>
43+
<ion-icon name="create" slot="start"></ion-icon>
44+
<ion-label>
45+
Education
46+
</ion-label>
47+
</ion-item>
48+
<ion-item>
49+
<ion-icon name="heart" slot="start"></ion-icon>
50+
<ion-label>
51+
Health
52+
</ion-label>
53+
</ion-item>
54+
<ion-item>
55+
<ion-icon name="people" slot="start"></ion-icon>
56+
<ion-label>
57+
Family
58+
</ion-label>
59+
</ion-item>
60+
<ion-item>
61+
<ion-icon name="cut" slot="start"></ion-icon>
62+
<ion-label>
63+
Office
64+
</ion-label>
65+
</ion-item>
66+
<ion-item>
67+
<ion-icon name="pricetag" slot="start"></ion-icon>
68+
<ion-label>
69+
Promotions
70+
</ion-label>
71+
</ion-item>
72+
<ion-item>
73+
<ion-icon name="radio" slot="start"></ion-icon>
74+
<ion-label>
75+
Radio
76+
</ion-label>
77+
</ion-item>
78+
<ion-item>
79+
<ion-icon name="pizza" slot="start"></ion-icon>
80+
<ion-label>
81+
Food
82+
</ion-label>
83+
</ion-item>
84+
<ion-item>
85+
<ion-icon name="basketball" slot="start"></ion-icon>
86+
<ion-label>
87+
Sports
88+
</ion-label>
89+
</ion-item>
90+
<ion-item>
91+
<ion-icon name="airplane" slot="start"></ion-icon>
92+
<ion-label>
93+
Travel
94+
</ion-label>
95+
</ion-item>
96+
</ion-list>
97+
</ion-content>
98+
</ion-app>
99+
100+
<style>
101+
body {
102+
margin: 0;
103+
}
104+
105+
</style>
106+
</body>
107+
108+
</html>

0 commit comments

Comments
 (0)