[EuiDatePickerRange] Add inline display behavior; [EuiDatePicker] Improve inline display behavior

package.json

@@ -116,12 +116,12 @@
     "@elastic/charts": "^53.1.1",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/cache": "^11.10.3",
-    "@emotion/css": "^11.10.0",
-    "@emotion/eslint-plugin": "^11.10.0",
-    "@emotion/jest": "^11.10.0",
-    "@emotion/react": "^11.10.4",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.0",
+    "@emotion/eslint-plugin": "^11.11.0",
+    "@emotion/jest": "^11.11.0",
+    "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^7.6.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/core": "5.5.0",

scripts/jest/setup/throw_on_console_error.js

@@ -1,4 +1,4 @@
-import { format } from 'util'
+import { format } from 'util';
 
 // Fail if a test ends up `console.error`-ing, e.g. if React logs because of a
 // failed prop types check.
@@ -16,5 +16,15 @@ console.error = (message, ...rest) => {
     return;
   }
 
+  // @see https://github.com/jsdom/jsdom/issues/2177
+  // JSDOM doesn't yet know how to parse @container CSS queries -
+  // all we can do is silence its errors for now
+  if (
+    typeof message === 'string' &&
+    message.startsWith('Error: Could not parse CSS stylesheet')
+  ) {
+    return;
+  }
+
   throw new Error(format(message, ...rest));
 };

src-docs/src/views/date_picker/date_picker_example.js

@@ -170,13 +170,19 @@ const utcSnippet = `<EuiDatePicker
   customInput={customInput}
 />`;
 
-const inlineSnippet = `<EuiDatePicker
+const inlineSnippet = [
+  `<EuiDatePicker
   selected={startDate}
   onChange={handleChange}
-  showTimeSelect
   inline
   shadow={false}
-/>`;
+/>`,
+  `<EuiDatePickerRange
+  inline
+  startDateControl={<EuiDatePicker />}
+  endDateControl={<EuiDatePicker />}
+/>`,
+];
 
 const classesSnippet = `<EuiDatePicker
   selected={startDate}
@@ -408,10 +414,11 @@ export const DatePickerExample = {
       text: (
         <p>
           Use the <EuiCode>inline</EuiCode> prop to display the date picker
-          directly in the page. If you do not need the shadows / popover effect
-          to the date picker then also apply the{' '}
-          <EuiCode language="js">shadow=false</EuiCode> prop as shown in the
-          second example.
+          directly in the page instead of inside a popover. This prop works for
+          both <strong>EuiDatePicker</strong> as well as{' '}
+          <strong>EuiDatePickerRange</strong>. If you do not need the default
+          inline shadow effect, apply the{' '}
+          <EuiCode language="js">{'shadow={false}'}</EuiCode> prop.
         </p>
       ),
       snippet: inlineSnippet,

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import moment from 'moment';
+
+import {
+  EuiDatePicker,
+  EuiDatePickerRange,
+  EuiFlexGroup,
+  EuiSwitch,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import { DisplayToggles } from '../form_controls/display_toggles';
+
+export default () => {
+  const [shadow, setShadow] = useState(true);
+  const [showTimeSelect, setShowTimeSelect] = useState(true);
+
+  const [startDate, setStartDate] = useState(moment());
+  const [endDate, setEndDate] = useState(moment().add(11, 'd'));
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiSwitch
+          label="Show shadow"
+          checked={shadow}
+          onChange={() => setShadow((toggle) => !toggle)}
+        />
+        <EuiSwitch
+          label="Show time select"
+          checked={showTimeSelect}
+          onChange={() => setShowTimeSelect((toggle) => !toggle)}
+        />
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <DisplayToggles spacerSize="s" canCompressed={false} canFullWidth={false}>
+        <EuiDatePicker
+          selected={startDate}
+          onChange={(date) => date && setStartDate(date)}
+          inline
+          showTimeSelect={showTimeSelect}
+          shadow={shadow}
+        />
+      </DisplayToggles>
+      <EuiSpacer />
+      <DisplayToggles spacerSize="s" canCompressed={false} canFullWidth={false}>
+        <EuiDatePickerRange
+          inline
+          shadow={shadow}
+          startDateControl={
+            <EuiDatePicker
+              aria-label="Start date"
+              selected={startDate}
+              onChange={(date) => date && setStartDate(date)}
+              startDate={startDate}
+              endDate={endDate}
+              showTimeSelect={showTimeSelect}
+            />
+          }
+          endDateControl={
+            <EuiDatePicker
+              aria-label="End date"
+              selected={endDate}
+              onChange={(date) => date && setEndDate(date)}
+              startDate={startDate}
+              endDate={endDate}
+              showTimeSelect={showTimeSelect}
+            />
+          }
+        />
+      </DisplayToggles>
+    </>
+  );
+};

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

@@ -10,9 +10,8 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canCompressed={false}>
+    <DisplayToggles canCompressed={false} canPrepend={true} canAppend={true}>
       <EuiDatePickerRange
-        isInvalid={startDate > endDate}
         startDateControl={
           <EuiDatePicker
             selected={startDate}

src-docs/src/views/date_picker/range_restricted.js → src-docs/src/views/date_picker/range_restricted.tsx

@@ -15,28 +15,27 @@ export default () => {
 
   return (
     <EuiDatePickerRange
+      isInvalid={isInvalid}
       startDateControl={
         <EuiDatePicker
           selected={startDate}
-          onChange={setStartDate}
+          onChange={(date) => date && setStartDate(date)}
           startDate={startDate}
           endDate={endDate}
           minDate={minDate}
           maxDate={endDate}
-          isInvalid={isInvalid}
           aria-label="Start date"
           showTimeSelect
         />
       }
       endDateControl={
         <EuiDatePicker
           selected={endDate}
-          onChange={setEndDate}
+          onChange={(date) => date && setEndDate(date)}
           startDate={startDate}
           endDate={endDate}
           minDate={startDate}
           maxDate={maxDate}
-          isInvalid={isInvalid}
           aria-label="End date"
           showTimeSelect
         />

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

@@ -2,7 +2,7 @@
 
 exports[`EuiDatePicker is rendered 1`] = `
 <span
-  className="euiDatePicker euiDatePicker--shadow"
+  className="euiDatePicker"
 >
   <EuiFormControlLayout
     fullWidth={false}
@@ -60,10 +60,10 @@ exports[`EuiDatePicker is rendered 2`] = `
 
 exports[`EuiDatePicker localization accepts the locale prop 1`] = `
 <span
-  class="euiDatePicker euiDatePicker--shadow euiDatePicker--inline"
+  class="euiDatePicker euiDatePicker--inline euiDatePicker--shadow"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayoutDelimited"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -463,10 +463,10 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
 
 exports[`EuiDatePicker localization inherits locale from context 1`] = `
 <span
-  class="euiDatePicker euiDatePicker--shadow euiDatePicker--inline"
+  class="euiDatePicker euiDatePicker--inline euiDatePicker--shadow"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayoutDelimited"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
@@ -872,7 +872,7 @@ exports[`EuiDatePicker popoverPlacement upRight is rendered 1`] = `
   popoverPlacement="upRight"
 >
   <span
-    className="euiDatePicker euiDatePicker--shadow"
+    className="euiDatePicker"
   >
     <EuiFormControlLayout
       fullWidth={false}