Rename iInCircle to info (elastic#8744)

Author: ek-so

packages/docusaurus-theme/src/theme/Admonition/Types.tsx

@@ -30,7 +30,7 @@ const VARIANT_TO_PROPS_MAP: Record<
 > = {
   note: { iconType: 'paperClip', color: 'accent' },
   tip: { iconType: 'faceHappy', color: 'success' },
-  info: { iconType: 'iInCircle', color: 'primary' },
+  info: { iconType: 'info', color: 'primary' },
   accessibility: { iconType: 'accessibility', color: 'primary' },
   warning: { iconType: 'alert', color: 'warning' },
   danger: { iconType: 'error', color: 'danger' },
@@ -56,7 +56,7 @@ const Callout = ({ title, type, children }: Props) => {
   return (
     <EuiCallOut
       title={title}
-      iconType="iInCircle"
+      iconType="info"
       color="primary"
       {...variantProps}
       css={css`

packages/eui/changelogs/upcoming/8744.md

@@ -0,0 +1 @@
+- Added `info` icon glyph

packages/eui/src/components/card/card.a11y.tsx

@@ -47,7 +47,7 @@ const Card = () => {
           description="Example of a short card description."
           footer={
             <EuiButtonEmpty
-              iconType="iInCircle"
+              iconType="info"
               size="xs"
               onClick={detailsClicked}
               aria-label="See more details about Sketch"
@@ -68,7 +68,7 @@ const Card = () => {
           description="Example of a longer card description. See how the footers stay lined up."
           footer={
             <EuiButtonEmpty
-              iconType="iInCircle"
+              iconType="info"
               size="xs"
               onClick={detailsClicked}
               aria-label="See more details about Google"
@@ -89,7 +89,7 @@ const Card = () => {
           description="Example of a short card description."
           footer={
             <EuiButtonEmpty
-              iconType="iInCircle"
+              iconType="info"
               size="xs"
               onClick={detailsClicked}
               aria-label="See more details about Not Adobe"

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx

@@ -116,14 +116,14 @@ export const Playground: Story = {
               {
                 title: 'Discover',
                 onClick: () => action('Discover')('clicked!'),
-                icon: 'iInCircle',
+                icon: 'info',
               },
-              { title: 'Dashboards', href: '#', icon: 'iInCircle' },
-              { title: 'Visualize library', href: '#', icon: 'iInCircle' },
+              { title: 'Dashboards', href: '#', icon: 'info' },
+              { title: 'Visualize library', href: '#', icon: 'info' },
             ]),
             {
               title: 'Machine learning',
-              icon: 'iInCircle',
+              icon: 'info',
               items: [
                 { title: 'Anomaly detection', href: '#' },
                 { title: 'Data frame analytics', href: '#' },
@@ -147,13 +147,13 @@ export const Playground: Story = {
               {
                 title: 'Standalone item with long name',
                 href: '#',
-                icon: 'iInCircle',
+                icon: 'info',
               },
             ]),
             ...renderGroup('Content', [
-              { title: 'Indices', href: '#', icon: 'iInCircle' },
-              { title: 'Transforms', href: '#', icon: 'iInCircle' },
-              { title: 'Indexing API', href: '#', icon: 'iInCircle' },
+              { title: 'Indices', href: '#', icon: 'info' },
+              { title: 'Transforms', href: '#', icon: 'info' },
+              { title: 'Indexing API', href: '#', icon: 'info' },
             ]),
             ...renderGroup('Security', [
               { title: 'API keys', href: '#', icon: 'gear' },

packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -4713,6 +4713,34 @@ exports[`EuiIcon props type infinity is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type info is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="info"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clip-rule="evenodd"
+    d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Zm0 1A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"
+    fill-rule="evenodd"
+  />
+  <path
+    d="M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  />
+  <path
+    clip-rule="evenodd"
+    d="M6.5 7h2v4H10v1H6v-1h1.5V8h-1V7Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type inputOutput is rendered 1`] = `
 <svg
   aria-hidden="true"

packages/eui/src/components/icon/assets/iInCircle.tsx renamed to packages/eui/src/components/icon/assets/info.tsx

@@ -14,7 +14,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-const EuiIconIInCircle = ({
+const EuiIconInfo = ({
   title,
   titleId,
   ...props
@@ -41,4 +41,4 @@ const EuiIconIInCircle = ({
     />
   </svg>
 );
-export const icon = EuiIconIInCircle;
+export const icon = EuiIconInfo;

packages/eui/src/components/icon/icon_glyphs.a11y.tsx

@@ -119,7 +119,7 @@ describe('EuiIcons', () => {
       'heatmap',
       'help',
       'home',
-      'iInCircle',
+      'info',
       'image',
       'importAction',
       'indexClose',

packages/eui/src/components/icon/icon_map.ts

@@ -192,7 +192,8 @@ export const typeToPathMap = {
   heatmap: 'heatmap',
   help: 'help',
   home: 'home',
-  iInCircle: 'iInCircle',
+  iInCircle: 'info', // NOTE: To be deprecated in favor of `info`
+  info: 'info',
   image: 'image',
   importAction: 'import',
   index: 'index',

packages/eui/src/components/icon/svgs/iInCircle.svg renamed to packages/eui/src/components/icon/svgs/info.svg

@@ -54,11 +54,7 @@ export const Playground: Story = {
     iconType: 'logoKibana',
     description: 'Example of a description.',
     children: (
-      <EuiCallOut
-        size="s"
-        iconType="iInCircle"
-        title="Example of custom children"
-      />
+      <EuiCallOut size="s" iconType="info" title="Example of custom children" />
     ),
     rightSideItems: [
       <EuiButton fill>Add something</EuiButton>,

packages/eui/src/components/page/page_header/page_header_content.stories.tsx

@@ -193,7 +193,7 @@ describe('EuiTableHeaderCell', () => {
         <EuiTableHeaderCell
           tooltipProps={{
             content: 'This is the content of the tooltip',
-            icon: 'iInCircle',
+            icon: 'info',
             iconProps: {
               'data-test-subj': 'icon',
             },
@@ -208,7 +208,7 @@ describe('EuiTableHeaderCell', () => {
 
       expect(getByTestSubject('icon')).toHaveAttribute(
         'data-euiicon-type',
-        'iInCircle'
+        'info'
       );
 
       fireEvent.focus(getByTestSubject('icon'));
@@ -224,7 +224,7 @@ describe('EuiTableHeaderCell', () => {
         <EuiTableHeaderCell
           tooltipProps={{
             content: 'This is the content of the tooltip',
-            icon: 'iInCircle',
+            icon: 'info',
             iconProps: {
               'data-test-subj': 'icon',
             },
@@ -240,7 +240,7 @@ describe('EuiTableHeaderCell', () => {
 
       expect(getByTestSubject('icon')).toHaveAttribute(
         'data-euiicon-type',
-        'iInCircle'
+        'info'
       );
 
       fireEvent.focus(getByTestSubject('tableHeaderSortButton'));

packages/eui/src/components/table/table_header_cell.test.tsx

@@ -283,7 +283,7 @@ export default () => {
           description="Example of a short card description."
           footer={
             <EuiButtonEmpty
-              iconType="iInCircle"
+              iconType="info"
               size="xs"
               onClick={detailsClicked}
               aria-label="See more details about Sketch"
@@ -304,7 +304,7 @@ export default () => {
           description="Example of a longer card description. See how the footers stay lined up."
           footer={
             <EuiButtonEmpty
-              iconType="iInCircle"
+              iconType="info"
               size="xs"
               onClick={detailsClicked}
               aria-label="See more details about Google"
@@ -325,7 +325,7 @@ export default () => {
           description="Example of a short card description."
           footer={
             <EuiButtonEmpty
-              iconType="iInCircle"
+              iconType="info"
               size="xs"
               onClick={detailsClicked}
               aria-label="See more details about Not Adobe"

packages/website/docs/components/containers/card.mdx

@@ -207,7 +207,7 @@ export default () => {
       {showCallOut ? (
         <EuiCallOut
           onDismiss={onDismiss}
-          iconType="iInCircle"
+          iconType="info"
           title={
             showTitle
               ? 'You can dismiss this callout by clicking the Close button in the top right corner'

packages/website/docs/components/display/callout.mdx

@@ -122,7 +122,7 @@ export const iconTypes: Array<IconType> = [
   'heatmap',
   'help',
   'home',
-  'iInCircle',
+  'info',
   'image',
   'importAction',
   'index',

packages/website/docs/components/display/icons/icon_types.ts

@@ -224,7 +224,7 @@ export default () => {
           Pass a position utility class via <EuiCode>iconProps</EuiCode> to
           shift for better alignment.
           <EuiIconTip
-            type="iInCircle"
+            type="info"
             color="subdued"
             content={
               <span>

packages/website/docs/components/display/tooltip.mdx

@@ -54,8 +54,8 @@ export const tooltipProps = {
 | Option exclusion | ❌ | ❌ | ✅ | ❌ |
 | Customizable option display | ❌ | ✅ | ✅ | ✅ |
 | Customizable loading/error messages | ❌ | ❌ | ✅ | ❌ |
-| Searchable | ❌ <EuiIconTip type="iInCircle" content="Native select behavior will jump to options based on user typing" {...tooltipProps} /> | ❌ | ✅ | ✅ |
-| `disabled` state | ✅ <EuiIconTip type="iInCircle" content="Disables whole component" {...tooltipProps} /> | ✅ <EuiIconTip type="iInCircle" content="Disables individual option" {...tooltipProps} /> | ✅ <EuiIconTip type="iInCircle" content="Disables individual option" {...tooltipProps} /> | ✅ <EuiIconTip type="iInCircle" content="Disables whole component" {...tooltipProps} /> |
+| Searchable | ❌ <EuiIconTip type="info" content="Native select behavior will jump to options based on user typing" {...tooltipProps} /> | ❌ | ✅ | ✅ |
+| `disabled` state | ✅ <EuiIconTip type="info" content="Disables whole component" {...tooltipProps} /> | ✅ <EuiIconTip type="info" content="Disables individual option" {...tooltipProps} /> | ✅ <EuiIconTip type="info" content="Disables individual option" {...tooltipProps} /> | ✅ <EuiIconTip type="info" content="Disables whole component" {...tooltipProps} /> |
 | `readOnly` state | ❌ | ✅ | ❌ | ❌ |
-| Built in utility function for clearing user input | ❌ | ❌ | ✅ <EuiIconTip type="iInCircle" content="Clears search input" {...tooltipProps} /> | ✅ <EuiIconTip type="iInCircle" content="Clears all selections" {...tooltipProps} /> |
+| Built in utility function for clearing user input | ❌ | ❌ | ✅ <EuiIconTip type="info" content="Clears search input" {...tooltipProps} /> | ✅ <EuiIconTip type="info" content="Clears all selections" {...tooltipProps} /> |
 | Supports virtualization | ❌ | ❌ | ✅ | ✅ |

packages/website/docs/components/forms/selection/overview.mdx

@@ -46,7 +46,7 @@ Concepts are more than quick definitions. They help users understand how somethi
 
 
 **Interaction**
-- Information icon <Icon type="iInCircle" title="information icon" /> with the `primary` color directly following the setting to explain.
+- Information icon <Icon type="info" title="information icon" /> with the `primary` color directly following the setting to explain.
 - On click, a [popover](../components/containers/popover.mdx) appears. It is dismissed by a second click outside of the popover area.
 
 **Popover content**

packages/website/docs/patterns/help-content.mdx

@@ -51,7 +51,7 @@ If the wrapped element is **focusable**, you must use the `showOnFocus` prop to
       <EuiScreenReaderOnly showOnFocus>
         <span>
           <EuiToolTip content="Information">
-            <EuiButtonIcon iconType="iInCircle" aria-label="Information" />
+            <EuiButtonIcon iconType="info" aria-label="Information" />
           </EuiToolTip>
         </span>
       </EuiScreenReaderOnly>