Upgrade EUI to v81.2.0 (#158781)

## Summary `eui@81.0.0` ⏩ `eui@81.2.0` - Most changes to source code in this PR are CSS cleanups/deprecations in `EuiSuperDatePicker`/`EuiDatePickerRange` - One team (ML) had a `inline` specific usage of `EuiDatePickerRange` that they reached out to us about via Slack, and that we have fixed in this PR. - All other usages of date picker components should have remained working as-is with no changes, but please ping us if you see otherwise! ___ ## [`81.2.0`](https://github.com/elastic/eui/tree/v81.2.0) - Updated `EuiSuperDatePicker` to accept an object configuration for `isDisabled` ([#6821](elastic/eui#6821)) **Bug fixes** - Fixed broken `EuiSuperDatePicker` styles ([#6821](elastic/eui#6821)) ## [`81.1.0`](https://github.com/elastic/eui/tree/v81.1.0) - Added `EuiInlineEditText` and `EuiInlineEditTitle` components ([#6757](elastic/eui#6757)) - Updated `EuiDatePickerRange` to support `inline` display ([#6795](elastic/eui#6795)) - Added an `onError` callback prop to `EuiErrorBoundary` ([#6810](elastic/eui#6810)) - Updated `EuiDataGrid` to only render screen reader text announcing cell position if the cell is currently focused. This should improve the ability to copy and paste multiple cells without SR text. ([#6817](elastic/eui#6817)) **Bug fixes** - Fixed `EuiDatePicker`'s `inline` display to correctly render and prevent user interaction when `disabled` or `readOnly` ([#6795](elastic/eui#6795)) - Fixed `EuiDatePicker`'s `inline` display to correctly render `isInvalid` and `isLoading` icons ([#6795](elastic/eui#6795)) **CSS-in-JS conversions** - Converted `EuiDatePickerRange` to Emotion ([#6795](elastic/eui#6795)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jun 5, 2023 · c52ff7f · c52ff7f
1 parent 8a07e58
commit c52ff7f
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "81.0.0",
+    "@elastic/eui": "81.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -108,12 +108,12 @@
     "@elastic/search-ui": "^1.20.2",
     "@elastic/search-ui-app-search-connector": "^1.20.2",
     "@elastic/search-ui-engines-connector": "^1.20.2",
-    "@emotion/cache": "^11.10.3",
-    "@emotion/css": "^11.10.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/serialize": "^1.1.0",
-    "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/serialize": "^1.1.2",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@grpc/grpc-js": "^1.6.7",
     "@hapi/accept": "^5.0.2",
     "@hapi/boom": "^9.1.4",
@@ -1011,8 +1011,8 @@
     "@elastic/eslint-plugin-eui": "0.0.2",
     "@elastic/makelogs": "^6.1.1",
     "@elastic/synthetics": "^1.0.0-beta.39",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/jest": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/jest": "^11.11.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@istanbuljs/schema": "^0.1.2",
     "@jest/console": "^29.3.1",

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -812,6 +812,22 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiImageButton.closeFullScreen': i18n.translate('core.euiImageButton.closeFullScreen', {
       defaultMessage: 'Press Escape or click to close image fullscreen mode',
     }),
