[EuiRange/EuiDualRange] Add alert icon when isInvalid and `showInpu…

…t` (#6704)

* [EuiFormControlLayoutDelimited] nit: fix `delimiter` spelling

* [EuiFormControlLayoutDelimited] Change default delimiter to an icon instead of text

- to more correctly matches the current Figma designs

+ add a screen reader label

* [EuiFormControlLayoutDelimited] Add better `isInvalid` styling

- color arrow + extend line under arrow and icons

+ fix background colors of icons

* [EuiDualRange] Fix buggy styling when `isInvalid` and `showInput="inputWithPopover"`

- the input was rendering the padding offset for the invalid icon, without actually rendering said icons (due to `controlOnly` prop)

* [EuiFieldNumber] Fix browser invalid state not showing an icon or setting `aria-invalid`

Browsers natively set their own custom `validity` based on min/max/value/step/etc - we should hook into these and extend them (as opposed to overriding them)

+ switch Jest tests from Enzyme to RTL while here

* [EuiRange/EuiDualRange] Improve UX of input widths on EuiRange/EuiDualRange

- account for `invalid` icon (which now automatically displays for out of range inputs)

- dynamically adjust width based on # of characters in actual input

- adjust width affordances based on `compressed`

- width changes are especially a readability improvement in Firefox

* changelog

* Revert horizontal padding on delimited icons

- after playing more with date range picker as well as a broader variety of delimited inputs, this change was too specific to EuiDualRange

* snapshot

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap

@@ -134,6 +134,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
           >
             <input
               aria-describedby="generated-id generated-id"
+              aria-invalid="false"
               aria-label="Time value"
               class="euiFieldNumber euiFieldNumber--compressed"
               type="number"

src/components/form/field_number/__snapshots__/field_number.test.tsx.snap

@@ -6,10 +6,12 @@ exports[`EuiFieldNumber is rendered 1`] = `
   fullwidth="false"
   icon="warning"
   inputid="1"
+  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
+      aria-invalid="false"
       aria-label="aria-label"
       class="euiFieldNumber testClass1 testClass2 euiFieldNumber--withIcon"
       data-test-subj="test subject string"
@@ -28,8 +30,10 @@ exports[`EuiFieldNumber is rendered 1`] = `
 exports[`EuiFieldNumber props controlOnly is rendered 1`] = `
 <eui-validatable-control>
   <input
+    aria-invalid="false"
     class="euiFieldNumber"
     type="number"
+    value=""
   />
 </eui-validatable-control>
 `;
@@ -38,18 +42,21 @@ exports[`EuiFieldNumber props fullWidth is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="true"
+  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
+      aria-invalid="false"
       class="euiFieldNumber euiFieldNumber--fullWidth"
       type="number"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
 `;
 
-exports[`EuiFieldNumber props isInvalid is rendered 1`] = `
+exports[`EuiFieldNumber props isInvalid is rendered from a prop 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
@@ -60,8 +67,10 @@ exports[`EuiFieldNumber props isInvalid is rendered 1`] = `
     isinvalid="true"
   >
     <input
+      aria-invalid="true"
       class="euiFieldNumber euiFormControlLayout--1icons"
       type="number"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -71,12 +80,15 @@ exports[`EuiFieldNumber props isLoading is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
+  isinvalid="false"
   isloading="true"
 >
   <eui-validatable-control>
     <input
+      aria-invalid="false"
       class="euiFieldNumber euiFormControlLayout--1icons euiFieldNumber-isLoading"
       type="number"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -86,14 +98,17 @@ exports[`EuiFieldNumber props readOnly is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
+  isinvalid="false"
   isloading="false"
   readonly="true"
 >
   <eui-validatable-control>
     <input
+      aria-invalid="false"
       class="euiFieldNumber"
       readonly=""
       type="number"
+      value=""
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -103,10 +118,12 @@ exports[`EuiFieldNumber props value no initial value 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
+  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
+      aria-invalid="false"
       class="euiFieldNumber"
       type="number"
       value=""
@@ -119,10 +136,12 @@ exports[`EuiFieldNumber props value value is number 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
+  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
+      aria-invalid="false"
       class="euiFieldNumber"
       type="number"
       value="0"

src/components/form/field_number/field_number.spec.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../../cypress/support" />
+
+import React from 'react';
+import { EuiFieldNumber } from './field_number';
+
+describe('EuiFieldNumber', () => {
+  describe('isNativelyInvalid', () => {
+    const checkIsValid = () => {
+      cy.get('[aria-invalid="true"]').should('not.exist');
+      cy.get('.euiFormControlLayoutIcons').should('not.exist');
+    };
+    const checkIsInvalid = () => {
+      cy.get('[aria-invalid="true"]').should('exist');
+      cy.get('.euiFormControlLayoutIcons').should('exist');
+    };
+
+    it('when the value is not a valid number', () => {
+      cy.mount(<EuiFieldNumber />);
+      checkIsValid();
+      cy.get('input').click().realType('-.');
+      checkIsInvalid();
+    });
+
+    it('sets invalid state when the value is less than the passed min', () => {
+      cy.mount(<EuiFieldNumber min={0} />);
+      checkIsValid();
+      cy.get('input').click().type('-10');
+      checkIsInvalid();
+    });
+
+    it('sets invalid state when the value is greater than the passed max', () => {
+      cy.mount(<EuiFieldNumber max={100} />);
+      checkIsValid();
+      cy.get('input').click().type('101');
+      checkIsInvalid();
+    });
+
+    it('sets invalid state when the value is not a valid step', () => {
+      cy.mount(<EuiFieldNumber step={3} />);
+      checkIsValid();
+      cy.get('input').click().type('2');
+      checkIsInvalid();
+    });
+  });
+});

src/components/form/field_number/field_number.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 
 import { EuiForm } from '../form';
@@ -26,7 +26,7 @@ jest.mock('../validatable_control', () => ({
 
 describe('EuiFieldNumber', () => {
   test('is rendered', () => {
-    const component = render(
+    const { container } = render(
       <EuiFieldNumber
         id="1"
         name="elastic"
@@ -40,68 +40,77 @@ describe('EuiFieldNumber', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('props', () => {
-    test('isInvalid is rendered', () => {
-      const component = render(<EuiFieldNumber isInvalid />);
+    test('isInvalid is rendered from a prop', () => {
+      const { container } = render(<EuiFieldNumber isInvalid />);
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('fullWidth is rendered', () => {
-      const component = render(<EuiFieldNumber fullWidth />);
+      const { container } = render(<EuiFieldNumber fullWidth />);
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('isLoading is rendered', () => {
-      const component = render(<EuiFieldNumber isLoading />);
+      const { container } = render(<EuiFieldNumber isLoading />);
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('readOnly is rendered', () => {
-      const component = render(<EuiFieldNumber readOnly />);
+      const { container } = render(<EuiFieldNumber readOnly />);
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('controlOnly is rendered', () => {
-      const component = render(<EuiFieldNumber controlOnly />);
+      const { container } = render(<EuiFieldNumber controlOnly />);
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('inputRef', () => {
+      const inputRef = jest.fn();
+      const { container } = render(<EuiFieldNumber inputRef={inputRef} />);
+
+      expect(inputRef).toHaveBeenCalledTimes(1);
+      expect(container.querySelector('input[type="number"]')).toBe(
+        inputRef.mock.calls[0][0]
+      );
     });
 
     describe('value', () => {
       test('value is number', () => {
-        const component = render(
+        const { container } = render(
           <EuiFieldNumber value={0} onChange={() => {}} />
         );
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       test('no initial value', () => {
-        const component = render(
+        const { container } = render(
           <EuiFieldNumber value={''} onChange={() => {}} />
         );
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });
 
   describe('inherits', () => {
     test('fullWidth from <EuiForm />', () => {
-      const component = render(
+      const { container } = render(
         <EuiForm fullWidth>
           <EuiFieldNumber />
         </EuiForm>
       );
+      const control = container.querySelector('.euiFieldNumber')!;
 
-      if (
-        !component.find('.euiFieldNumber').hasClass('euiFieldNumber--fullWidth')
-      ) {
+      if (!control.classList.contains('euiFieldNumber--fullWidth')) {
         throw new Error(
           'expected EuiFieldNumber to inherit fullWidth from EuiForm'
         );

src/components/form/field_number/field_number.tsx

@@ -6,20 +6,27 @@
  * Side Public License, v 1.
  */
 
-import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react';
+import React, {
+  InputHTMLAttributes,
+  Ref,
+  FunctionComponent,
+  useState,
+  useRef,
+  useCallback,
+} from 'react';
 import { CommonProps } from '../../common';
 import classNames from 'classnames';
 
+import { useCombinedRefs } from '../../../services';
+import { IconType } from '../../icon';
+
+import { EuiValidatableControl } from '../validatable_control';
 import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
 } from '../form_control_layout';
-
-import { EuiValidatableControl } from '../validatable_control';
-
-import { IconType } from '../../icon';
-import { useFormContext } from '../eui_form_context';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
+import { useFormContext } from '../eui_form_context';
 
 export type EuiFieldNumberProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -96,13 +103,37 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
     inputRef,
     readOnly,
     controlOnly,
+    onKeyDown: _onKeyDown,
     ...rest
   } = props;
 
-  const numIconsClass = getFormControlClassNameForIconCount({
-    isInvalid,
-    isLoading,
-  });
+  // Attempt to determine additional invalid state. The native number input
+  // will set :invalid state automatically, but we need to also set
+  // `aria-invalid` as well as display an icon. We also want to *not* set this on
+  // EuiValidatableControl, in order to not override custom validity messages
+  const [isNativelyInvalid, setIsNativelyInvalid] = useState(false);
+  const validityRef = useRef<HTMLInputElement | null>(null);
+  const setRefs = useCombinedRefs([validityRef, inputRef]);
+
+  // Note that we can't use hook into `onChange` because browsers don't emit change events
+  // for invalid values - see https://github.com/facebook/react/issues/16554
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      _onKeyDown?.(e);
+      // Wait a beat before checking validity - we can't use `e.target` as it's stale
+      requestAnimationFrame(() => {
+        setIsNativelyInvalid(!validityRef.current!.validity.valid);
+      });
+    },
+    [_onKeyDown]
+  );
+
+  const numIconsClass = controlOnly
+    ? false
+    : getFormControlClassNameForIconCount({
+        isInvalid: isInvalid || isNativelyInvalid,
+        isLoading,
+      });
 
   const classes = classNames('euiFieldNumber', className, numIconsClass, {
     'euiFieldNumber--withIcon': icon,
@@ -124,7 +155,9 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
         placeholder={placeholder}
         readOnly={readOnly}
         className={classes}
-        ref={inputRef}
+        ref={setRefs}
+        onKeyDown={onKeyDown}
+        aria-invalid={isInvalid || isNativelyInvalid}
         {...rest}
       />
     </EuiValidatableControl>
@@ -139,7 +172,7 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
       icon={icon}
       fullWidth={fullWidth}
       isLoading={isLoading}
-      isInvalid={isInvalid}
+      isInvalid={isInvalid || isNativelyInvalid}
       compressed={compressed}
       readOnly={readOnly}
       prepend={prepend}