-
Notifications
You must be signed in to change notification settings - Fork 33
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Integrate Icon component into Bento and Card #798
Merged
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
99ddcb7
fix missing dark mode styles in Icon component
joshfarrant ae3e707
use Icon component in Card
joshfarrant ad72f52
use Icon component in Bento
joshfarrant 62804b0
regenerate snapshots
joshfarrant 80183da
fix ts error
joshfarrant 5762c3a
add changesets
joshfarrant c23f1a5
increase padding on size 20 and 24 icons
joshfarrant 0277f8a
regenerate snapshots
joshfarrant 55374fc
correct icon color
joshfarrant bed1f96
update snapshots
joshfarrant d65fa90
Merge branch 'main' of github.com:primer/brand into joshfarrant/integ…
rezrah 6acc735
restore instantiated JSX as prop values and remove breaking change no…
rezrah eb51421
restore storybook example for native svg elements
rezrah File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@primer/brand-primitives': minor | ||
--- | ||
|
||
⚠️ Breaking change: Removed all Card-icon-background/color tokens (eg `--brand-Card-icon-background-blue`, `--brand-Card-icon-color-orange`) |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@primer/react-brand': patch | ||
--- | ||
|
||
- Fixed a bug where the `Bento` `leadingVisual` prop wouldn't honour the provided `size`. | ||
- Updated the `Card.Icon` internal implementation to use the new `Icon` component. |
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 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 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 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 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 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
Binary file modified
BIN
-41 Bytes
(100%)
...ento.visual.spec.ts-snapshots/Visual-Comparison-Bento-Bento-Default-1-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does Icon still support passing the instantiated component, or only reference? I.e. if user wanted to customize values here, can they still do it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, that was removed by design after speaking with @danielguillan to avoid situations like this:
Since
Card.Icon
forwards all of its props to the provided icon, you could easily end up in these awkward situations where two props clash.Do you think this should be called out as a breaking change in the changeset?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for this example. Makes sense 👍
This is a breaking change if we don't allow instantiated JSX anymore, yeah. Unless there's a really important reason for it, we should continue to support both ways, as we have many instances in dotcom and elsewhere that use that approach and we can more easily work around it on our side than the users. In many of those instances, the user doesn't apply size too, so this is less of a risk IMO.
E.g.
Suggestion:
Update our docs and examples to show the reference approach (happy path), and ensure that instantiated JSX can continue to be passed for continuity. How does that sound?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Update for posterity.. I've pushed the changes ☝️ in this commit