feat: v5 icons

[denkristoffer]

Purpose of PR

Forma 36 v5 icons alpha.

Storybook here: https://5fd1dda724cc620021ace8c5-xtuzuwaspq.chromatic.com/?path=/story/components-icons--overview

How to review

Most of the changed files are deletions of the old icons. Actual changes are the following files:

Click to see the list

• packages/components/icon/src/Icon.tsx
• packages/components/icon/src/types.ts
• The utilities:
  • packages/components/icon/src/utils/generateComponentWithVariants.ts
  • packages/components/icon/src/utils/generateForma36Icon.tsx
  • packages/components/icon/src/utils/generateIconComponent.tsx
  • packages/components/icon/src/utils/wrapPhosphorIcon.tsx
• Phosphor icons:
  • packages/components/icons/src/PhosphorIcons.tsx
• Custom icons:
  • packages/components/icons/src/EmbeddedBlockIcon.tsx
  • packages/components/icons/src/EmbeddedLineIcon.tsx
  • packages/components/icons/src/EntryIcon.tsx
  • packages/components/icons/src/EnvironmentAliasIcon.tsx
  • packages/components/icons/src/EnvironmentIcon.tsx
  • packages/components/icons/src/ReleaseIcon.tsx
  • packages/components/icons/src/RichTextIcon.tsx
  • packages/components/icons/src/TextSubscriptIcon.tsx
  • packages/components/icons/src/TextSuperscriptIcon.tsx
  • packages/components/icons/src/WorkflowsIcon.tsx

What's new

• Icons are based on Phosphor icons
• Three icon sizes:
  • Tiny: 14px
  • Small: 16px
  • Medium: 20px
• Variants are gone, instead icons take a new color prop where you can use our tokens.
• The trimmed prop is gone too!
• Icons take an isActive prop that renders an active state. This state has a filled look, entirely different from the default icon.

Approach

Generation & utils

This is a full implementation of the proposal from #2637. It adds a few icon utility functions we can use going forward.

generateIconComponent is basically our existing generateIcon function, it returns a Box component with an SVG tag.

generateComponentWithVariants makes it easier to create a component that returns different sub-components based on which variant you pass the original component. This let's us return one type of icon when the isActive prop is true an another type of icon when it's false. This function can be extended in the future if we need to support other variants.

wrapPhosphorIcon is a function that takes an icon imported from @phosphor-icons/react, wraps it in our own Icon component, and makes sure to pass the necessary props to the Phosphor icon when we want to override size or colour.

generateForma36Icon is the last level abstraction needed. It takes an icon imported from @phosphor-icons/react and uses wrapPhosphorIcon and generateComponentWithVariants to create a fully-fledged icon component that behaves as our own icons do.

Package compiling/build

Unless changed before we merge this work, changes were made for the icon and icons packages and documented here 0b047d5#diff-40f60e1037245d7b8a98a7325d53890a717da9979adeb54a61a795c4ba07f9c9

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	467.53 KB (+258.05% 🔺)	9.4 s (+258.05% 🔺)	115 ms (+103.02% 🔺)	9.5 s
Module	463.82 KB (+263.86% 🔺)	9.3 s (+263.86% 🔺)	138 ms (+188.85% 🔺)	9.5 s

[denkristoffer]

I'm closing this for the next branch: https://github.com/contentful/forma-36/tree/next, let's keep future work there.