Add radio form elements, make checkbox ids required (#65)

* add radios, make id required in checkboxes, and adjust gitignore

* adjust css to feedback

.gitignore

@@ -6,3 +6,5 @@ lib/
 package-lock.json
 npm-debug.log
 .eslintcache
+.yo-rc.json
+tmp/

docs/src/views/form/disabled.js

@@ -9,6 +9,7 @@ import {
   EuiFieldSearch,
   EuiFieldText,
   EuiRange,
+  EuiRadioGroup,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
@@ -40,6 +41,17 @@ export default class extends Component {
       checkboxIdToSelectedMap: {
         [`${idPrefix}1`]: true,
       },
+      radios: [{
+        id: `${idPrefix}4`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}5`,
+        label: 'Option two is selected by default',
+      }, {
+        id: `${idPrefix}6`,
+        label: 'Option three',
+      }],
+      radioIdSelected: `${idPrefix}5`,
     };
   }
 
@@ -59,6 +71,12 @@ export default class extends Component {
     });
   }
 
+  onRadioChange = optionId => {
+    this.setState({
+      radioIdSelected: optionId,
+    });
+  }
+
   render() {
     return (
       <div>
@@ -138,6 +156,16 @@ export default class extends Component {
           onChange={this.onCheckboxChange}
           disabled
         />
+
+        <br />
+        <br />
+
+        <EuiRadioGroup
+          options={this.state.radios}
+          idSelected={this.state.radioIdSelected}
+          onChange={this.onRadioChange}
+          disabled
+        />
       </div>
     );
   }

docs/src/views/form/form_controls.js

@@ -9,6 +9,7 @@ import {
   EuiFieldSearch,
   EuiFieldText,
   EuiRange,
+  EuiRadioGroup,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
@@ -40,6 +41,17 @@ export default class extends Component {
       checkboxIdToSelectedMap: {
         [`${idPrefix}1`]: true,
       },
+      radios: [{
+        id: `${idPrefix}4`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}5`,
+        label: 'Option two is selected by default',
+      }, {
+        id: `${idPrefix}6`,
+        label: 'Option three',
+      }],
+      radioIdSelected: `${idPrefix}5`,
     };
   }
 
@@ -59,6 +71,12 @@ export default class extends Component {
     });
   }
 
