Add a selected button ui state

Summary: Only for grey buttons, but can expand. Sets a selected class.

Test Plan: Review new changes in UIExamples.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

Differential Revision: https://secure.phabricator.com/D18501

webroot/rsrc/css/phui/button/phui-button.css

@@ -105,6 +105,19 @@ button[disabled] {
   opacity: 0.5;
 }
 
+button.button-grey.selected,
+a.button.button-grey.selected,
+button.button-grey.selected:hover,
+a.button.button-grey.selected:hover {
+  border-color: {$sh-orangetext};
+  color: {$sh-orangetext};
+}
+
+button.button-grey.selected .phui-icon-view,
+a.button-grey.selected .phui-icon-view {
+  color: {$sh-orangetext};
+}
+
 a.phuix-dropdown-open {
   color: {$greytext};
 }

webroot/rsrc/js/phuix/PHUIXButtonView.js

@@ -16,6 +16,7 @@ JX.install('PHUIXButtonView', {
 
     _iconView: null,
     _color: null,
+    _selected: null,
     _buttonType: null,
 
     setIcon: function(icon) {
@@ -43,6 +44,13 @@ JX.install('PHUIXButtonView', {
       return this;
     },
 
+    setSelected: function(selected) {
+      var node = this.getNode();
+      this._selected = selected;
+      JX.DOM.alterClass(node, 'selected', this._selected);
+      return this;
+    },
+
     setButtonType: function(button_type) {
       var self = JX.PHUIXButtonView;