+    'euiInlineEditForm.activateEditModeDescription': i18n.translate(
+      'core.euiInlineEditForm.activateEditModeDescription',
+      { defaultMessage: 'Click to edit this text inline.' }
+    ),
+    'euiInlineEditForm.inputKeyboardInstructions': i18n.translate(
+      'core.euiInlineEditForm.inputKeyboardInstructions',
+      { defaultMessage: 'Press Enter to save your edited text. Press Escape to cancel your edit.' }
+    ),
+    'euiInlineEditForm.cancelButtonAriaLabel': i18n.translate(
+      'core.euiInlineEditForm.cancelButtonAriaLabel',
+      { defaultMessage: 'Cancel edit' }
+    ),
+    'euiInlineEditForm.saveButtonAriaLabel': i18n.translate(
+      'core.euiInlineEditForm.saveButtonAriaLabel',
+      { defaultMessage: 'Save edit' }
+    ),
     'euiLink.external.ariaLabel': i18n.translate('core.euiLink.external.ariaLabel', {
       defaultMessage: 'External link',
     }),

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@81.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@81.2.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };
diff --git a/...plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx b/...plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx
@@ -65,6 +65,7 @@ export const TimeFilter = ({ filter, commit, dateFormat, commonlyUsedRanges = []
   return (
     <div className="canvasTimeFilter">
       <EuiSuperDatePicker
+        width="full"
         start={start}
         end={end}
         isPaused={false}

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/time_filter.scss b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/time_filter.scss
diff --git a/x-pack/plugins/canvas/public/style/index.scss b/x-pack/plugins/canvas/public/style/index.scss
@@ -51,5 +51,4 @@
 @import '../../canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss';
 @import '../../canvas_plugin_src/renderers/embeddable/embeddable.scss';
 @import '../../canvas_plugin_src/renderers/plot/plot.scss';
-@import '../../canvas_plugin_src/renderers/filters/time_filter/time_filter.scss';
 @import '../../canvas_plugin_src/uis/arguments/image_upload/image_upload.scss';
diff --git a/...ry_view/public/components/shared/exploratory_view/components/series_date_picker/index.tsx b/...ry_view/public/components/shared/exploratory_view/components/series_date_picker/index.tsx
@@ -35,6 +35,7 @@ export function SeriesDatePicker({ series, seriesId }: Props) {
 
   return (
     <EuiSuperDatePicker
+      width="full"
       start={series?.time?.from}
       end={series?.time?.to}
       onTimeChange={onTimeChange}

diff --git a/..._view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx b/..._view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx
@@ -78,10 +78,4 @@ export function DatePickerCol({ seriesId, series }: Props) {
 
 const Wrapper = styled.div`
   width: 100%;
-  .euiSuperDatePicker__flexWrapper {
-    width: 100%;
-    > .euiFlexItem {
-      margin-right: 0;
-    }
-  }
 `;
diff --git a/.../plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js b/.../plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js
@@ -24,6 +24,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import moment from 'moment';
 import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
 import { generateTempId } from '../utils';
@@ -32,6 +33,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 const VALID_DATE_STRING_LENGTH = 19;
+const INLINE_DATE_PICKER_RANGE_WIDTH = 553;
 
 export class NewEventModal extends Component {
   static propTypes = {
@@ -208,12 +210,15 @@ export class NewEventModal extends Component {
         <EuiSpacer size="s" />
         <EuiFormRow fullWidth>
           <EuiDatePickerRange
-            fullWidth
-            iconType={false}
+            inline
+            css={css`
+              @media (min-width: ${INLINE_DATE_PICKER_RANGE_WIDTH}px) {
+                inline-size: ${INLINE_DATE_PICKER_RANGE_WIDTH}px;
+                max-inline-size: 100%;
+              }
+            `}
             startDateControl={
               <EuiDatePicker
-                fullWidth
-                inline
                 selected={startDate}
                 onChange={this.handleChangeStart}
                 startDate={startDate}
@@ -231,8 +236,6 @@ export class NewEventModal extends Component {
             }
             endDateControl={
               <EuiDatePicker
-                fullWidth
-                inline
                 selected={endDate}
                 onChange={this.handleChangeEnd}
                 startDate={startDate}

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -77,10 +77,6 @@ const StyledDatePicker = styled.div`
   .euiFormControlLayout--group {
     background-color: rgba(0, 119, 204, 0.2);
   }
-
-  .euiDatePickerRange--readOnly {
-    background-color: ${(props) => props.theme.eui.euiFormBackgroundColor};
-  }
 `;
 const EndpointListNavLink = memo<{
   name: string;

diff --git a/.../plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx b/.../plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx
@@ -113,15 +113,6 @@ const ScrollableFlexItem = styled(EuiFlexItem)`
   overflow: hidden;
 `;
 
-const DatePicker = styled(EuiFlexItem)`
-  .euiSuperDatePicker__flexWrapper {
-    max-width: none;
-    width: auto;
-  }
-`;
-
-DatePicker.displayName = 'DatePicker';
-
 const VerticalRule = styled.div`
   width: 2px;
   height: 100%;
@@ -277,9 +268,9 @@ export const EqlTabContentComponent: React.FC<Props> = ({
                   setFullScreen={setTimelineFullScreen}
                 />
               )}
-              <DatePicker grow={10}>
-                <SuperDatePicker id={InputsModelId.timeline} timelineId={timelineId} />
-              </DatePicker>
+              <EuiFlexItem grow={10}>
+                <SuperDatePicker width="auto" id={InputsModelId.timeline} timelineId={timelineId} />
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <TimelineDatePickerLock />
               </EuiFlexItem>

diff --git a/...lugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/...lugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -118,14 +118,6 @@ const ScrollableFlexItem = styled(EuiFlexItem)`
   overflow: hidden;
 `;
 
-const DatePicker = styled(EuiFlexItem)`
-  .euiSuperDatePicker__flexWrapper {
-    max-width: none;
-    width: auto;
-  }
-`;
-DatePicker.displayName = 'DatePicker';
-
 const SourcererFlex = styled(EuiFlexItem)`
   align-items: flex-end;
 `;
@@ -369,13 +361,14 @@ export const QueryTabContentComponent: React.FC<Props> = ({
                   setFullScreen={setTimelineFullScreen}
                 />
               )}
-              <DatePicker grow={10}>
+              <EuiFlexItem grow={10}>
                 <SuperDatePicker
+                  width="auto"
                   id={InputsModelId.timeline}
                   timelineId={timelineId}
                   disabled={isDatePickerDisabled}
                 />
-              </DatePicker>
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <TimelineDatePickerLock />
               </EuiFlexItem>