From 155f3d2e84ebee25109bfeccf7c45ec49e264f35 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Mon, 7 Jul 2025 17:59:40 -0400
Subject: [PATCH] refactor(cdk-experimental/radio-group): use shared  example
 classes

---
 ...radio-group-active-descendant-example.html |  4 ++--
 .../cdk-radio-group-configurable-example.html |  9 ++++++--
 ...adio-group-disabled-focusable-example.html |  4 ++--
 ...-radio-group-disabled-skipped-example.html |  4 ++--
 .../cdk-radio-group-disabled-example.html     |  4 ++--
 .../cdk-radio-group-horizontal-example.html   |  4 ++--
 .../cdk-radio-group-readonly-example.html     |  4 ++--
 .../cdk-radio-group-standard-example.html     |  4 ++--
 .../radio-group/radio-common.css              | 21 -------------------
 9 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-active-descendant/cdk-radio-group-active-descendant-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-active-descendant/cdk-radio-group-active-descendant-example.html
index 4a37726ff265..c494e62be664 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-active-descendant/cdk-radio-group-active-descendant-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-active-descendant/cdk-radio-group-active-descendant-example.html
@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     navigationMode="activedescendant"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="active-descendant-radio-label"
   >
     <label class="example-label" id="active-descendant-radio-label">Favorite Fruit (Active Descendant)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         cdkRadioButton
         #radioButton="cdkRadioButton"
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-configurable/cdk-radio-group-configurable-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-configurable/cdk-radio-group-configurable-example.html
index 4a0841e15224..beff767df206 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-configurable/cdk-radio-group-configurable-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-configurable/cdk-radio-group-configurable-example.html
@@ -37,12 +37,17 @@
   [skipDisabled]="skipDisabled.value"
   [orientation]="orientation"
   [focusMode]="focusMode"
