Adds a CSS dropdown caret for buttons.

Summary: I'll build out a PHUI Class for this soonish.

Test Plan: UIExamples

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -2933,7 +2933,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-core-buttons-css' =>
   array(
-    'uri' => '/res/9250d98f/rsrc/css/core/buttons.css',
+    'uri' => '/res/8853cc81/rsrc/css/core/buttons.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3981,7 +3981,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'efb6389a' =>
+    '6cb89b00' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4030,7 +4030,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-property-list-view-css',
         42 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/efb6389a/core.pkg.css',
+      'uri' => '/res/pkg/6cb89b00/core.pkg.css',
       'type' => 'css',
     ),
     '77faef00' =>
@@ -4224,16 +4224,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'efb6389a',
-    'aphront-error-view-css' => 'efb6389a',
-    'aphront-form-view-css' => 'efb6389a',
-    'aphront-list-filter-view-css' => 'efb6389a',
-    'aphront-pager-view-css' => 'efb6389a',
-    'aphront-panel-view-css' => 'efb6389a',
-    'aphront-table-view-css' => 'efb6389a',
-    'aphront-tokenizer-control-css' => 'efb6389a',
-    'aphront-tooltip-css' => 'efb6389a',
-    'aphront-typeahead-control-css' => 'efb6389a',
+    'aphront-dialog-view-css' => '6cb89b00',
+    'aphront-error-view-css' => '6cb89b00',
+    'aphront-form-view-css' => '6cb89b00',
+    'aphront-list-filter-view-css' => '6cb89b00',
+    'aphront-pager-view-css' => '6cb89b00',
+    'aphront-panel-view-css' => '6cb89b00',
+    'aphront-table-view-css' => '6cb89b00',
+    'aphront-tokenizer-control-css' => '6cb89b00',
+    'aphront-tooltip-css' => '6cb89b00',
+    'aphront-typeahead-control-css' => '6cb89b00',
     'differential-changeset-view-css' => 'dd27a69b',
     'differential-core-view-css' => 'dd27a69b',
     'differential-inline-comment-editor' => '9488bb69',
@@ -4247,7 +4247,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' => 'efb6389a',
+    'global-drag-and-drop-css' => '6cb89b00',
     'inline-comment-summary-css' => 'dd27a69b',
     'javelin-aphlict' => '77faef00',
     'javelin-behavior' => 'c1359b5d',
