Merge pull request #1540 from kaliber5/bs5-toggle-button

Add Bootstrap v5 support for ButtonGroup
ember-bootstrap · Jun 7, 2021 · f00423d · f00423d
2 parents d52f386 + 36f833c
commit f00423d
Show file tree

Hide file tree

Showing 4 changed files with 305 additions and 46 deletions.
diff --git a/addon/components/bs-button-group/button.hbs b/addon/components/bs-button-group/button.hbs
@@ -1,17 +1,51 @@
-<button
-  disabled={{this.__disabled}}
-  type={{this.buttonType}}
-  class="btn {{if this.active "active"}} {{if this.block "btn-block"}} {{bs-size-class "btn" @size}} {{bs-type-class "btn" @type default=(if (macroCondition (macroGetOwnConfig "isBS3")) "default" "secondary") outline=@outline}}"
-  ...attributes
-  {{on "click" this.handleClick}}
-  {{did-update this.resetState @reset}}
->
-  {{#if this.icon}}<i class={{this.icon}}></i> {{/if}}{{this.text}}{{yield
-    (hash
-      isFulfilled=this.isFulfilled
-      isPending=this.isPending
-      isRejected=this.isRejected
-      isSettled=this.isSettled
-    )
-  }}
-</button>
+{{#if this.isBS5ToggleButton}}
+  <input
+    type={{@buttonGroupType}}
+    class="btn-check"
+    id={{this.formId}}
+    autocomplete="off"
+    checked={{this.active}}
+    ...attributes
+    {{on "click" this.handleClick}}
+    {{did-update this.resetState @reset}}
+  >
+  <label
+    class="btn {{bs-size-class "btn" @size}} {{bs-type-class "btn" @type default="secondary" outline=@outline}}"
+    for={{this.formId}}
+  >
+    {{#if this.icon}}
+      <i class={{this.icon}}></i>
+    {{/if}}
+    {{this.text}}
+    {{yield
+      (hash
+        isFulfilled=this.isFulfilled
+        isPending=this.isPending
+        isRejected=this.isRejected
+        isSettled=this.isSettled
+      )
+    }}
+  </label>
+{{else}}
+  <button
+    disabled={{this.__disabled}}
+    type={{this.buttonType}}
+    class="btn {{if this.active "active"}} {{if this.block "btn-block"}} {{bs-size-class "btn" @size}} {{bs-type-class "btn" @type default=(if (macroCondition (macroGetOwnConfig "isBS3")) "default" "secondary") outline=@outline}}"
+    ...attributes
+    {{on "click" this.handleClick}}
+    {{did-update this.resetState @reset}}
+  >
+    {{#if this.icon}}
+      <i class={{this.icon}}></i>
+    {{/if}}
+    {{this.text}}
+    {{yield
+      (hash
+        isFulfilled=this.isFulfilled
+        isPending=this.isPending
+        isRejected=this.isRejected
+        isSettled=this.isSettled
+      )
+    }}
+  </button>
+{{/if}}
diff --git a/addon/components/bs-button-group/button.js b/addon/components/bs-button-group/button.js
@@ -1,5 +1,7 @@
 import { isArray } from '@ember/array';
 import Button from 'ember-bootstrap/components/bs-button';
+import { guidFor } from '@ember/object/internals';
+import { getOwnConfig, macroCondition } from '@embroider/macros';
 
 /**
  Internal component for button-group buttons
@@ -12,6 +14,8 @@ import Button from 'ember-bootstrap/components/bs-button';
 export default class ButtonGroupButton extends Button {
   '__ember-bootstrap_subclass' = true;
 
+  formId = guidFor(this);
+
   /**
    * @property groupValue
    * @private
@@ -40,4 +44,12 @@ export default class ButtonGroupButton extends Button {
     }
     return false;
   }
+
+  get isBS5ToggleButton() {
+    if (macroCondition(getOwnConfig().isBS5)) {
+      return this.args.buttonGroupType === 'radio' || this.args.buttonGroupType === 'checkbox';
+    } else {
+      return false;
+    }
+  }
 }
diff --git a/addon/components/bs-button.js b/addon/components/bs-button.js
@@ -343,7 +343,7 @@ export default class Button extends Component {
   /**
    * Property to create outline buttons (BS4+ only)
    *
-   * @property disabled
+   * @property outline
    * @type boolean
    * @default false
    * @public