Upgrade EUI to v87.1.0 (#163961)

`v86.0.0`⏩`v87.1.0` ⚠️ The biggest set of type changes in this PR come from the breaking change that makes `pageSize` and `pageSizeOptions` now optional props for `EuiBasicTable.pagination`, `EuiInMemoryTable.pagination` and `EuiDataGrid.pagination`. This caused several other components that were cloning EUI's pagination type to start throwing type warnings about `pageSize` being optional. Where I came across these errors, I modified the extended types to require `pageSize`. These types and their usages may end up changing again in any case once the Shared UX team looks into #56406. --- ## [`87.1.0`](https://github.com/elastic/eui/tree/v87.1.0) - Updated the underlying library powering `EuiAutoSizer`. This primarily affects typing around the `disableHeight` and `disableWidth` props ([#6798](elastic/eui#6798)) - Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and `EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter typing ([#6798](elastic/eui#6798)) - Updated `EuiDatePickerRange` to support `compressed` display ([#7058](elastic/eui#7058)) - Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop ([#7061](elastic/eui#7061)) - Added a new `panelMinWidth` prop to `EuiInputPopover` ([#7071](elastic/eui#7071)) - Added a new `inputPopoverProps` prop for `EuiRange`s and `EuiDualRange`s with `showInput="inputWithPopover"` set ([#7082](elastic/eui#7082)) **Bug fixes** - Fixed `EuiToolTip` overriding instead of merging its `aria-describedby` tooltip ID with any existing `aria-describedby`s ([#7055](elastic/eui#7055)) - Fixed `EuiSuperDatePicker`'s `compressed` display ([#7058](elastic/eui#7058)) - Fixed `EuiAccordion` to remove tabbable children from sequential keyboard navigation when the accordion is closed ([#7064](elastic/eui#7064)) - Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs ([#7065](elastic/eui#7065)) **Accessibility** - Removed the default `dialog` role and `tabIndex` from push `EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual accessibility management. ([#7065](elastic/eui#7065)) ## [`87.0.0`](https://github.com/elastic/eui/tree/v87.0.0) - Added beta `componentDefaults` prop to `EuiProvider`, which will allow configuring certain default props globally. This list of components and defaults is still under consideration. ([#6923](elastic/eui#6923)) - `EuiPortal`'s `insert` prop can now be configured globally via `EuiProvider.componentDefaults` ([#6941](elastic/eui#6941)) - `EuiFocusTrap`'s `crossFrame` and `gapMode` props can now be configured globally via `EuiProvider.componentDefaults` ([#6942](elastic/eui#6942)) - `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and `showPerPageOptions` props can now be configured globally via `EuiProvider.componentDefaults` ([#6951](elastic/eui#6951)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid` now allow `pagination.pageSize` to be undefined. If undefined, `pageSize` defaults to `EuiTablePagination`'s `itemsPerPage` component default. ([#6993](elastic/eui#6993)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid`'s `pagination.pageSizeOptions` will now fall back to `EuiTablePagination`'s `itemsPerPageOptions` component default. ([#6993](elastic/eui#6993)) - Updated `EuiHeaderLinks`'s `gutterSize` spacings ([#7005](elastic/eui#7005)) - Updated `EuiHeaderAlert`'s stacking styles ([#7005](elastic/eui#7005)) - Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips. ([#7018](elastic/eui#7018)) - Updated `EuiBreadcrumbs` to support breadcrumbs that toggle popovers via `popoverContent` and `popoverProps` ([#7031](elastic/eui#7031)) - Improved the contrast ratio of disabled titles within `EuiSteps` and `EuiStepsHorizontal` to meet WCAG AA guidelines. ([#7032](elastic/eui#7032)) - Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a more clear visual indication of the current step ([#7048](elastic/eui#7048)) **Bug fixes** - Single uses of `<EuiHeaderSectionItem side="right" />` now align right as expected without needing a previous `side="left"` sibling. ([#7005](elastic/eui#7005)) - `EuiPageTemplate` now correctly displays `panelled={true}` ([#7044](elastic/eui#7044)) **Breaking changes** - `EuiTablePagination`'s default `itemsPerPage` is now `10` (was previously `50`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - `EuiTablePagination`'s default `itemsPerPageOptions` is now `[10, 25, 50]` (was previously `[10, 20, 50, 100]`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - Removed `border` prop from `EuiHeaderSectionItem` (unused since Amsterdam theme) ([#7005](elastic/eui#7005)) - Removed `borders` object configuration from `EuiHeader.sections` ([#7005](elastic/eui#7005)) **CSS-in-JS conversions** - Converted `EuiHeaderAlert` to Emotion; Removed unused `.euiHeaderAlert__dismiss` CSS ([#7005](elastic/eui#7005)) - Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and `EuiHeaderSectionItemButton` to Emotion ([#7005](elastic/eui#7005)) - Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed `$euiHeaderLinksGutterSizes` Sass variables ([#7005](elastic/eui#7005)) - Removed `$euiHeaderBackgroundColor` Sass variable; use `$euiColorEmptyShade` instead ([#7005](elastic/eui#7005)) - Removed `$euiHeaderChildSize` Sass variable; use `$euiSizeXXL` instead ([#7005](elastic/eui#7005)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>
elastic · Aug 21, 2023 · 84ca85d · 84ca85d
1 parent d7bf7ef
commit 84ca85d
Show file tree

Hide file tree

Showing 33 changed files with 125 additions and 107 deletions.
diff --git a/examples/bfetch_explorer/public/components/page/index.tsx b/examples/bfetch_explorer/public/components/page/index.tsx
@@ -16,7 +16,7 @@ export interface PageProps {
 
 export const Page: React.FC<PageProps> = ({ title = 'Untitled', sidebar, children }) => {
   return (
-    <EuiPageTemplate panelled={true} offset={0} grow={true}>
+    <EuiPageTemplate offset={0} grow={true}>
       <EuiPageTemplate.Sidebar>{sidebar}</EuiPageTemplate.Sidebar>
       <EuiPageTemplate.Header>
         <EuiPageHeader pageTitle={title} />

diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "86.0.0",
+    "@elastic/eui": "87.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/...core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/...core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx
@@ -129,7 +129,6 @@ export function Header({
                     customBranding$={customBranding$}
                   />,
                 ],
-                borders: 'none',
               },
               {
                 ...(observables.navControlsCenter$ && {
@@ -139,7 +138,6 @@ export function Header({
                     </EuiShowFor>,
                   ],
                 }),
-                borders: 'none',
               },
               {
                 items: [
@@ -164,14 +162,13 @@ export function Header({
                   />,
                   <HeaderNavControls navControls$={observables.navControlsRight$} />,
                 ],
-                borders: 'none',
               },
             ]}
           />
 
           <EuiHeader position="fixed" className="header__secondBar">
             <EuiHeaderSection grow={false}>
-              <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
+              <EuiHeaderSectionItem className="header__toggleNavButtonSection">
                 <CollapsibleNav
                   appId$={application.currentAppId$}
                   id={navId}
@@ -230,7 +227,7 @@ export function Header({
             <HeaderBadge badge$={observables.badge$} />
 
             <EuiHeaderSection side="right">
-              <EuiHeaderSectionItem border="none">
+              <EuiHeaderSectionItem>
                 <HeaderActionMenu mounter={headerActionMenuMounter} />
               </EuiHeaderSectionItem>
             </EuiHeaderSection>

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss
@@ -1,7 +1,7 @@
 .chrHeaderLogo {
   display: flex;
   align-items: center;
-  height: $euiHeaderChildSize;
+  height: $euiSizeXXL;
   padding-inline: $euiSizeS;
 }
 

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx
@@ -18,7 +18,7 @@ interface Props {
   side?: 'left' | 'right';
 }
 
-export function HeaderNavControls({ navControls$, side }: Props) {
+export function HeaderNavControls({ navControls$ }: Props) {
   const navControls = useObservable(navControls$, []);
 
   if (!navControls) {
@@ -30,10 +30,7 @@ export function HeaderNavControls({ navControls$, side }: Props) {
   return (
     <>
       {navControls.map((navControl: ChromeNavControl, index: number) => (
-        <EuiHeaderSectionItem
-          key={index}
-          border={side ? (side === 'left' ? 'right' : 'left') : 'none'}
-        >
+        <EuiHeaderSectionItem key={index}>
           <HeaderExtension extension={navControl.mount} />
         </EuiHeaderSectionItem>
       ))}

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
@@ -103,6 +103,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Page level controls',
       description: 'Screen reader announcement about heading controls',
     }),
+    'euiBreadcrumb.popoverAriaLabel': i18n.translate('core.euiBreadcrumb.popoverAriaLabel', {
+      defaultMessage: 'Clicking this button will toggle a popover dialog.',
+    }),
     'euiBreadcrumb.collapsedBadge.ariaLabel': i18n.translate(
       'core.euiBreadcrumb.collapsedBadge.ariaLabel',
       {
@@ -158,6 +161,17 @@ export const getEuiContextMapping = (): EuiTokensObject => {
           'ARIA label and tooltip content describing a button that expands an actions menu',
       }
     ),
+    'euiCollapsibleNavBeta.ariaLabel': i18n.translate('core.euiCollapsibleNavBeta.ariaLabel', {
+      defaultMessage: 'Site menu',
+    }),
+    'euiCollapsibleNavButton.ariaLabelClose': i18n.translate(
+      'core.euiCollapsibleNavButton.ariaLabelClose',
+      { defaultMessage: 'Toggle navigation closed' }
+    ),
+    'euiCollapsibleNavButton.ariaLabelOpen': i18n.translate(
+      'core.euiCollapsibleNavButton.ariaLabelOpen',
+      { defaultMessage: 'Toggle navigation open' }
+    ),
     'euiColorPicker.alphaLabel': i18n.translate('core.euiColorPicker.alphaLabel', {
       defaultMessage: 'Alpha channel (opacity) value',
       description: 'Label describing color alpha channel',

diff --git a/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx b/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx
@@ -11,16 +11,14 @@ import { css } from '@emotion/react';
 import type { FC } from 'react';
 import { EuiCommentProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import type { Pagination as PaginationType } from '@elastic/eui';
-
 import type {
   CommentsArray,
   ExceptionListItemSchema,
   ExceptionListTypeEnum,
 } from '@kbn/securitysolution-io-ts-list-types';
 
 import { euiThemeVars } from '@kbn/ui-theme';
-import { EmptyViewerState, ExceptionItemCard, Pagination } from '../..';
+import { EmptyViewerState, ExceptionItemCard, Pagination, PaginationProps } from '../..';
 
 import type {
   RuleReferences,
@@ -46,7 +44,7 @@ interface ExceptionItemsProps {
   exceptions: ExceptionListItemSchema[];
   listType: ExceptionListTypeEnum;
   ruleReferences: RuleReferences;
-  pagination: PaginationType;
+  pagination: PaginationProps['pagination'];
   editActionLabel?: string;
   deleteActionLabel?: string;
   dataTestSubj?: string;

diff --git a/packages/kbn-securitysolution-exception-list-components/src/types/index.ts b/packages/kbn-securitysolution-exception-list-components/src/types/index.ts
@@ -12,15 +12,15 @@ import type { Pagination } from '@elastic/eui';
 import type { NamespaceType } from '@kbn/securitysolution-io-ts-list-types';
 
 export interface GetExceptionItemProps {
-  pagination?: Pagination;
+  pagination?: PaginationProps['pagination'];
   search?: string;
   filters?: string;
 }
 
 export interface PaginationProps {
   dataTestSubj?: string;
   ariaLabel?: string;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   onPaginationChange: (arg: GetExceptionItemProps) => void;
 }
 

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@86.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@87.1.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/x-pack/packages/ml/data_grid/lib/types.ts b/x-pack/packages/ml/data_grid/lib/types.ts
@@ -64,7 +64,7 @@ export interface RowCountInfo {
 /**
  * Type representing the pagination settings for an index.
  */
-export type IndexPagination = Pick<EuiDataGridPaginationProps, 'pageIndex' | 'pageSize'>;
+export type IndexPagination = Required<Pick<EuiDataGridPaginationProps, 'pageIndex' | 'pageSize'>>;
 
 /**
  * Type for callback function for changing items per page.

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
@@ -92,7 +92,7 @@ interface BaseDataTableProps {
   rowRenderers: DeprecatedRowRenderer[];
   hasCrudPermissions?: boolean;
   unitCountText: string;
-  pagination: EuiDataGridPaginationProps;
+  pagination: EuiDataGridPaginationProps & { pageSize: number };
   totalItems: number;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   isEventRenderedView?: boolean;

diff --git a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts
@@ -50,7 +50,7 @@ export const getPaginationTableParams = (
 export const getPaginationQuery = ({
   pageIndex,
   pageSize,
-}: Pick<Pagination, 'pageIndex' | 'pageSize'>) => ({
+}: Required<Pick<Pagination, 'pageIndex' | 'pageSize'>>) => ({
   from: pageIndex * pageSize,
   size: pageSize,
 });

diff --git a/...ud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx b/...ud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx
@@ -31,7 +31,7 @@ type TableProps = Required<EuiBasicTableProps<CspFinding>>;
 interface Props {
   loading: boolean;
   items: CspFinding[];
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sorting: TableProps['sorting'];
   setTableOptions(options: CriteriaWithPagination<CspFinding>): void;
   onAddFilter: OnAddFilter;

diff --git a/.../configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx b/.../configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx
@@ -29,7 +29,7 @@ import { EmptyState } from '../../../../components/empty_state';
 export interface ResourceFindingsTableProps {
   items: CspFinding[];
   loading: boolean;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sorting: Required<EuiBasicTableProps<CspFinding>>['sorting'];
   setTableOptions(options: CriteriaWithPagination<CspFinding>): void;
   onAddFilter: OnAddFilter;

diff --git a/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx b/...ndex_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
@@ -500,7 +500,6 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
       grow={false}
       data-test-subj="dataVisualizerIndexPage"
       paddingSize="none"
-      panelled={true}
     >
       <EuiPageTemplate.Section>
         <EuiPageTemplate.Header data-test-subj="dataVisualizerPageHeader" css={dvPageHeader}>

diff --git a/.../public/applications/workplace_search/components/layout/account_header/account_header.tsx b/.../public/applications/workplace_search/components/layout/account_header/account_header.tsx
@@ -68,11 +68,11 @@ export const AccountHeader: React.FC = () => {
   return (
     <EuiHeader>
       <EuiHeaderSection grow={false}>
-        <EuiHeaderSectionItem border="none">
+        <EuiHeaderSectionItem>
           <EuiHeaderLogo iconType="logoWorkplaceSearch" />
           <EuiText role="banner">{WORKPLACE_SEARCH_TITLE}</EuiText>
         </EuiHeaderSectionItem>
-        <EuiHeaderSectionItem border="none">
+        <EuiHeaderSectionItem>
           <EuiHeaderLinks>
             <EuiButtonEmptyTo to={PRIVATE_SOURCES_PATH}>{ACCOUNT_NAV.SOURCES}</EuiButtonEmptyTo>
           </EuiHeaderLinks>

diff --git a/...public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap b/...public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap
diff --git a/...rame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts b/...rame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts
@@ -32,7 +32,7 @@ export interface CriteriaWithPagination<T> extends Criteria<T> {
 
 interface UseTableSettingsReturnValue<T> {
   onTableChange: EuiBasicTableProps<T>['onChange'];
-  pagination: Pagination;
+  pagination: Required<Omit<Pagination, 'showPerPageOptions'>>;
   sorting: {
     sort: {
       field: keyof T;