diff --git a/BREAKING.md b/BREAKING.md index 3575a2a4387..4dde0c88e2b 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -38,6 +38,12 @@ This is a comprehensive list of the breaking changes introduced in the major ver - The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`. +

Radio Group

+ +- Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+If you were targeting the internals of `ion-radio-group` in your CSS, you will need to target the `supporting-text`, `helper-text` or `error-text` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
+Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`. +
Example 1: Swap two columns
**Version up to 8.x** diff --git a/core/api.txt b/core/api.txt index e4597ef5934..40013c461ec 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1845,7 +1845,7 @@ ion-radio,part,container ion-radio,part,label ion-radio,part,mark -ion-radio-group,none +ion-radio-group,shadow ion-radio-group,prop,allowEmptySelection,boolean,false,false,false ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false ion-radio-group,prop,errorText,string | undefined,undefined,false,false @@ -1855,6 +1855,9 @@ ion-radio-group,prop,name,string,this.inputId,false,false ion-radio-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-radio-group,prop,value,any,undefined,false,false ion-radio-group,event,ionChange,RadioGroupChangeEventDetail,true +ion-radio-group,part,error-text +ion-radio-group,part,helper-text +ion-radio-group,part,supporting-text ion-range,shadow ion-range,prop,activeBarStart,number | undefined,undefined,false,false diff --git a/core/src/components/radio-group/radio-group.common.scss b/core/src/components/radio-group/radio-group.common.scss index d05b6edae77..d7fbb0b7ba4 100644 --- a/core/src/components/radio-group/radio-group.common.scss +++ b/core/src/components/radio-group/radio-group.common.scss @@ -1,9 +1,8 @@ // Radio Group: Common // -------------------------------------------------- -ion-radio-group { - // Prevents additional pixels from being rendered on top - vertical-align: top; +:host { + display: block; } // Radio Group: Top @@ -21,10 +20,10 @@ ion-radio-group { display: block; } -.ion-touched.ion-invalid .radio-group-top .error-text { +:host(.ion-touched.ion-invalid) .radio-group-top .error-text { display: block; } -.ion-touched.ion-invalid .radio-group-top .helper-text { +:host(.ion-touched.ion-invalid) .radio-group-top .helper-text { display: none; } diff --git a/core/src/components/radio-group/radio-group.ionic.scss b/core/src/components/radio-group/radio-group.ionic.scss index 9a2739c0601..b1773e65d57 100644 --- a/core/src/components/radio-group/radio-group.ionic.scss +++ b/core/src/components/radio-group/radio-group.ionic.scss @@ -6,8 +6,6 @@ .radio-group-top { @include globals.typography(globals.$ion-body-sm-medium); - - margin-bottom: globals.$ion-space-400; } .radio-group-top .error-text { @@ -23,7 +21,7 @@ // Add padding to the error and helper text when used in a // list to align them with the list header and item text. -ion-list .radio-group-top { +:host(.in-list) .radio-group-top { /* stylelint-disable */ @include globals.ltr() { padding-right: globals.$ion-space-400; diff --git a/core/src/components/radio-group/radio-group.ios.scss b/core/src/components/radio-group/radio-group.ios.scss index 67fccf8513d..8c42026831e 100644 --- a/core/src/components/radio-group/radio-group.ios.scss +++ b/core/src/components/radio-group/radio-group.ios.scss @@ -7,6 +7,6 @@ // Add padding to the error and helper text when used in a // list to align them with the list header and item text. -ion-list .radio-group-top { +:host(.in-list) .radio-group-top { @include padding-horizontal($item-ios-padding-start, $item-ios-padding-end); } diff --git a/core/src/components/radio-group/radio-group.md.scss b/core/src/components/radio-group/radio-group.md.scss index 009a8fe58c4..5483e27ce5c 100644 --- a/core/src/components/radio-group/radio-group.md.scss +++ b/core/src/components/radio-group/radio-group.md.scss @@ -7,6 +7,6 @@ // Add padding to the error and helper text when used in a // list to align them with the list header and item text. -ion-list .radio-group-top { +:host(.in-list) .radio-group-top { @include padding-horizontal($item-md-padding-start, $item-md-padding-end); } diff --git a/core/src/components/radio-group/radio-group.native.scss b/core/src/components/radio-group/radio-group.native.scss index c0a65bdd955..8cce2004169 100644 --- a/core/src/components/radio-group/radio-group.native.scss +++ b/core/src/components/radio-group/radio-group.native.scss @@ -1,13 +1,6 @@ @import "./radio-group.common"; @import "../../themes/native/native.globals"; -// Radio Group: Native -// -------------------------------------------------- - -.radio-group-wrapper { - display: inline; -} - // Radio Group: Top // -------------------------------------------------- diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index ae95316c25c..ab9ce1579cf 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core'; import { checkInvalidState } from '@utils/forms'; import { renderHiddenInput } from '@utils/helpers'; +import { hostContext } from '@utils/theme'; import { getIonTheme } from '../../global/ionic-global'; @@ -10,6 +11,10 @@ import type { RadioGroupChangeEventDetail, RadioGroupCompareFn } from './radio-g /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. + * + * @part supporting-text - Supporting text displayed above the radios. + * @part helper-text - Supporting text displayed above the radios when the radio group is valid. + * @part error-text - Supporting text displayed above the radios when the radio group is invalid and touched. */ @Component({ tag: 'ion-radio-group', @@ -18,6 +23,7 @@ import type { RadioGroupChangeEventDetail, RadioGroupCompareFn } from './radio-g md: 'radio-group.md.scss', ionic: 'radio-group.ionic.scss', }, + shadow: true, }) export class RadioGroup implements ComponentInterface { private inputId = `ion-rg-${radioGroupIds++}`; @@ -318,10 +324,10 @@ export class RadioGroup implements ComponentInterface { return (
-
+
{!isInvalid ? helperText : null}
- @@ -352,6 +358,7 @@ export class RadioGroup implements ComponentInterface { {this.renderHintText()} - {/* - TODO(FW-6279): Wrapping the slot in a div is a workaround due to a - Stencil issue. Without the wrapper, the children radio will fire the - blur event on focus, instead of waiting for them to be blurred. - */} -
- -
+
); } diff --git a/core/src/components/radio-group/test/supporting-text/index.html b/core/src/components/radio-group/test/supporting-text/index.html index 9abc0e42d68..46a4a9bd3e5 100644 --- a/core/src/components/radio-group/test/supporting-text/index.html +++ b/core/src/components/radio-group/test/supporting-text/index.html @@ -30,10 +30,10 @@ ion-radio { width: 100%; } - .custom .helper-text { + .custom::part(helper-text) { color: green; } - .custom .error-text { + .custom::part(error-text) { color: purple; } diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts index a3d12d63e20..3ffe736eab1 100644 --- a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts +++ b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts @@ -197,11 +197,11 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co await page.setContent( ` @@ -222,11 +222,11 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co await page.setContent( ` diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-custom-css-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-custom-css-md-ltr-Mobile-Safari-linux.png index 216a9b1eb4f..90fd1f76f2d 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-custom-css-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-custom-css-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index e641e783596..155a478931c 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index 584102da5dd..d448fad8128 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png index d41585e92bd..1e715f5d07e 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Chrome-linux.png index af9edfc6d36..402cceecc50 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Firefox-linux.png index 6f1b840b6ef..5e13048bdeb 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Safari-linux.png index 8d6727dc82b..d0b89209d4f 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-md-ltr-Mobile-Safari-linux.png index bf3f8367944..0afdf91bf27 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-error-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png index d1acba63ebd..fdef42eebe0 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2edadc83a2a..d78b8ed1291 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index dac467869e7..df6a5bd91c7 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 7eca8a00b1b..e97bf46c714 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Chrome-linux.png index a431d4719e0..94b019ea667 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Firefox-linux.png index 8fcd29e304b..77dd3d1a6dc 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Safari-linux.png index 6567b58f7d2..bb6231af997 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-md-ltr-Mobile-Safari-linux.png index edbd8f53a4f..1c2a4f1c856 100644 Binary files a/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts-snapshots/radio-group-helper-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Chrome-linux.png index 9155f867c19..751705955c9 100644 Binary files a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Firefox-linux.png index 6d5593aede0..a648e7b7a88 100644 Binary files a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Safari-linux.png index 1d7204c9f99..059feabfb9d 100644 Binary files a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Chrome-linux.png index 216f22304c4..eb36ccd99d9 100644 Binary files a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Firefox-linux.png index 6968c85969d..969ab1699ec 100644 Binary files a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Safari-linux.png index fcd66741369..35fc5af22e2 100644 Binary files a/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio/test/a11y/radio.e2e.ts-snapshots/radio-scale-md-ltr-Mobile-Safari-linux.png differ