Skip to content

feat(radio): add ionic styles with radio group #29809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 29, 2024
Merged

feat(radio): add ionic styles with radio group #29809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6335d7f
feat(radio): add ionic styles for radio group
thetaPC Aug 27, 2024
1cd894e
test(radio): update item snapshots
thetaPC Aug 27, 2024
8482733
Merge branch 'ROU-11015' of github.com:ionic-team/ionic-framework int…
thetaPC Aug 27, 2024
c825013
test(radio): add multipe radios snapshots
thetaPC Aug 27, 2024
dffe4d8
test(radio): add multiple radios in list snapshots
thetaPC Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions core/src/components/list/list.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ ion-list {
@include globals.margin(globals.$ionic-space-100);
}

// Ionic No Lines List
// --------------------------------------------------

.list-ionic-lines-none .item-lines-default {
--inner-border-width: 0px;
--border-width: 0px;
}

// Ionic Shapes
//
// The border radius is applied to the list, excluding
Expand Down
35 changes: 12 additions & 23 deletions core/src/components/radio-group/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
<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>

<style>
ion-radio {
width: 100%;
}
</style>
</head>

<body>
Expand All @@ -23,29 +29,12 @@
</ion-header>

<ion-content>
<ion-list>
<ion-radio-group name="items" id="group" value="1">
<ion-list-header>
<ion-label>Radio Group Header</ion-label>
</ion-list-header>

<ion-item>
<ion-radio value="1">Item 1</ion-radio>
</ion-item>

<ion-item>
<ion-radio value="2">Item 2</ion-radio>
</ion-item>

<ion-item>
<ion-radio value="3">Item 3</ion-radio>
</ion-item>

<ion-item>
<ion-radio value="4">Item 4</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-radio-group name="items" id="group" value="1">
<ion-radio justify="space-between" value="1">Label</ion-radio><br />
<ion-radio justify="space-between" value="2">Label</ion-radio><br />
<ion-radio justify="space-between" value="3">Label</ion-radio><br />
<ion-radio justify="space-between" value="4">Label</ion-radio><br />
</ion-radio-group>
</ion-content>
</ion-app>
</body>
Expand Down
28 changes: 7 additions & 21 deletions core/src/components/radio-group/test/basic/radio-group.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
<ion-radio-group value="one" allow-empty-selection="false">
<ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-radio-group>
`,
config
Expand All @@ -34,9 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
<ion-radio-group value="one" allow-empty-selection="true">
<ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-radio-group>
`,
config
Expand All @@ -50,9 +46,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
<ion-radio-group value="one" allow-empty-selection="false">
<ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-radio-group>
`,
config
Expand All @@ -66,9 +60,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
<ion-radio-group value="one" allow-empty-selection="true">
<ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-item>
<ion-radio id="one" value="one">One</ion-radio>
</ion-radio-group>
`,
config
Expand All @@ -82,17 +74,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
<ion-radio-group value="1">
<ion-item>
<ion-radio value="1">Item 1</ion-radio>
</ion-item>
<ion-radio value="1">Item 1</ion-radio>

<ion-item>
<ion-radio value="2">Item 2</ion-radio>
</ion-item>
<ion-radio value="2">Item 2</ion-radio>

<ion-item>
<ion-radio value="3">Item 3</ion-radio>
</ion-item>
<ion-radio value="3">Item 3</ion-radio>
</ion-radio-group>
`,
config
Expand Down
52 changes: 52 additions & 0 deletions core/src/components/radio-group/test/item/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Radio Group - Item</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/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>Radio Group - Item</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list lines="none">
<ion-radio-group name="items" id="group" value="1">
<ion-list-header>
<ion-label>Radio Group Header</ion-label>
</ion-list-header>

<ion-item>
<ion-radio value="1">Item 1</ion-radio>
</ion-item>

<ion-item>
<ion-radio value="2">Item 2</ion-radio>
</ion-item>

<ion-item>
<ion-radio value="3">Item 3</ion-radio>
</ion-item>

<ion-item>
<ion-radio value="4">Item 4</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>
7 changes: 7 additions & 0 deletions core/src/components/radio/radio.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,13 @@
max-width: calc(100% / 0.75);
}

// Radio Not In Item
// -----------------------------------------

:host(:not(.in-item):not(:last-of-type)) {
@include globals.margin(null, null, globals.$ionic-space-200, null);
}

// Ionic Radio: Disabled
// -----------------------------------------

Expand Down
30 changes: 30 additions & 0 deletions core/src/components/radio/test/basic/radio.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';

configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('radio'), () => {
test('should render multiple correctly', async ({ page }) => {
await page.setContent(
`
<style>
/* The radio checks are cut off without a container margin */
#container {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

<div id="container">
<ion-radio-group>
<ion-radio>Enable Notifications</ion-radio><br />
<ion-radio>Enable Notifications</ion-radio>
</ion-radio-group>
</div>
`,
config
);
const container = page.locator('#container');
await expect(container).toHaveScreenshot(screenshot(`radio-multiple`));
});
});
});
Binary file added ...adio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...dio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...adio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions core/src/components/radio/test/item/radio.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,25 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
const list = page.locator('ion-list');
await expect(list).toHaveScreenshot(screenshot(`radio-list`));
});
test('should render multiple correctly in list', async ({ page }) => {
await page.setContent(
`
<ion-list>
<ion-radio-group>
<ion-item>
<ion-radio>Enable Notifications</ion-radio>
</ion-item>
<ion-item>
<ion-radio>Enable Notifications</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
`,
config
);
const list = page.locator('ion-list');
await expect(list).toHaveScreenshot(screenshot(`radio-list-multiple`));
});
test('should render correctly in inset list', async ({ page }) => {
await page.setContent(
`
Expand Down
Binary file added ...e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tem/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tem/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .../item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.