Upgraded EUI to v76.0.0 (#152506)

👋 Hi all - the biggest breaking change of this PR is around two icon
type changes/renames.

1. ⚠️ **The  `alert` icon is now named `warning`**
- <img width="103" alt=""
src="https://user-images.githubusercontent.com/549407/223561599-8913e88c-676f-47cd-aaed-81b64783bd81.png"
align="middle">
- This change should have been automatically converted on your behalf by
the EUI team, **but if for some reason** we missed making this
conversion in this PR and your icon(s) are now broken, please ping us or
let us know in this PR (or fix yourself after this PR merges).
- In some cases, teams were using this icon for error messages,
alongside the `danger` color. In those cases, we opinionatedly changed
those icon usages to the new `error` icon instead of using the old
alert/warning icon.

2. 🛑 **The `crossInACircleFilled` icon has been removed, and a new
`error` icon added**
- <img width="84" alt=""
src="https://user-images.githubusercontent.com/549407/223561892-4406bdf6-1a55-49ac-85ad-3a11eb7c090d.png"
align="middle">
- The conversion for this breaking change was not straightforward. This
was the path we used to determine what to change `crossInACircleFilled`
usages to:
- If the icon was associated with errors or error messages, we changed
it to the new `error` icon.
- If a "delete" action was associated with this icon, we changed it to
the `trash` icon instead.
- If a "clear" action was associated with this icon, we changed it to
just the `cross` icon, or in some cases `minusInCircleFilled` (if used
alongside `plusInCircleFilled`).
- Again, if we made a mistake during this conversion or missed your
plugin, please feel free to ping us.

## Summary

`eui@75.1.2` ⏩ `eui@76.0.2`

## [`76.0.2`](https://github.com/elastic/eui/tree/v76.0.2)

**Bug fixes**

- Added a legacy `alert` alias for the `warning` `EuiIcon` type
([#6640](elastic/eui#6640))

## [`76.0.1`](https://github.com/elastic/eui/tree/v76.0.1)

**Bug fixes**

- Fixed broken icons on all `isInvalid` form controls
([#6629](elastic/eui#6629))

## [`76.0.0`](https://github.com/elastic/eui/tree/v76.0.0)

- Added `pivot` glyph to `EuiIcon`
([#6605](elastic/eui#6605))
- Added the `displayHeaderCellProps` API to `EuiDataGrid`'s columns,
which allows passing custom props directly to column header cells
([#6609](elastic/eui#6609))
- Added the new `headerCellProps`/`footerCellProps` APIs to
`EuiDataGrid`'s control columns, which allows passing custom props
directly to control column header or footer cells
([#6609](elastic/eui#6609))
- Added a new `footerCellRender` API to `EuiDataGrid`'s control columns,
which allows completely customizing control column rendering (previously
rendered an empty cell)
([#6609](elastic/eui#6609))
- Updated the styling of nested ordered lists in `EuiText` to align with
GitHub's list style, which is a popular format used in Markdown or MDX
formatting ([#6615](elastic/eui#6615))
- Added a margin-bottom property exclusively to the direct child `ul`
and `ol` elements of the `EuiText` component
([#6615](elastic/eui#6615))
- Fix issue with badges appearing within an `EuiBadgeGroup`, where the
CSS rule to override the `margin-inline-start` was not being applied
correctly due to the order of appearance in the CSS rules
([#6618](elastic/eui#6618))

**Bug fixes**

- Fixed `EuiDataGrid` footer control columns rendering with cell
expansion popovers when they should not have been
([#6609](elastic/eui#6609))
- Fixed an `EuiSkipLink` bug where main content loading in
progressively/dynamically after the skip link rendered was not being
correctly focused ([#6613](elastic/eui#6613))

**Breaking changes**

- Renamed `EuiIcon`'s `alert` to `warning`
([#6608](elastic/eui#6608))
- Removed `EuiIcon`'s `crossInACircleFilled` in favor of `error`
([#6608](elastic/eui#6608))

---------

Co-authored-by: Davey Holler <daveyholler@hey.com>
Co-authored-by: Constance Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Jon <jon@elastic.co>

examples/files_example/public/components/app.tsx

@@ -87,7 +87,7 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
         ) : status === 'AWAITING_UPLOAD' ? (
           <EuiIcon type="clock" aria-label={status} />
         ) : (
-          <EuiIcon color="danger" type="alert" arial-label={status} />
+          <EuiIcon color="danger" type="warning" arial-label={status} />
         ),
     },
     {

examples/files_example/public/components/confirm_button.tsx

@@ -30,7 +30,7 @@ export const ConfirmButtonIcon: FunctionComponent<Props> = ({
         disabled={disabled}
         aria-label={confirmationText}
         color="warning"
-        iconType="alert"
+        iconType="warning"
         onClick={onConfirm}
       />
     </EuiToolTip>

examples/response_stream/public/containers/app/pages/page_simple_string_stream/index.tsx

@@ -83,7 +83,7 @@ export const PageSimpleStringStream: FC = () => {
         <p>{data}</p>
       </EuiText>
       {errors.length > 0 && (
-        <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
+        <EuiCallOut title="Sorry, there was an error" color="danger" iconType="warning">
           {errors.length === 1 ? (
             <p>{errors[0]}</p>
           ) : (

examples/routing_example/public/get_message_example.tsx

@@ -70,7 +70,7 @@ export function GetMessageRouteExample({ getMessageById }: Props) {
         </EuiFormRow>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="alert">
+          <EuiCallOut color="danger" iconType="warning">
             {error.message}
           </EuiCallOut>
         ) : null}

examples/routing_example/public/post_message_example.tsx

@@ -82,7 +82,7 @@ export function PostMessageRouteExample({ postMessage, addSuccessToast }: Props)
         </EuiFormRow>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="alert">
+          <EuiCallOut color="danger" iconType="warning">
             {error.message}
           </EuiCallOut>
         ) : null}

examples/routing_example/public/random_number_between_example.tsx

@@ -71,7 +71,7 @@ export function RandomNumberBetweenRouteExample({ fetchRandomNumberBetween }: Pr
         </EuiFormRow>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="alert">
+          <EuiCallOut color="danger" iconType="warning">
             {error.message}
           </EuiCallOut>
         ) : null}

examples/routing_example/public/random_number_example.tsx

@@ -52,7 +52,7 @@ export function RandomNumberRouteExample({ fetchRandomNumber }: Props) {
         </EuiButton>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="alert">
+          <EuiCallOut color="danger" iconType="warning">
             {error}
           </EuiCallOut>
         ) : null}

examples/search_examples/public/search/app.tsx

@@ -784,7 +784,7 @@ export const SearchExamplesApp = ({
                 <EuiButtonEmpty
                   size="xs"
                   onClick={() => data.search.session.start()}
-                  iconType="alert"
+                  iconType="warning"
                   data-test-subj="searchExamplesStartSession"
                 >
                   <FormattedMessage
@@ -795,7 +795,7 @@ export const SearchExamplesApp = ({
                 <EuiButtonEmpty
                   size="xs"
                   onClick={() => data.search.session.clear()}
-                  iconType="alert"
+                  iconType="warning"
                   data-test-subj="searchExamplesClearSession"
                 >
                   <FormattedMessage

package.json

@@ -96,7 +96,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "75.1.2",
+    "@elastic/eui": "76.0.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/content-management/table_list/src/table_list_view.tsx

@@ -724,7 +724,7 @@ function TableListViewComp<T extends UserContentCommonSchema>({
             />
           }
           color="danger"
-          iconType="alert"
+          iconType="warning"
         >
           <p>
             <FormattedMessage

packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx

@@ -20,7 +20,7 @@ export const AppNotFound = () => (
     <EuiPageBody>
       <EuiPageContent verticalPosition="center" horizontalPosition="center">
         <EuiEmptyPrompt
-          iconType="alert"
+          iconType="warning"
           iconColor="danger"
           title={
             <h2>

packages/core/apps/core-apps-browser-internal/src/errors/error_application.tsx

@@ -40,7 +40,7 @@ const ErrorPage: React.FC<Props> = ({ title, children }) => {
       <EuiPageBody>
         <EuiPageContent verticalPosition="center" horizontalPosition="center">
           <EuiEmptyPrompt
-            iconType="alert"
+            iconType="warning"
             iconColor="danger"
             title={<h2>{title}</h2>}
             body={children}

packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx

@@ -79,7 +79,7 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
         <EuiPageBody>
           <EuiPageContent verticalPosition="center" horizontalPosition="center">
             <EuiEmptyPrompt
-              iconType="alert"
+              iconType="warning"
               iconColor="danger"
               title={
                 <h2>
@@ -119,7 +119,7 @@ export class FatalErrorsScreen extends React.Component<Props, State> {
               ]}
             />
             {this.state.errors.map((error, i) => (
-              <EuiCallOut key={i} title={error.message} color="danger" iconType="alert">
+              <EuiCallOut key={i} title={error.message} color="danger" iconType="warning">
                 <EuiCodeBlock language="bash" className="eui-textBreakAll">
                   {`Version: ${this.props.kibanaVersion}` +
                     '\n' +

packages/kbn-react-field/src/field_icon/field_icon.tsx

@@ -49,7 +49,7 @@ export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
   binary: { iconType: 'tokenBinary' },
   boolean: { iconType: 'tokenBoolean' },
   // icon for an index pattern mapping conflict in discover
-  conflict: { iconType: 'alert', color: 'euiColorVis9', shape: 'square' },
+  conflict: { iconType: 'warning', color: 'euiColorVis9', shape: 'square' },
   date: { iconType: 'tokenDate' },
   date_range: { iconType: 'tokenDate' },
   dense_vector: { iconType: 'tokenDenseVector' },

packages/kbn-securitysolution-autocomplete/src/field/use_field.tsx

@@ -236,7 +236,7 @@ export const useField = ({
             <EuiIcon
               data-test-subj="mappingConflictsWarningIcon"
               tabIndex={0}
-              type="alert"
+              type="warning"
               title={i18n.FIELD_CONFLICT_INDICES_WARNING_TITLE}
               size="s"
               css={{ marginLeft: `${sPaddingSize}` }}

packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx

@@ -54,7 +54,7 @@ const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
       case ViewerStatus.ERROR: {
         return {
           color: 'danger' as ExpressionColor,
-          iconType: 'alert',
+          iconType: 'error',
           title: (
             <h2 data-test-subj="errorTitle">{title || i18n.EMPTY_VIEWER_STATE_ERROR_TITLE}</h2>
           ),

packages/shared-ux/file/file_picker/impl/src/components/error_content.tsx

@@ -23,7 +23,7 @@ export const ErrorContent: FunctionComponent<Props> = ({ error }) => {
   return (
     <EuiEmptyPrompt
       data-test-subj="errorPrompt"
-      iconType="alert"
+      iconType="warning"
       iconColor="danger"
       titleSize="xs"
       title={<h3>{i18nTexts.loadingFilesErrorTitle}</h3>}

src/dev/license_checker/config.ts

@@ -84,6 +84,6 @@ 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@75.1.2': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@76.0.2': ['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
 };

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -61,7 +61,7 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps> {
     return (
       <div>
         <EuiSpacer size="xl" />
-        <EuiCallOut title={this.props.callOutTitle} iconType="alert">
+        <EuiCallOut title={this.props.callOutTitle} iconType="warning">
           <p>{this.props.callOutSubtitle}</p>
         </EuiCallOut>
         <EuiSpacer size="xl" />

src/plugins/advanced_settings/public/management_app/components/field/field.tsx

@@ -449,7 +449,7 @@ export class Field extends PureComponent<FieldProps> {
         {unsavedChanges ? (
           <EuiIconTip
             anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
-            type={isInvalid ? 'alert' : 'dot'}
+            type={isInvalid ? 'warning' : 'dot'}
             color={isInvalid ? 'danger' : 'warning'}
             aria-label={unsavedIconLabel}
             content={unsavedIconLabel}

src/plugins/chart_expressions/expression_partition_vis/public/components/visualization_noresults.tsx

@@ -35,7 +35,7 @@ export const VisualizationNoResults: FC<Props> = ({
     return (
       <EmptyPlaceholder
         dataTestSubj="partitionVisNegativeValues"
-        icon="alert"
+        icon="warning"
         iconColor="warning"
         message={message}
         renderComplete={renderComplete}

src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx

@@ -218,7 +218,7 @@ export const TagCloudChart = ({
           {warning && (
             <div className="tgcChart__warning">
               <EuiIconTip
-                type="alert"
+                type="warning"
                 color="warning"
                 content={
                   <FormattedMessage
@@ -232,7 +232,7 @@ export const TagCloudChart = ({
           {tagCloudData.length > MAX_TAG_COUNT && (
             <div className="tgcChart__warning">
               <EuiIconTip
-                type="alert"
+                type="warning"
                 color="warning"
                 content={
                   <FormattedMessage

src/plugins/charts/public/static/components/warnings.tsx

@@ -58,7 +58,7 @@ export function Warnings({
                 }
               `}
               iconSize="s"
-              iconType="alert"
+              iconType="warning"
               minWidth={0}
               onClick={onWarningButtonClick}
               size="s"
@@ -69,7 +69,7 @@ export function Warnings({
           ) : (
             <EuiButtonEmpty
               color="warning"
-              iconType="alert"
+              iconType="warning"
               onClick={onWarningButtonClick}
               size="xs"
               data-test-subj={dataTestSubj}

src/plugins/console/public/application/components/something_went_wrong_callout.tsx

@@ -24,7 +24,7 @@ export const SomethingWentWrongCallout: FunctionComponent<Props> = ({ error, onB
 
   return (
     <EuiCallOut
-      iconType="alert"
+      iconType="warning"
       color="danger"
       title={i18n.translate('console.loadingError.title', {
         defaultMessage: 'Cannot load Console',

src/plugins/controls/public/control_group/component/control_frame_component.tsx

@@ -41,7 +41,7 @@ const ControlFrameError = ({ error }: ControlFrameErrorProps) => {
     <EuiButtonEmpty
       color="danger"
       iconSize="m"
-      iconType={'alert'}
+      iconType="error"
       onClick={() => setPopoverOpen((open) => !open)}
       className={'errorEmbeddableCompact__button'}
       textProps={{ className: 'errorEmbeddableCompact__text' }}

src/plugins/controls/public/options_list/components/options_list_popover_title.tsx

@@ -34,7 +34,7 @@ export const OptionsListPopoverTitle = () => {
           <EuiFlexItem data-test-subj="optionsList-allow-expensive-queries-warning" grow={false}>
             <EuiIconTip
               aria-label="Warning"
-              type="alert"
+              type="warning"
               color="warning"
               content={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
             />

src/plugins/data/public/search/session/session_indicator/search_session_indicator/search_session_indicator.tsx

@@ -311,7 +311,7 @@ const searchSessionIndicatorViewStateToProps: {
   [SearchSessionState.Canceled]: {
     button: {
       color: 'danger',
-      iconType: 'alert',
+      iconType: 'error',
       'aria-label': i18n.translate('data.searchSessionIndicator.canceledIconAriaLabel', {
         defaultMessage: 'Search session stopped',
       }),

src/plugins/data/public/search/session/sessions_mgmt/components/actions/delete_button.tsx

@@ -68,7 +68,7 @@ export const createDeleteActionDescriptor = (
   uiSession: UISession,
   core: CoreStart
 ): IClickActionDescriptor => ({
-  iconType: 'crossInACircleFilled',
+  iconType: 'trash',
   label: <FormattedMessage id="data.mgmt.searchSessions.actionDelete" defaultMessage="Delete" />,
   onClick: async () => {
     const ref = core.overlays.openModal(

src/plugins/data/public/search/session/sessions_mgmt/components/status.tsx

@@ -104,7 +104,7 @@ const getStatusAttributes = ({
 
     case SearchSessionStatus.CANCELLED:
       return {
-        icon: <EuiIcon color="#9AA" type="crossInACircleFilled" />,
+        icon: <EuiIcon color="#9AA" type="error" />,
         label: <TableText>{getStatusText(session.status)}</TableText>,
         toolTipContent: i18n.translate('data.mgmt.searchSessions.status.message.cancelled', {
           defaultMessage: 'Cancelled by user',
@@ -114,7 +114,7 @@ const getStatusAttributes = ({
     case SearchSessionStatus.ERROR:
       return {
         textColor: 'danger',
-        icon: <EuiIcon color="danger" type="crossInACircleFilled" />,
+        icon: <EuiIcon color="danger" type="error" />,
         label: <TableText>{getStatusText(session.status)}</TableText>,
         toolTipContent:
           session.errors && session.errors.length > 0

src/plugins/data/public/search/session/sessions_mgmt/lib/get_columns.tsx

@@ -107,7 +107,7 @@ export const getColumns = (
           <>
             {' '}
             <EuiIconTip
-              type="alert"
+              type="warning"
               content={
                 <FormattedMessage
                   id="data.mgmt.searchSessions.table.notRestorableWarning"
@@ -127,7 +127,7 @@ export const getColumns = (
             <>
               {' '}
               <EuiIconTip
-                type="alert"
+                type="warning"
                 iconProps={{ 'data-test-subj': 'versionIncompatibleWarningTestSubj' }}
                 content={
                   <FormattedMessage

src/plugins/data/public/shard_failure_modal/shard_failure_modal.tsx

@@ -41,7 +41,7 @@ export function ShardFailureModal({ request, response, title, onClose }: Props)
   ) {
     // this should never ever happen, but just in case
     return (
-      <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
+      <EuiCallOut title="Sorry, there was an error" color="danger" iconType="warning">
         The ShardFailureModal component received invalid properties
       </EuiCallOut>
     );

src/plugins/data_view_field_editor/public/components/confirm_modals/delete_field_modal.tsx

@@ -99,7 +99,12 @@ export function DeleteFieldModal({ fieldsToDelete, closeModal, confirmDelete }:
       confirmButtonText={confirmButtonText}
       confirmButtonDisabled={confirmContent?.toUpperCase() !== 'REMOVE'}
     >
-      <EuiCallOut color="warning" title={i18nTexts.warningRemovingFields} iconType="alert" size="s">
+      <EuiCallOut
+        color="warning"
+        title={i18nTexts.warningRemovingFields}
+        iconType="warning"
+        size="s"
+      >
         {isMultiple && (
           <>
             <p>{warningMultipleFields}</p>

src/plugins/data_view_field_editor/public/components/confirm_modals/save_field_type_or_name_changed_modal.tsx

@@ -70,7 +70,7 @@ export const SaveFieldTypeOrNameChangedModal: React.FC<Props> = ({
       <EuiCallOut
         color="warning"
         title={i18nTexts.warningChangingFields}
-        iconType="alert"
+        iconType="warning"
         size="s"
       />
       <EuiSpacer />

src/plugins/data_view_field_editor/public/components/field_editor/field_editor.tsx

@@ -276,7 +276,7 @@ const FieldEditorComponent = ({ field, onChange, onFormModifiedChange }: Props)
           <EuiCallOut
             color="warning"
             title={changeWarning}
-            iconType="alert"
+            iconType="warning"
             size="s"
             data-test-subj="changeWarning"
           />