002b66e9e24af5c176af543ac8757d2f957ba7f0 New: `-init buttons.buttons.…

…dropIcon` - ability to show a dropdown icon per button to indicate to the end user that further interaction will be required when the button is activated.

ae9dc00000609463d471e1273d3878ec0fadb903 3.2.0-dev version

Sync to source repo @ae9dc00000609463d471e1273d3878ec0fadb903

css/buttons.bulma.css

@@ -190,6 +190,12 @@ div.dt-button-collection {
 div.dt-button-collection div.dt-button-collection-title {
   padding: 0.75em 0.6em 0.25em;
 }
+div.dt-button-collection a.dt-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 0.5rem;
+}
 div.dt-button-collection div.dt-button-split {
   display: flex;
   flex-direction: row;
@@ -420,8 +426,9 @@ div.dt-button-collection span.dt-button-spacer {
 }
 
 div.dt-button-split {
-  padding-left: 5px;
-  padding-right: 5px;
+  display: inline-flex;
+  padding-left: 0;
+  padding-right: 0;
   margin-bottom: 0px !important;
 }
 div.dt-button-split button {

datatables.json

@@ -14,5 +14,5 @@
     ],
     "src-repo": "http://github.com/DataTables/Buttons",
     "last-tag": "3.1.2",
-    "last-sync": "7099db386b1f372bd2fc6db24739dcf34ec9f802"
+    "last-sync": "ae9dc00000609463d471e1273d3878ec0fadb903"
 }

js/buttons.bulma.js

@@ -61,13 +61,14 @@ $.extend(true, DataTable.Buttons.defaults, {
 		button: {
 			className: 'button',
 			active: 'is-active',
-			disabled: 'is-disabled'
+			disabled: 'is-disabled',
+			dropHtml: '<span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>',
+			dropClass: ''
 		},
 		collection: {
 			action: {
 				tag: 'div',
-				className: 'dropdown-content',
-				dropHtml: ''
+				className: 'dropdown-content'
 			},
 			button: {
 				tag: 'a',
@@ -95,7 +96,6 @@ $.extend(true, DataTable.Buttons.defaults, {
 			},
 			dropdown: {
 				tag: 'button',
-				dropHtml: '<i class="fa fa-angle-down" aria-hidden="true"></i>',
 				className: 'button',
 				closeButton: false,
 				align: 'split-left',
@@ -113,13 +113,6 @@ $.extend(true, DataTable.Buttons.defaults, {
 		if (config.buttons) {
 			// Wrap the dropdown content in a menu element
 			config._collection = $('<div class="dropdown-menu"/>').append(config._collection);
-
-			// And add the collection dropdown icon
-			$(button).append(
-				'<span class="icon is-small">' +
-					'<i class="fa fa-angle-down" aria-hidden="true"></i>' +
-					'</span>'
-			);
 		}
 
 		return button;

js/buttons.bulma.min.mjs

@@ -1,4 +1,4 @@
 /*! Bulma integration for DataTables' Buttons
  * © SpryMedia Ltd - datatables.net/license
  */
-import jQuery from"jquery";import DataTable from"datatables.net-bm";import Buttons from"datatables.net-buttons";let $=jQuery;$.extend(!0,DataTable.Buttons.defaults,{dom:{container:{className:"dt-buttons field is-grouped"},button:{className:"button",active:"is-active",disabled:"is-disabled"},collection:{action:{tag:"div",className:"dropdown-content",dropHtml:""},button:{tag:"a",className:"dt-button dropdown-item",active:"dt-button-active",disabled:"is-disabled",spacer:{className:"dropdown-divider",tag:"hr"}},closeButton:!1,container:{className:"dt-button-collection dropdown dropdown-menu",content:{className:"dropdown-content"}}},split:{action:{tag:"button",className:"dt-button-split-drop-button button",closeButton:!1},dropdown:{tag:"button",dropHtml:'<i class="fa fa-angle-down" aria-hidden="true"></i>',className:"button",closeButton:!1,align:"split-left",splitAlignClass:"dt-button-split-left"},wrapper:{tag:"div",className:"dt-button-split dropdown-trigger buttons has-addons",closeButton:!1}}},buttonCreated:function(t,a){return t.buttons&&(t._collection=$('<div class="dropdown-menu"/>').append(t._collection),$(a).append('<span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>')),a}});export default DataTable;
+import jQuery from"jquery";import DataTable from"datatables.net-bm";import Buttons from"datatables.net-buttons";let $=jQuery;$.extend(!0,DataTable.Buttons.defaults,{dom:{container:{className:"dt-buttons field is-grouped"},button:{className:"button",active:"is-active",disabled:"is-disabled",dropHtml:'<span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>',dropClass:""},collection:{action:{tag:"div",className:"dropdown-content"},button:{tag:"a",className:"dt-button dropdown-item",active:"dt-button-active",disabled:"is-disabled",spacer:{className:"dropdown-divider",tag:"hr"}},closeButton:!1,container:{className:"dt-button-collection dropdown dropdown-menu",content:{className:"dropdown-content"}}},split:{action:{tag:"button",className:"dt-button-split-drop-button button",closeButton:!1},dropdown:{tag:"button",className:"button",closeButton:!1,align:"split-left",splitAlignClass:"dt-button-split-left"},wrapper:{tag:"div",className:"dt-button-split dropdown-trigger buttons has-addons",closeButton:!1}}},buttonCreated:function(t,o){return t.buttons&&(t._collection=$('<div class="dropdown-menu"/>').append(t._collection)),o}});export default DataTable;

js/buttons.bulma.mjs

@@ -18,13 +18,14 @@ $.extend(true, DataTable.Buttons.defaults, {
 		button: {
 			className: 'button',
 			active: 'is-active',
-			disabled: 'is-disabled'
+			disabled: 'is-disabled',
+			dropHtml: '<span class="icon is-small"><i class="fa fa-angle-down" aria-hidden="true"></i></span>',
+			dropClass: ''
 		},
 		collection: {
 			action: {
 				tag: 'div',
-				className: 'dropdown-content',
-				dropHtml: ''
+				className: 'dropdown-content'
 			},
 			button: {
 				tag: 'a',
@@ -52,7 +53,6 @@ $.extend(true, DataTable.Buttons.defaults, {
 			},
 			dropdown: {
 				tag: 'button',
-				dropHtml: '<i class="fa fa-angle-down" aria-hidden="true"></i>',
 				className: 'button',
 				closeButton: false,
 				align: 'split-left',
@@ -70,13 +70,6 @@ $.extend(true, DataTable.Buttons.defaults, {
 		if (config.buttons) {
 			// Wrap the dropdown content in a menu element
 			config._collection = $('<div class="dropdown-menu"/>').append(config._collection);
-
-			// And add the collection dropdown icon
-			$(button).append(
-				'<span class="icon is-small">' +
-					'<i class="fa fa-angle-down" aria-hidden="true"></i>' +
-					'</span>'
-			);
 		}
 
 		return button;