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

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The radio-group's wrapper div is responsible for several issues that
have been reported, specially due to making it so that radio elements
are not direct children of radio-groups. Now it is also causing problems
on the OutSystems side.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The solution involved:
- Removing the radio-group-wrapper div, which was first added as a
workaround to a Stencil issue where radio children would incorrectly
fire blur events on focus;
- Converting the radio-group into a shadow component as another
workaround to the Stencil issue;
- Adjusting the radio-group's styling to the new changes. 

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <[email protected]>
Co-authored-by: Brandy Smith <[email protected]>

Author: OS-pedrolourenco

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`.
 
+<h4 id="version-9x-radio-group">Radio Group</h4>
+
+- Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).<br/>
+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.<br/>
+Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
+
 <h5>Example 1: Swap two columns</h5>
 
 **Version up to 8.x**

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>