feat(radio-group): add helper and error text to the ionic theme (#30271)

- Adds the common stylesheet for the shared styles
- Adds design for helper and error text to the radio group for the ionic
theme.
- Updates tests to add screenshots for ionic theme

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

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

@@ -1,6 +1,4 @@
-@import "../../themes/native/native.globals";
-
-// Radio Group
+// Radio Group: Common
 // --------------------------------------------------
 
 ion-radio-group {
@@ -8,31 +6,19 @@ ion-radio-group {
   vertical-align: top;
 }
 
-.radio-group-wrapper {
-  display: inline;
-}
-
 // Radio Group: Top
 // --------------------------------------------------
 
-.radio-group-top {
-  line-height: 1.5;
-}
-
 /**
  * Error text should only be shown when .ion-invalid is present
  * on the radio group. Otherwise the helper text should be shown.
  */
 .radio-group-top .error-text {
   display: none;
-
-  color: ion-color(danger, base);
 }
 
 .radio-group-top .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 .ion-touched.ion-invalid .radio-group-top .error-text {

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

@@ -0,0 +1,38 @@
+@use "../../themes/ionic/ionic.globals" as globals;
+@import "./radio-group.common";
+
+// Ionic Radio Group Top
+// --------------------------------------------------
+
+.radio-group-top {
+  @include globals.typography(globals.$ion-body-md-regular);
+
+  margin-bottom: globals.$ion-space-400;
+}
+
+.radio-group-top .error-text {
+  color: globals.$ion-semantics-danger-800;
+}
+
+.radio-group-top .helper-text {
+  color: globals.$ion-primitives-neutral-800;
+}
+
+// Radio Group Top: in List
+// --------------------------------------------------
+
+// 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 */
+}

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

@@ -1,5 +1,5 @@
 @import "../../themes/native/native.globals.ios";
-@import "./radio-group";
+@import "./radio-group.native";
 @import "../item/item.ios.vars";
 
 // iOS Radio Group Top in List

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

@@ -1,5 +1,5 @@
 @import "../../themes/native/native.globals.md";
-@import "./radio-group";
+@import "./radio-group.native";
 @import "../item/item.md.vars";
 
 // Material Design Radio Group Top in List

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

@@ -0,0 +1,24 @@
+@import "./radio-group.common";
+@import "../../themes/native/native.globals";
+
+// Radio Group: Native
+// --------------------------------------------------
+
+.radio-group-wrapper {
+  display: inline;
+}
+
+// Radio Group: Top
+// --------------------------------------------------
+
+.radio-group-top {
+  line-height: 1.5;
+}
+
+.radio-group-top .error-text {
+  color: ion-color(danger, base);
+}
+
+.radio-group-top .helper-text {
+  color: $text-color-step-300;
+}

core/src/components/radio-group/radio-group.tsx

@@ -15,6 +15,7 @@ import type { RadioGroupChangeEventDetail, RadioGroupCompareFn } from './radio-g
   styleUrls: {
     ios: 'radio-group.ios.scss',
     md: 'radio-group.md.scss',
+    ionic: 'radio-group.ionic.scss',
   },
 })
 export class RadioGroup implements ComponentInterface {

core/src/components/radio-group/test/supporting-text/radio-group.e2e.ts

@@ -152,7 +152,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 /**
  * Rendering is different across modes
  */
-configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('radio-group: supporting text rendering'), () => {
     test('should not have visual regressions when rendering helper text', async ({ page }) => {
       await page.setContent(