From e7b83c6b39fc3f4a2be7ab2da35a750b30521584 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Mon, 20 Jan 2020 11:13:11 -0700
Subject: [PATCH] [CORL-875] Semi-bold selected text on radio buttons (#2804)

* Semi-bold selected text on radio buttons

Makes it very obvious which item is selected.

CORL-875

* fix: updated snapshots

Co-authored-by: Wyatt Johnson <accounts+github@wyattjoh.ca>
---
 .../__snapshots__/advanced.spec.tsx.snap         |  6 +++---
 .../configure/__snapshots__/auth.spec.tsx.snap   |  6 +++---
 .../__snapshots__/general.spec.tsx.snap          |  8 ++++----
 .../__snapshots__/moderation.spec.tsx.snap       | 16 ++++++++--------
 .../ui/components/v2/RadioButton/RadioButton.css |  4 ++++
 .../ui/components/v2/RadioButton/RadioButton.tsx |  1 +
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
index 8adfd5644..15bde59be 100644
--- a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
@@ -312,7 +312,7 @@ When disabled, users will have to refresh the page to see new comments.
                         value="true"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="live.enabled-true"
                       >
                         <span>
@@ -469,7 +469,7 @@ https://domain.com).
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="stories.disableLazy-true"
                       >
                         <span>
@@ -537,7 +537,7 @@ https://domain.com).
                         value="true"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="stories.scraping.enabled-true"
                       >
                         <span>
diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
index bad726c47..53fd365c0 100644
--- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
@@ -200,7 +200,7 @@ compliance.
                             value="true"
                           />
                           <label
-                            className="RadioButton-label"
+                            className="RadioButton-label RadioButton-labelChecked"
                             htmlFor="accountFeatures.changeUsername-true"
                           >
                             <span>
@@ -274,7 +274,7 @@ compliance.
                             value="true"
                           />
                           <label
-                            className="RadioButton-label"
+                            className="RadioButton-label RadioButton-labelChecked"
                             htmlFor="accountFeatures.downloadComments-true"
                           >
                             <span>
@@ -349,7 +349,7 @@ address from the site and the database.
                             value="true"
                           />
                           <label
-                            className="RadioButton-label"
+                            className="RadioButton-label RadioButton-labelChecked"
                             htmlFor="accountFeatures.deleteAccount-true"
                           >
                             <span>
diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
index 4008dfc5d..4afcc8925 100644
--- a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
@@ -281,7 +281,7 @@ reactions, be reported, and be shared.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="disableCommenting.enabled-true"
                       >
                         <span>
@@ -419,7 +419,7 @@ reactions, be reported, and be shared.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="communityGuidelines.enabled-false"
                       >
                         <span>
@@ -551,7 +551,7 @@ Blank spaces at the beginning and the end of a comment will be trimmed.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="charCount.enabled-false"
                       >
                         <span>
@@ -828,7 +828,7 @@ moderation panel.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="closeCommenting.auto-false"
                       >
                         <span>
diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
index f6143b757..76a2991de 100644
--- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
@@ -203,7 +203,7 @@ approved by a moderator.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="moderation-false"
                       >
                         <span>
@@ -262,7 +262,7 @@ approved by a moderator.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="premodLinksEnable-false"
                       >
                         <span>
@@ -351,7 +351,7 @@ for moderator approval before publication.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="newCommenters.premodEnabled-false"
                       >
                         <span>
@@ -524,7 +524,7 @@ apply to Staff comments.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="recentCommentHistory.enabled-false"
                       >
                         <span>
@@ -678,7 +678,7 @@ If approved by a moderator, the comment will be published.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="integrations.perspective.enabled-false"
                       >
                         <span>
@@ -830,7 +830,7 @@ improve the API over time.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="integrations.perspective.doNotStore-true"
                       >
                         <span>
@@ -924,7 +924,7 @@ community model building purposes to improve the API over time.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="integrations.perspective.sendFeedback-false"
                       >
                         <span>
@@ -1128,7 +1128,7 @@ If approved by a moderator, the comment will be published.
                         value="false"
                       />
                       <label
-                        className="RadioButton-label"
+                        className="RadioButton-label RadioButton-labelChecked"
                         htmlFor="integrations.akismet.enabled-false"
                       >
                         <span>
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.css b/src/core/client/ui/components/v2/RadioButton/RadioButton.css
index 359089cdd..2d6734d9a 100644
--- a/src/core/client/ui/components/v2/RadioButton/RadioButton.css
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.css
@@ -20,6 +20,10 @@
   align-items: center;
 }
 
+.labelChecked {
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+}
+
 .labelLight {
   color: var(--palette-text-light);
 }
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx b/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
index d725cdf77..27aef9158 100644
--- a/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
@@ -75,6 +75,7 @@ class RadioButton extends Component<RadioButtonProps> {
           className={cn(classes.label, {
             [classes.labelLight]: light,
             [classes.focus]: keyboardFocus,
+            [classes.labelChecked]: this.props.checked,
           })}
           htmlFor={finalID}
         >