fix(Radio): Fix multi lined radio buttons (#570)

* fix(Radio): Set min-width to stop svg from being squished

* fix(Radio): Make label text align top instead of center

* fix(Radio): Switch to margin top & bottom

* fix(Radio): Switch to use flex-shrink

* fix(Radio): Update snapshots

* fix(Radio): Fix touchable height and refactor

react/Radio/Radio.demo.js

@@ -31,6 +31,12 @@ class RadioContainer extends Component {
     });
   };
 
+  handleMaybe = () => {
+    this.setState({
+      value: 'Maybe'
+    });
+  };
+
   render() {
     const { component: DemoComponent, componentProps } = this.props;
     const { value } = this.state;
@@ -52,6 +58,13 @@ class RadioContainer extends Component {
           checked={value === 'No'}
           onChange={this.handleNo}
         />
+        <DemoComponent
+          {...componentProps}
+          id="Maybe"
+          label="Maybe - Very long label which goes over many lines."
+          checked={value === 'Maybe'}
+          onChange={this.handleMaybe}
+        />
       </div>
     );
   }

react/Radio/Radio.demo.less

@@ -1,6 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
+  width: 175px;
 
   > :global(*) {
     min-width: 150px; // :(

react/Radio/Radio.js

@@ -51,39 +51,27 @@ export default class Radio extends Component {
     return <input {...allInputProps} />;
   }
 
-  renderLabel() {
-    const { label, labelProps, id } = this.props;
+  render() {
+    const { label, labelProps, id, className } = this.props;
     const allLabelProps = {
       htmlFor: id,
       ...combineClassNames(labelProps, styles.label)
     };
 
     return (
-      <label {...allLabelProps}>
-        <svg
-          className={styles.svg}
-          viewBox="0 0 200 200"
-          xmlns="http://www.w3.org/2000/svg"
-          focusable="false" >
-          <circle className={classnames(styles.circle, styles.circle_isHover)} cx="100" cy="100" r="100" />
-          <circle className={classnames(styles.circle, styles.circle_isSelected)} cx="100" cy="100" r="100" />
-        </svg>
-        <Text raw baseline={false} className={styles.labelText}>{label}</Text>
-      </label>
-    );
-  }
-
-  render() {
-    const { className } = this.props;
-    const rootClassNames = classnames({
-      [styles.root]: true,
-      [className]: className
-    });
-
-    return (
-      <div className={rootClassNames}>
-        {this.renderInput()}
-        {this.renderLabel()}
+      <div className={className}>
+        <label {...allLabelProps}>
+          {this.renderInput()}
+          <svg
+            className={styles.svg}
+            viewBox="0 0 200 200"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false" >
+            <circle className={classnames(styles.circle, styles.circle_isHover)} cx="100" cy="100" r="100" />
+            <circle className={classnames(styles.circle, styles.circle_isSelected)} cx="100" cy="100" r="100" />
+          </svg>
+          <Text raw={true} baseline={false} className={styles.labelText}>{label}</Text>
+        </label>
       </div>
     );
   }

react/Radio/Radio.less

@@ -1,10 +1,15 @@
 @import (reference) "~seek-style-guide/theme";
 @circumference: @row-height * 5;
+@touchableMargin: (@touchableTextHeight - @circumference) / 2;
 
-.root {
-  .touchableText(@standard-type-scale);
-  display: inline-flex;
-  align-items: center;
+.label {
+  display: flex;
+  cursor: pointer;
+  min-height: @touchableTextHeight;
+
+  :global(*) {
+    pointer-events: none;
+  }
 }
 
 .input {
@@ -13,36 +18,34 @@
   width: @circumference;
   height: @circumference;
   border: none;
-  margin: 0;
-  cursor: pointer;
+  margin: @touchableMargin 0 0 0;
 }
 
-.label {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-
-  :global(*) {
-    pointer-events: none;
+.labelText {
+  @media @desktop {
+    padding: (((@interaction-type-row-span - @standard-type-row-span) / 2) * @row-height) 0;
+  }
+  @media @mobile {
+    padding: (((@interaction-type-row-span - @standard-type-row-span-mobile) / 2) * @row-height) 0;
   }
-}
 
-.labelText {
-  .input:checked + .label & {
+  .input:checked + .svg & {
     font-weight: @sk-bold;
   }
 }
 
 .svg {
+  flex-shrink: 0;
   background-color: @sk-white;
   width: @circumference;
   height: @circumference;
   border: @field-border-width solid @sk-mid-gray-light;
   border-radius: 100%;
   padding: 5px;
+  margin-top: @touchableMargin;
   margin-right: @gutter-width / 2;
 
-  .input:not([readonly]):not([disabled]):focus + .label & {
+  .input:not([readonly]):not([disabled]):focus + .svg & {
     .focus();
     border-radius: 100%;
   }
@@ -55,23 +58,23 @@
   transform-origin: 50% 50%;
   opacity: 0;
 
-  .input:active + .label & {
+  .input:active + .svg & {
     transform: scale(0.9);
   }
 
   &.circle_isSelected {
     fill: @sk-form-accent;
 
-    .input:checked + .label & {
+    .input:checked + .svg & {
       opacity: 1;
     }
   }
 
   &.circle_isHover {
     fill: @sk-gray-light;
 
-    .input:focus:not(:checked) + .label &,
-    .input:hover:not(:checked) + .label & {
+    .input:focus:not(:checked) + .svg &,
+    .input:hover:not(:checked) + .svg & {
       opacity: 1;
     }
   }

react/Radio/__snapshots__/Radio.test.js.snap

@@ -2,20 +2,20 @@
 
 exports[`Radio inputProps should pass through other props to the input 1`] = `
 <div
-  className="Radio__root"
+  className=""
 >
-  <input
-    checked={true}
-    className="Radio__input"
-    data-automation="first-name-field"
-    id="testRadio"
-    onChange={[Function]}
-    type="radio"
-  />
   <label
     className="Radio__label"
     htmlFor="testRadio"
   >
+    <input
+      checked={true}
+      className="Radio__input"
+      data-automation="first-name-field"
+      id="testRadio"
+      onChange={[Function]}
+      type="radio"
+    />
     <svg
       className="Radio__svg"
       focusable="false"
@@ -48,19 +48,19 @@ exports[`Radio inputProps should pass through other props to the input 1`] = `
 
 exports[`Radio should render with className 1`] = `
 <div
-  className="Radio__root testClassname"
+  className="testClassname"
 >
-  <input
-    checked={false}
-    className="Radio__input"
-    id="testRadio"
-    onChange={[Function]}
-    type="radio"
-  />
   <label
     className="Radio__label"
     htmlFor="testRadio"
   >
+    <input
+      checked={false}
+      className="Radio__input"
+      id="testRadio"
+      onChange={[Function]}
+      type="radio"
+    />
     <svg
       className="Radio__svg"
       focusable="false"
@@ -93,19 +93,19 @@ exports[`Radio should render with className 1`] = `
 
 exports[`Radio should render with simple props 1`] = `
 <div
-  className="Radio__root"
+  className=""
 >
-  <input
-    checked={false}
-    className="Radio__input"
-    id="testRadio"
-    onChange={[Function]}
-    type="radio"
-  />
   <label
     className="Radio__label"
     htmlFor="testRadio"
   >
+    <input
+      checked={false}
+      className="Radio__input"
+      id="testRadio"
+      onChange={[Function]}
+      type="radio"
+    />
     <svg
       className="Radio__svg"
       focusable="false"