From 2ab606512710b432376677464bd67f431aa49eb4 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 26 Feb 2019 15:16:57 +0800
Subject: [PATCH 1/2] Support subcomponents in radio groups

The main purpose of this commit is to add support for specifying radio
inputs via `gl-form-radio` subcomponents as children of the
`gl-form-radio-group` component.

Radio inputs can be defined either using the `options` prop of
`gl-form-radio-group`, or using `gl-form-radio` child components, or
a combination of the two. Radios defined by subcomponents in the default
slot always appear last, after those defined by the `options` prop. The
`first` slot can be used to make child `gl-form-radio` components appear
*before* everything else.

Various other remarks:

  - Move everything under the `form_radio_group` namespace, since this
    is really an implementation of radio *groups* rather than standalone
    radios.

  - Restructure examples to illustrate `options`/subcomponents usage,
    and styling possibilities, for better consistency with other
    components.

  - Allow consumers to opt out of the default `plain` styling, rather
    than mandating `plain`.

  - Remove superfluous `id` and `name` attributes from examples.
---
 .../form_radio_group.basic.example.vue        | 14 ++++++--
 .../form_radio_group.button.example.vue       |  5 +--
 ...roup.options-and-subcomponents.example.vue | 28 ++++++++++++++++
 .../form_radio_group.stacked.example.vue      | 19 +++++++++++
 ...form_radio_group.subcomponents.example.vue | 23 +++++++++++++
 .../form_radio/examples/form_radio/index.js   | 31 +++++++++++++++---
 .../form_radio/form_radio.documentation.js    |  8 -----
 components/base/form/form_radio/form_radio.md |  5 ---
 .../base/form/form_radio/form_radio.vue       |  8 +++++
 .../form_radio_group.documentation.js         |  8 +++++
 .../base/form/form_radio/form_radio_group.md  |  3 ++
 .../base/form/form_radio/form_radio_group.vue | 14 +++++++-
 documentation/components_documentation.js     |  4 +--
 .../{form_radio.js => form_radio_group.js}    | 32 ++++++++++++-------
 14 files changed, 165 insertions(+), 37 deletions(-)
 create mode 100644 components/base/form/form_radio/examples/form_radio/form_radio_group.options-and-subcomponents.example.vue
 create mode 100644 components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue
 create mode 100644 components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue
 delete mode 100644 components/base/form/form_radio/form_radio.documentation.js
 delete mode 100644 components/base/form/form_radio/form_radio.md
 create mode 100644 components/base/form/form_radio/form_radio_group.documentation.js
 create mode 100644 components/base/form/form_radio/form_radio_group.md
 rename stories/base/form/{form_radio.js => form_radio_group.js} (70%)

diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue
index 45d90460e7..23e80f4f07 100644
--- a/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.basic.example.vue
@@ -2,13 +2,21 @@
 export default {
   data() {
     return {
-      selected: 'pizza',
-      options: [{ text: 'Pizza', value: 'pizza' }, { text: 'Tacos', value: 'tacos' }],
+      selected: 'one',
+      options: [
+        { value: 'one', text: 'Option 1' },
+        { value: 'two', text: 'Option 2' },
+        { value: 'three', text: 'Option 3' },
+      ],
     };
   },
 };
 </script>
 
 <template>
-  <gl-form-radio-group v-model="selected" :options="options" />
+  <gl-form-radio-group
+    v-model="selected"
+    :options="options"
+    :checked="selected"
+  />
 </template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue
index 06b4408b7f..7544a5d6dd 100644
--- a/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.button.example.vue
@@ -2,8 +2,8 @@
 export default {
   data() {
     return {
-      selected: 'pizza',
-      options: [{ text: 'Pizza', value: 'pizza' }, { text: 'Tacos', value: 'tacos' }],
+      selected: 'one',
+      options: [{ text: 'Option 1', value: 'one' }, { text: 'Option 2', value: 'two' }],
     };
   },
 };
