[EuiIcon] Rename alert to warning and remove `crossInACircleFille…

…d` (#6608) * Renamed `alert` to `warning` and deprecated `crossInACircleFilled` * Added CL entry * More icon renamings * Moving CL deprecation entry to breaking change * Remove duplicate `error`
elastic · Feb 22, 2023 · 09e6dd7 · 09e6dd7
1 parent 60cf90a
commit 09e6dd7
Show file tree

Hide file tree

Showing 65 changed files with 126 additions and 157 deletions.
diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js
@@ -40,7 +40,7 @@ const warningSnippet = [
 import Danger from './danger';
 const dangerSource = require('!!raw-loader!./danger');
 const dangerSnippet = [
-  `<EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
+  `<EuiCallOut title="Sorry, there was an error" color="danger" iconType="error">
   <p><!-- Content --></p>
 </EuiCallOut>
 `,

diff --git a/src-docs/src/views/call_out/warning.tsx b/src-docs/src/views/call_out/warning.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { EuiCallOut, EuiLink, EuiButton } from '../../../../src';
 
 export default () => (
-  <EuiCallOut title="Proceed with caution!" color="warning" iconType="alert">
+  <EuiCallOut title="Proceed with caution!" color="warning" iconType="warning">
     <p>
       Here be dragons. Don&rsquo;t wanna mess with no dragons. And{' '}
       <EuiLink href="#">here&rsquo;s a link</EuiLink>.

diff --git a/src-docs/src/views/control_bar/control_bar.js b/src-docs/src/views/control_bar/control_bar.js
@@ -45,7 +45,7 @@ export default () => {
     {
       controlType: 'icon',
       id: 'status_icon',
-      iconType: 'alert',
+      iconType: 'warning',
       color: 'warning',
       'aria-label': 'Repo Status',
     },

diff --git a/src-docs/src/views/control_bar/control_bar_example.js b/src-docs/src/views/control_bar/control_bar_example.js
@@ -52,7 +52,7 @@ const controlBarSnippet = `<EuiControlBar
     {
       controlType: 'icon',
       id: 'status_icon',
-      iconType: 'alert',
+      iconType: 'warning',
       color: 'warning',
       'aria-label': 'Repo Status',
     },

diff --git a/src-docs/src/views/datagrid/cells_popovers/datagrid_cell_popover_example.js b/src-docs/src/views/datagrid/cells_popovers/datagrid_cell_popover_example.js
@@ -92,7 +92,7 @@ export const DataGridCellPopoverExample = {
               custom popover content but default cell actions.
               <EuiCallOut
                 color="warning"
-                iconType="alert"
+                iconType="warning"
                 title="Using custom cell actions"
               >
                 If deliberately leaving out the default{' '}
@@ -150,7 +150,7 @@ export const DataGridCellPopoverExample = {
           </p>
           <EuiCallOut
             color="warning"
-            iconType="alert"
+            iconType="warning"
             title="Cells with actions are always expandable"
           >
             If <EuiCode>columns.cellActions</EuiCode> is defined,{' '}

diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js
@@ -143,7 +143,7 @@ export const ElasticChartsAccessibilityExample = {
               </>
             }
             color="warning"
-            iconType="alert"
+            iconType="warning"
           />
           <EuiSpacer />
           <p>

diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
@@ -40,7 +40,7 @@ const introCards = [
   },
   {
     title: "Don't use",
-    iconType: 'crossInACircleFilled',
+    iconType: 'error',
     iconColor: 'danger',
     description: (
       <>
@@ -62,7 +62,7 @@ const introCards = [
   },
   {
     title: 'Be careful',
-    iconType: 'alert',
+    iconType: 'warning',
     iconColor: 'warning',
     description: (
       <>

diff --git a/src-docs/src/views/empty_prompt/_types_of_use_cases.tsx b/src-docs/src/views/empty_prompt/_types_of_use_cases.tsx
@@ -198,7 +198,7 @@ export const typesOfUseCases: {
       ),
     },
     example: {
-      iconType: 'alert',
+      iconType: 'error',
       title: <h2>Unable to load your dashboards</h2>,
       body: (
         <p>

diff --git a/src-docs/src/views/empty_prompt/empty_prompt_error.tsx b/src-docs/src/views/empty_prompt/empty_prompt_error.tsx
@@ -4,7 +4,7 @@ import { EuiEmptyPrompt } from '../../../../src/components';
 
 export default () => (
   <EuiEmptyPrompt
-    iconType="alert"
+    iconType="error"
     color="danger"
     title={<h2>Unable to load your dashboards</h2>}
     body={

diff --git a/src-docs/src/views/empty_prompt/empty_prompt_example.js b/src-docs/src/views/empty_prompt/empty_prompt_example.js
@@ -66,7 +66,7 @@ import Error from './empty_prompt_error';
 const errorSource = require('!!raw-loader!./empty_prompt_error');
 const errorSnippet = `<EuiEmptyPrompt
   color="danger"
-  iconType="alert"
+  iconType="error"
   title={<h2>There was an error</h2>}
 />`;
 

diff --git a/src-docs/src/views/empty_prompt/empty_prompt_states.tsx b/src-docs/src/views/empty_prompt/empty_prompt_states.tsx
@@ -29,7 +29,7 @@ export default () => {
     case 'error':
       emptyPromptProps = {
         color: 'danger',
-        iconType: 'alert',
+        iconType: 'error',
         title: <h2>Unable to load your dashboards</h2>,
         body: (
           <p>

diff --git a/src-docs/src/views/guidelines/accessibility.js b/src-docs/src/views/guidelines/accessibility.js
@@ -445,7 +445,7 @@ export default {
               <EuiCode>tabIndex=-1</EuiCode>.
             </p>
             <EuiCallOut
-              iconType="alert"
+              iconType="error"
               title={
                 <span>
                   Using <EuiCode>tabIndex</EuiCode> values greater than 0 is

diff --git a/src-docs/src/views/guidelines/writing_examples.js b/src-docs/src/views/guidelines/writing_examples.js
@@ -128,7 +128,7 @@ export const WritingExamples = () => {
         >
           <EuiCallOut
             title="Index privileges missing"
-            iconType="alert"
+            iconType="error"
             color="danger"
           >
             <p>

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -13,7 +13,6 @@ import {
 export const iconTypes = [
   'accessibility',
   'aggregate',
-  'alert',
   'analyzeEvent',
   'annotation',
   'apmTrace',
@@ -62,7 +61,6 @@ export const iconTypes = [
   'copyClipboard',
   'cross',
   'crosshairs',
-  'crossInACircleFilled',
   'currency',
   'cut',
   'database',
@@ -277,6 +275,7 @@ export const iconTypes = [
   'visTimelion',
   'visVega',
   'visVisualBuilder',
+  'warning',
   'wordWrap',
   'wordWrapDisabled',
   'wrench',
@@ -285,7 +284,7 @@ export const iconTypes = [
 export default () => (
   <>
     <EuiCodeBlock language="html" isCopyable paddingSize="m">
-      {'<EuiIcon type="alert" />'}
+      {'<EuiIcon type="warning" />'}
     </EuiCodeBlock>
     <EuiSpacer />
     <EuiFlexGrid direction="column" columns={3}>

diff --git a/src-docs/src/views/page_components/page_example.js b/src-docs/src/views/page_components/page_example.js
@@ -173,11 +173,7 @@ export const PageExample = {
 
               <EuiTableRow>
                 <EuiTableRowCell>
-                  <EuiIcon
-                    type="crossInACircleFilled"
-                    color="danger"
-                    title="no"
-                  />
+                  <EuiIcon type="error" color="danger" title="no" />
                 </EuiTableRowCell>
                 <EuiTableRowCell>
                   <EuiIcon
@@ -204,18 +200,10 @@ export const PageExample = {
 
               <EuiTableRow>
                 <EuiTableRowCell>
-                  <EuiIcon
-                    type="crossInACircleFilled"
-                    color="danger"
-                    title="no"
-                  />
+                  <EuiIcon type="error" color="danger" title="no" />
                 </EuiTableRowCell>
                 <EuiTableRowCell>
-                  <EuiIcon
-                    type="crossInACircleFilled"
-                    color="danger"
-                    title="no"
-                  />
+                  <EuiIcon type="error" color="danger" title="no" />
                 </EuiTableRowCell>
 
                 <EuiTableRowCell mobileOptions={{ width: '100%' }}>

diff --git a/src-docs/src/views/page_template/examples.tsx b/src-docs/src/views/page_template/examples.tsx
@@ -140,7 +140,7 @@ export const PageTemplateInfo = {
   intro: (
     <>
       <EuiCallOut
-        iconType="alert"
+        iconType="warning"
         color="warning"
         title={
           <>
@@ -289,7 +289,7 @@ export const PageTemplateExample = () => (
           </EuiText>
           <EuiSpacer />
           <EuiCallOut
-            iconType="alert"
+            iconType="warning"
             color="warning"
             title="Sidebars must be direct children declared in the same component."
           >
@@ -353,7 +353,7 @@ export const PageTemplateExample = () => (
           <EuiSpacer />
 
           <EuiCallOut
-            iconType="alert"
+            iconType="warning"
             color="warning"
             title={
               <>

diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js
@@ -37,8 +37,8 @@ export const ResizeObserverHookExample = () => {
           </p>
         ) : (
           <p>
-            <EuiIcon type="crossInACircleFilled" color="danger" /> Browser does
-            not support ResizeObserver API. Using MutationObserver.
+            <EuiIcon type="error" color="danger" /> Browser does not support
+            ResizeObserver API. Using MutationObserver.
           </p>
         )}
         <p>

diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
@@ -336,7 +336,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [
     label: 'Totally custom',
     searchableLabel: 'Totally custom with pink metadata',
     icon: {
-      type: 'alert',
+      type: 'warning',
       color: 'accent',
     },
     meta: [

diff --git a/src-docs/src/views/stat/stat_combos.js b/src-docs/src/views/stat/stat_combos.js
@@ -73,7 +73,7 @@ export default () => {
                   description={
                     <EuiTextColor color="accent">
                       <span>
-                        <EuiIcon type="alert" color="danger" /> 12,20%
+                        <EuiIcon type="error" color="danger" /> 12,20%
                       </span>
                     </EuiTextColor>
                   }
@@ -113,7 +113,7 @@ export default () => {
                 >
                   <EuiTextColor color="accent">
                     <span>
-                      <EuiIcon type="alert" color="danger" /> 66,55%
+                      <EuiIcon type="error" color="danger" /> 66,55%
                     </span>
                   </EuiTextColor>
                 </EuiStat>

diff --git a/src-docs/src/views/toast/guidelines.js b/src-docs/src/views/toast/guidelines.js
@@ -45,7 +45,7 @@ export default () => {
             title="The maximum bucket size of 200 was exceeded"
             color="danger"
             size="s"
-            iconType="alert"
+            iconType="error"
           />
           <EuiSpacer size="s" />
           <EuiCodeBlock>
@@ -307,7 +307,7 @@ and space to read it properly. Alternatively just link to a full page.
         <GuideRuleExample
           type="do"
           text="The check icon reinforces that the action succeeded.
-                The alert icon helps users understand the message is an error."
+                The error icon helps users understand the message is an error."
         >
           <div>
             <EuiToast
@@ -322,7 +322,7 @@ and space to read it properly. Alternatively just link to a full page.
             <EuiToast
               style={{ maxWidth: 300 }}
               title="A dashboard named 'MyDashboard' already exists"
-              iconType="alert"
+              iconType="error"
               color="danger"
             />
           </div>

diff --git a/src-docs/src/views/toast/toast_example.js b/src-docs/src/views/toast/toast_example.js
@@ -79,7 +79,7 @@ const dangerToastSnippet = [
   `<EuiToast
   title="Danger toast"
   color="danger"
-  iconType="alert"
+  iconType="error"
   onClose={closeToast}>
   <!-- Raw HTML content -->
   </EuiToast>`,

diff --git a/src-docs/src/views/toast/warning.js b/src-docs/src/views/toast/warning.js
@@ -6,6 +6,6 @@ export default () => (
   <EuiToast
     title="Sometimes a title is enough!"
     color="warning"
-    iconType="alert"
+    iconType="warning"
   />
 );
diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js
@@ -39,7 +39,7 @@ export default () => {
       <EuiIconTip
         aria-label="Warning"
         size="xl"
-        type="alert"
+        type="warning"
         color="warning"
         content="I do not think it means what you think it means"
       />

diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
@@ -51,7 +51,7 @@ export default () => (
       <p>
         This tooltip appears on the bottom of this icon:{' '}
         <EuiToolTip position="bottom" content="Here is some tooltip text">
-          <EuiIcon tabIndex="0" type="alert" title="Icon with tooltip" />
+          <EuiIcon tabIndex="0" type="warning" title="Icon with tooltip" />
         </EuiToolTip>
       </p>
     </EuiText>

diff --git a/src-docs/src/views/window_event/window_event_example.js b/src-docs/src/views/window_event/window_event_example.js
@@ -60,7 +60,7 @@ export const WindowEventExample = {
           <EuiCallOut
             title="Be careful with global listeners"
             color="warning"
-            iconType="alert"
+            iconType="warning"
           >
             <p>
               Since window event listeners are global, they can conflict with