Merge pull request #9208 from electron/touchbar-button-icon-pos

Add iconPosition property to touch bar buttons

atom/browser/ui/cocoa/atom_touch_bar.mm

@@ -310,6 +310,16 @@ static NSString* const ImageScrubberItemIdentifier = @"scrubber.image.item";
   gfx::Image image;
   if (settings.Get("icon", &image)) {
     button.image = image.AsNSImage();
+
+    std::string iconPosition;
+    settings.Get("iconPosition", &iconPosition);
+    if (iconPosition == "left") {
+      button.imagePosition = NSImageLeft;
+    } else if (iconPosition == "right") {
+      button.imagePosition = NSImageRight;
+    } else {
+      button.imagePosition = NSImageOverlaps;
+    }
   }
 }
 

docs/api/touch-bar-button.md

@@ -11,6 +11,7 @@ Process: [Main](../tutorial/quick-start.md#main-process)
   * `backgroundColor` String (optional) - Button background color in hex format,
     i.e `#ABCDEF`.
   * `icon` [NativeImage](native-image.md) (optional) - Button icon.
+  * `iconPosition` String - Can be `left`, `right` or `overlay`.
   * `click` Function (optional) - Function to call when the button is clicked.
 
 ### Instance Properties

lib/browser/api/touch-bar.js

@@ -159,10 +159,11 @@ TouchBar.TouchBarButton = class TouchBarButton extends TouchBarItem {
     super()
     if (config == null) config = {}
     this.type = 'button'
-    const {click, icon, label, backgroundColor} = config
+    const {click, icon, iconPosition, label, backgroundColor} = config
     this._addLiveProperty('label', label)
     this._addLiveProperty('backgroundColor', backgroundColor)
     this._addLiveProperty('icon', icon)
+    this._addLiveProperty('iconPosition', iconPosition)
     if (typeof click === 'function') {
       this.onInteraction = () => {
         config.click()

spec/api-touch-bar-spec.js

@@ -1,4 +1,5 @@
 const assert = require('assert')
+const path = require('path')
 const {BrowserWindow, TouchBar} = require('electron').remote
 const {closeWindow} = require('./window-helpers')
 
@@ -48,6 +49,11 @@ describe('TouchBar module', function () {
       const label = new TouchBarLabel({label: 'bar'})
       const touchBar = new TouchBar([
         new TouchBarButton({label: 'foo', backgroundColor: '#F00', click: () => {}}),
+        new TouchBarButton({
+          icon: path.join(__dirname, 'fixtures', 'assets', 'logo.png'),
+          iconPosition: 'right',
+          click: () => {}
+        }),
         new TouchBarColorPicker({selectedColor: '#F00', change: () => {}}),
         new TouchBarGroup({items: new TouchBar([new TouchBarLabel({label: 'hello'})])}),
         label,