From 9c8e1d32e205989d7504aa105b7f89971331ec5f Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Thu, 4 Nov 2021 12:57:38 +0000
Subject: [PATCH] Rename mx_RadioButton to mx_StyledRadioButton to match class
 name (#7083)

---
 res/css/views/dialogs/_ExportDialog.scss      |  6 +++---
 res/css/views/dialogs/_FeedbackDialog.scss    | 10 +++++-----
 .../views/dialogs/_SpaceSettingsDialog.scss   |  4 ++--
 .../security/_CreateSecretStorageDialog.scss  |  2 +-
 .../views/elements/_StyledRadioButton.scss    | 12 +++++------
 res/css/views/rooms/_RoomSublist.scss         |  2 +-
 res/css/views/settings/_JoinRuleSettings.scss |  4 ++--
 res/css/views/settings/_LayoutSwitcher.scss   |  6 +++---
 res/css/views/settings/_Notifications.scss    |  6 +++---
 res/css/views/settings/_ThemeChoicePanel.scss |  4 ++--
 .../views/spaces/_SpaceChildrenPicker.scss    |  2 +-
 .../css/_light-high-contrast.scss             |  4 ++--
 .../views/elements/StyledRadioButton.tsx      | 20 +++++++++----------
 .../ThemeChoicePanel-test.tsx.snap            | 12 +++++------
 14 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.scss
index d578e72ead..0035ca9eff 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.scss
@@ -34,11 +34,11 @@ limitations under the License.
             display: none;
         }
 
