feat(radio-group): remove radio-group-wrapper and convert to shadow DOM

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<any>,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

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;
 }

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;

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);
 }

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);
 }

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
 // --------------------------------------------------
 

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 (
       <div class="radio-group-top">
-        <div id={helperTextId} class="helper-text" aria-live="polite">
+        <div id={helperTextId} class="helper-text" part="supporting-text helper-text" aria-live="polite">
           {!isInvalid ? helperText : null}
         </div>
-        <div id={errorTextId} class="error-text" role="alert">
+        <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert">
           {isInvalid ? errorText : null}
         </div>
       </div>
@@ -352,6 +358,7 @@ export class RadioGroup implements ComponentInterface {
       <Host
         class={{
           [theme]: true,
+          'in-list': hostContext('ion-list', el),
         }}
         role="radiogroup"
         aria-labelledby={label ? labelId : null}
@@ -360,14 +367,7 @@ export class RadioGroup implements ComponentInterface {
         onClick={this.onClick}
       >
         {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.
-        */}
-        <div class="radio-group-wrapper">
-          <slot></slot>
-        </div>
+        <slot></slot>
       </Host>
     );
   }

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;
       }
     </style>

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(
         `
         <style>
-          .radio-group-top {
+          ion-radio-group::part(supporting-text) {
             font-size: 20px;
           }
 
-          .radio-group-top .helper-text {
+          ion-radio-group::part(helper-text) {
             color: green;
           }
         </style>
@@ -222,11 +222,11 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await page.setContent(
         `
         <style>
-          .radio-group-top {
+          ion-radio-group::part(supporting-text) {
             font-size: 20px;
           }
 
-          .radio-group-top .error-text {
+          ion-radio-group::part(error-text) {
             color: purple;
           }
         </style>