Add SUCCESS state and buttons to PHUIErrorView

Summary: I'm looking at beefing up PHUIErrorView for additional use cases as I remove some older AphrontViews. This will likely morph into PHUIInfoView and be a more lightweight version of PHUIObjectBox.

Test Plan:
UIExamples, mobile and desktop layouts. Have actual use cases coming in next diffs (may tweak design more then)

{F311943}

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '4efed816',
+    'core.pkg.css' => 'ef45fe3b',
     'core.pkg.js' => '23d653bb',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '380f07e5',
@@ -127,7 +127,7 @@ return array(
     'rsrc/css/phui/phui-button.css' => 'ffe12633',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
     'rsrc/css/phui/phui-document.css' => '8240b0b1',
-    'rsrc/css/phui/phui-error-view.css' => 'ad042fdd',
+    'rsrc/css/phui/phui-error-view.css' => '41518665',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '9b345998',
     'rsrc/css/phui/phui-form-view.css' => '8b78a986',
@@ -780,7 +780,7 @@ return array(
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-crumbs-view-css' => '594d719e',
     'phui-document-view-css' => '8240b0b1',
-    'phui-error-view-css' => 'ad042fdd',
+    'phui-error-view-css' => '41518665',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => '9b345998',

src/applications/uiexample/examples/PHUIErrorExample.php

@@ -20,8 +20,14 @@ final class PHUIErrorExample extends PhabricatorUIExample {
       PHUIErrorView::SEVERITY_WARNING  => 'Warning',
       PHUIErrorView::SEVERITY_NOTICE   => 'Notice',
       PHUIErrorView::SEVERITY_NODATA   => 'No Data',
+      PHUIErrorView::SEVERITY_SUCCESS   => 'Success',
     );
 
+    $button = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setText('Resolve Issue')
+        ->addClass('grey');
+
     $views = array();
     // Only Title
     foreach ($sevs as $sev => $title) {
@@ -35,6 +41,7 @@ final class PHUIErrorExample extends PhabricatorUIExample {
       $view = new PHUIErrorView();
       $view->setSeverity($sev);
       $view->appendChild('Several issues were encountered.');
+      $view->addButton($button);
       $views[] = $view;
     }
     // Only Errors

src/view/form/PHUIErrorView.php

@@ -6,11 +6,13 @@ final class PHUIErrorView extends AphrontView {
   const SEVERITY_WARNING = 'warning';
   const SEVERITY_NOTICE = 'notice';
   const SEVERITY_NODATA = 'nodata';
+  const SEVERITY_SUCCESS = 'success';
 
   private $title;
   private $errors;
   private $severity;
   private $id;
+  private $buttons = array();
 
   public function setTitle($title) {
     $this->title = $title;
@@ -32,6 +34,11 @@ final class PHUIErrorView extends AphrontView {
     return $this;
   }
 
+  public function addButton($button) {
+    $this->buttons[] = $button;
+    return $this;
+  }
+
   final public function render() {
 
     require_celerity_resource('phui-error-view-css');
@@ -72,6 +79,7 @@ final class PHUIErrorView extends AphrontView {
     $classes = array();
     $classes[] = 'phui-error-view';
     $classes[] = 'phui-error-severity-'.$this->severity;
+    $classes[] = 'grouped';
     $classes = implode(' ', $classes);
 
     $children = $this->renderChildren();
@@ -89,6 +97,16 @@ final class PHUIErrorView extends AphrontView {
         $children);
     }
 
+    $buttons = null;
+    if (!empty($this->buttons)) {
+      $buttons = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-error-view-actions',
+        ),
+        $this->buttons);
+    }
+
     return phutil_tag(
       'div',
       array(
@@ -96,6 +114,7 @@ final class PHUIErrorView extends AphrontView {
         'class' => $classes,
       ),
       array(
+        $buttons,
         $title,
         $body,
       ));

webroot/rsrc/css/phui/phui-error-view.css

@@ -24,6 +24,12 @@
   line-height: 1.45em;
 }
 
+.phui-error-view-actions {
+  margin-top: -3px;
+  margin-bottom: -4px;
+  float: right;
+}
+
 .phui-error-view-head + .phui-error-view-body {
   padding-top: 4px;
 }
@@ -44,24 +50,59 @@ h1.phui-error-view-head {
   line-height: 1.5em;
 }
 
-.phui-error-severity-error {
+.phui-error-view .phui-error-view-actions .button:hover {
+  background: #fff;
+  box-shadow: none;
+}
+
+.phui-error-severity-error,
+.phui-error-severity-error .button {
   border-color: {$red};
   background: {$lightred};
 }
 
-.phui-error-severity-warning {
+.phui-error-severity-error .button {
+  color: {$red};
+}
+
+.phui-error-severity-warning,
+.phui-error-severity-warning .button {
   border-color: {$yellow};
   background: {$lightyellow};
 }
 
-.phui-error-severity-notice {
+.phui-error-severity-warning .button {
+  color: #bc7837;
+}
+
+.phui-error-severity-notice,
+.phui-error-severity-notice .button {
   border-color: {$blue};
   background: {$lightblue};
 }
 
-.phui-error-severity-nodata {
+.phui-error-severity-notice .button {
+  color: {$blue};
+}
+
+.phui-error-severity-nodata,
+.phui-error-severity-nodata .button {
   border-color: {$lightgreyborder};
-  background-color: #fff;
+  background: #fff;
+}
+
+.phui-error-severity-nodata .button {
+  color: {$greytext};
+}
+
+.phui-error-severity-success,
+.phui-error-severity-success .button {
+  border-color: {$green};
+  background: {$lightgreen};
+}
+
+.phui-error-severity-success .button {
+  color: {$green};
 }
 
 .legalpad .phui-error-view {
@@ -96,6 +137,11 @@ h1.phui-error-view-head {
   color: {$blue};
 }
 
+.phui-object-box .phui-error-severity-success,
+.aphront-dialog-body .phui-error-severity-success {
+  color: {$green};
+}
+
 .phui-crumbs-view + .phui-error-view {
   margin-top: 0;
 }