Separate button CSS classes

Summary: Try to dis-ambiguate various button types and colors. Moves `simple` to `phui-button-simple` and moves colors to `button-color`.

Test Plan: Grep for buttons still inline, UIExamples, PHUIX, Herald, and Email Preferences.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '5284a0e0',
+    'core.pkg.css' => '1a935531',
     'core.pkg.js' => '1475bd91',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '1ccbf3a9',
@@ -125,8 +125,8 @@ return array(
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-source-code-view.css' => '4383192f',
     'rsrc/css/phui/button/phui-button-bar.css' => '39fe680c',
-    'rsrc/css/phui/button/phui-button-simple.css' => '081cfeea',
+    'rsrc/css/phui/button/phui-button-simple.css' => '8e1baf68',
-    'rsrc/css/phui/button/phui-button.css' => '9f13ddcc',
+    'rsrc/css/phui/button/phui-button.css' => '022581b4',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => '576be600',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '8e10e92c',
@@ -526,7 +526,7 @@ return array(
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => 'b3465b9b',
     'rsrc/js/phuix/PHUIXAutocomplete.js' => 'f6699267',
-    'rsrc/js/phuix/PHUIXButtonView.js' => 'b3c515be',
+    'rsrc/js/phuix/PHUIXButtonView.js' => 'a37126bd',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => '8018ee50',
     'rsrc/js/phuix/PHUIXExample.js' => '68af71ca',
     'rsrc/js/phuix/PHUIXFormControl.js' => '83e03671',
@@ -820,8 +820,8 @@ return array(
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '269cbc99',
     'phui-button-bar-css' => '39fe680c',
-    'phui-button-css' => '9f13ddcc',
+    'phui-button-css' => '022581b4',
-    'phui-button-simple-css' => '081cfeea',
+    'phui-button-simple-css' => '8e1baf68',
     'phui-calendar-css' => '477acfaa',
     'phui-calendar-day-css' => '572b1893',
     'phui-calendar-list-css' => '576be600',
@@ -878,7 +878,7 @@ return array(
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => 'b3465b9b',
     'phuix-autocomplete' => 'f6699267',
-    'phuix-button-view' => 'b3c515be',
+    'phuix-button-view' => 'a37126bd',
     'phuix-dropdown-menu' => '8018ee50',
     'phuix-form-control-view' => '83e03671',
     'phuix-icon-view' => 'bff6884b',
@@ -936,9 +936,6 @@ return array(
       'javelin-stratcom',
       'javelin-workflow',
     ),
-    '081cfeea' => array(
-      'phui-button-css',
-    ),
     '0825c27a' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1561,6 +1558,9 @@ return array(
       'javelin-stratcom',
       'javelin-install',
     ),
+    '8e1baf68' => array(
+      'phui-button-css',
+    ),
     '8ff5e24c' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1651,6 +1651,10 @@ return array(
       'javelin-util',
       'phabricator-keyboard-shortcut',
     ),
+    'a37126bd' => array(
+      'javelin-install',
+      'javelin-dom',
+    ),
     'a3a63478' => array(
       'phui-workcard-view-css',
     ),
@@ -1768,10 +1772,6 @@ return array(
       'javelin-behavior',
       'phabricator-prefab',
     ),
-    'b3c515be' => array(
-      'javelin-install',
-      'javelin-dom',
-    ),
     'b3e7d692' => array(
       'javelin-install',
     ),

src/applications/almanac/controller/AlmanacController.php

@@ -84,8 +84,8 @@ abstract class AlmanacController
         'a',
         array(
           'class' => ($can_edit
-            ? 'button grey small'
+            ? 'button button-grey small'
-            : 'button grey small disabled'),
+            : 'button button-grey small disabled'),
           'sigil' => 'workflow',
           'href' => $delete_uri,
         ),

src/applications/almanac/view/AlmanacBindingTableView.php

@@ -77,7 +77,7 @@ final class AlmanacBindingTableView extends AphrontView {
         phutil_tag(
           'a',
           array(
-            'class' => 'small grey button',
+            'class' => 'small button button-grey',
             'href' => '/almanac/binding/'.$binding->getID().'/',
           ),
           pht('Details')),

src/applications/almanac/view/AlmanacInterfaceTableView.php

@@ -30,9 +30,9 @@ final class AlmanacInterfaceTableView extends AphrontView {
     $can_edit = $this->getCanEdit();
 
     if ($can_edit) {
-      $button_class = 'small grey button';
+      $button_class = 'small button button-grey';
     } else {
-      $button_class = 'small grey button disabled';
+      $button_class = 'small button button-grey disabled';
     }
 
     $handles = $viewer->loadHandles(mpull($interfaces, 'getNetworkPHID'));

src/applications/conduit/settings/PhabricatorConduitTokensSettingsPanel.php

@@ -60,7 +60,7 @@ final class PhabricatorConduitTokensSettingsPanel
         javelin_tag(
           'a',
           array(
-            'class' => 'button small grey',
+            'class' => 'button small button-grey',
             'href' => '/conduit/token/terminate/'.$token->getID().'/',
             'sigil' => 'workflow',
           ),

src/applications/config/view/PhabricatorSetupIssueView.php

@@ -129,7 +129,7 @@ final class PhabricatorSetupIssueView extends AphrontView {
           array(
             'href' => '/config/unignore/'.$issue->getIssueKey().'/',
             'sigil' => 'workflow',
-            'class' => 'button grey',
+            'class' => 'button button-grey',
           ),
           pht('Unignore Setup Issue'));
       } else {
@@ -138,7 +138,7 @@ final class PhabricatorSetupIssueView extends AphrontView {
           array(
             'href' => '/config/ignore/'.$issue->getIssueKey().'/',
             'sigil' => 'workflow',
-            'class' => 'button grey',
+            'class' => 'button button-grey',
           ),
           pht('Ignore Setup Issue'));
       }
@@ -147,7 +147,7 @@ final class PhabricatorSetupIssueView extends AphrontView {
         'a',
         array(
           'href' => '/config/issue/'.$issue->getIssueKey().'/',
-          'class' => 'button grey',
+          'class' => 'button button-grey',
           'style' => 'float: right',
         ),
         pht('Reload Page'));

src/applications/conpherence/controller/ConpherenceController.php

@@ -140,7 +140,7 @@ abstract class ConpherenceController extends PhabricatorController {
           'button',
           array(
             'type' => 'SUBMIT',
-            'class' => 'button green mlr',
+            'class' => 'button button-green mlr',
           ),
           pht('Join Room'));
 

src/applications/conpherence/view/ConpherenceDurableColumnView.php

@@ -404,7 +404,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
           'a',
           array(
             'href' => '/conpherence/search/',
-            'class' => 'button grey',
+            'class' => 'button button-grey',
           ),
           pht('Find Rooms')),
       );

src/applications/console/plugin/DarkConsoleServicesPlugin.php

@@ -170,7 +170,8 @@ final class DarkConsoleServicesPlugin extends DarkConsolePlugin {
           'a',
           array(
             'href'  => $data['analyzeURI'],
-            'class' => $data['didAnalyze'] ? 'disabled button' : 'green button',
+            'class' => $data['didAnalyze'] ?
+              'disabled button' : 'button button-green',
           ),
           pht('Analyze Query Plans')),
         phutil_tag('h1', array(), pht('Calls to External Services')),

src/applications/console/plugin/DarkConsoleXHProfPlugin.php

@@ -67,7 +67,7 @@ final class DarkConsoleXHProfPlugin extends DarkConsolePlugin {
           'a',
           array(
             'href'  => $profile_uri,
-            'class' => $run ? 'disabled button' : 'green button',
+            'class' => $run ? 'disabled button' : 'button button-green',
           ),
           pht('Profile Page')),
         phutil_tag('h1', array(), pht('XHProf Profiler')),

src/applications/daemon/view/PhabricatorDaemonTasksTableView.php

@@ -41,7 +41,7 @@ final class PhabricatorDaemonTasksTableView extends AphrontView {
           'a',
           array(
             'href' => '/daemon/task/'.$task->getID().'/',
-            'class' => 'button small grey',
+            'class' => 'button small button-grey',
           ),
           pht('View Task')),
       );

src/applications/differential/controller/DifferentialRevisionViewController.php

@@ -156,7 +156,7 @@ final class DifferentialRevisionViewController extends DifferentialController {
         phutil_tag(
           'a',
           array(
-            'class' => 'button grey',
+            'class' => 'button button-grey',
             'href' => $request_uri
               ->alter('large', 'true')
               ->setFragment('toc'),

src/applications/differential/view/DifferentialChangesetListView.php

@@ -174,7 +174,7 @@ final class DifferentialChangesetListView extends AphrontView {
           $load = javelin_tag(
             'a',
             array(
-              'class' => 'button grey',
+              'class' => 'button button-grey',
               'href' => '#'.$uniq_id,
               'sigil' => 'differential-load',
               'meta' => array(

src/applications/files/controller/PhabricatorFileTransformListController.php

@@ -68,7 +68,7 @@ final class PhabricatorFileTransformListController
         $view_link = phutil_tag(
           'a',
           array(
-            'class' => 'small grey button',
+            'class' => 'small button button-grey',
             'href' => $view_href,
           ),
           $view_text);

src/applications/herald/controller/HeraldRuleController.php

@@ -191,7 +191,7 @@ final class HeraldRuleController extends HeraldController {
             'a',
             array(
               'href' => '#',
-              'class' => 'button green',
+              'class' => 'button button-green',
               'sigil' => 'create-condition',
               'mustcapture' => true,
             ),
@@ -212,7 +212,7 @@ final class HeraldRuleController extends HeraldController {
             'a',
             array(
               'href' => '#',
-              'class' => 'button green',
+              'class' => 'button button-green',
               'sigil' => 'create-action',
               'mustcapture' => true,
             ),

src/applications/maniphest/controller/ManiphestBatchEditController.php

@@ -173,7 +173,7 @@ final class ManiphestBatchEditController extends ManiphestController {
             'a',
             array(
               'href' => '#',
-              'class' => 'button green',
+              'class' => 'button button-green',
               'sigil' => 'add-action',
               'mustcapture' => true,
             ),

src/applications/maniphest/view/ManiphestTaskResultListView.php

@@ -196,7 +196,7 @@ final class ManiphestTaskResultListView extends ManiphestView {
       array(
         'href'        => '#',
         'mustcapture' => true,
-        'class'       => 'grey button',
+        'class'       => 'button button-grey',
         'id'          => 'batch-select-all',
       ),
       pht('Select All'));
@@ -206,7 +206,7 @@ final class ManiphestTaskResultListView extends ManiphestView {
       array(
         'href'        => '#',
         'mustcapture' => true,
-        'class'       => 'grey button',
+        'class'       => 'button button-grey',
         'id'          => 'batch-select-none',
       ),
       pht('Clear Selection'));
@@ -224,7 +224,7 @@ final class ManiphestTaskResultListView extends ManiphestView {
       'a',
       array(
         'href' => '/maniphest/export/'.$saved_query->getQueryKey().'/',
-        'class' => 'grey button',
+        'class' => 'button button-grey',
       ),
       pht('Export to Excel'));
 

src/applications/metamta/applicationpanel/PhabricatorMetaMTAApplicationEmailPanel.php

@@ -341,7 +341,7 @@ final class PhabricatorMetaMTAApplicationEmailPanel
       $button_edit = javelin_tag(
         'a',
         array(
-          'class' => 'button small grey',
+          'class' => 'button small button-grey',
           'href'  => $uri->alter('edit', $email->getID()),
           'sigil' => 'workflow',
         ),
@@ -350,7 +350,7 @@ final class PhabricatorMetaMTAApplicationEmailPanel
       $button_remove = javelin_tag(
         'a',
         array(
-          'class'   => 'button small grey',
+          'class'   => 'button small button-grey',
           'href'    => $uri->alter('delete', $email->getID()),
           'sigil'   => 'workflow',
         ),

src/applications/oauthserver/panel/PhabricatorOAuthServerAuthorizationsSettingsPanel.php

@@ -87,7 +87,7 @@ final class PhabricatorOAuthServerAuthorizationsSettingsPanel
         'a',
         array(
           'href' => $this->getPanelURI('?revoke='.$authorization->getID()),
-          'class' => 'small grey button',
+          'class' => 'small button button-grey',
           'sigil' => 'workflow',
         ),
         pht('Revoke'));

src/applications/owners/controller/PhabricatorOwnersPathsController.php

@@ -124,7 +124,7 @@ final class PhabricatorOwnersPathsController
               'a',
               array(
                 'href' => '#',
-                'class' => 'button green',
+                'class' => 'button button-green',
                 'sigil' => 'addpath',
                 'mustcapture' => true,
               ),

src/applications/passphrase/view/PassphraseCredentialControl.php

@@ -113,7 +113,7 @@ final class PassphraseCredentialControl extends AphrontFormControl {
         'a',
         array(
           'href' => '#',
-          'class' => 'button grey',
+          'class' => 'button button-grey',
           'sigil' => 'passphrase-credential-add',
           'mustcapture' => true,
         ),

src/applications/pholio/view/PholioUploadedImageView.php

@@ -120,7 +120,7 @@ final class PholioUploadedImageView extends AphrontView {
     return javelin_tag(
       'a',
       array(
-        'class' => 'button grey',
+        'class' => 'button button-grey',
         'sigil' => 'pholio-drop-remove',
       ),
       'X');

src/applications/phortune/controller/cart/PhortuneCartCheckoutController.php

@@ -152,7 +152,7 @@ final class PhortuneCartCheckoutController
       $new_method = javelin_tag(
         'a',
         array(
-          'class' => 'button grey',
+          'class' => 'button button-grey',
           'href'  => $payment_method_uri,
         ),
         pht('Add New Payment Method'));

src/applications/phortune/controller/subscription/PhortuneSubscriptionEditController.php

@@ -123,7 +123,7 @@ final class PhortuneSubscriptionEditController extends PhortuneController {
       'a',
       array(
         'href' => $uri,
-        'class' => 'button grey',
+        'class' => 'button button-grey',
       ),
       pht('Add Payment Method...'));
 

src/applications/phortune/view/PhortuneOrderTableView.php

@@ -101,7 +101,7 @@ final class PhortuneOrderTableView extends AphrontView {
           'a',
           array(
             'href' => $cart->getCheckoutURI(),
-            'class' => 'small green button',
+            'class' => 'small button button-green',
           ),
           pht('Pay Now')),
       );

src/applications/phriction/controller/PhrictionDiffController.php

@@ -103,7 +103,7 @@ final class PhrictionDiffController extends PhrictionController {
           'a',
           array(
             'href' => $uri->alter('l', $l - 1)->alter('r', $r - 1),
-            'class' => 'button grey',
+            'class' => 'button button-grey',
           ),
           pht("\xC2\xAB Previous Change"));
       } else {
@@ -111,7 +111,7 @@ final class PhrictionDiffController extends PhrictionController {
           'a',
           array(
             'href' => '#',
-            'class' => 'button grey disabled',
+            'class' => 'button button-grey disabled',
           ),
           pht('Original Change'));
       }
@@ -122,7 +122,7 @@ final class PhrictionDiffController extends PhrictionController {
           'a',
           array(
             'href' => $uri->alter('l', $l + 1)->alter('r', $r + 1),
-            'class' => 'button grey',
+            'class' => 'button button-grey',
           ),
           pht("Next Change \xC2\xBB"));
       } else {
@@ -130,7 +130,7 @@ final class PhrictionDiffController extends PhrictionController {
           'a',
           array(
             'href' => '#',
-            'class' => 'button grey disabled',
+            'class' => 'button button-grey disabled',
           ),
           pht('Most Recent Change'));
       }
@@ -200,7 +200,7 @@ final class PhrictionDiffController extends PhrictionController {
         'a',
         array(
           'href'  => '/phriction/edit/'.$document_id.'/',
-          'class' => 'button grey',
+          'class' => 'button button-grey',
         ),
         pht('Edit Current Version'));
     }
@@ -210,7 +210,7 @@ final class PhrictionDiffController extends PhrictionController {
       'a',
       array(
         'href'  => '/phriction/edit/'.$document_id.'/?revert='.$version,
-        'class' => 'button grey',
+        'class' => 'button button-grey',
       ),
       pht('Revert to Version %s...', $version));
   }

src/applications/policy/controller/PhabricatorPolicyEditController.php

@@ -199,7 +199,7 @@ final class PhabricatorPolicyEditController
               'a',
               array(
                 'href' => '#',
-                'class' => 'button green',
+                'class' => 'button button-green',
                 'sigil' => 'create-rule',
                 'mustcapture' => true,
               ),

src/applications/settings/panel/PhabricatorEmailAddressesSettingsPanel.php

@@ -63,7 +63,7 @@ final class PhabricatorEmailAddressesSettingsPanel
       $button_verify = javelin_tag(
         'a',
         array(
-          'class' => 'button small grey',
+          'class' => 'button small button-grey',
           'href'  => $uri->alter('verify', $email->getID()),
           'sigil' => 'workflow',
         ),
@@ -72,7 +72,7 @@ final class PhabricatorEmailAddressesSettingsPanel
       $button_make_primary = javelin_tag(
         'a',
         array(
-          'class' => 'button small grey',
+          'class' => 'button small button-grey',
           'href'  => $uri->alter('primary', $email->getID()),
           'sigil' => 'workflow',
         ),
@@ -81,7 +81,7 @@ final class PhabricatorEmailAddressesSettingsPanel
       $button_remove = javelin_tag(
         'a',
         array(
-          'class'   => 'button small grey',
+          'class'   => 'button small button-grey',
           'href'    => $uri->alter('delete', $email->getID()),
           'sigil'   => 'workflow',
         ),

src/applications/settings/panel/PhabricatorMultiFactorSettingsPanel.php

@@ -69,7 +69,7 @@ final class PhabricatorMultiFactorSettingsPanel
           array(
             'href' => $this->getPanelURI('?delete='.$factor->getID()),
             'sigil' => 'workflow',
-            'class' => 'small grey button',
+            'class' => 'small button button-grey',
           ),
           pht('Remove')),
       );

src/applications/settings/panel/PhabricatorSessionsSettingsPanel.php

@@ -58,7 +58,7 @@ final class PhabricatorSessionsSettingsPanel extends PhabricatorSettingsPanel {
         $button = phutil_tag(
           'a',
           array(
-            'class' => 'small grey button disabled',
+            'class' => 'small button button-grey disabled',
           ),
           pht('Current'));
       } else {
@@ -67,7 +67,7 @@ final class PhabricatorSessionsSettingsPanel extends PhabricatorSettingsPanel {
           'a',
           array(
             'href' => '/auth/session/terminate/'.$session->getID().'/',
-            'class' => 'small grey button',
+            'class' => 'small button button-grey',
             'sigil' => 'workflow',
           ),
           pht('Terminate'));

src/applications/settings/panel/PhabricatorTokensSettingsPanel.php

@@ -30,7 +30,7 @@ final class PhabricatorTokensSettingsPanel extends PhabricatorSettingsPanel {
           'a',
           array(
             'href' => '/auth/token/revoke/'.$token->getID().'/',
-            'class' => 'small grey button',
+            'class' => 'small button button-grey',
             'sigil' => 'workflow',
           ),
           pht('Revoke'));
@@ -38,7 +38,7 @@ final class PhabricatorTokensSettingsPanel extends PhabricatorSettingsPanel {
         $button = javelin_tag(
           'a',
           array(
-            'class' => 'small grey button disabled',
+            'class' => 'small button button-grey disabled',
           ),
           pht('Revoke'));
       }

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -16,63 +16,11 @@ final class PHUIButtonExample extends PhabricatorUIExample {
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    $colors = array('', 'green', 'grey', 'disabled');
-    $sizes = array('', 'small');
-    $tags = array('a', 'button');
-
-    // phutil_tag
-
-    $column = array();
-    foreach ($tags as $tag) {
-      foreach ($colors as $color) {
-        foreach ($sizes as $key => $size) {
-          $class = implode(' ', array($color, $size));
-
-          if ($tag == 'a') {
-            $class .= ' button';
-          }
-
-          $column[$key][] = phutil_tag(
-            $tag,
-            array(
-              'class' => $class,
-            ),
-            phutil_utf8_ucwords($size.' '.$color.' '.$tag));
-
-          $column[$key][] = hsprintf('<br /><br />');
-        }
-      }
-    }
-
-    $column3 = array();
-    foreach ($colors as $color) {
-      $caret = phutil_tag('span', array('class' => 'caret'), '');
-      $column3[] = phutil_tag(
-          'a',
-            array(
-              'class' => $color.' button dropdown',
-            ),
-          array(
-            phutil_utf8_ucwords($color.' Dropdown'),
-            $caret,
-          ));
-        $column3[] = hsprintf('<br /><br />');
-    }
-
-    $layout1 = id(new AphrontMultiColumnView())
-      ->addColumn($column[0])
-      ->addColumn($column[1])
-      ->addColumn($column3)
-      ->setFluidLayout(true)
-      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
-
    // PHUIButtonView
-
    $colors = array(
      null,
      PHUIButtonView::GREEN,
      PHUIButtonView::GREY,
-     PHUIButtonView::DISABLED,
     );
    $sizes = array(null, PHUIButtonView::SMALL);
    $column = array();
@@ -223,24 +171,21 @@ final class PHUIButtonExample extends PhabricatorUIExample {
 
     // Set it and forget it
 
-    $head1 = id(new PHUIHeaderView())
-      ->setHeader('phutil_tag');
-
     $head2 = id(new PHUIHeaderView())
-      ->setHeader('PHUIButtonView');
+      ->setHeader('PHUIButtonView')
+      ->addClass('ml');
 
     $head3 = id(new PHUIHeaderView())
-      ->setHeader(pht('Icon Buttons'));
+      ->setHeader(pht('Icon Buttons'))
+      ->addClass('ml');
 
     $head4 = id(new PHUIHeaderView())
-      ->setHeader(pht('Simple Buttons'));
+      ->setHeader(pht('Simple Buttons'))
+      ->addClass('ml');
 
     $head5 = id(new PHUIHeaderView())
-      ->setHeader(pht('Big Icon Buttons'));
+      ->setHeader(pht('Big Icon Buttons'))
-
+      ->addClass('ml');
-    $wrap1 = id(new PHUIBoxView())
-      ->appendChild($layout1)
-      ->addMargin(PHUI::MARGIN_LARGE);
 
     $wrap2 = id(new PHUIBoxView())
       ->appendChild($layout2)
@@ -259,8 +204,6 @@ final class PHUIButtonExample extends PhabricatorUIExample {
       ->addMargin(PHUI::MARGIN_LARGE);
 
     return array(
-      $head1,
-      $wrap1,
       $head2,
       $wrap2,
       $head3,

src/applications/uiexample/examples/PHUIColorPalletteExample.php

@@ -101,7 +101,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
       'a',
       array(
         'href' => 'http://color.hailpixel.com/#'.implode(',', $url),
-        'class' => 'button grey mlb',
+        'class' => 'button button-grey mlb',
       ),
       pht('Color Palette'));
 

src/applications/uiexample/examples/PhabricatorNotificationUIExample.php

@@ -24,7 +24,7 @@ final class PhabricatorNotificationUIExample extends PhabricatorUIExample {
       'a',
       array(
         'sigil' => 'notification-example',
-        'class' => 'button green',
+        'class' => 'button button-green',
       ),
       pht('Show Notification'));
 

src/view/AphrontDialogView.php

@@ -248,7 +248,7 @@ final class AphrontDialogView
         'a',
         array(
           'href'  => $this->cancelURI,
-          'class' => 'button grey',
+          'class' => 'button button-grey',
           'name'  => '__cancel__',
           'sigil' => 'jx-workflow-button',
           'meta' => $meta,

src/view/form/control/AphrontFormPolicyControl.php

@@ -324,7 +324,8 @@ final class AphrontFormPolicyControl extends AphrontFormControl {
         javelin_tag(
           'a',
           array(
-            'class' => 'grey button dropdown has-icon has-text policy-control',
+            'class' => 'button button-grey dropdown has-icon has-text '.
+              'policy-control',
             'href' => '#',
             'mustcapture' => true,
             'sigil' => 'policy-control',

src/view/form/control/PHUIFormIconSetControl.php

@@ -30,7 +30,7 @@ final class PHUIFormIconSetControl
 
     $classes = array();
     $classes[] = 'button';
-    $classes[] = 'grey';
+    $classes[] = 'button-grey';
 
     if ($is_disabled) {
       $classes[] = 'disabled';

src/view/layout/AphrontListFilterView.php

@@ -44,7 +44,7 @@ final class AphrontListFilterView extends AphrontView {
       $hide_action = javelin_tag(
         'a',
         array(
-          'class' => 'button grey',
+          'class' => 'button button-grey',
           'sigil' => 'reveal-content',
           'id' => $hide_action_id,
           'href' => $this->showHideHref,
@@ -65,7 +65,7 @@ final class AphrontListFilterView extends AphrontView {
       $show_action = javelin_tag(
         'a',
         array(
-          'class' => 'button grey',
+          'class' => 'button button-grey',
           'sigil' => 'reveal-content',
           'style' => 'display: none;',
           'href' => '#',

src/view/phui/PHUIButtonView.php

@@ -4,6 +4,7 @@ final class PHUIButtonView extends AphrontTagView {
 
   const GREEN = 'green';
   const GREY = 'grey';
+  const BLUE = 'blue';
   const DISABLED = 'disabled';
 
   const SMALL = 'small';
@@ -159,7 +160,7 @@ final class PHUIButtonView extends AphrontTagView {
     $classes[] = 'button';
 
     if ($this->color) {
-      $classes[] = $this->color;
+      $classes[] = 'button-'.$this->color;
     }
 
     if ($this->size) {
@@ -188,10 +189,10 @@ final class PHUIButtonView extends AphrontTagView {
 
     switch ($this->getButtonType()) {
       case self::BUTTONTYPE_DEFAULT:
-        // Nothing special for default buttons.
+        $classes[] = 'phui-button-default';
         break;
       case self::BUTTONTYPE_SIMPLE:
-        $classes[] = 'simple';
+        $classes[] = 'phui-button-simple';
         break;
     }
 

src/view/phui/PHUIHovercardView.php

@@ -173,7 +173,7 @@ final class PHUIHovercardView extends AphrontTagView {
 
     foreach ($this->actions as $action) {
       $options = array(
-        'class' => 'button grey',
+        'class' => 'button button-grey',
         'href'  => $action['uri'],
       );
 

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

@@ -6,55 +6,55 @@
 
 /* - Basic -------------------------------------------------------------------*/
 
-button.simple,
+button.phui-button-simple,
-input[type="submit"].simple,
+input[type="submit"].phui-button-simple,
-a.simple,
+a.phui-button-simple,
-a.simple:visited {
+a.phui-button-simple:visited {
   background: #fff;
   color: {$bluetext};
   border: 1px solid {$lightblueborder};
 }
 
-button.simple .phui-icon-view,
+button.phui-button-simple .phui-icon-view,
-input[type="submit"].simple .phui-icon-view,
+input[type="submit"].phui-button-simple .phui-icon-view,
-a.simple .phui-icon-view,
+a.phui-button-simple .phui-icon-view,
-a.simple:visited .phui-icon-view {
+a.phui-button-simple:visited .phui-icon-view {
   color: {$lightbluetext};
 }
 
-a.button.simple:hover,
+a.button.phui-button-simple:hover,
-button.simple:hover {
+button.phui-button-simple:hover {
   border-color: {$blueborder};
   background-image: none;
   background-color: #fff;
   transition: 0s;
 }
 
-a.simple.current {
+a.phui-button-simple.current {
   background: {$lightblue};
 }
 
 
 /* - Red  --------------------------------------------------------------------*/
 
-button.simple.red,
+button.phui-button-simple.button-red,
-input[type="submit"].simple.red,
+input[type="submit"].phui-button-simple.button-red,
-a.simple.red,
+a.phui-button-simple.button-red,
-a.simple.red:visited {
+a.phui-button-simple.button-red:visited {
   background: {$sh-redbackground};
   color: {$redtext};
   border: 1px solid {$sh-redborder};
 }
 
-button.simple.red .phui-icon-view,
+button.phui-button-simple.button-red .phui-icon-view,
-input[type="submit"].simple.red .phui-icon-view,
+input[type="submit"].phui-button-simple.button-red .phui-icon-view,
-a.simple.red .phui-icon-view,
+a.phui-button-simple.button-red .phui-icon-view,
-a.simple.red:visited .phui-icon-view {
+a.phui-button-simple.button-red:visited .phui-icon-view {
   color: {$redtext};
 }
 
-a.button.simple.red:hover,
+a.button.phui-button-simple.button-red:hover,
-button.simple.red:hover {
+button.phui-button-simple.button-red:hover {
   border-color: {$sh-redtext};
   background-image: none;
   background-color: {$sh-redbackground};
@@ -63,24 +63,24 @@ button.simple.red:hover {
 
 /* - Green  ------------------------------------------------------------------*/
 
-button.simple.green,
+button.phui-button-simple.button-green,
-input[type="submit"].simple.green,
+input[type="submit"].phui-button-simple.button-green,
-a.simple.green,
+a.phui-button-simple.button-green,
-a.simple.green:visited {
+a.phui-button-simple.button-green:visited {
   background: {$sh-greenbackground};
   color: {$greentext};
   border: 1px solid {$sh-greenborder};
 }
 
-button.simple.green .phui-icon-view,
+button.phui-button-simple.button-green .phui-icon-view,
-input[type="submit"].simple.green .phui-icon-view,
+input[type="submit"].phui-button-simple.button-green .phui-icon-view,
-a.simple.green .phui-icon-view,
+a.phui-button-simple.button-green .phui-icon-view,
-a.simple.green:visited .phui-icon-view {
+a.phui-button-simple.button-green:visited .phui-icon-view {
   color: {$greentext};
 }
 
-a.button.simple.green:hover,
+a.button.phui-button-simple.button-green:hover,
-button.simple.green:hover {
+button.phui-button-simple.button-green:hover {
   border-color: {$sh-greentext};
   background-image: none;
   background-color: {$sh-greenbackground};
@@ -89,24 +89,24 @@ button.simple.green:hover {
 
 /* - Yellow  -----------------------------------------------------------------*/
 
-button.simple.yellow,
+button.phui-button-simple.button-yellow,
-input[type="submit"].simple.yellow,
+input[type="submit"].phui-button-simple.button-yellow,
-a.simple.yellow,
+a.phui-button-simple.button-yellow,
-a.simple.yellow:visited {
+a.phui-button-simple.button-yellow:visited {
   background-color: {$sh-yellowbackground};
   color: {$sh-yellowtext};
   border: 1px solid {$sh-yellowborder};
 }
 
-button.simple.yellow .phui-icon-view,
+button.phui-button-simple.button-yellow .phui-icon-view,
-input[type="submit"].simple.yellow .phui-icon-view,
+input[type="submit"].phui-button-simple.button-yellow .phui-icon-view,
-a.simple.yellow .phui-icon-view,
+a.phui-button-simple.button-yellow .phui-icon-view,
-a.simple.yellow:visited .phui-icon-view {
+a.phui-button-simple.button-yellow:visited .phui-icon-view {
   color: {$sh-yellowicon};
 }
 
-a.button.simple.yellow:hover,
+a.button.phui-button-simple.button-yellow:hover,
-button.simple.yellow:hover {
+button.phui-button-simple.button-yellow:hover {
   border-color: {$sh-yellowtext};
   background-image: none;
   background-color: {$sh-yellowbackground};
@@ -116,16 +116,16 @@ button.simple.yellow:hover {
 
 /* - Misc  -------------------------------------------------------------------*/
 
-a.button.simple .phui-icon-view {
+a.button.phui-button-simple .phui-icon-view {
   border: none;
 }
 
-a.button.simple.phuix-dropdown-open {
+a.button.phui-button-simple.phuix-dropdown-open {
   background-color: #fff;
   color: {$blue};
   box-shadow: none;
 }
 
-a.button.simple.phuix-dropdown-open:hover .phui-icon-view {
+a.button.phui-button-simple.phuix-dropdown-open:hover .phui-icon-view {
   color: {$blue};
 }

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

@@ -49,13 +49,13 @@ input[type="submit"] {
 
 button .phui-icon-view,
 a.button .phui-icon-view,
-button.green .phui-icon-view,
+button.button-green .phui-icon-view,
-a.button.green .phui-icon-view {
+a.button.button-green .phui-icon-view {
   color: white;
 }
 
-button.grey .phui-icon-view,
+button.button-grey .phui-icon-view,
-a.button.grey .phui-icon-view {
+a.button.button-grey .phui-icon-view {
   color: {$darkbluetext};
 }
 
@@ -68,18 +68,18 @@ a.icon:visited {
   text-indent: 29px;
 }
 
-button.green,
+button.button-green,
-a.green.button,
+a.button-green.button,
-a.green.button:visited {
+a.button-green.button:visited {
   background-color: {$green};
   border-color: {$green};
   background-image: linear-gradient(to bottom, #23BB5B, #139543);
 }
 
-button.grey,
+button.button-grey,
-input[type="submit"].grey,
+input[type="submit"].button-grey,
-a.grey,
+a.button-grey,
-a.grey:visited {
+a.button-grey:visited {
   background-color: #F7F7F9;
   background-image: linear-gradient(to bottom, #ffffff, #f1f0f1);
   border: 1px solid rgba({$alphablue}, 0.3);
@@ -108,15 +108,15 @@ button:hover {
   transition: 0.1s;
 }
 
-a.button.grey:hover,
+a.button.button-grey:hover,
-button.grey:hover {
+button.button-grey:hover {
   background-image: linear-gradient(to bottom, #ffffff, #eeebec);
   border-color: rgba({$alphablue}, 0.4);
   transition: 0.1s;
 }
 
-a.button.green:hover,
+a.button.button-green:hover,
-button.green:hover {
+button.button-green:hover {
   border-color: #127336;
   background-color: #0DAD48;
   background-image: linear-gradient(to bottom, #23BB5B, #178841);
@@ -244,7 +244,7 @@ a.policy-control .phui-button-text {
   margin-top: 6px;
 }
 
-.grey.dropdown .caret {
+.button-grey.dropdown .caret {
   border-top-color: #000;
 }
 

webroot/rsrc/js/phuix/PHUIXButtonView.js

@@ -35,10 +35,10 @@ JX.install('PHUIXButtonView', {
       var node = this.getNode();
 
       if (this._color) {
-        JX.DOM.alterClass(node, this._color, false);
+        JX.DOM.alterClass(node, 'button-' + this._color, false);
       }
       this._color = color;
-      JX.DOM.alterClass(node, this._color, true);
+      JX.DOM.alterClass(node, 'button-' + this._color, true);
 
       return this;
     },
@@ -50,7 +50,7 @@ JX.install('PHUIXButtonView', {
       var node = this.getNode();
 
       var is_simple = (this._buttonType == self.BUTTONTYPE_SIMPLE);
-      JX.DOM.alterClass(node, 'simple', is_simple);
+      JX.DOM.alterClass(node, 'phui-button-simple', is_simple);
 
       return this;
     },