+  onRadioChange = optionId => {
+    this.setState({
+      radioIdSelected: optionId,
+    });
+  }
+
   render() {
     return (
       <div>
@@ -133,6 +151,15 @@ export default class extends Component {
           idToSelectedMap={this.state.checkboxIdToSelectedMap}
           onChange={this.onCheckboxChange}
         />
+
+        <br />
+        <br />
+
+        <EuiRadioGroup
+          options={this.state.radios}
+          idSelected={this.state.radioIdSelected}
+          onChange={this.onRadioChange}
+        />
       </div>
     );
   }

docs/src/views/form/form_rows.js

@@ -11,6 +11,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiRange,
+  EuiRadioGroup,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
@@ -42,6 +43,17 @@ export default class extends Component {
       checkboxIdToSelectedMap: {
         [`${idPrefix}1`]: true,
       },
+      radios: [{
+        id: `${idPrefix}4`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}5`,
+        label: 'Option two is selected by default',
+      }, {
+        id: `${idPrefix}6`,
+        label: 'Option three',
+      }],
+      radioIdSelected: `${idPrefix}5`,
     };
   }
 
@@ -61,6 +73,12 @@ export default class extends Component {
     });
   }
 
+  onRadioChange = optionId => {
+    this.setState({
+      radioIdSelected: optionId,
+    });
+  }
+
   render() {
     return (
       <EuiForm>
@@ -162,6 +180,17 @@ export default class extends Component {
             onChange={this.onCheckboxChange}
           />
         </EuiFormRow>
+
+        <EuiFormRow
+          id={makeId()}
+          label="Radio"
+        >
+          <EuiRadioGroup
+            options={this.state.radios}
+            idSelected={this.state.radioIdSelected}
+            onChange={this.onRadioChange}
+          />
+        </EuiFormRow>
       </EuiForm>
     );
   }

src/components/form/_form.scss

@@ -1,7 +1,6 @@
 .euiForm__error {
   @include euiFontSizeS;
   list-style: disc;
-  margin-left: $euiSizeXL;
 }
 
 .euiForm__errors {

src/components/form/_index.scss

@@ -78,6 +78,7 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
 @import 'form_help_text/index';
 @import 'form_label/index';
 @import 'form_row/index';
+@import 'radio/index';
 @import 'range/index';
 @import 'select/index';
 @import 'switch/index';

src/components/form/checkbox/checkbox.js

@@ -62,7 +62,7 @@ export const EuiCheckbox = ({
 
 EuiCheckbox.propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   label: PropTypes.string,
   onChange: PropTypes.func.isRequired,

src/components/form/checkbox/checkbox_group.js

@@ -31,7 +31,7 @@ export const EuiCheckboxGroup = ({
 EuiCheckboxGroup.propTypes = {
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.string,
+      id: PropTypes.string.isRequired,
       label: PropTypes.string,
     }),
   ).isRequired,

src/components/form/index.js

@@ -12,6 +12,10 @@ export { EuiFormErrorText } from './form_error_text';
 export { EuiFormHelpText } from './form_help_text';
 export { EuiFormLabel } from './form_label';
 export { EuiFormRow } from './form_row';
+export {
+  EuiRadio,
+  EuiRadioGroup,
+} from './radio';
 export { EuiRange } from './range';
 export { EuiSelect } from './select';
 export { EuiSwitch } from './switch';

src/components/form/radio/_index.scss

@@ -0,0 +1,2 @@
+@import 'radio';
+@import 'radio_group';

src/components/form/radio/_radio.scss

@@ -0,0 +1,70 @@
+.euiRadio {
+  position: relative;
+  height: $euiSizeL;
+
+  /**
+   * 1. Float above the visual radio and match its dimension, so that when users try to click it
+   *    they actually click this input.
+   */
+  .euiRadio__input {
+    position: absolute; /* 1 */
+    opacity: 0; /* 1 */
+    height: $euiSizeL; /* 1 */
+    width: $euiSizeL; /* 1 */
+    z-index: 1; /* 1 */
+    margin: 0; /* 1 */
+    cursor: pointer;
+
+    &:checked ~ .euiRadio__circle {
+      .euiRadio__check {
+        background-color: $euiTextColor;
+        // This path is relative to ~/docs/postcss.config.js, which uses
+        // the postcss-line-svg plugin.
+        mask: svg-load('../src/components/icon/assets/check.svg') center center no-repeat;
+      }
+    }
+
+    &:focus ~ .euiRadio__circle,
+    &:active:not(:disabled) ~ .euiRadio__circle {
+      background-color: $euiFocusBackgroundColor;
+      border-color: $euiColorPrimary;
+    }
+
+    &:disabled {
+
+      ~ .euiRadio__circle {
+        background-color: $euiColorLightestShade;
+      }
+
+      ~ .euiRadio__label {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .euiRadio__circle {
+    position: absolute;
+    height: $euiSizeL;
+    width: $euiSizeL;
+    border-radius: 50%;
+    border: $euiBorderThin;
+    background: $euiFormBackgroundColor;
+    z-index: 0;
+  }
+
+    .euiRadio__check {
+      height: 100%;
+      width: 100%;
+    }
+
+  .euiRadio__label {
+    position: absolute;
+    padding-left: $euiSizeXL;
+    line-height: $euiSizeL;
+    display: block;
+    font-weight: $euiFontWeightRegular;
+    z-index: 2;
+    font-size: $euiFontSizeS;
+    cursor: pointer;
+  }
+}

src/components/form/radio/_radio_group.scss

@@ -0,0 +1,3 @@
+.euiRadioGroup__item + .euiRadioGroup__item {
+  margin-top: $euiSizeS;
+}

src/components/form/radio/index.js

@@ -0,0 +1,7 @@
+export {
+  EuiRadio,
+} from './radio';
+
+export {
+  EuiRadioGroup,
+} from './radio_group';

src/components/form/radio/radio.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const EuiRadio = ({
+  className,
+  id,
+  checked,
+  label,
+  onChange,
+  disabled,
+  ...rest,
+}) => {
+  const classes = classNames(
+    'euiRadio',
+    className
+  );
+
+  let optionalLabel;
+
+  if (label) {
+    optionalLabel = (
+      <label
+        className="euiRadio__label"
+        htmlFor={id}
+      >
+        {label}
+      </label>
+    );
+  }
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      <input
+        className="euiRadio__input"
+        type="radio"
+        id={id}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+      />
+
+      <div className="euiRadio__circle">
+        <div className="euiRadio__check" />
+      </div>
+
+      {optionalLabel}
+    </div>
+  );
+};
+
+EuiRadio.propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+EuiRadio.defaultProps = {
+  checked: false,
+  disabled: false,
+};

src/components/form/radio/radio.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiRadio } from './radio';
+
+describe('EuiRadio', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiRadio {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});