feat: v5 icons #2647
Draft
feat: v5 icons #2647
+4,318
−40,056
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
a21e68b
to
c9dfdf5
Compare
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
c9dfdf5
to
919f5fc
Compare
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
919f5fc
to
97288af
Compare
Closed
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
97288af
to
f8a0b44
Compare
size-limit report 📦
|
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
d58b1ba
to
4cf7dc4
Compare
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
4cf7dc4
to
d706d0e
Compare
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
d706d0e
to
4b76968
Compare
denkristoffer
force-pushed
the
feat/icons-v5
branch
from
4b76968
to
ed3b8fc
Compare
* fix: pass testId prop as data-test-id to element * chore: bump icons-alpha version * chore: bump icons alpha version
* refactor: properly pass down the props from Icon to Phosphor * chore: bump icon and icons package version
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.tsxpackages/components/icon/src/types.tspackages/components/icon/src/utils/generateComponentWithVariants.tspackages/components/icon/src/utils/generateForma36Icon.tsxpackages/components/icon/src/utils/generateIconComponent.tsxpackages/components/icon/src/utils/wrapPhosphorIcon.tsxpackages/components/icons/src/PhosphorIcons.tsxpackages/components/icons/src/EmbeddedBlockIcon.tsxpackages/components/icons/src/EmbeddedLineIcon.tsxpackages/components/icons/src/EntryIcon.tsxpackages/components/icons/src/EnvironmentAliasIcon.tsxpackages/components/icons/src/EnvironmentIcon.tsxpackages/components/icons/src/ReleaseIcon.tsxpackages/components/icons/src/RichTextIcon.tsxpackages/components/icons/src/TextSubscriptIcon.tsxpackages/components/icons/src/TextSuperscriptIcon.tsxpackages/components/icons/src/WorkflowsIcon.tsxWhat's new
colorprop where you can use our tokens.trimmedprop is gone too!isActiveprop 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.
generateIconComponentis basically our existinggenerateIconfunction, it returns aBoxcomponent with an SVG tag.generateComponentWithVariantsmakes 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 theisActiveprop istruean another type of icon when it'sfalse. This function can be extended in the future if we need to support other variants.wrapPhosphorIconis a function that takes an icon imported from@phosphor-icons/react, wraps it in our ownIconcomponent, and makes sure to pass the necessary props to the Phosphor icon when we want to override size or colour.generateForma36Iconis the last level abstraction needed. It takes an icon imported from@phosphor-icons/reactand useswrapPhosphorIconandgenerateComponentWithVariantsto 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
iconandiconspackages and documented here 0b047d5#diff-40f60e1037245d7b8a98a7325d53890a717da9979adeb54a61a795c4ba07f9c9