Allow buttons to just be icons

Summary: Let's buttons just be an icon, no pressure to also have text.

Test Plan: UIExamples, Search, Home, Policy Controls... Probably 99% of them.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '0c6e11ed',
+    'core.pkg.css' => 'eb39b754',
     'core.pkg.js' => '1475bd91',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => 'a2755617',
@@ -39,7 +39,7 @@ return array(
     'rsrc/css/aphront/typeahead.css' => '8a84cc7d',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '0877ed6e',
-    'rsrc/css/application/base/main-menu-view.css' => 'de9fe8c4',
+    'rsrc/css/application/base/main-menu-view.css' => '16053029',
     'rsrc/css/application/base/notification-menu.css' => '6a697e43',
     'rsrc/css/application/base/phui-theme.css' => '9f261c6b',
     'rsrc/css/application/base/standard-page-view.css' => 'eb5b80c5',
@@ -140,7 +140,7 @@ return array(
     'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
     'rsrc/css/phui/phui-box.css' => '269cbc99',
-    'rsrc/css/phui/phui-button.css' => 'e14854c3',
+    'rsrc/css/phui/phui-button.css' => '7ffbeee7',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => '504b4b23',
     'rsrc/css/phui/phui-comment-form.css' => '57af2e14',
@@ -524,7 +524,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' => 'da1c2a6b',
+    'rsrc/js/phuix/PHUIXButtonView.js' => '0f13520b',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => '8018ee50',
     'rsrc/js/phuix/PHUIXExample.js' => '68af71ca',
     'rsrc/js/phuix/PHUIXFormControl.js' => '83e03671',
@@ -783,7 +783,7 @@ return array(
     'phabricator-flag-css' => 'bba8f811',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c19dd9b9',
-    'phabricator-main-menu-view' => 'de9fe8c4',
+    'phabricator-main-menu-view' => '16053029',
     'phabricator-nav-view-css' => 'faf6a6fc',
     'phabricator-notification' => 'ccf1cbf8',
     'phabricator-notification-css' => '3f6c89c9',
@@ -817,7 +817,7 @@ return array(
     'phui-basic-nav-view-css' => 'a0705f53',
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '269cbc99',
-    'phui-button-css' => 'e14854c3',
+    'phui-button-css' => '7ffbeee7',
     'phui-calendar-css' => '477acfaa',
     'phui-calendar-day-css' => '572b1893',
     'phui-calendar-list-css' => '576be600',
@@ -874,7 +874,7 @@ return array(
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => 'b3465b9b',
     'phuix-autocomplete' => 'f6699267',
-    'phuix-button-view' => 'da1c2a6b',
+    'phuix-button-view' => '0f13520b',
     'phuix-dropdown-menu' => '8018ee50',
     'phuix-form-control-view' => '83e03671',
     'phuix-icon-view' => 'bff6884b',
@@ -953,6 +953,10 @@ return array(
       'javelin-dom',
       'javelin-router',
     ),
+    '0f13520b' => array(
+      'javelin-install',
+      'javelin-dom',
+    ),
     '0f764c35' => array(
       'javelin-install',
       'javelin-util',
@@ -969,6 +973,9 @@ return array(
       'javelin-dom',
       'javelin-history',
     ),
+    16053029 => array(
+      'phui-theme-css',
+    ),
     '17bb8539' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -2004,10 +2011,6 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
-    'da1c2a6b' => array(
-      'javelin-install',
-      'javelin-dom',
-    ),
     'de2e896f' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2015,9 +2018,6 @@ return array(
       'javelin-typeahead-ondemand-source',
       'javelin-dom',
     ),
-    'de9fe8c4' => array(
-      'phui-theme-css',
-    ),
     'e0ec7f2f' => array(
       'javelin-behavior',
       'javelin-dom',

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -122,6 +122,18 @@ final class PHUIButtonExample extends PhabricatorUIExample {
         'text' => pht('Implode Earth'),
         'icon' => 'fa-exclamation-triangle',
       ),
+      array(
+        'icon' => 'fa-rocket',
+      ),
+      array(
+        'icon' => 'fa-clipboard',
+      ),
+      array(
+        'icon' => 'fa-upload',
+      ),
+      array(
+        'icon' => 'fa-street-view',
+      ),
       array(
         'text' => pht('Copy "Quack" to Clipboard'),
         'icon' => 'fa-clipboard',

src/view/form/control/AphrontFormPolicyControl.php

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

src/view/phui/PHUIButtonView.php

@@ -174,6 +174,10 @@ final class PHUIButtonView extends AphrontTagView {
       $classes[] = 'has-icon';
     }
 
+    if (strlen($this->text)) {
+      $classes[] = 'has-text';
+    }
+
     if ($this->iconFirst == false) {
       $classes[] = 'icon-last';
     }
@@ -226,10 +230,24 @@ final class PHUIButtonView extends AphrontTagView {
       $subtext = null;
       if ($this->subtext) {
         $subtext = phutil_tag(
-          'div', array('class' => 'phui-button-subtext'), $this->subtext);
+          'div',
+          array(
+            'class' => 'phui-button-subtext',
+          ),
+        $this->subtext);
       }
+
+      if (strlen($this->text)) {
         $text = phutil_tag(
-        'div', array('class' => 'phui-button-text'), array($text, $subtext));
+          'div',
+          array(
+            'class' => 'phui-button-text',
+          ),
+          array(
+            $text,
+            $subtext,
+          ));
+      }
     }
 
     $caret = null;

webroot/rsrc/css/application/base/main-menu-view.css

@@ -247,6 +247,7 @@ a.phabricator-core-user-menu .caret:before {
   font-size: 15px;
   top: 4px;
   left: 8px;
+  position: absolute;
 }
 
 .phabricator-main-menu-search-dropdown .caret {

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

@@ -41,7 +41,7 @@ input[type="submit"] {
   font-weight: bold;
   font-size: {$normalfontsize};
   display: inline-block;
-  padding: 4px 16px 5px;
+  padding: 4px 14px 5px;
   text-align: center;
   white-space: nowrap;
   border-radius: 3px;
@@ -301,7 +301,7 @@ a.policy-control .phui-button-text {
   position: relative;
 }
 
-.button .phui-icon-view {
+.button.has-text .phui-icon-view {
   display: inline-block;
   position: absolute;
   top: 7px;
@@ -313,10 +313,6 @@ a.policy-control .phui-button-text {
   right: 10px;
 }
 
-.phui-button-bar .button .phui-icon-view {
-  left: 14px;
-}
-
 .button.has-icon .phui-button-text {
   margin-left: 16px;
 }
@@ -374,12 +370,6 @@ a.policy-control .phui-button-text {
   border: 0;
 }
 
-.phui-button-bar a.button.has-icon {
-  display: inline-block;
-  height: 18px;
-  width: 6px;
-}
-
 .phui-button-bar .phui-button-bar-first {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;

webroot/rsrc/js/phuix/PHUIXButtonView.js

@@ -102,6 +102,7 @@ JX.install('PHUIXButtonView', {
       }
 
       JX.DOM.alterClass(node, 'has-icon', !!icon);
+      JX.DOM.alterClass(node, 'has-text', !!text);
       JX.DOM.setContent(node, content);
     }
   }