[EuiDatePicker] Add alert icon when isInvalid (#6677)

* Add isInvalid icon and icon offset affordance

* [tech debt] Convert `EuiDatePicker` to a function component

- so we can use hooks later on for invalid/EuiValidatableControl work

* [setup] Add validatable control hook that allows controlling `input`s that aren't direct children

* Remove need for extra `.euiFieldText-isInvalid` class

- with the new `useEuiValidatableControl` hook, the datepicker component now correctly sets `:invalid` on the underlying input

* Fix `EuiDatePickerRange` invalid states

- delimiter should stay an arrow now that each picker input displays its own warning icon

- underline style should be removed when disabled/readonly (which matches other basic EUI field/input components)

* changelog

src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap

@@ -204,7 +204,7 @@ exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
             >
               <input
                 aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFieldText--withIcon euiFieldText-isInvalid euiDatePickerRange__start"
+                class="euiDatePicker euiFieldText euiFormControlLayout--1icons euiFieldText--withIcon euiDatePickerRange__start"
                 type="text"
                 value=""
               />
@@ -224,6 +224,14 @@ exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
             />
           </span>
         </div>
+        <div
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        >
+          <span
+            color="danger"
+            data-euiicon-type="warning"
+          />
+        </div>
       </div>
     </div>
   </span>
@@ -232,7 +240,7 @@ exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
   >
     <span
       color="danger"
-      data-euiicon-type="warning"
+      data-euiicon-type="sortRight"
     />
   </span>
   <span
@@ -255,13 +263,21 @@ exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
             >
               <input
                 aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFieldText-isInvalid euiDatePickerRange__end"
+                class="euiDatePicker euiFieldText euiFormControlLayout--1icons euiDatePickerRange__end"
                 type="text"
                 value=""
               />
             </div>
           </div>
         </div>
+        <div
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        >
+          <span
+            color="danger"
+            data-euiicon-type="warning"
+          />
+        </div>
       </div>
     </div>
   </span>

src/components/date_picker/_date_picker_range.scss

@@ -60,6 +60,6 @@
   align-items: center;
 }
 
-.euiDatePickerRange--isInvalid .euiDatePickerRange__delimeter {
+.euiDatePickerRange--isInvalid:not(.euiDatePickerRange--isDisabled):not(.euiDatePickerRange--readOnly) .euiDatePickerRange__delimeter {
   @include euiFormControlInvalidStyle;
 }

src/components/date_picker/date_picker.test.tsx

@@ -16,9 +16,7 @@ import { EuiContext } from '../context';
 
 describe('EuiDatePicker', () => {
   test('is rendered', () => {
-    const component = shallow<EuiDatePicker>(
-      <EuiDatePicker {...requiredProps} />
-    );
+    const component = shallow(<EuiDatePicker {...requiredProps} />);
 
     expect(component).toMatchSnapshot(); // snapshot of wrapping dom
     expect(component.find('ContextConsumer').shallow()).toMatchSnapshot(); // snapshot of DatePicker usage