feat(Icon)!: introduce 2.0 component (#1925)

- add newly updated spritemap - add tests and snapshots - add new icons - update naming scheme for existing icons - use Icon (v2) in V2 components - mark files for proper export
chanzuckerberg · Apr 30, 2024 · 3e40638 · 3e40638
1 parent 9021f5c
commit 3e40638
Show file tree

Hide file tree

Showing 39 changed files with 3,432 additions and 94 deletions.
diff --git a/src/components/Accordion/Accordion-v2.tsx b/src/components/Accordion/Accordion-v2.tsx
@@ -6,7 +6,7 @@ import { ENTER_KEYCODE, SPACEBAR_KEYCODE } from '../../util/keycodes';
 import type { Size } from '../../util/variant-types';
 
 import Heading, { type HeadingElement } from '../Heading';
-import Icon, { type IconName } from '../Icon';
+import { type IconNameV2 as IconName, IconV2 as Icon } from '../Icon';
 import Text from '../Text';
 
 import styles from './Accordion-v2.module.css';
@@ -77,7 +77,7 @@ type AccordionButtonProps = {
  *
  * **Default is `"expand-more"`**.
  */
- trailingIcon?: Extract<IconName, 'expand-more'>;
+ trailingIcon?: Extract<IconName, 'chevron-down'>;
 };
 
 type AccordionPanelProps = {
@@ -159,7 +159,7 @@ const AccordionButton = ({
  headingAs,
  leadingIcon,
  title,
- trailingIcon = 'expand-more',
+ trailingIcon = 'chevron-down',
  subtitle,
  onClose,
  onOpen,

diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts
@@ -1,2 +1,2 @@
 export { Accordion as default } from './Accordion';
-export { Accordion as AccordionV2 } from './Accordion';
+export { Accordion as AccordionV2 } from './Accordion-v2';
diff --git a/src/components/BannerNotification/BannerNotification.tsx b/src/components/BannerNotification/BannerNotification.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 
-import getIconNameFromStatus from '../../util/getIconNameFromStatus';
+import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
 import type { Status } from '../../util/variant-types';
 import Heading from '../Heading';
-import Icon from '../Icon';
+import { IconV2 as Icon } from '../Icon';
 import Text from '../Text';
 
 import styles from './BannerNotification.module.css';

diff --git a/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap b/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap
@@ -121,7 +121,7 @@ exports[`<BannerNotification /> Default story renders snapshot 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
- d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
+ d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
  />
  </svg>
  <div
@@ -174,7 +174,7 @@ exports[`<BannerNotification /> Dismissable story renders snapshot 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
- d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
+ d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
  />
  </svg>
  <div
@@ -301,7 +301,7 @@ exports[`<BannerNotification /> Warning story renders snapshot 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
- d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
+ d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
  />
  </svg>
  <div

diff --git a/src/components/Button/Button-v2.tsx b/src/components/Button/Button-v2.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 import type { Size } from '../../util/variant-types';
-import Icon from '../Icon';
-import type { IconName } from '../Icon';
+import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
 import LoadingIndicator from '../LoadingIndicator';
 
 import styles from './Button-v2.module.css';
@@ -94,7 +93,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonV2Props>(
  children,
  className,
  context,
- icon = 'empty-circle',
+ icon = 'circle',
  iconLayout = 'none',
  isDisabled,
  isFullWidth,

diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
@@ -185,16 +185,8 @@ exports[`<Button /> IconLayouts story renders snapshot 1`] = `
  width="1rem"
  xmlns="http://www.w3.org/2000/svg"
  >
- <circle
- cx="12"
- cy="12"
- r="8"
- />
- <circle
- cx="12"
- cy="12"
- fill="var(--eds-theme-color-icon-neutral-default-inverse)"
- r="6"
+ <path
+ d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
  />
  </svg>
  Left
@@ -218,16 +210,8 @@ exports[`<Button /> IconLayouts story renders snapshot 1`] = `
  width="1rem"
  xmlns="http://www.w3.org/2000/svg"
  >
- <circle
- cx="12"
- cy="12"
- r="8"
- />
- <circle
- cx="12"
- cy="12"
- fill="var(--eds-theme-color-icon-neutral-default-inverse)"
- r="6"
+ <path
+ d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
  />
  </svg>
  </span>
@@ -250,16 +234,8 @@ exports[`<Button /> IconLayouts story renders snapshot 1`] = `
  width="1.5rem"
  xmlns="http://www.w3.org/2000/svg"
  >
- <circle
- cx="12"
- cy="12"
- r="8"
- />
- <circle
- cx="12"
- cy="12"
- fill="var(--eds-theme-color-icon-neutral-default-inverse)"
- r="6"
+ <path
+ d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
  />
  </svg>
  </span>

diff --git a/src/components/Card/Card-v2.stories.tsx b/src/components/Card/Card-v2.stories.tsx
@@ -91,7 +91,7 @@ export const WithFullHeaderAndIcon: StoryObj<Args> = {
  <>
  <Card.Header
  eyebrow="Recommended for you"
- icon="account-circle"
+ icon="person-encircled"
  subTitle="Get to know your colleagues"
  title="Question of the day"
  />
@@ -133,7 +133,7 @@ function CardMenu() {
  <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
  Trigger Action
  </Menu.Item>
- <Menu.Item disabled href="https://example.org/" icon="warning">
+ <Menu.Item disabled href="https://example.org/" icon="warning-filled">
  Not Possible (disabled)
  </Menu.Item>
  </Menu.Items>
@@ -148,7 +148,7 @@ export const WithSmallFullHeaderAndIcon: StoryObj<Args> = {
  <Card.Header
  action={<CardMenu />}
  eyebrow="Recommended for you"
- icon="account-circle"
+ icon="person-encircled"
  size="sm"
  subTitle="Get to know your colleagues"
  title="Question of the day"

diff --git a/src/components/Card/Card-v2.tsx b/src/components/Card/Card-v2.tsx
@@ -3,9 +3,8 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
 import type { Size } from '../../util/variant-types';
-import type { IconName } from '../Icon';
+import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
 
-import Icon from '../Icon';
 import Text from '../Text';
 
 import styles from './Card-v2.module.css';

diff --git a/src/components/FieldNote/FieldNote-v2.tsx b/src/components/FieldNote/FieldNote-v2.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
-import Icon, { type IconName } from '../Icon';
+import { IconV2 as Icon, type IconNameV2 as IconName } from '../Icon';
 import styles from './FieldNote-v2.module.css';
 
 export interface Props {
@@ -64,7 +64,7 @@ export const FieldNote = ({
  if (isError) {
  iconToUse = 'dangerous';
  } else if (isWarning) {
- iconToUse = 'warning';
+ iconToUse = 'warning-filled';
  } else if (icon) {
  iconToUse = icon;
  }

diff --git a/src/components/Icon/Icon-v2.module.css b/src/components/Icon/Icon-v2.module.css
@@ -0,0 +1,27 @@
+/* ------------------------------------*\
+ # ICON
+\*------------------------------------ */
+
+/**
+ * Small graphic that represents functionality.
+ */
+.icon {
+ display: inline-block;
+ /**
+ * Size Priority:
+ * 1: --icon-size, passed through props
+ * 2: --icon-size-default, determined by context (text, button, pill)
+ * default: 1em, same size as surrounding text
+ *
+ * Inspired by https://www.youtube.com/watch?v=EDyiaDJJu-4
+ */
+ width: var(--icon-size, var(--icon-size-default, 1em));
+ height: var(--icon-size, var(--icon-size-default, 1em));
+}
+
+/**
+ * A block icon fills 100% of the width of its container
+ */
+.icon--full-width {
+ display: block;
+}