Move TextArea validation Icon to top right (#1543)

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -211,13 +211,13 @@ governing permissions and limitations under the License.
 .spectrum-Textfield--invalid .spectrum-Textfield-validationIcon {
   width: var(--spectrum-icon-alert-medium-width);
   height: var(--spectrum-icon-alert-medium-height);
-  bottom: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-height) / 2));
+  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-height) / 2));
   inset-inline-end: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-width) / 2));
 }
 .spectrum-Textfield--valid .spectrum-Textfield-validationIcon {
   width: var(--spectrum-icon-checkmark-medium-width);
   height: var(--spectrum-icon-checkmark-medium-height);
-  bottom: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-checkmark-medium-height) / 2));
+  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-checkmark-medium-height) / 2));
   inset-inline-end: var(--spectrum-global-dimension-size-150);
 }
 
@@ -256,7 +256,7 @@ governing permissions and limitations under the License.
 /* same positioning as invalid icon */
 .spectrum-Textfield--loadable .spectrum-Textfield-circleLoader {
   position: absolute;
-  bottom: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-loader-circle-small-width) / 2));
+  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-loader-circle-small-width) / 2));
   /* can't use padding right since it breaks the circle loader so add here */
   inset-inline-end: calc(calc(calc(var(--spectrum-textfield-icon-frame) / 2) - calc(var(--spectrum-icon-alert-medium-width) / 2)) + calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2));
 

packages/@react-spectrum/textfield/stories/TextArea.stories.js

@@ -137,7 +137,8 @@ storiesOf('TextArea', module)
   .add('controlled interactive',
     () => <ControlledTextArea />
   )
-  .add('in flex', () => renderInFlexRowAndBlock());
+  .add('in flex', () => renderInFlexRowAndBlock())
+  .add('in flex validation state', () => renderInFlexRowAndBlock({validationState: 'invalid'}));
 
 function render(props = {}) {
   return (