Rename mx_RadioButton to mx_StyledRadioButton to match class name (#7083)

2024-11-15 20:54:59 +08:00 · 2021-11-04 12:57:38 +00:00 · 2021-11-04 12:57:38 +00:00 · 9c8e1d32e2
commit 9c8e1d32e2
parent 7a203461f7
14 changed files with 47 additions and 47 deletions
--- 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;
    }
--- 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;
        }
--- 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;
--- 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;
 }
--- 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;
 }
--- 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;
    }
 }
--- 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;
        }
    }
--- 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);
        }

--- 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;
            }
        }
--- 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
--- 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;
    }

--- 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;
 }
--- 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>;
        }
    }
--- 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>