@@ -15,5 +15,6 @@ export default {
     :options="options"
     :buttons="true"
     button-variant="primary"
+    :checked="selected"
   />
 </template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.options-and-subcomponents.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.options-and-subcomponents.example.vue
new file mode 100644
index 0000000000..9bce6e2f3f
--- /dev/null
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.options-and-subcomponents.example.vue
@@ -0,0 +1,28 @@
+<script>
+export default {
+  data() {
+    return {
+      selected: 'one',
+      options: [{ text: 'Option 2', value: 'two' }],
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-form-radio-group
+    v-model="selected"
+    :options="options"
+    :checked="selected"
+  >
+    <gl-form-radio value="three">
+      Option 3
+    </gl-form-radio>
+
+    <template slot="first">
+      <gl-form-radio value="one">
+        Option 1
+      </gl-form-radio>
+    </template>
+  </gl-form-radio-group>
+</template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue
new file mode 100644
index 0000000000..39fdf91767
--- /dev/null
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.stacked.example.vue
@@ -0,0 +1,19 @@
+<script>
+export default {
+  data() {
+    return {
+      selected: 'one',
+      options: [{ text: 'Option 1', value: 'one' }, { text: 'Option 2', value: 'two' }],
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-form-radio-group
+    v-model="selected"
+    :options="options"
+    :checked="selected"
+    stacked
+  />
+</template>
diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue
new file mode 100644
index 0000000000..73a81db4cf
--- /dev/null
+++ b/components/base/form/form_radio/examples/form_radio/form_radio_group.subcomponents.example.vue
@@ -0,0 +1,23 @@
+<script>
+export default {
+  data() {
+    return {
+      selected: 'one',
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-form-radio-group
+    v-model="selected"
+    :checked="selected"
+  >
+    <gl-form-radio value="one">
+      Option 1
+    </gl-form-radio>
+    <gl-form-radio value="two">
+      Option 2
+    </gl-form-radio>
+  </gl-form-radio-group>
+</template>
diff --git a/components/base/form/form_radio/examples/form_radio/index.js b/components/base/form/form_radio/examples/form_radio/index.js
index 29afbac6c7..dea9938542 100644
--- a/components/base/form/form_radio/examples/form_radio/index.js
+++ b/components/base/form/form_radio/examples/form_radio/index.js
@@ -1,20 +1,43 @@
 import FormRadioGroupBasicExample from './form_radio_group.basic.example.vue';
 import FormRadioGroupButtonExample from './form_radio_group.button.example.vue';
+import FormRadioGroupSubcomponents from './form_radio_group.subcomponents.example.vue';
+import FormRadioGroupOptionsSubcomponents from './form_radio_group.options-and-subcomponents.example.vue';
+import FormRadioGroupStackedExample from './form_radio_group.stacked.example.vue';
 
 export default [
   {
-    name: 'Form Radio',
+    name: 'Basic',
     items: [
       {
-        id: 'form-group-radio',
-        name: 'Form radio group with code',
+        id: 'form-radio-group',
+        name: 'Options',
         component: FormRadioGroupBasicExample,
       },
+      {
+        id: 'form-radio-group-subcomponents',
+        name: 'Subcomponents',
+        component: FormRadioGroupSubcomponents,
+      },
+      {
+        id: 'form-radio-group-options-and-subcomponents',
+        name: 'Options and subcomponents',
+        component: FormRadioGroupOptionsSubcomponents,
+      },
+    ],
+  },
+  {
+    name: 'Styling',
+    items: [
       {
         id: 'form-radio-group-buttons',
-        name: 'Form radio group with buttons',
+        name: 'Buttons',
         component: FormRadioGroupButtonExample,
       },
+      {
+        id: 'form-radio-group-stacked',
+        name: 'Stacked',
+        component: FormRadioGroupStackedExample,
+      },
     ],
   },
 ];
diff --git a/components/base/form/form_radio/form_radio.documentation.js b/components/base/form/form_radio/form_radio.documentation.js
deleted file mode 100644
index 8c945bc207..0000000000
--- a/components/base/form/form_radio/form_radio.documentation.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as description from './form_radio.md';
-import examples from './examples/form_radio';
-
-export default {
-  description,
-  examples,
-  bootstrapComponent: 'b-form-radio',
-};
diff --git a/components/base/form/form_radio/form_radio.md b/components/base/form/form_radio/form_radio.md
deleted file mode 100644
index 07a1692e70..0000000000
--- a/components/base/form/form_radio/form_radio.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Form radio
-
-Form radios and form radio groups for general use inside forms.
-
-Note: Form radio groups using subcomponents are not implemented yet as there are some weird side effects of wrapping individual radio buttons.
diff --git a/components/base/form/form_radio/form_radio.vue b/components/base/form/form_radio/form_radio.vue
index 6043931808..029370a79a 100644
--- a/components/base/form/form_radio/form_radio.vue
+++ b/components/base/form/form_radio/form_radio.vue
@@ -5,6 +5,14 @@ export default {
   components: {
     BFormRadio,
   },
+  props: {
+    plain: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  inheritAttrs: false,
 };
 </script>
 
diff --git a/components/base/form/form_radio/form_radio_group.documentation.js b/components/base/form/form_radio/form_radio_group.documentation.js
new file mode 100644
index 0000000000..3b96f4c12f
--- /dev/null
+++ b/components/base/form/form_radio/form_radio_group.documentation.js
@@ -0,0 +1,8 @@
+import * as description from './form_radio_group.md';
+import examples from './examples/form_radio';
+
+export default {
+  description,
+  examples,
+  bootstrapComponent: 'b-form-radio-group',
+};
diff --git a/components/base/form/form_radio/form_radio_group.md b/components/base/form/form_radio/form_radio_group.md
new file mode 100644
index 0000000000..4138455e3f
--- /dev/null
+++ b/components/base/form/form_radio/form_radio_group.md
@@ -0,0 +1,3 @@
+# Form Radio Group
+
+Form radio groups for general use inside forms.
diff --git a/components/base/form/form_radio/form_radio_group.vue b/components/base/form/form_radio/form_radio_group.vue
index 6be46d49f4..dfab107855 100644
--- a/components/base/form/form_radio/form_radio_group.vue
+++ b/components/base/form/form_radio/form_radio_group.vue
@@ -5,11 +5,23 @@ export default {
   components: {
     BFormRadioGroup,
   },
+  props: {
+    plain: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
   inheritAttrs: false,
 };
 </script>
 <template>
-  <b-form-radio-group plain v-bind="$attrs" v-on="$listeners" @change="$emit('change', $event)">
+  <b-form-radio-group
+    v-bind="$attrs"
+    v-on="$listeners"
+    :plain="plain"
+  >
+    <slot name="first" slot="first"></slot>
     <slot></slot>
   </b-form-radio-group>
 </template>
diff --git a/documentation/components_documentation.js b/documentation/components_documentation.js
index 5569c00941..ef3e7e3e2b 100644
--- a/documentation/components_documentation.js
+++ b/documentation/components_documentation.js
@@ -39,8 +39,8 @@ export {
   default as GlFormGroupDocumentation,
 } from '../components/base/form/form_group/form_group.documentation';
 export {
-  default as GlFormRadioDocumentation,
-} from '../components/base/form/form_radio/form_radio.documentation';
+  default as GlFormRadioGroupDocumentation,
+} from '../components/base/form/form_radio/form_radio_group.documentation';
 export {
   default as GlSearchBoxDocumentation,
 } from '../components/base/search/search_box.documentation';
diff --git a/stories/base/form/form_radio.js b/stories/base/form/form_radio_group.js
similarity index 70%
rename from stories/base/form/form_radio.js
rename to stories/base/form/form_radio_group.js
index 315041e3a4..e479084f33 100644
--- a/stories/base/form/form_radio.js
+++ b/stories/base/form/form_radio_group.js
@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
 import documentedStoriesOf from '../../utils/documented_stories';
 import { sizeOptions, variantOptions } from '../../utils/constants';
-import readme from '../../../components/base/form/form_radio/form_radio.md';
+import readme from '../../../components/base/form/form_radio/form_radio_group.md';
 import { GlFormRadio, GlFormRadioGroup } from '../../../index';
 
 const components = {
@@ -9,7 +9,12 @@ const components = {
   GlFormRadioGroup,
 };
 
-function generateProps({ stacked = false, buttons = false, groupName = 'radio-group-name' } = {}) {
+function generateProps({
+  stacked = false,
+  buttons = false,
+  plain = true,
+  name = 'radio-group-name',
+} = {}) {
   return {
     size: {
       type: String,
@@ -27,40 +32,43 @@ function generateProps({ stacked = false, buttons = false, groupName = 'radio-gr
       type: String,
       default: select('button-variant', variantOptions, variantOptions.secondary),
     },
+    plain: {
+      type: Boolean,
+      default: boolean('plain', plain),
+    },
     name: {
       type: String,
-      default: text('name', groupName),
+      default: text('name', name),
     },
   };
 }
 
-documentedStoriesOf('base|form/form-radio', readme)
+documentedStoriesOf('base|form/form-radio-group', readme)
   .addDecorator(withKnobs)
-  .add('Radios using code', () => ({
+  .add('default', () => ({
     components,
     props: generateProps(),
     data() {
       return {
-        selected: 'Pizza',
+        selected: 'one',
         options: [
-          { value: 'Pizza', text: 'Pizza' },
-          { value: 'Tacos', text: 'Tacos' },
-          { value: 'Burger', text: 'Burguer', disabled: boolean('disabled', false) },
+          { value: 'one', text: 'Option 1' },
+          { value: 'two', text: 'Option 2' },
+          { value: 'three', text: 'Option 3', disabled: boolean('disabled', false) },
         ],
       };
     },
     template: `
       <gl-form-radio-group 
-        id="food-radios"
         v-model="selected"
         :options="options"
         :size="size"
         :stacked="stacked"
         :buttons="buttons"
         :button-variant="buttonVariant"
+        :plain="plain"
         :name="name"
         :checked="selected"
-      >
-      </gl-form-radio-group>
+      />
     `,
   }));
-- 
GitLab


From f30902616efd5bd01da58206795e5a1362ef780c Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Mon, 4 Mar 2019 16:10:21 +0800
Subject: [PATCH 2/2] Fix eslint errors/warnings

---
 ... form_radio_group.options_and_subcomponents.example.vue} | 0
 .../base/form/form_radio/examples/form_radio/index.js       | 2 +-
 components/base/form/form_radio/form_radio.vue              | 2 +-
 components/base/form/form_radio/form_radio_group.vue        | 6 +++---
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename components/base/form/form_radio/examples/form_radio/{form_radio_group.options-and-subcomponents.example.vue => form_radio_group.options_and_subcomponents.example.vue} (100%)

diff --git a/components/base/form/form_radio/examples/form_radio/form_radio_group.options-and-subcomponents.example.vue b/components/base/form/form_radio/examples/form_radio/form_radio_group.options_and_subcomponents.example.vue
similarity index 100%
rename from components/base/form/form_radio/examples/form_radio/form_radio_group.options-and-subcomponents.example.vue
rename to components/base/form/form_radio/examples/form_radio/form_radio_group.options_and_subcomponents.example.vue
diff --git a/components/base/form/form_radio/examples/form_radio/index.js b/components/base/form/form_radio/examples/form_radio/index.js
index dea9938542..ebf218f6d6 100644
--- a/components/base/form/form_radio/examples/form_radio/index.js
+++ b/components/base/form/form_radio/examples/form_radio/index.js
@@ -1,7 +1,7 @@
 import FormRadioGroupBasicExample from './form_radio_group.basic.example.vue';
 import FormRadioGroupButtonExample from './form_radio_group.button.example.vue';
 import FormRadioGroupSubcomponents from './form_radio_group.subcomponents.example.vue';
-import FormRadioGroupOptionsSubcomponents from './form_radio_group.options-and-subcomponents.example.vue';
+import FormRadioGroupOptionsSubcomponents from './form_radio_group.options_and_subcomponents.example.vue';
 import FormRadioGroupStackedExample from './form_radio_group.stacked.example.vue';
 
 export default [
diff --git a/components/base/form/form_radio/form_radio.vue b/components/base/form/form_radio/form_radio.vue
index 029370a79a..599b2b35c5 100644
--- a/components/base/form/form_radio/form_radio.vue
+++ b/components/base/form/form_radio/form_radio.vue
@@ -5,6 +5,7 @@ export default {
   components: {
     BFormRadio,
   },
+  inheritAttrs: false,
   props: {
     plain: {
       type: Boolean,
@@ -12,7 +13,6 @@ export default {
       default: true,
     },
   },
-  inheritAttrs: false,
 };
 </script>
 
diff --git a/components/base/form/form_radio/form_radio_group.vue b/components/base/form/form_radio/form_radio_group.vue
index dfab107855..10973d9a97 100644
--- a/components/base/form/form_radio/form_radio_group.vue
+++ b/components/base/form/form_radio/form_radio_group.vue
@@ -5,6 +5,7 @@ export default {
   components: {
     BFormRadioGroup,
   },
+  inheritAttrs: false,
   props: {
     plain: {
       type: Boolean,
@@ -12,16 +13,15 @@ export default {
       default: true,
     },
   },
-  inheritAttrs: false,
 };
 </script>
 <template>
   <b-form-radio-group
+    :plain="plain"
     v-bind="$attrs"
     v-on="$listeners"
-    :plain="plain"
   >
-    <slot name="first" slot="first"></slot>
+    <slot slot="first" name="first"></slot>
     <slot></slot>
   </b-form-radio-group>
 </template>
-- 
GitLab