[EuiDatePickerRange][EuiSuperDatePicker] Convert to dogfood `EuiFormC…

…ontrolLayoutDelimited` (#6705)

* [docs setup] Make certain boolean flags/props more easily testable

* [bugfix] Fix `EuiFormControlLayoutDelimited` not displaying `isInvalid` state on mount

- needs a state rerender on mount - ref is insufficient

+ update tests to use RTL instead of enzyme and move to inline snapshots

* [EuiFormControlLayout] Clean up positioning override CSS & side CSS

- Positioning: prefer a prop instead, so that each usage (e.g. delimited, ranges) can pass in their own custom control over absolute vs static positioning

- Side: clean up EuiFormLayoutControlIcons to render separate for left vs right side, which makes for better and more correct DOM order, + clean up classes

+ misc cleanup

* Remove unnecessary CSS

- height/width doesn't appear to be doing anything
- The padding is unnecessary / adding extra spacing and doesn't have a non-compressed version

* Update downstream snapshots

* Convert `EuiDatePickerRange` to use `EuiFormControlLayoutDelimited`

- instead of using its own custom delimiter

+ add `controlOnly` support to the `EuiDatePicker` to avoid nested control layouts (matches `EuiFieldText/Number`)

+ add `append/prepend` props for future `EuiSuperDatePicker` use (& DRY out other props shared w/ `EuiFormControlLayoutDelimited`)

* Remove unnecessary CSS

- EuiFormControlLayoutDelimited should be doing almost all the CSS heavy lifting at this point

* Convert `EuiSuperDatePicker` to work with new `EuiDatePickerRange`

- Remove duplicated `EuiFormControlLayout` - only render if `EuiDateRangePicker` isn't being used

- Add `isLoading` display to picker if update button isn't being shown

- Fix icons not displaying correctly if `isQuickSelectOnly` is true

* [EuiSuperDatePicker] Fix styling and `fullWidth` not applying to non-input children

+ fix extra padding on delimiter arrow when prepend/append exist

+ clean up/DRY out invalid styling on icons & delimiter

* [EuiSuperDatePicker] Fix border-radius & remove unnecessary CSS/overrides

* [EuiSuperDatePicker] Update color of delimiter arrow during `needs update` state to match Figma

* [EuiSuperDatePicker] Fix invalid & disabled state to match other form controls

* Simplify delimiter/icon CSS classes

- instead of applying bg colors to individual delimiter and icon elements, apply it to the parent `__childenWrapper`

+ simplify default delimited icon to not set its own `color` but instead inherit from its `EuiText` wrapper

+ update downstream EuiSuperDatePicker CSS

src-docs/src/views/date_picker/range.tsx

@@ -10,7 +10,7 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canCompressed={false} canLoading={false}>
+    <DisplayToggles canCompressed={false}>
       <EuiDatePickerRange
         isInvalid={startDate > endDate}
         startDateControl={

src-docs/src/views/form_controls/form_control_layout_range.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   EuiFormControlLayoutDelimited,
   EuiFormLabel,
+  EuiFieldNumber,
   EuiIcon,
 } from '../../../../src/components';
 
@@ -218,5 +219,49 @@ export default () => (
         />
       }
     />
+
+    <EuiFormControlLayoutDelimited
+      isDisabled
+      prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
+      startControl={
+        <input
+          type="number"
+          placeholder="0"
+          className="euiFieldNumber"
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+      endControl={
+        <input
+          type="number"
+          placeholder="100"
+          className="euiFieldNumber"
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+    />
+
+    <EuiFormControlLayoutDelimited
+      isInvalid
+      prepend={<EuiFormLabel>Invalid</EuiFormLabel>}
+      startControl={
+        <EuiFieldNumber
+          isInvalid
+          controlOnly
+          placeholder="0"
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+      endControl={
+        <EuiFieldNumber
+          isInvalid
+          controlOnly
+          placeholder="100"
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+    />
   </div>
 );

src-docs/src/views/super_date_picker/playground.js

@@ -18,6 +18,20 @@ export const superDatePickerConfig = () => {
   propsToUse.onTimeChange = simulateFunction(propsToUse.onTimeChange, true);
   propsToUse.onRefreshChange = simulateFunction(propsToUse.onRefreshChange);
 
+  propsToUse.isPaused = {
+    ...propsToUse.isPaused,
+    type: PropTypes.Boolean,
+    defaultValue: true,
+    value: true,
+  };
+
+  propsToUse.showUpdateButton = {
+    ...propsToUse.showUpdateButton,
+    type: PropTypes.Boolean,
+    defaultValue: true,
+    value: true,
+  };
+
   propsToUse.locale = {
     ...propsToUse.locale,
     type: PropTypes.String,