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 `[email protected]` ⏩ `[email protected]` ## [`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 <[email protected]> Co-authored-by: Constance Chen <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Jon <[email protected]>
elastic · Mar 14, 2023 · c339ca8 · c339ca8
1 parent c226c07
commit c339ca8
Show file tree

Hide file tree

Showing 559 changed files with 740 additions and 699 deletions.
diff --git a/examples/files_example/public/components/app.tsx b/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} />
         ),
     },
     {

diff --git a/examples/files_example/public/components/confirm_button.tsx b/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>

diff --git a/examples/response_stream/public/containers/app/pages/page_simple_string_stream/index.tsx b/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>
           ) : (

diff --git a/examples/routing_example/public/get_message_example.tsx b/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}

diff --git a/examples/routing_example/public/post_message_example.tsx b/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}

diff --git a/examples/routing_example/public/random_number_between_example.tsx b/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}

diff --git a/examples/routing_example/public/random_number_example.tsx b/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}

diff --git a/examples/search_examples/public/search/app.tsx b/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

diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@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",

diff --git a/packages/content-management/table_list/src/table_list_view.tsx b/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

diff --git a/packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx b/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>

diff --git a/packages/core/apps/core-apps-browser-internal/src/errors/error_application.tsx b/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}

diff --git a/...rs/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap b/...rs/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap
diff --git a/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx b/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' +

diff --git a/packages/kbn-react-field/src/field_icon/__snapshots__/field_icon.test.tsx.snap b/packages/kbn-react-field/src/field_icon/__snapshots__/field_icon.test.tsx.snap
diff --git a/packages/kbn-react-field/src/field_icon/field_icon.tsx b/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' },

diff --git a/packages/kbn-securitysolution-autocomplete/src/field/use_field.tsx b/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}` }}

diff --git a/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx b/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>
           ),

diff --git a/packages/shared-ux/file/file_picker/impl/src/components/error_content.tsx b/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>}

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['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'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/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" />

diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/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}

diff --git a/.../chart_expressions/expression_partition_vis/public/components/visualization_noresults.tsx b/.../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}

diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx b/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

diff --git a/src/plugins/charts/public/static/components/warnings.tsx b/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}

diff --git a/src/plugins/console/public/application/components/something_went_wrong_callout.tsx b/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',

diff --git a/src/plugins/controls/public/control_group/component/control_frame_component.tsx b/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' }}

diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_title.tsx b/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()}
             />

diff --git a/...ic/search/session/session_indicator/search_session_indicator/search_session_indicator.tsx b/...ic/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',
       }),

diff --git a/src/plugins/data/public/search/session/sessions_mgmt/components/actions/delete_button.tsx b/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(

diff --git a/src/plugins/data/public/search/session/sessions_mgmt/components/status.tsx b/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

diff --git a/src/plugins/data/public/search/session/sessions_mgmt/lib/get_columns.tsx b/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

diff --git a/src/plugins/data/public/shard_failure_modal/shard_failure_modal.tsx b/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>
     );

diff --git a/src/plugins/data_view_field_editor/public/components/confirm_modals/delete_field_modal.tsx b/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>

diff --git a/...w_field_editor/public/components/confirm_modals/save_field_type_or_name_changed_modal.tsx b/...w_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 />

diff --git a/src/plugins/data_view_field_editor/public/components/field_editor/field_editor.tsx b/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"
           />