-  class="example-radio-group"
+  class="example-radio-group example-parent"
   aria-label="Select your favorite fruit"
 >
   @for (fruit of fruits; track fruit) {
     @let optionDisabled = disabledOptions.includes(fruit);
-    <li cdkRadioButton [value]="fruit" [disabled]="optionDisabled" class="example-radio-button">
+    <li
+      cdkRadioButton
+      [value]="fruit"
+      [disabled]="optionDisabled"
+      class="example-radio-button example-stateful example-selectable"
+    >
       <span class="example-radio-indicator"></span>
       <span>{{ fruit }}</span>
     </li>
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-focusable/cdk-radio-group-disabled-focusable-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-focusable/cdk-radio-group-disabled-focusable-example.html
index 40d78c7af080..35067271c9ad 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-focusable/cdk-radio-group-disabled-focusable-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-focusable/cdk-radio-group-disabled-focusable-example.html
@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     [skipDisabled]="false"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="disabled-focusable-radio-label"
   >
     <label class="example-label" id="disabled-focusable-radio-label">Favorite Fruit (Disabled are Focusable)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         [disabled]="disabledFruits.includes(fruit)"
         cdkRadioButton
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-skipped/cdk-radio-group-disabled-skipped-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-skipped/cdk-radio-group-disabled-skipped-example.html
index bbd845fc927d..3b98c7dda395 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-skipped/cdk-radio-group-disabled-skipped-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled-skipped/cdk-radio-group-disabled-skipped-example.html
@@ -1,13 +1,13 @@
 <div class="example-container">
   <ul
     cdkRadioGroup
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="disabled-skipped-radio-label"
   >
     <label class="example-label" id="disabled-skipped-radio-label">Select a Fruit (Disabled are Skipped)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         [disabled]="disabledFruits.includes(fruit)"
         cdkRadioButton
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled/cdk-radio-group-disabled-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled/cdk-radio-group-disabled-example.html
index 9009f4cb43e4..dbcacedd39af 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled/cdk-radio-group-disabled-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled/cdk-radio-group-disabled-example.html
@@ -2,12 +2,12 @@
   <ul
     cdkRadioGroup
     [disabled]="true"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="disabled-radio-label"
   >
     <label class="example-label" id="disabled-radio-label">Favorite Fruit (Disabled)</label>
     @for (fruit of fruits; track fruit) {
-      <li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
+      <li class="example-radio-button example-stateful example-selectable" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
         <span
           class="example-radio-indicator"
           [class.example-radio-checked]="radioButton.pattern.selected()"
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-horizontal/cdk-radio-group-horizontal-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-horizontal/cdk-radio-group-horizontal-example.html
index 2b22dd8b2b7d..738702c92156 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-horizontal/cdk-radio-group-horizontal-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-horizontal/cdk-radio-group-horizontal-example.html
@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     orientation="horizontal"
-    class="example-radio-group example-radio-group-horizontal"
+    class="example-radio-group example-radio-group-horizontal example-parent"
     aria-labelledby="horizontal-radio-label"
   >
     <label class="example-label" id="horizontal-radio-label">Favorite Fruit (Horizontal)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         cdkRadioButton
         #radioButton="cdkRadioButton"
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-readonly/cdk-radio-group-readonly-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-readonly/cdk-radio-group-readonly-example.html
index 2eaf19aed13c..ca66f991f0c2 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-readonly/cdk-radio-group-readonly-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-readonly/cdk-radio-group-readonly-example.html
@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     [readonly]="true"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="readonly-radio-label"
   >
     <label class="example-label" id="readonly-radio-label">Favorite Fruit (Readonly)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         cdkRadioButton
         #radioButton="cdkRadioButton"
diff --git a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-standard/cdk-radio-group-standard-example.html b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-standard/cdk-radio-group-standard-example.html
index d4f2d1b0eaec..4287e4fe6800 100644
--- a/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-standard/cdk-radio-group-standard-example.html
+++ b/src/components-examples/cdk-experimental/radio-group/cdk-radio-group-standard/cdk-radio-group-standard-example.html
@@ -1,12 +1,12 @@
 <div class="example-container">
   <ul
     cdkRadioGroup
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="standard-radio-label"
   >
     <label class="example-label" id="standard-radio-label">Favorite Fruit</label>
     @for (fruit of fruits; track fruit) {
-      <li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
+      <li class="example-radio-button example-stateful example-selectable" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
         <span
           class="example-radio-indicator"
           [class.example-radio-checked]="radioButton.pattern.selected()"
diff --git a/src/components-examples/cdk-experimental/radio-group/radio-common.css b/src/components-examples/cdk-experimental/radio-group/radio-common.css
index d9f137fc65c2..6d4d6c4c36b4 100644
--- a/src/components-examples/cdk-experimental/radio-group/radio-common.css
+++ b/src/components-examples/cdk-experimental/radio-group/radio-common.css
@@ -23,7 +23,6 @@
 }
 
 .example-radio-group[aria-disabled='true'] {
-  background-color: var(--mat-sys-surface-dim);
   pointer-events: none;
 }
 
@@ -73,30 +72,10 @@
   background-color: var(--mat-sys-outline);
 }
 
-.example-radio-button.cdk-active,
-.example-radio-button[aria-disabled='false']:hover {
-  outline: 1px solid var(--mat-sys-outline);
-  background: var(--mat-sys-surface-container);
-}
-
-.example-radio-button[aria-disabled='false']:focus-within {
-  outline: 2px solid var(--mat-sys-primary);
-  background: var(--mat-sys-surface-container);
-}
-
-.example-radio-button.cdk-active[aria-disabled='true'],
-.example-radio-button[aria-disabled='true']:focus-within {
-  outline: 2px solid var(--mat-sys-outline);
-}
-
 .example-radio-button[aria-disabled='true'] {
   cursor: default;
 }
 
-.example-radio-button[aria-disabled='true'] span:not(.example-radio-indicator) {
-  opacity: 0.3;
-}
-
 .example-radio-button[aria-disabled='true']::before {
   content: '';
   position: absolute;