Merge pull request #167 from ericcornelissen/update-options

Add background, color, and class options

README.md

@@ -142,6 +142,13 @@ style: {
 }
 ```
 
+You can specify `color` and `background` directly as well.
+
+```coffeescript
+color: "red"
+background: "green"
+```
+
 ### Button hover
 
 you can use CSS styles for button hover per button.
@@ -154,12 +161,12 @@ hover: {
 
 ### Button class
 
-Using a comma separated list you can add your own class names to buttons.
+Using an array you can add your own class names to buttons.
 This is great if you want to take advantage of native styles like Font Awesome
 or if you have your own styles you prefer to keep in a stylesheet.
 
 ```coffeescript
-className: "fa-rotate-90, custom-class"
+class: ["fa-rotate-90", "custom-class"]
 ```
 
 ### Multiple callback
@@ -305,7 +312,9 @@ This is same above.
     type: "button"
     icon: "sitemap"
     iconset: "fa"
-    className: "fa-rotate-180"
+    class: "fa-rotate-180"
+    color: "red"
+    background: "green"
     tooltip: "This is just an example it does nothing"
   }
   {
@@ -384,7 +393,9 @@ module.exports = [
     type: "button"
     icon: "sitemap"
     iconset: "fa"
-    className: "fa-rotate-180"
+    class: "fa-rotate-180"
+    color: "red"
+    background: "green"
     tooltip: "This is just an example it does nothing"
   }
   {

lib/types/button.js

@@ -8,6 +8,9 @@ export default function (toolBar, button) {
 		html: button.html,
 		tooltip: button.tooltip,
 		priority: button.priority || 45,
+		background: button.background,
+		color: button.color,
+		class: button.class,
 		callback: button.callback,
 	};
 

lib/types/file.js

@@ -9,6 +9,9 @@ export default function (toolBar, button) {
 		tooltip: button.tooltip,
 		priority: button.priority || 45,
 		data: button.file,
+		background: button.background,
+		color: button.color,
+		class: button.class,
 		callback: (file) => {
 			atom.workspace.open(file);
 		}

lib/types/function.js

@@ -9,6 +9,9 @@ export default function (toolBar, button, getActiveItem) {
 		tooltip: button.tooltip,
 		priority: button.priority || 45,
 		data: button.callback,
+		background: button.background,
+		color: button.color,
+		class: button.class,
 		callback(data) {
 			return data.call(this, getActiveItem().item);
 		},

lib/types/url.js

@@ -12,6 +12,9 @@ export default function (toolBar, button) {
 		tooltip: button.tooltip,
 		priority: button.priority || 45,
 		data: button.url,
+		background: button.background,
+		color: button.color,
+		class: button.class,
 		callback(url) {
 			const urlReplace = new UrlReplace();
 			// eslint-disable-next-line no-param-reassign

spec/flex-tool-bar-spec.js

@@ -218,6 +218,57 @@ describe('FlexToolBar', function () {
 		});
 	});
 
+	describe('styling options', function () {
+		beforeEach(function () {
+			spyOn(flexToolBar.toolBar, 'addButton');
+			this.obj = {
+				background: 'red',
+				color: 'purple',
+				class: 'my-awesome-class'
+			};
+		});
+		it('should allow background, color, and class options on button', function () {
+			flexToolBar.addButtons([{
+				type: 'button',
+				background: this.obj.background,
+				color: this.obj.color,
+				class: this.obj.class,
+			}]);
+
+			expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj));
+		});
+		it('should allow background, color, and class options on file', function () {
+			flexToolBar.addButtons([{
+				type: 'file',
+				background: this.obj.background,
+				color: this.obj.color,
+				class: this.obj.class,
+			}]);
+
+			expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj));
+		});
+		it('should allow background, color, and class options on function', function () {
+			flexToolBar.addButtons([{
+				type: 'function',
+				background: this.obj.background,
+				color: this.obj.color,
+				class: this.obj.class,
+			}]);
+
+			expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj));
+		});
+		it('should allow background, color, and class options on url', function () {
+			flexToolBar.addButtons([{
+				type: 'url',
+				background: this.obj.background,
+				color: this.obj.color,
+				class: this.obj.class,
+			}]);
+
+			expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj));
+		});
+	});
+
 	describe('observed events', function () {
 		it('should observe grammar change', async function () {
 			await atom.packages.activatePackage('language-javascript');