PHUIButtonView class

Summary: Rough pass at a PHUIButtonView Class. Keeps phutil_tag intact and adds some image features if you use the class.

Test Plan: UIExamples

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

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

scripts/celerity_mapper.php

@@ -67,7 +67,7 @@ $package_spec = array(
   'core.pkg.css' => array(
     'phabricator-core-css',
     'phabricator-zindex-css',
-    'phabricator-core-buttons-css',
+    'phui-button-css',
     'phabricator-standard-page-view',
     'aphront-dialog-view-css',
     'aphront-form-view-css',
@@ -104,7 +104,7 @@ $package_spec = array(
     'phabricator-crumbs-view-css',
     'phabricator-object-item-list-view-css',
     'global-drag-and-drop-css',
-    'spacing-css',
+    'phui-spacing-css',
     'phui-form-css',
     'phui-icon-view-css',
 

src/__celerity_resource_map__.php

@@ -2965,15 +2965,6 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/contentsource/content-source-view.css',
   ),
-  'phabricator-core-buttons-css' =>
-  array(
-    'uri' => '/res/073fc5eb/rsrc/css/core/buttons.css',
-    'type' => 'css',
-    'requires' =>
-    array(
-    ),
-    'disk' => '/rsrc/css/core/buttons.css',
-  ),
   'phabricator-core-css' =>
   array(
     'uri' => '/res/dc204369/rsrc/css/core/core.css',
@@ -3694,6 +3685,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-box.css',
   ),
+  'phui-button-css' =>
+  array(
+    'uri' => '/res/8fc82931/rsrc/css/phui/phui-button.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-button.css',
+  ),
   'phui-document-view-css' =>
   array(
     'uri' => '/res/fe374dee/rsrc/css/phui/phui-document.css',
@@ -3723,7 +3723,7 @@ celerity_register_resource_map(array(
   ),
   'phui-icon-view-css' =>
   array(
-    'uri' => '/res/7fd37b96/rsrc/css/phui/phui-icon.css',
+    'uri' => '/res/f78f4c64/rsrc/css/phui/phui-icon.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3739,6 +3739,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-list.css',
   ),
+  'phui-spacing-css' =>
+  array(
+    'uri' => '/res/28891fd3/rsrc/css/phui/phui-spacing.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-spacing.css',
+  ),
   'phui-text-css' =>
   array(
     'uri' => '/res/ca884ca6/rsrc/css/phui/phui-text.css',
@@ -3901,15 +3910,6 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/config/setup-issue.css',
   ),
-  'spacing-css' =>
-  array(
-    'uri' => '/res/61563661/rsrc/css/core/spacing.css',
-    'type' => 'css',
-    'requires' =>
-    array(
-    ),
-    'disk' => '/rsrc/css/core/spacing.css',
-  ),
   'sprite-actions-css' =>
   array(
     'uri' => '/res/bd43efa8/rsrc/css/sprite-actions.css',
@@ -4048,14 +4048,14 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '76d08512' =>
+    '0a101340' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
       array(
         0 => 'phabricator-core-css',
         1 => 'phabricator-zindex-css',
-        2 => 'phabricator-core-buttons-css',
+        2 => 'phui-button-css',
         3 => 'phabricator-standard-page-view',
         4 => 'aphront-dialog-view-css',
         5 => 'aphront-form-view-css',
@@ -4088,7 +4088,7 @@ celerity_register_resource_map(array(
         32 => 'phabricator-crumbs-view-css',
         33 => 'phabricator-object-item-list-view-css',
         34 => 'global-drag-and-drop-css',
-        35 => 'spacing-css',
+        35 => 'phui-spacing-css',
         36 => 'phui-form-css',
         37 => 'phui-icon-view-css',
         38 => 'phabricator-application-launch-view-css',
@@ -4096,7 +4096,7 @@ celerity_register_resource_map(array(
         40 => 'phabricator-property-list-view-css',
         41 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/76d08512/core.pkg.css',
+      'uri' => '/res/pkg/0a101340/core.pkg.css',
       'type' => 'css',
     ),
     'f2ad0683' =>
@@ -4290,16 +4290,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => 'a7ca34a9',
-    'aphront-dialog-view-css' => '76d08512',
+    'aphront-dialog-view-css' => '0a101340',
-    'aphront-error-view-css' => '76d08512',
+    'aphront-error-view-css' => '0a101340',
-    'aphront-form-view-css' => '76d08512',
+    'aphront-form-view-css' => '0a101340',
-    'aphront-list-filter-view-css' => '76d08512',
+    'aphront-list-filter-view-css' => '0a101340',
-    'aphront-pager-view-css' => '76d08512',
+    'aphront-pager-view-css' => '0a101340',
-    'aphront-panel-view-css' => '76d08512',
+    'aphront-panel-view-css' => '0a101340',
-    'aphront-table-view-css' => '76d08512',
+    'aphront-table-view-css' => '0a101340',
-    'aphront-tokenizer-control-css' => '76d08512',
+    'aphront-tokenizer-control-css' => '0a101340',
-    'aphront-tooltip-css' => '76d08512',
+    'aphront-tooltip-css' => '0a101340',
-    'aphront-typeahead-control-css' => '76d08512',
+    'aphront-typeahead-control-css' => '0a101340',
     'differential-changeset-view-css' => 'dd27a69b',
     'differential-core-view-css' => 'dd27a69b',
     'differential-inline-comment-editor' => '9488bb69',
@@ -4313,7 +4313,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => 'dd27a69b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '76d08512',
+    'global-drag-and-drop-css' => '0a101340',
     'inline-comment-summary-css' => 'dd27a69b',
     'javelin-aphlict' => 'f2ad0683',
     'javelin-behavior' => 'a9f14d76',
@@ -4387,55 +4387,55 @@ celerity_register_resource_map(array(
     'javelin-util' => 'a9f14d76',
     'javelin-vector' => 'a9f14d76',
     'javelin-workflow' => 'a9f14d76',
-    'lightbox-attachment-css' => '76d08512',
+    'lightbox-attachment-css' => '0a101340',
     'maniphest-task-summary-css' => 'a7ca34a9',
     'maniphest-transaction-detail-css' => 'a7ca34a9',
-    'phabricator-action-list-view-css' => '76d08512',
+    'phabricator-action-list-view-css' => '0a101340',
-    'phabricator-application-launch-view-css' => '76d08512',
+    'phabricator-application-launch-view-css' => '0a101340',
     'phabricator-busy' => 'f2ad0683',
     'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => '76d08512',
+    'phabricator-core-css' => '0a101340',
-    'phabricator-core-css' => '76d08512',
+    'phabricator-crumbs-view-css' => '0a101340',
-    'phabricator-crumbs-view-css' => '76d08512',
     'phabricator-drag-and-drop-file-upload' => '9488bb69',
     'phabricator-dropdown-menu' => 'f2ad0683',
     'phabricator-file-upload' => 'f2ad0683',
-    'phabricator-filetree-view-css' => '76d08512',
+    'phabricator-filetree-view-css' => '0a101340',
-    'phabricator-flag-css' => '76d08512',
+    'phabricator-flag-css' => '0a101340',
-    'phabricator-form-view-css' => '76d08512',
+    'phabricator-form-view-css' => '0a101340',
-    'phabricator-header-view-css' => '76d08512',
+    'phabricator-header-view-css' => '0a101340',
     'phabricator-hovercard' => 'f2ad0683',
-    'phabricator-jump-nav' => '76d08512',
+    'phabricator-jump-nav' => '0a101340',
     'phabricator-keyboard-shortcut' => 'f2ad0683',
     'phabricator-keyboard-shortcut-manager' => 'f2ad0683',
-    'phabricator-main-menu-view' => '76d08512',
+    'phabricator-main-menu-view' => '0a101340',
     'phabricator-menu-item' => 'f2ad0683',
-    'phabricator-nav-view-css' => '76d08512',
+    'phabricator-nav-view-css' => '0a101340',
     'phabricator-notification' => 'f2ad0683',
-    'phabricator-notification-css' => '76d08512',
+    'phabricator-notification-css' => '0a101340',
-    'phabricator-notification-menu-css' => '76d08512',
+    'phabricator-notification-menu-css' => '0a101340',
-    'phabricator-object-item-list-view-css' => '76d08512',
+    'phabricator-object-item-list-view-css' => '0a101340',
     'phabricator-object-selector-css' => 'dd27a69b',
     'phabricator-phtize' => 'f2ad0683',
     'phabricator-prefab' => 'f2ad0683',
     'phabricator-project-tag-css' => 'a7ca34a9',
-    'phabricator-property-list-view-css' => '76d08512',
+    'phabricator-property-list-view-css' => '0a101340',
-    'phabricator-remarkup-css' => '76d08512',
+    'phabricator-remarkup-css' => '0a101340',
     'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => '76d08512',
+    'phabricator-side-menu-view-css' => '0a101340',
-    'phabricator-standard-page-view' => '76d08512',
+    'phabricator-standard-page-view' => '0a101340',
-    'phabricator-tag-view-css' => '76d08512',
+    'phabricator-tag-view-css' => '0a101340',
     'phabricator-textareautils' => 'f2ad0683',
     'phabricator-tooltip' => 'f2ad0683',
-    'phabricator-transaction-view-css' => '76d08512',
+    'phabricator-transaction-view-css' => '0a101340',
-    'phabricator-zindex-css' => '76d08512',
+    'phabricator-zindex-css' => '0a101340',
-    'phui-form-css' => '76d08512',
+    'phui-button-css' => '0a101340',
-    'phui-icon-view-css' => '76d08512',
+    'phui-form-css' => '0a101340',
-    'spacing-css' => '76d08512',
+    'phui-icon-view-css' => '0a101340',
-    'sprite-apps-large-css' => '76d08512',
+    'phui-spacing-css' => '0a101340',
-    'sprite-gradient-css' => '76d08512',
+    'sprite-apps-large-css' => '0a101340',
-    'sprite-icons-css' => '76d08512',
+    'sprite-gradient-css' => '0a101340',
-    'sprite-menu-css' => '76d08512',
+    'sprite-icons-css' => '0a101340',
-    'syntax-highlighting-css' => '76d08512',
+    'sprite-menu-css' => '0a101340',
+    'syntax-highlighting-css' => '0a101340',
   ),
 ));

src/__phutil_library_map__.php

@@ -686,6 +686,8 @@ phutil_register_library_map(array(
     'PHUI' => 'view/phui/PHUI.php',
     'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
+    'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php',
+    'PHUIButtonView' => 'view/phui/PHUIButtonView.php',
     'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
     'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
     'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
@@ -835,7 +837,6 @@ phutil_register_library_map(array(
     'PhabricatorBotUser' => 'infrastructure/daemon/bot/target/PhabricatorBotUser.php',
     'PhabricatorBotWhatsNewHandler' => 'infrastructure/daemon/bot/handler/PhabricatorBotWhatsNewHandler.php',
     'PhabricatorBuiltinPatchList' => 'infrastructure/storage/patch/PhabricatorBuiltinPatchList.php',
-    'PhabricatorButtonsExample' => 'applications/uiexample/examples/PhabricatorButtonsExample.php',
     'PhabricatorCacheDAO' => 'applications/cache/storage/PhabricatorCacheDAO.php',
     'PhabricatorCacheManagementPurgeWorkflow' => 'applications/cache/management/PhabricatorCacheManagementPurgeWorkflow.php',
     'PhabricatorCacheManagementWorkflow' => 'applications/cache/management/PhabricatorCacheManagementWorkflow.php',
@@ -2531,6 +2532,8 @@ phutil_register_library_map(array(
     'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',
+    'PHUIButtonExample' => 'PhabricatorUIExample',
+    'PHUIButtonView' => 'AphrontTagView',
     'PHUIDocumentExample' => 'PhabricatorUIExample',
     'PHUIDocumentView' => 'AphrontTagView',
     'PHUIFeedStoryExample' => 'PhabricatorUIExample',
@@ -2683,7 +2686,6 @@ phutil_register_library_map(array(
     'PhabricatorBotUser' => 'PhabricatorBotTarget',
     'PhabricatorBotWhatsNewHandler' => 'PhabricatorBotHandler',
     'PhabricatorBuiltinPatchList' => 'PhabricatorSQLPatchList',
-    'PhabricatorButtonsExample' => 'PhabricatorUIExample',
     'PhabricatorCacheDAO' => 'PhabricatorLiskDAO',
     'PhabricatorCacheManagementPurgeWorkflow' => 'PhabricatorSearchManagementWorkflow',
     'PhabricatorCacheManagementWorkflow' => 'PhutilArgumentWorkflow',

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -0,0 +1,185 @@
+<?php
+
+final class PHUIButtonExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Buttons';
+  }
+
+  public function getDescription() {
+    return hsprintf('Use <tt>&lt;button&gt;</tt> to render buttons.');
+  }
+
+  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();
+
+    $colors = array('', 'green', 'grey', 'black', '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::BLACK,
+          PHUIButtonView::DISABLED);
+   $sizes = array(null, PHUIButtonView::SMALL);
+   $column = array();
+   foreach ($colors as $color) {
+     foreach ($sizes as $key => $size) {
+       $column[$key][] = id(new PHUIButtonView())
+        ->setColor($color)
+        ->setSize($size)
+        ->setTag('a')
+        ->setText('Clicky');
+      $column[$key][] = hsprintf('<br /><br />');
+     }
+   }
+   foreach ($colors as $color) {
+     $column[2][] = id(new PHUIButtonView())
+        ->setColor($color)
+        ->setTag('button')
+        ->setText('Button')
+        ->setDropdown(true);
+      $column[2][] = hsprintf('<br /><br />');
+   }
+
+   $layout2 = id(new AphrontMultiColumnView())
+      ->addColumn($column[0])
+      ->addColumn($column[1])
+      ->addColumn($column[2])
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
+
+    // Icon Buttons
+
+    $column = array();
+    $icons = array(
+      'Comment' => 'comment',
+      'Give Token' => 'like',
+      'Reverse Time' => 'history',
+      'Implode Earth' => 'warning');
+    foreach ($icons as $text => $icon) {
+      $image = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+          ->setSpriteIcon($icon);
+      $column[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::GREY)
+        ->setIcon($image)
+        ->setText($text)
+        ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+    }
+
+    $layout3 = id(new AphrontMultiColumnView())
+      ->addColumn($column)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
+
+
+    // Baby Got Back Buttons
+
+        $column = array();
+    $icons = array('Asana', 'Github', 'Facebook', 'Google', 'LDAP');
+    foreach ($icons as $icon) {
+      $image = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_LOGIN)
+          ->setSpriteIcon($icon);
+      $column[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setSize(PHUIButtonView::BIG)
+        ->setColor(PHUIButtonView::GREY)
+        ->setIcon($image)
+        ->setText('Login or Register')
+        ->setSubtext($icon)
+        ->addClass(PHUI::MARGIN_MEDIUM_RIGHT);
+    }
+
+    $layout4 = id(new AphrontMultiColumnView())
+      ->addColumn($column)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
+
+
+    // Set it and forget it
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader('phutil_tag');
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader('PHUIButtonView');
+
+    $head3 = id(new PhabricatorHeaderView())
+      ->setHeader('Icon Buttons');
+
+    $head4 = id(new PhabricatorHeaderView())
+      ->setHeader('Big Icon Buttons');
+
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($layout2)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap3 = id(new PHUIBoxView())
+      ->appendChild($layout3)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap4 = id(new PHUIBoxView())
+      ->appendChild($layout4)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    return array($head1, $wrap1, $head2, $wrap2, $head3, $wrap3,
+      $head4, $wrap4);
+  }
+}

src/applications/uiexample/examples/PhabricatorButtonsExample.php

@@ -1,59 +0,0 @@
-<?php
-
-final class PhabricatorButtonsExample extends PhabricatorUIExample {
-
-  public function getName() {
-    return 'Buttons';
-  }
-
-  public function getDescription() {
-    return hsprintf('Use <tt>&lt;button&gt;</tt> to render buttons.');
-  }
-
-  public function renderExample() {
-    $request = $this->getRequest();
-    $user = $request->getUser();
-
-    $colors = array('', 'green', 'grey', 'black', 'disabled');
-    $sizes = array('', 'small');
-    $tags = array('a', 'button');
-
-    $view = array();
-    foreach ($tags as $tag) {
-      foreach ($colors as $color) {
-        foreach ($sizes as $size) {
-          $class = implode(' ', array($color, $size));
-
-          if ($tag == 'a') {
-            $class .= ' button';
-          }
-
-          $view[] = phutil_tag(
-            $tag,
-            array(
-              'class' => $class,
-            ),
-            phutil_utf8_ucwords($size.' '.$color.' '.$tag));
-
-          $view[] = hsprintf('<br /><br />');
-        }
-      }
-    }
-
-    foreach ($colors as $color) {
-      $caret = phutil_tag('span', array('class' => 'caret'), '');
-      $view[] = phutil_tag(
-          'a',
-            array(
-              'class' => $color.' button dropdown'
-            ),
-          array(
-            phutil_utf8_ucwords($color.' Dropdown'),
-            $caret,
-          ));
-        $view[] = hsprintf('<br /><br />');
-    }
-
-    return phutil_tag('div', array('style' => 'margin: 1em 2em;'), $view);
-  }
-}

src/view/page/PhabricatorStandardPageView.php

@@ -128,9 +128,9 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
 
     require_celerity_resource('phabricator-core-css');
     require_celerity_resource('phabricator-zindex-css');
-    require_celerity_resource('phabricator-core-buttons-css');
+    require_celerity_resource('phui-button-css');
-    require_celerity_resource('spacing-css');
+    require_celerity_resource('phui-spacing-css');
-    require_celerity_resource('phui-form-css'); // Evan will hate this
+    require_celerity_resource('phui-form-css');
     require_celerity_resource('sprite-gradient-css');
     require_celerity_resource('phabricator-standard-page-view');
 

src/view/phui/PHUIButtonView.php

@@ -0,0 +1,110 @@
+<?php
+
+final class PHUIButtonView extends AphrontTagView {
+
+  const GREEN = 'green';
+  const GREY = 'grey';
+  const BLACK = 'black';
+  const DISABLED = 'disabled';
+
+  const SMALL = 'small';
+  const BIG = 'big';
+
+  private $size;
+  private $text;
+  private $subtext;
+  private $color;
+  private $tag = 'a';
+  private $dropdown;
+  private $icon;
+
+  public function setText($text) {
+    $this->text = $text;
+    return $this;
+  }
+
+  public function setSubtext($subtext) {
+    $this->subtext = $subtext;
+    return $this;
+  }
+
+  public function setColor($color) {
+    $this->color = $color;
+    return $this;
+  }
+
+  public function setTag($tag) {
+    $this->tag = $tag;
+    return $this;
+  }
+
+  public function setSize($size) {
+    $this->size = $size;
+    return $this;
+  }
+
+  public function setDropdown($dd) {
+    $this->dropdown = $dd;
+    return $this;
+  }
+
+  public function setIcon(PHUIIconView $icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  public function getTagName() {
+    return $this->tag;
+  }
+
+  protected function getTagAttributes() {
+
+    require_celerity_resource('phui-button-css');
+
+    $classes = array();
+    $classes[] = 'button';
+
+    if ($this->color) {
+      $classes[] = $this->color;
+    }
+
+    if ($this->size) {
+      $classes[] = $this->size;
+    }
+
+    if ($this->dropdown) {
+      $classes[] = 'dropdown';
+    }
+
+    if ($this->icon) {
+      $classes[] = 'has-icon';
+    }
+
+    return array('class' => $classes);
+  }
+
+  protected function getTagContent() {
+
+    $icon = null;
+    $text = $this->text;
+    if ($this->icon) {
+      $icon = $this->icon;
+
+      $subtext = null;
+      if ($this->subtext) {
+        $subtext = phutil_tag(
+          'span', array('class' => 'phui-button-subtext'), $this->subtext);
+        $subtext = hsprintf('<br />%s', $subtext);
+      }
+      $text = phutil_tag(
+        'div', array('class' => 'phui-button-text'), array($text, $subtext));
+    }
+
+    $caret = null;
+    if ($this->dropdown) {
+      $caret = phutil_tag('span', array('class' => 'caret'), '');
+    }
+
+    return array($icon, $text, $caret);
+  }
+}

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

@@ -1,5 +1,5 @@
 /**
- * @provides phabricator-core-buttons-css
+ * @provides phui-button-css
  */
 
 
@@ -224,3 +224,40 @@ a.toggle-fixed {
 .grey.dropdown .caret {
   border-top-color: #000;
 }
+
+/* Icons */
+.button.has-icon {
+  position: relative;
+}
+
+.button .phui-icon-view {
+  display: inline-block;
+  position: absolute;
+  top: 5px;
+  left: 8px;
+}
+
+.button.has_icon .phui-button-text {
+  margin-left: 16px;
+}
+
+/* Login Buttons */
+
+.button.big.has-icon {
+  padding: 6px 20px 6px 12px;
+  border-radius: 4px;
+}
+
+.button.big.has-icon .phui-button-text {
+  margin-left: 36px;
+  font-size: 14px;
+  display: block;
+}
+
+.button.big.has-icon .phui-button-subtext {
+  color: #888;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: normal;
+  float: left;
+}

webroot/rsrc/css/phui/phui-icon.css

@@ -17,7 +17,8 @@
   width: 24px;
 }
 
-.phui-icon-view.sprite-apps {
+.phui-icon-view.sprite-apps,
+.phui-icon-view.sprite-icons {
   height: 14px;
   width: 14px;
 }

webroot/rsrc/css/phui/phui-spacing.css

@@ -1,5 +1,5 @@
 /**
- * @provides spacing-css
+ * @provides phui-spacing-css
  */
 
 .pl {