Skip to content

Commit 6ce34d1

Browse files
brandyscarneybrandyscarney
committed
fix(radio): justify start when label placement is end
1 parent ac4ea32 commit 6ce34d1

File tree

3 files changed

+129
-42
lines changed

3 files changed

+129
-42
lines changed

‎core/src/components/radio/radio.scss‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -140,46 +140,6 @@ input {
140140
align-items: center;
141141
}
142142

143-
// Radio Justify
144-
// --------------------------------------------------
145-
146-
:host(.radio-justify-space-between) .radio-wrapper {
147-
justify-content: space-between;
148-
}
149-
150-
:host(.radio-justify-start) .radio-wrapper {
151-
justify-content: start;
152-
}
153-
154-
:host(.radio-justify-end) .radio-wrapper {
155-
justify-content: end;
156-
}
157-
158-
// Radio Align
159-
// --------------------------------------------------
160-
161-
:host(.radio-alignment-start) .radio-wrapper {
162-
align-items: start;
163-
}
164-
165-
:host(.radio-alignment-center) .radio-wrapper {
166-
align-items: center;
167-
}
168-
169-
// Justify Content & Align Items
170-
// ---------------------------------------------
171-
172-
// The radio should be displayed as block when either justify
173-
// or alignment is set; otherwise, these properties will have no
174-
// visible effect.
175-
:host(.radio-justify-space-between),
176-
:host(.radio-justify-start),
177-
:host(.radio-justify-end),
178-
:host(.radio-alignment-start),
179-
:host(.radio-alignment-center) {
180-
display: block;
181-
}
182-
183143
// Radio Label Placement - Start
184144
// ----------------------------------------------------------------
185145

