[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>
This commit is contained in:
Nick Funk
2020-01-20 18:13:11 +00:00
committed by Wyatt Johnson
co-authored by Wyatt Johnson
parent 5c46884a97
commit e7b83c6b39
6 changed files with 23 additions and 18 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -20,6 +20,10 @@
align-items: center;
}
.labelChecked {
font-weight: var(--v2-font-weight-primary-semi-bold);
}
.labelLight {
color: var(--palette-text-light);
}
@@ -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}
>