Add smarter UI for form errors

Summary: Just makes the UI cleaner on full width or dialog forms (and mobile)

Test Plan:
run into a bunch of errors, test mobile breakpoints.

{F281585}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'fabafbdb',
+    'core.pkg.css' => '8be366b7',
     'core.pkg.js' => '65e04767',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '8af45893',
@@ -129,7 +129,7 @@ return array(
     'rsrc/css/phui/phui-error-view.css' => 'ad042fdd',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '9ae12677',
-    'rsrc/css/phui/phui-form-view.css' => 'aad06f2a',
+    'rsrc/css/phui/phui-form-view.css' => '8b78a986',
     'rsrc/css/phui/phui-form.css' => '9aecbda1',
     'rsrc/css/phui/phui-header-view.css' => '083669db',
     'rsrc/css/phui/phui-icon.css' => 'd35aa857',
@@ -778,7 +778,7 @@ return array(
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => '9ae12677',
     'phui-form-css' => '9aecbda1',
-    'phui-form-view-css' => 'aad06f2a',
+    'phui-form-view-css' => '8b78a986',
     'phui-header-view-css' => '083669db',
     'phui-icon-view-css' => 'd35aa857',
     'phui-image-mask-css' => '5a8b09c8',

src/view/form/control/AphrontFormControl.php

@@ -181,6 +181,22 @@ abstract class AphrontFormControl extends AphrontView {
       array('class' => 'aphront-form-input'),
       $this->renderInput());
 
+    $error = null;
+    if (strlen($this->getError())) {
+      $error = $this->getError();
+      if ($error === true) {
+        $error = phutil_tag(
+          'span',
+          array('class' => 'aphront-form-error aphront-form-required'),
+          pht('Required'));
+      } else {
+        $error = phutil_tag(
+          'span',
+          array('class' => 'aphront-form-error'),
+          $error);
+      }
+    }
+
     if (strlen($this->getLabel())) {
       $label = phutil_tag(
         'label',
@@ -188,29 +204,14 @@ abstract class AphrontFormControl extends AphrontView {
           'class' => 'aphront-form-label',
           'for' => $this->getID(),
         ),
-        $this->getLabel());
+        array(
+          $this->getLabel(),
+          $error,));
     } else {
       $label = null;
       $custom_class .= ' aphront-form-control-nolabel';
     }
 
-    if (strlen($this->getError())) {
-      $error = $this->getError();
-      if ($error === true) {
-        $error = phutil_tag(
-          'div',
-          array('class' => 'aphront-form-error aphront-form-required'),
-          pht('Required'));
-      } else {
-        $error = phutil_tag(
-          'div',
-          array('class' => 'aphront-form-error'),
-          $error);
-      }
-    } else {
-      $error = null;
-    }
-
     if (strlen($this->getCaption())) {
       $caption = phutil_tag(
         'div',
@@ -222,6 +223,7 @@ abstract class AphrontFormControl extends AphrontView {
 
     $classes = array();
     $classes[] = 'aphront-form-control';
+    $classes[] = 'grouped';
     $classes[] = $custom_class;
 
     $style = $this->controlStyle;
@@ -241,7 +243,6 @@ abstract class AphrontFormControl extends AphrontView {
         $error,
         $input,
         $caption,
-        phutil_tag('div', array('style' => 'clear: both;'), ''),
       ));
   }
 }

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

@@ -71,6 +71,10 @@
   padding-top: 5px;
 }
 
+.aphront-form-label .aphront-form-error {
+  display: none;
+}
+
 .aphront-dialog-body .phui-form-full-width {
   margin-top: -10px;
 }
@@ -81,8 +85,15 @@
 
 .device-phone .aphront-form-error,
 .phui-form-full-width .aphront-form-error {
-  float: none;
+  display: none;
-  width: 100%;
+}
+
+.device-phone .aphront-form-label .aphront-form-error,
+.phui-form-full-width .aphront-form-label .aphront-form-error {
+  display: block;
+  float: right;
+  padding: 0;
+  width: auto;
 }
 
 .device-phone .aphront-form-drag-and-drop-upload {