@@ -4321,56 +4321,56 @@ celerity_register_resource_map(array(
     'javelin-util' => 'c1359b5d',
     'javelin-vector' => 'c1359b5d',
     'javelin-workflow' => 'c1359b5d',
-    'lightbox-attachment-css' => 'efb6389a',
+    'lightbox-attachment-css' => '6cb89b00',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
-    'phabricator-action-list-view-css' => 'efb6389a',
-    'phabricator-application-launch-view-css' => 'efb6389a',
+    'phabricator-action-list-view-css' => '6cb89b00',
+    'phabricator-application-launch-view-css' => '6cb89b00',
     'phabricator-busy' => '77faef00',
     'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => 'efb6389a',
-    'phabricator-core-css' => 'efb6389a',
-    'phabricator-crumbs-view-css' => 'efb6389a',
-    'phabricator-directory-css' => 'efb6389a',
+    'phabricator-core-buttons-css' => '6cb89b00',
+    'phabricator-core-css' => '6cb89b00',
+    'phabricator-crumbs-view-css' => '6cb89b00',
+    'phabricator-directory-css' => '6cb89b00',
     'phabricator-drag-and-drop-file-upload' => '9488bb69',
     'phabricator-dropdown-menu' => '77faef00',
     'phabricator-file-upload' => '77faef00',
-    'phabricator-filetree-view-css' => 'efb6389a',
-    'phabricator-flag-css' => 'efb6389a',
-    'phabricator-form-view-css' => 'efb6389a',
-    'phabricator-header-view-css' => 'efb6389a',
+    'phabricator-filetree-view-css' => '6cb89b00',
+    'phabricator-flag-css' => '6cb89b00',
+    'phabricator-form-view-css' => '6cb89b00',
+    'phabricator-header-view-css' => '6cb89b00',
     'phabricator-hovercard' => '77faef00',
-    'phabricator-jump-nav' => 'efb6389a',
+    'phabricator-jump-nav' => '6cb89b00',
     'phabricator-keyboard-shortcut' => '77faef00',
     'phabricator-keyboard-shortcut-manager' => '77faef00',
-    'phabricator-main-menu-view' => 'efb6389a',
+    'phabricator-main-menu-view' => '6cb89b00',
     'phabricator-menu-item' => '77faef00',
-    'phabricator-nav-view-css' => 'efb6389a',
+    'phabricator-nav-view-css' => '6cb89b00',
     'phabricator-notification' => '77faef00',
-    'phabricator-notification-css' => 'efb6389a',
-    'phabricator-notification-menu-css' => 'efb6389a',
-    'phabricator-object-item-list-view-css' => 'efb6389a',
+    'phabricator-notification-css' => '6cb89b00',
+    'phabricator-notification-menu-css' => '6cb89b00',
+    'phabricator-object-item-list-view-css' => '6cb89b00',
     'phabricator-object-selector-css' => 'dd27a69b',
     'phabricator-phtize' => '77faef00',
     'phabricator-prefab' => '77faef00',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-property-list-view-css' => 'efb6389a',
-    'phabricator-remarkup-css' => 'efb6389a',
+    'phabricator-property-list-view-css' => '6cb89b00',
+    'phabricator-remarkup-css' => '6cb89b00',
     'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => 'efb6389a',
-    'phabricator-standard-page-view' => 'efb6389a',
-    'phabricator-tag-view-css' => 'efb6389a',
+    'phabricator-side-menu-view-css' => '6cb89b00',
+    'phabricator-standard-page-view' => '6cb89b00',
+    'phabricator-tag-view-css' => '6cb89b00',
     'phabricator-textareautils' => '77faef00',
     'phabricator-tooltip' => '77faef00',
-    'phabricator-transaction-view-css' => 'efb6389a',
-    'phabricator-zindex-css' => 'efb6389a',
-    'phui-form-css' => 'efb6389a',
-    'phui-icon-view-css' => 'efb6389a',
-    'spacing-css' => 'efb6389a',
-    'sprite-apps-large-css' => 'efb6389a',
-    'sprite-gradient-css' => 'efb6389a',
-    'sprite-icons-css' => 'efb6389a',
-    'sprite-menu-css' => 'efb6389a',
-    'syntax-highlighting-css' => 'efb6389a',
+    'phabricator-transaction-view-css' => '6cb89b00',
+    'phabricator-zindex-css' => '6cb89b00',
+    'phui-form-css' => '6cb89b00',
+    'phui-icon-view-css' => '6cb89b00',
+    'spacing-css' => '6cb89b00',
+    'sprite-apps-large-css' => '6cb89b00',
+    'sprite-gradient-css' => '6cb89b00',
+    'sprite-icons-css' => '6cb89b00',
+    'sprite-menu-css' => '6cb89b00',
+    'syntax-highlighting-css' => '6cb89b00',
   ),
 ));

src/applications/uiexample/examples/PhabricatorButtonsExample.php

@@ -33,13 +33,27 @@ final class PhabricatorButtonsExample extends PhabricatorUIExample {
             array(
               'class' => $class,
             ),
-            ucwords($size.' '.$color.' '.$tag));
+            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);
   }
 }

webroot/rsrc/css/core/buttons.css

@@ -194,3 +194,23 @@ a.toggle-selected {
 a.toggle-fixed {
   cursor: default;
 }
+
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: top;
+  border-top: 5px solid #fff;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  content: "";
+}
+
+.dropdown .caret {
+  margin-top: 7px;
+  margin-left: 4px;
+}
+
+.grey.dropdown .caret {
+  border-top-color: #000;
+}