Moved form label font styles to a mixin

cchaos · Dec 19, 2019 · ece87b0 · ece87b0
1 parent c53be3b
commit ece87b0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js
@@ -45,6 +45,10 @@ export default class extends Component {
           idSelected={this.state.radioIdSelected}
           onChange={this.onChange}
           name="radio group"
+          legend={{
+            children: <span>This is a legend for a radio group</span>,
+            // display: 'hidden',
+          }}
         />
 
         <EuiSpacer size="m" />

diff --git a/src/components/form/form_label/_form_label.scss b/src/components/form/form_label/_form_label.scss
@@ -2,11 +2,9 @@
  * 1. Focused state overrides invalid state.
  */
 .euiFormLabel {
-  @include euiFontSizeXS;
+  @include euiFormLabel;
   display: inline-block;
   transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-  color: $euiTitleColor;
-  font-weight: $euiFontWeightSemiBold;
 
   &.euiFormLabel-isInvalid {
     color: $euiColorDanger; /* 1 */

diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
@@ -1,3 +1,10 @@
+// Labels
+@mixin euiFormLabel {
+  @include euiFontSizeXS;
+  color: $euiTitleColor;
+  font-weight: $euiFontWeightSemiBold;
+}
+
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
   $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding;
   $secondIconSize: $euiFormControlPadding + $euiSize;