Remove checkbox/radio toggle from button plugin in favor of a CSS only solution

1 files changed, 5 insertions, 73 deletions

diff --git a/js/src/button.js b/js/src/button.js
index 67f3b96279..fd29e5218b 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -8,7 +8,6 @@
 import { getjQuery } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
 
 /**
  * ------------------------------------------------------------------------
@@ -23,18 +22,10 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const CLASS_NAME_ACTIVE = 'active'
-const CLASS_NAME_DISABLED = 'disabled'
-const CLASS_NAME_FOCUS = 'focus'
 
-const SELECTOR_DATA_TOGGLE_CARROT = '[data-toggle^="button"]'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="buttons"]'
-const SELECTOR_INPUT = 'input:not([type="hidden"])'
-const SELECTOR_ACTIVE = '.active'
-const SELECTOR_BUTTON = '.btn'
+const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
-const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`
-const EVENT_BLUR_DATA_API = `blur${EVENT_KEY}${DATA_API_KEY}`
 
 /**
  * ------------------------------------------------------------------------
@@ -57,51 +48,8 @@ class Button {
   // Public
 
   toggle() {
-    let triggerChangeEvent = true
-    let addAriaPressed = true
-
-    const rootElement = this._element.closest(SELECTOR_DATA_TOGGLE)
-
-    if (rootElement) {
-      const input = SelectorEngine.findOne(SELECTOR_INPUT, this._element)
-
-      if (input && input.type === 'radio') {
-        if (input.checked &&
-          this._element.classList.contains(CLASS_NAME_ACTIVE)) {
-          triggerChangeEvent = false
-        } else {
-          const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE, rootElement)
-
-          if (activeElement) {
-            activeElement.classList.remove(CLASS_NAME_ACTIVE)
-          }
-        }
-
-        if (triggerChangeEvent) {
-          if (input.hasAttribute('disabled') ||
-            rootElement.hasAttribute('disabled') ||
-            input.classList.contains(CLASS_NAME_DISABLED) ||
-            rootElement.classList.contains(CLASS_NAME_DISABLED)) {
-            return
-          }
-
-          input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE)
-          EventHandler.trigger(input, 'change')
-        }
-
-        input.focus()
-        addAriaPressed = false
-      }
-    }
-
-    if (addAriaPressed) {
-      this._element.setAttribute('aria-pressed',
-        !this._element.classList.contains(CLASS_NAME_ACTIVE))
-    }
-
-    if (triggerChangeEvent) {
-      this._element.classList.toggle(CLASS_NAME_ACTIVE)
-    }
+    // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
+    this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))
   }
 
   dispose() {
@@ -136,10 +84,10 @@ class Button {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
   event.preventDefault()
 
-  const button = event.target.closest(SELECTOR_BUTTON)
+  const button = event.target.closest(SELECTOR_DATA_TOGGLE)
 
   let data = Data.getData(button, DATA_KEY)
   if (!data) {
@@ -149,22 +97,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, eve
   data.toggle()
 })
 
-EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
-  const button = event.target.closest(SELECTOR_BUTTON)
-
-  if (button) {
-    button.classList.add(CLASS_NAME_FOCUS)
-  }
-})
-
-EventHandler.on(document, EVENT_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
-  const button = event.target.closest(SELECTOR_BUTTON)
-
-  if (button) {
-    button.classList.remove(CLASS_NAME_FOCUS)
-  }
-})
-
 const $ = getjQuery()
 
 /**