Make radio-group use the Shadow DOM

Author: OS-pedrolourenco

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,top
 
 ion-range,shadow
 ion-range,prop,activeBarStart,number | undefined,undefined,false,false

core/src/components/radio-group/radio-group.common.scss

@@ -1,7 +1,7 @@
 // Radio Group: Common
 // --------------------------------------------------
 
-ion-radio-group {
+:host {
   // Prevents additional pixels from being rendered on top
   vertical-align: top;
 }
@@ -21,10 +21,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

@@ -23,16 +23,20 @@
 
 // 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 {
-  /* stylelint-disable */
-  @include globals.ltr() {
-    padding-right: globals.$ion-space-400;
-    padding-left: calc(globals.$ion-space-400 + var(--ion-safe-area-left, 0px));
-  }
-
-  @include globals.rtl() {
-    padding-right: calc(globals.$ion-space-400 + var(--ion-safe-area-right, 0px));
-    padding-left: globals.$ion-space-400;
-  }
-  /* stylelint-enable */
+// Note: :host-context() cannot be nested inside ltr()/rtl() mixins
+// because the mixin tries to transform the selector, creating invalid CSS.
+// We work around this by using separate rules outside the mixins.
+/* stylelint-disable */
+:host-context(ion-list) .radio-group-top {
+  // Default to LTR - padding-left includes safe area
+  padding-right: globals.$ion-space-400;
+  padding-left: calc(globals.$ion-space-400 + var(--ion-safe-area-left, 0px));
 }
+
+// RTL support - match when document or ancestor has dir="rtl"
+:host-context([dir="rtl"] ion-list) .radio-group-top,
+:host-context(ion-list) .radio-group-top:dir(rtl) {
+  padding-right: calc(globals.$ion-space-400 + var(--ion-safe-area-right, 0px));
+  padding-left: globals.$ion-space-400;
+}
+/* stylelint-enable */

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-context(ion-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-context(ion-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

@@ -18,6 +18,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++}`;
@@ -317,11 +318,11 @@ export class RadioGroup implements ComponentInterface {
     }
 
     return (
-      <div class="radio-group-top">
-        <div id={helperTextId} class="helper-text" aria-live="polite">
+      <div class="radio-group-top" part="top">
+        <div id={helperTextId} class="helper-text" part="helper-text" aria-live="polite">
           {!isInvalid ? helperText : null}
         </div>
-        <div id={errorTextId} class="error-text" role="alert">
+        <div id={errorTextId} class="error-text" part="error-text" role="alert">
           {isInvalid ? errorText : null}
         </div>
       </div>
@@ -360,14 +361,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(top) {
             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(top) {
             font-size: 20px;
           }
 
-          .radio-group-top .error-text {
+          ion-radio-group::part(error-text) {
             color: purple;
           }
         </style>