-        .mx_RadioButton input[type="radio"]:checked + div > div {
+        .mx_StyledRadioButton input[type="radio"]:checked + div > div {
             background: $greyed-fg-color;
         }
 
-        .mx_RadioButton input[type=radio]:checked + div {
+        .mx_StyledRadioButton input[type=radio]:checked + div {
             border-color: unset;
         }
 
@@ -76,7 +76,7 @@ limitations under the License.
         align-items: center;
     }
 
-    .mx_RadioButton > .mx_RadioButton_content {
+    .mx_StyledRadioButton > .mx_StyledRadioButton_content {
         margin-top: 5px;
         margin-bottom: 5px;
     }
diff --git a/res/css/views/dialogs/_FeedbackDialog.scss b/res/css/views/dialogs/_FeedbackDialog.scss
index 74733f7220..22559d9197 100644
--- a/res/css/views/dialogs/_FeedbackDialog.scss
+++ b/res/css/views/dialogs/_FeedbackDialog.scss
@@ -75,7 +75,7 @@ limitations under the License.
     }
 
     .mx_FeedbackDialog_rateApp {
-        .mx_RadioButton {
+        .mx_StyledRadioButton {
             display: inline-flex;
             font-size: 20px;
             transition: font-size 1s, border .5s;
@@ -90,7 +90,7 @@ limitations under the License.
                 display: none;
             }
 
-            .mx_RadioButton_content {
+            .mx_StyledRadioButton_content {
                 background: $icon-button-color;
                 width: 40px;
                 height: 40px;
@@ -100,16 +100,16 @@ limitations under the License.
                 margin: 5px;
             }
 
-            .mx_RadioButton_spacer {
+            .mx_StyledRadioButton_spacer {
                 display: none;
             }
 
-            & + .mx_RadioButton {
+            & + .mx_StyledRadioButton {
                 margin-left: 16px;
             }
         }
 
-        .mx_RadioButton_checked {
+        .mx_StyledRadioButton_checked {
             font-size: 24px;
             border-color: $accent-color;
         }
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
index e26e4f8b49..05cd55a570 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -43,11 +43,11 @@ limitations under the License.
             padding-top: 24px;
         }
 
-        .mx_RadioButton {
+        .mx_StyledRadioButton {
             margin-top: 8px;
             margin-bottom: 4px;
 
-            .mx_RadioButton_content {
+            .mx_StyledRadioButton_content {
                 font-weight: $font-semi-bold;
                 line-height: $font-18px;
                 color: $primary-content;
diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
index b14206ff6d..46b300f463 100644
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
@@ -82,7 +82,7 @@ limitations under the License.
     display: block;
 }
 
-.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
+.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
     margin-bottom: 16px;
     padding: 11px;
 }
diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.scss
index 1ae787dfc2..c74ff97511 100644
--- a/res/css/views/elements/_StyledRadioButton.scss
+++ b/res/css/views/elements/_StyledRadioButton.scss
@@ -19,7 +19,7 @@ limitations under the License.
 * width
 */
 
-.mx_RadioButton {
+.mx_StyledRadioButton {
     $radio-circle-color: $muted-fg-color;
     $active-radio-circle-color: $accent-color;
     position: relative;
@@ -28,7 +28,7 @@ limitations under the License.
     align-items: baseline;
     flex-grow: 1;
 
-    > .mx_RadioButton_content {
+    > .mx_StyledRadioButton_content {
         flex-grow: 1;
 
         display: flex;
@@ -38,7 +38,7 @@ limitations under the License.
         margin-right: 8px;
     }
 
-    .mx_RadioButton_spacer {
+    .mx_StyledRadioButton_spacer {
         flex-shrink: 0;
         flex-grow: 0;
 
@@ -113,18 +113,18 @@ limitations under the License.
         }
     }
 
-    .mx_RadioButton_innerLabel {
+    .mx_StyledRadioButton_innerLabel {
         display: flex;
         position: relative;
         top: 4px;
     }
 }
 
-.mx_RadioButton_outlined {
+.mx_StyledRadioButton_outlined {
     border: 1px solid $input-darker-bg-color;
     border-radius: 8px;
 }
 
-.mx_RadioButton_checked {
+.mx_StyledRadioButton_checked {
     border-color: $accent-color;
 }
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index 011824d9d4..3a7bbc2373 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -379,7 +379,7 @@ limitations under the License.
         margin-bottom: 4px;
     }
 
-    .mx_RadioButton, .mx_Checkbox {
+    .mx_StyledRadioButton, .mx_Checkbox {
         margin-top: 8px;
     }
 }
diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss
index 8b520b2ab1..721dbe039e 100644
--- a/res/css/views/settings/_JoinRuleSettings.scss
+++ b/res/css/views/settings/_JoinRuleSettings.scss
@@ -59,7 +59,7 @@ limitations under the License.
     padding-top: 16px;
     margin-bottom: 8px;
 
-    .mx_RadioButton_content {
+    .mx_StyledRadioButton_content {
         margin-left: 14px;
         font-weight: $font-semi-bold;
         font-size: $font-15px;
@@ -76,7 +76,7 @@ limitations under the License.
         line-height: $font-24px;
         color: $secondary-content;
 
-        & + .mx_RadioButton {
+        & + .mx_StyledRadioButton {
             border-top: 1px solid $menu-border-color;
         }
     }
diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss
index 00fb8aba56..ef82c41b77 100644
--- a/res/css/views/settings/_LayoutSwitcher.scss
+++ b/res/css/views/settings/_LayoutSwitcher.scss
@@ -47,7 +47,7 @@ limitations under the License.
                 pointer-events: none;
             }
 
-            .mx_RadioButton {
+            .mx_StyledRadioButton {
                 flex-grow: 0;
                 padding: 10px;
             }
@@ -61,7 +61,7 @@ limitations under the License.
             }
         }
 
-        .mx_RadioButton {
+        .mx_StyledRadioButton {
             border-top: 1px solid $appearance-tab-border-color;
 
             > input + div {
@@ -69,7 +69,7 @@ limitations under the License.
             }
         }
 
-        .mx_RadioButton_checked {
+        .mx_StyledRadioButton_checked {
             background-color: rgba($accent-color, 0.08);
         }
 
diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss
index 571d8141ec..b950256ced 100644
--- a/res/css/views/settings/_Notifications.scss
+++ b/res/css/views/settings/_Notifications.scss
@@ -49,14 +49,14 @@ limitations under the License.
         }
 
         // Override StyledRadioButton default styles
-        .mx_RadioButton {
+        .mx_StyledRadioButton {
             justify-content: center;
 
-            .mx_RadioButton_content {
+            .mx_StyledRadioButton_content {
                 display: none;
             }
 
-            .mx_RadioButton_spacer {
+            .mx_StyledRadioButton_spacer {
                 display: none;
             }
         }
diff --git a/res/css/views/settings/_ThemeChoicePanel.scss b/res/css/views/settings/_ThemeChoicePanel.scss
index a335b6e68e..4310e50903 100644
--- a/res/css/views/settings/_ThemeChoicePanel.scss
+++ b/res/css/views/settings/_ThemeChoicePanel.scss
@@ -26,7 +26,7 @@ limitations under the License.
         margin-top: 4px;
         margin-bottom: 30px;
 
-        > .mx_RadioButton {
+        > .mx_StyledRadioButton {
             padding: $font-16px;
             box-sizing: border-box;
             border-radius: 10px;
@@ -49,7 +49,7 @@ limitations under the License.
             }
         }
 
-        > .mx_RadioButton_enabled {
+        > .mx_StyledRadioButton_enabled {
             opacity: 1;
 
             // These colors need to be hardcoded because they don't change with the theme
diff --git a/res/css/views/spaces/_SpaceChildrenPicker.scss b/res/css/views/spaces/_SpaceChildrenPicker.scss
index e0fa6ef26d..41632870f8 100644
--- a/res/css/views/spaces/_SpaceChildrenPicker.scss
+++ b/res/css/views/spaces/_SpaceChildrenPicker.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_SpaceChildrenPicker {
     margin: 16px 0;
 
-    .mx_RadioButton + .mx_RadioButton {
+    .mx_StyledRadioButton + .mx_StyledRadioButton {
         margin-top: 16px;
     }
 
diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.scss b/res/themes/light-high-contrast/css/_light-high-contrast.scss
index ef23fdfef1..b1c592e1ea 100644
--- a/res/themes/light-high-contrast/css/_light-high-contrast.scss
+++ b/res/themes/light-high-contrast/css/_light-high-contrast.scss
@@ -108,10 +108,10 @@ $roomtopic-color: $secondary-content;
     background-color: $roomlist-button-bg-color !important;
 }
 
-.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_RadioButton input[type="radio"]:disabled + div {
+.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
     border-color: $primary-content;
 }
 
-.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_RadioButton.mx_RadioButton_disabled {
+.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
     color: $primary-content;
 }
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 1b68274f39..2d114fd962 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -39,13 +39,13 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     public render() {
         const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props;
         const _className = classnames(
-            'mx_RadioButton',
+            'mx_StyledRadioButton',
             className,
             {
-                "mx_RadioButton_disabled": disabled,
-                "mx_RadioButton_enabled": !disabled,
-                "mx_RadioButton_checked": this.props.checked,
-                "mx_RadioButton_outlined": outlined,
+                "mx_StyledRadioButton_disabled": disabled,
+                "mx_StyledRadioButton_enabled": !disabled,
+                "mx_StyledRadioButton_checked": this.props.checked,
+                "mx_StyledRadioButton_outlined": outlined,
             });
 
         const radioButton = <React.Fragment>
@@ -57,16 +57,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
         if (childrenInLabel) {
             return <label className={_className}>
                 { radioButton }
-                <div className="mx_RadioButton_content">{ children }</div>
-                <div className="mx_RadioButton_spacer" />
+                <div className="mx_StyledRadioButton_content">{ children }</div>
+                <div className="mx_StyledRadioButton_spacer" />
             </label>;
         } else {
             return <div className={_className}>
-                <label className="mx_RadioButton_innerLabel">
+                <label className="mx_StyledRadioButton_innerLabel">
                     { radioButton }
                 </label>
-                <div className="mx_RadioButton_content">{ children }</div>
-                <div className="mx_RadioButton_spacer" />
+                <div className="mx_StyledRadioButton_content">{ children }</div>
+                <div className="mx_StyledRadioButton_spacer" />
             </div>;
         }
     }
diff --git a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index a760e9d466..f935368d0a 100644
--- a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -46,7 +46,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
             value="light"
           >
             <label
-              className="mx_RadioButton mx_ThemeSelector_light mx_RadioButton_disabled mx_RadioButton_outlined"
+              className="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
             >
               <input
                 checked={false}
@@ -60,12 +60,12 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
                 <div />
               </div>
               <div
-                className="mx_RadioButton_content"
+                className="mx_StyledRadioButton_content"
               >
                 Light
               </div>
               <div
-                className="mx_RadioButton_spacer"
+                className="mx_StyledRadioButton_spacer"
               />
             </label>
           </StyledRadioButton>
@@ -80,7 +80,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
             value="dark"
           >
             <label
-              className="mx_RadioButton mx_ThemeSelector_dark mx_RadioButton_disabled mx_RadioButton_outlined"
+              className="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
             >
               <input
                 checked={false}
@@ -94,12 +94,12 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
                 <div />
               </div>
               <div
-                className="mx_RadioButton_content"
+                className="mx_StyledRadioButton_content"
               >
                 Dark
               </div>
               <div
-                className="mx_RadioButton_spacer"
+                className="mx_StyledRadioButton_spacer"
               />
             </label>
           </StyledRadioButton>