fix(input-group): Styling fix for dropdowns, radio and checkbox groups. Fixes #2114,#1560 (#2118)

tmorehouse · web-flow · commit ed31bcde977e · 2018-10-30T16:54:44.000-03:00
* Create input-group.css

* import css into input-group

* dropdown use input-group.css

* form-radio-group import input-group.css

* form-checkbox-group import input-group.css

* dropdown add comment

* dropdown.css replaced by input-group.css
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -2,7 +2,8 @@ import idMixin from '../../mixins/id'
 import dropdownMixin from '../../mixins/dropdown'
 import bButton from '../button/button'
 
-import './dropdown.css'
+// Needed when dropdowns are inside an input group
+import '../input-group/input-group.css'
 
 export default {
   mixins: [idMixin, dropdownMixin],
diff --git a/src/components/form-checkbox/form-checkbox-group.js b/src/components/form-checkbox/form-checkbox-group.js
@@ -7,6 +7,9 @@ import formCustomMixin from '../../mixins/form-custom'
 
 import bFormCheckbox from './form-checkbox'
 
+// Needed when checknox-groups are inside an input group
+import '../input-group/input-group.css'
+
 export default {
   mixins: [
     idMixin,
diff --git a/src/components/form-radio/form-radio-group.js b/src/components/form-radio/form-radio-group.js
@@ -6,6 +6,9 @@ import formStateMixin from '../../mixins/form-state'
 import formCustomMixin from '../../mixins/form-custom'
 import bFormRadio from './form-radio'
 
+// Needed when radio-groups are inside an input group
+import '../input-group/input-group.css'
+
 export default {
   mixins: [
     idMixin,
diff --git a/src/components/input-group/input-group.css b/src/components/input-group/input-group.css
@@ -0,0 +1,17 @@
+/* workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/1560 */
+/* workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/2114 */
+/* source: _input-group.scss */
+
+.input-group > .input-group-prepend > .btn-group > .btn,
+.input-group > .input-group-append:not(:last-child) > .btn-group > .btn,
+.input-group > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .input-group-append > .btn-group > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .btn-group > .btn,
+.input-group > .input-group-prepend:first-child > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/src/components/input-group/input-group.js b/src/components/input-group/input-group.js
@@ -3,6 +3,8 @@ import InputGroupPrepend from './input-group-prepend'
 import InputGroupAppend from './input-group-append'
 import InputGroupText from './input-group-text'
 
+import './input-group.css'
+
 export const props = {
   id: {
     type: String,
