Skip to content

Commit ccf1f65

Browse files
thetaPCthetaPC
authored
feat(radio): add ionic theme styles (#29805)
- Added `ionic` theme styles - Added `ionic` to the tests - Updated file structure - Added a focus ring mixin
1 parent 3656c8d commit ccf1f65

File tree

150 files changed

+533
-124
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

150 files changed

+533
-124
lines changed

‎core/src/components/list/list.ionic.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ ion-list {
2424
@include globals.margin(globals.$ionic-space-100);
2525
}
2626

27+
// Ionic No Lines List
28+
// --------------------------------------------------
29+
30+
.list-ionic-lines-none .item-lines-default {
31+
--inner-border-width: 0px;
32+
--border-width: 0px;
33+
}
34+
2735
// Ionic Shapes
2836
//
2937
// The border radius is applied to the list, excluding

‎core/src/components/radio-group/test/basic/index.html‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
<script src="../../../../../scripts/testing/scripts.js"></script>
1313
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
1414
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
16+
<style>
17+
ion-radio {
18+
width: 100%;
19+
}
20+
</style>
1521
</head>
1622

1723
<body>
@@ -23,29 +29,12 @@
2329
</ion-header>
2430

2531
<ion-content>
26-
<ion-list>
27-
<ion-radio-group name="items" id="group" value="1">
28-
<ion-list-header>
29-
<ion-label>Radio Group Header</ion-label>
30-
</ion-list-header>
31-
32-
<ion-item>
33-
<ion-radio value="1">Item 1</ion-radio>
34-
</ion-item>
35-
36-
<ion-item>
37-
<ion-radio value="2">Item 2</ion-radio>
38-
</ion-item>
39-
40-
<ion-item>
41-
<ion-radio value="3">Item 3</ion-radio>
42-
</ion-item>
43-
44-
<ion-item>
45-
<ion-radio value="4">Item 4</ion-radio>
46-
</ion-item>
47-
</ion-radio-group>
48-
</ion-list>
32+
<ion-radio-group name="items" id="group" value="1">
33+
<ion-radio justify="space-between" value="1">Label</ion-radio><br />
34+
<ion-radio justify="space-between" value="2">Label</ion-radio><br />
35+
<ion-radio justify="space-between" value="3">Label</ion-radio><br />
36+
<ion-radio justify="space-between" value="4">Label</ion-radio><br />
37+
</ion-radio-group>
4938
</ion-content>
5039
</ion-app>
5140
</body>

‎core/src/components/radio-group/test/basic/radio-group.e2e.ts‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
1818
await page.setContent(
1919
`
2020
<ion-radio-group value="one" allow-empty-selection="false">
21-
<ion-item>
22-
<ion-radio id="one" value="one">One</ion-radio>
23-
</ion-item>
21+
<ion-radio id="one" value="one">One</ion-radio>
2422
</ion-radio-group>
2523
`,
2624
config
@@ -34,9 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
3432
await page.setContent(
3533
`
3634
<ion-radio-group value="one" allow-empty-selection="true">
37-
<ion-item>
38-
<ion-radio id="one" value="one">One</ion-radio>
39-
</ion-item>
35+
<ion-radio id="one" value="one">One</ion-radio>
4036
</ion-radio-group>
4137
`,
4238
config
@@ -50,9 +46,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
5046
await page.setContent(
5147
`
5248
<ion-radio-group value="one" allow-empty-selection="false">
53-
<ion-item>
54-
<ion-radio id="one" value="one">One</ion-radio>
55-
</ion-item>
49+
<ion-radio id="one" value="one">One</ion-radio>
5650
</ion-radio-group>
5751
`,
5852
config
@@ -66,9 +60,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
6660
await page.setContent(
6761
`
6862
<ion-radio-group value="one" allow-empty-selection="true">
69-
<ion-item>
70-
<ion-radio id="one" value="one">One</ion-radio>
71-
</ion-item>
63+
<ion-radio id="one" value="one">One</ion-radio>
7264
</ion-radio-group>
7365
`,
7466
config
@@ -82,17 +74,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
8274
await page.setContent(
8375
`
8476
<ion-radio-group value="1">
85-
<ion-item>
86-
<ion-radio value="1">Item 1</ion-radio>
87-
</ion-item>
77+
<ion-radio value="1">Item 1</ion-radio>
8878
89-
<ion-item>
90-
<ion-radio value="2">Item 2</ion-radio>
91-
</ion-item>
79+
<ion-radio value="2">Item 2</ion-radio>
9280
93-
<ion-item>
94-
<ion-radio value="3">Item 3</ion-radio>
95-
</ion-item>
81+
<ion-radio value="3">Item 3</ion-radio>
9682
</ion-radio-group>
9783
`,
9884
config

‎core/src/components/radio-group/test/item/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Radio Group - Item</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Radio Group - Item</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content>
26+
<ion-list lines="none">
27+
<ion-radio-group name="items" id="group" value="1">
28+
<ion-list-header>
29+
<ion-label>Radio Group Header</ion-label>
30+
</ion-list-header>
31+
32+
<ion-item>
33+
<ion-radio value="1">Item 1</ion-radio>
34+
</ion-item>
35+
36+
<ion-item>
37+
<ion-radio value="2">Item 2</ion-radio>
38+
</ion-item>
39+
40+
<ion-item>
41+
<ion-radio value="3">Item 3</ion-radio>
42+
</ion-item>
43+
44+
<ion-item>
45+
<ion-radio value="4">Item 4</ion-radio>
46+
</ion-item>
47+
</ion-radio-group>
48+
</ion-list>
49+
</ion-content>
50+
</ion-app>
51+
</body>
52+
</html>

‎core/src/components/radio/radio.scss‎ renamed to ‎core/src/components/radio/radio.common.scss‎

Lines changed: 6 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import "../../themes/native/native.globals";
1+
@import "../../themes/functions.string";
2+
@import "../../themes/mixins";
23
@import "./radio.vars.scss";
34

45
// Radio
@@ -24,10 +25,13 @@
2425

2526
user-select: none;
2627

27-
z-index: $z-index-item-input;
2828
box-sizing: border-box;
2929
}
3030

31+
input {
32+
@include visually-hidden();
33+
}
34+
3135
:host(.radio-disabled) {
3236
pointer-events: none;
3337
}
@@ -49,10 +53,6 @@
4953
box-sizing: border-box;
5054
}
5155

52-
input {
53-
@include visually-hidden();
54-
}
55-
5656
:host(:focus) {
5757
outline: none;
5858
}
@@ -98,29 +98,6 @@ input {
9898
cursor: inherit;
9999
}
100100

101-
// Radio Label
102-
// ----------------------------------------------------------------
103-
104-
.label-text-wrapper {
105-
text-overflow: ellipsis;
106-
107-
white-space: nowrap;
108-
109-
overflow: hidden;
110-
}
111-
112-
:host(.in-item) .label-text-wrapper {
113-
@include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
114-
}
115-
116-
:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
117-
@include margin($radio-item-label-margin-top, null, $form-control-label-margin, null);
118-
}
119-
120-
:host(.in-item.radio-label-placement-stacked) .native-wrapper {
121-
@include margin(null, null, $radio-item-label-margin-bottom, null);
122-
}
123-
124101
/**
125102
* If no label text is placed into the slot
126103
* then the element should be hidden otherwise
@@ -176,15 +153,6 @@ input {
176153
flex-direction: row;
177154
}
178155

179-
:host(.radio-label-placement-start) .label-text-wrapper {
180-
/**
181-
* The margin between the label and
182-
* the radio should be on the end
183-
* when the label sits at the start.
184-
*/
185-
@include margin(null, $form-control-label-margin, null, 0);
186-
}
187-
188156
// Radio Label Placement - End
189157
// ----------------------------------------------------------------
190158

@@ -196,27 +164,9 @@ input {
196164
flex-direction: row-reverse;
197165
}
198166

199-
/**
200-
* The margin between the label and
201-
* the radio should be on the start
202-
* when the label sits at the end.
203-
*/
204-
:host(.radio-label-placement-end) .label-text-wrapper {
205-
@include margin(null, 0, null, $form-control-label-margin);
206-
}
207-
208167
// Radio Label Placement - Fixed
209168
// ----------------------------------------------------------------
210169

211-
:host(.radio-label-placement-fixed) .label-text-wrapper {
212-
/**
213-
* The margin between the label and
214-
* the radio should be on the end
215-
* when the label sits at the start.
216-
*/
217-
@include margin(null, $form-control-label-margin, null, 0);
218-
}
219-
220170
/**
221171
* Label is on the left of the radio in LTR and
222172
* on the right in RTL. Label also has a fixed width.
@@ -238,23 +188,6 @@ input {
238188
flex-direction: column;
239189
}
240190

241-
:host(.radio-label-placement-stacked) .label-text-wrapper {
242-
@include transform(scale(#{$form-control-label-stacked-scale}));
243-
244-
/**
245-
* The margin between the label and
246-
* the radio should be on the bottom
247-
* when the label sits on top.
248-
*/
249-
@include margin(null, 0, $form-control-label-margin, 0);
250-
251-
/**
252-
* Label text should not extend
253-
* beyond the bounds of the radio.
254-
*/
255-
max-width: calc(100% / #{$form-control-label-stacked-scale});
256-
}
257-
258191
:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
259192
@include transform-origin(start, top);
260193
}

0 commit comments

Comments
 (0)