@@ -209,6 +169,8 @@ input {
209169
*/
210170
:host(.radio-label-placement-end) .radio-wrapper {
211171
flex-direction: row-reverse;
172+
173+
justify-content: start;
212174
}
213175

214176
/**
@@ -277,3 +239,43 @@ input {
277239
:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
278240
@include transform-origin(center, top);
279241
}
242+
243+
// Radio Justify
244+
// --------------------------------------------------
245+
246+
:host(.radio-justify-space-between) .radio-wrapper {
247+
justify-content: space-between;
248+
}
249+
250+
:host(.radio-justify-start) .radio-wrapper {
251+
justify-content: start;
252+
}
253+
254+
:host(.radio-justify-end) .radio-wrapper {
255+
justify-content: end;
256+
}
257+
258+
// Radio Align
259+
// --------------------------------------------------
260+
261+
:host(.radio-alignment-start) .radio-wrapper {
262+
align-items: start;
263+
}
264+
265+
:host(.radio-alignment-center) .radio-wrapper {
266+
align-items: center;
267+
}
268+
269+
// Justify Content & Align Items
270+
// ---------------------------------------------
271+
272+
// The radio should be displayed as block when either justify
273+
// or alignment is set; otherwise, these properties will have no
274+
// visible effect.
275+
:host(.radio-justify-space-between),
276+
:host(.radio-justify-start),
277+
:host(.radio-justify-end),
278+
:host(.radio-alignment-start),
279+
:host(.radio-alignment-center) {
280+
display: block;
281+
}

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,17 @@
4949
<ion-content id="content" class="ion-padding">
5050
<h1>Placement Start</h1>
5151
<div class="grid">
52+
<div class="grid-item">
53+
<h2>Default Justify</h2>
54+
<ion-list>
55+
<ion-radio-group>
56+
<ion-item>
57+
<ion-radio label-placement="start">Enable Notifications</ion-radio>
58+
</ion-item>
59+
</ion-radio-group>
60+
</ion-list>
61+
</div>
62+
5263
<div class="grid-item">
5364
<h2>Justify Start</h2>
5465
<ion-list>
@@ -85,6 +96,17 @@ <h2>Justify Space Between</h2>
8596

8697
<h1>Placement End</h1>
8798
<div class="grid">
99+
<div class="grid-item">
100+
<h2>Default Justify</h2>
101+
<ion-list>
102+
<ion-radio-group>
103+
<ion-item>
104+
<ion-radio label-placement="end">Enable Notifications</ion-radio>
105+
</ion-item>
106+
</ion-radio-group>
107+
</ion-list>
108+
</div>
109+
88110
<div class="grid-item">
89111
<h2>Justify Start</h2>
90112
<ion-list>
@@ -121,6 +143,17 @@ <h2>Justify Space Between</h2>
121143

122144
<h1>Placement Fixed</h1>
123145
<div class="grid">
146+
<div class="grid-item">
147+
<h2>Default Justify</h2>
148+
<ion-list>
149+
<ion-radio-group>
150+
<ion-item>
151+
<ion-radio label-placement="fixed">Enable Notifications</ion-radio>
152+
</ion-item>
153+
</ion-radio-group>
154+
</ion-list>
155+
</div>
156+
124157
<div class="grid-item">
125158
<h2>Justify Start</h2>
126159
<ion-list>
@@ -204,6 +237,39 @@ <h1>Multiline Label</h1>
204237
</ion-item>
205238
</ion-radio-group>
206239
</div>
240+
<div class="grid-item">
241+
<ion-radio-group>
242+
<ion-item>
243+
<ion-radio justify="start" alignment="start">
244+
<ion-label class="ion-text-wrap">
245+
Enable Notifications Enable Notifications Enable Notifications
246+
</ion-label>
247+
</ion-radio>
248+
</ion-item>
249+
</ion-radio-group>
250+
</div>
251+
<div class="grid-item">
252+
<ion-radio-group>
253+
<ion-item>
254+
<ion-radio label-placement="end">
255+
<ion-label class="ion-text-wrap">
256+
Enable Notifications Enable Notifications Enable Notifications
257+
</ion-label>
258+
</ion-radio>
259+
</ion-item>
260+
</ion-radio-group>
261+
</div>
262+
<div class="grid-item">
263+
<ion-radio-group>
264+
<ion-item>
265+
<ion-radio label-placement="end" alignment="start">
266+
<ion-label class="ion-text-wrap">
267+
Enable Notifications Enable Notifications Enable Notifications
268+
</ion-label>
269+
</ion-radio>
270+
</ion-item>
271+
</ion-radio-group>
272+
</div>
207273
</div>
208274
</ion-content>
209275
</ion-app>

‎core/src/components/radio/test/item/radio.e2e.ts‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ configs().forEach(({ title, screenshot, config }) => {
4040

4141
configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
4242
test.describe(title('radio: long label in item'), () => {
43-
test('should render margins correctly when using long label in item', async ({ page }) => {
43+
test('should not have visual regressions when using long label in item', async ({ page }) => {
4444
await page.setContent(
4545
`
4646
<ion-list>
@@ -60,8 +60,27 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
6060
});
6161
});
6262

63+
test.describe(title('radio: end label in item'), () => {
64+
test('should not have visual regressions when using end label in item', async ({ page }) => {
65+
await page.setContent(
66+
`
67+
<ion-list>
68+
<ion-radio-group>
69+
<ion-item>
70+
<ion-radio label-placement="end">Enable Notifications</ion-radio>
71+
</ion-item>
72+
</ion-radio-group>
73+
</ion-list>
74+
`,
75+
config
76+
);
77+
const list = page.locator('ion-list');
78+
await expect(list).toHaveScreenshot(screenshot(`radio-end-label-in-item`));
79+
});
80+
});
81+
6382
test.describe(title('radio: stacked label in item'), () => {
64-
test('should render margins correctly when using stacked label in item', async ({ page }) => {
83+
test('should not have visual regressions when using stacked label in item', async ({ page }) => {
6584
await page.setContent(
6685
`
6786
<ion-list>

0 commit comments

Comments
 (0)