Skip to content

Commit af335d3

Browse files
joshfarrantrezrah
joshfarrant
and
rezrah
authored
Integrate Icon component into Bento and Card (#798)
* fix missing dark mode styles in Icon component * use Icon component in Card * use Icon component in Bento * regenerate snapshots * fix ts error * add changesets * increase padding on size 20 and 24 icons * regenerate snapshots * correct icon color * update snapshots * restore instantiated JSX as prop values and remove breaking change notice * restore storybook example for native svg elements --------- Co-authored-by: Reza Rahman <[email protected]>
1 parent 141ff4f commit af335d3

File tree

55 files changed

+132
-412
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+132
-412
lines changed

‎.changeset/little-bugs-greet.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/brand-primitives': minor
3+
---
4+
5+
⚠️ Breaking change: Removed all Card-icon-background/color tokens (eg `--brand-Card-icon-background-blue`, `--brand-Card-icon-color-orange`)

‎.changeset/many-rivers-drop.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
- Fixed a bug where the `Bento` `leadingVisual` prop wouldn't honour the provided `size`.
6+
- Updated the `Card.Icon` internal implementation to use the new `Icon` component.

‎apps/docs/content/components/Card/react.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ You can add an `icon` to enhance the visual context. We recommend using an [Octi
8383

8484
```jsx live
8585
<Card href="https://github.com">
86-
<Card.Icon icon={<CopilotIcon />} color="purple" hasBackground />
86+
<Card.Icon icon={CopilotIcon} color="purple" hasBackground />
8787
<Card.Heading>Code search & code view</Card.Heading>
8888
<Card.Description>
8989
Enables you to rapidly search, navigate, and understand code, right from
@@ -113,7 +113,7 @@ Combine `Icon` and `Label` when you need to add more metadata or context to the
113113

114114
```jsx live
115115
<Card href="https://github.com">
116-
<Card.Icon icon={<CopilotIcon />} color="green" hasBackground />
116+
<Card.Icon icon={CopilotIcon} color="green" hasBackground />
117117
<Card.Label color="blue-purple">Beta</Card.Label>
118118
<Card.Heading>Code search & code view</Card.Heading>
119119
<Card.Description>
@@ -153,7 +153,7 @@ The color of the lit area corrosponds to the nearest active, primary accent colo
153153
<Box padding="spacious" backgroundColor="default">
154154
<Stack direction="horizontal" padding="none">
155155
<Card href="https://github.com">
156-
<Card.Icon icon={<CopilotIcon />} color="pink" hasBackground />
156+
<Card.Icon icon={CopilotIcon} color="pink" hasBackground />
157157
<Card.Heading>Code search & code view</Card.Heading>
158158
<Card.Description>
159159
Enables you to rapidly search, navigate, and understand code, right
@@ -166,7 +166,7 @@ The color of the lit area corrosponds to the nearest active, primary accent colo
166166
['--brand-color-accent-primary']: 'var(--base-color-scale-lime-2)',
167167
}}
168168
>
169-
<Card.Icon icon={<ZapIcon />} color="lime" hasBackground />
169+
<Card.Icon icon={ZapIcon} color="lime" hasBackground />
170170
<Card.Heading>Code search & code view</Card.Heading>
171171
<Card.Description>
172172
Enables you to rapidly search, navigate, and understand code, right
@@ -209,21 +209,21 @@ Use the `Stack` component to stack multiple cards horizontally or vertically.
209209
gap="normal"
210210
>
211211
<Card href="https://github.com">
212-
<Card.Icon icon={<CopilotIcon />} color="indigo" hasBackground />
212+
<Card.Icon icon={CopilotIcon} color="indigo" hasBackground />
213213
<Card.Heading>Heading</Card.Heading>
214214
<Card.Description>
215215
Everything you need to know about getting started with GitHub Actions.
216216
</Card.Description>
217217
</Card>
218218
<Card href="https://github.com">
219-
<Card.Icon icon={<RocketIcon />} color="purple" hasBackground />
219+
<Card.Icon icon={RocketIcon} color="purple" hasBackground />
220220
<Card.Heading>Heading</Card.Heading>
221221
<Card.Description>
222222
Everything you need to know about getting started with GitHub Actions.
223223
</Card.Description>
224224
</Card>
225225
<Card href="https://github.com">
226-
<Card.Icon icon={<GitBranchIcon />} color="teal" hasBackground />
226+
<Card.Icon icon={GitBranchIcon} color="teal" hasBackground />
227227
<Card.Heading>Heading</Card.Heading>
228228
<Card.Description>
229229
Everything you need to know about getting started with GitHub Actions.
@@ -246,7 +246,7 @@ Use the `Stack` component to stack multiple cards horizontally or vertically.
246246

247247
### Card.Image
248248

249-
Forwards all the props from the [Image component](/components/Image), including `src`, `alt`, and `aspecRatio`.
249+
Forwards all the props from the [Image component](/components/Image), including `src`, `alt`, and `aspectRatio`.
250250

251251
### Card.Icon
252252

‎apps/docs/content/getting-started/animation.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ Alternatively, use `delay` to stagger animations on adjacent elements if this fe
178178
>
179179
<Animate animate="scale-in-up">
180180
<Card href="https://github.com">
181-
<Card.Icon icon={<CopilotIcon />} color="indigo" hasBackground />
181+
<Card.Icon icon={CopilotIcon} color="indigo" hasBackground />
182182
<Card.Label>Limited</Card.Label>
183183
<Card.Heading>
184184
Collaboration is the key to DevOps success
@@ -198,7 +198,7 @@ Alternatively, use `delay` to stagger animations on adjacent elements if this fe
198198
>
199199
<Animate animate="scale-in-up">
200200
<Card href="https://github.com">
201-
<Card.Icon icon={<RocketIcon />} hasBackground color="blue" />
201+
<Card.Icon icon={RocketIcon} hasBackground color="blue" />
202202
<Card.Label>Limited</Card.Label>
203203
<Card.Heading>GitHub Actions cheat sheet and more</Card.Heading>
204204
<Card.Description>

‎package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/design-tokens/scripts/build-tokens.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
271271
`tokens/functional/components/tooltip/colors.json`,
272272
`tokens/functional/components/river-story-scroll/colors.js`,
273273
`tokens/functional/components/pricing-options/colors.json`,
274+
`tokens/functional/components/icon/colors.json`,
274275
]
275276

276277
for (const path of filesForColorModes) {

‎packages/design-tokens/src/tokens/functional/components/card/colors.json

Lines changed: 0 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -5,124 +5,6 @@
55
"value": "var(--brand-color-canvas-default)",
66
"dark": "var(--brand-color-canvas-subtle)"
77
}
8-
},
9-
"icon": {
10-
"background": {
11-
"default": {
12-
"value": "var(--base-color-scale-gray-0)",
13-
"dark": "var(--base-color-scale-gray-6)"
14-
},
15-
"blue": {
16-
"value": "var(--base-color-scale-blue-0)",
17-
"dark": "var(--base-color-scale-blue-8)"
18-
},
19-
"coral": {
20-
"value": "var(--base-color-scale-coral-0)",
21-
"dark": "var(--base-color-scale-coral-8)"
22-
},
23-
"green": {
24-
"value": "var(--base-color-scale-green-0)",
25-
"dark": "var(--base-color-scale-green-8)"
26-
},
27-
"gray": {
28-
"value": "var(--base-color-scale-gray-0)",
29-
"dark": "var(--base-color-scale-gray-6)"
30-
},
31-
"indigo": {
32-
"value": "var(--base-color-scale-indigo-0)",
33-
"dark": "var(--base-color-scale-indigo-8)"
34-
},
35-
"lemon": {
36-
"value": "var(--base-color-scale-lemon-0)",
37-
"dark": "var(--base-color-scale-lemon-8)"
38-
},
39-
"lime": {
40-
"value": "var(--base-color-scale-lime-0)",
41-
"dark": "var(--base-color-scale-lime-8)"
42-
},
43-
"orange": {
44-
"value": "var(--base-color-scale-orange-0)",
45-
"dark": "var(--base-color-scale-orange-8)"
46-
},
47-
"pink": {
48-
"value": "var(--base-color-scale-pink-0)",
49-
"dark": "var(--base-color-scale-pink-8)"
50-
},
51-
"purple": {
52-
"value": "var(--base-color-scale-purple-0)",
53-
"dark": "var(--base-color-scale-purple-8)"
54-
},
55-
"red": {
56-
"value": "var(--base-color-scale-red-0)",
57-
"dark": "var(--base-color-scale-red-8)"
58-
},
59-
"teal": {
60-
"value": "var(--base-color-scale-teal-0)",
61-
"dark": "var(--base-color-scale-teal-8)"
62-
},
63-
"yellow": {
64-
"value": "var(--base-color-scale-yellow-0)",
65-
"dark": "var(--base-color-scale-yellow-8)"
66-
}
67-
},
68-
"color": {
69-
"default": {
70-
"value": "var(--brand-color-scale-gray-5)",
71-
"dark": "var(--brand-color-scale-gray-2)"
72-
},
73-
"blue": {
74-
"value": "var(--base-color-scale-blue-5)",
75-
"dark": "var(--base-color-scale-blue-2)"
76-
},
77-
"coral": {
78-
"value": "var(--base-color-scale-coral-5)",
79-
"dark": "var(--base-color-scale-coral-2)"
80-
},
81-
"green": {
82-
"value": "var(--base-color-scale-green-5)",
83-
"dark": "var(--base-color-scale-green-2)"
84-
},
85-
"gray": {
86-
"value": "var(--base-color-scale-gray-6)",
87-
"dark": "var(--base-color-scale-gray-2)"
88-
},
89-
"indigo": {
90-
"value": "var(--base-color-scale-indigo-5)",
91-
"dark": "var(--base-color-scale-indigo-2)"
92-
},
93-
"lemon": {
94-
"value": "var(--base-color-scale-lemon-5)",
95-
"dark": "var(--base-color-scale-lemon-2)"
96-
},
97-
"lime": {
98-
"value": "var(--base-color-scale-lime-5)",
99-
"dark": "var(--base-color-scale-lime-2)"
100-
},
101-
"orange": {
102-
"value": "var(--base-color-scale-orange-5)",
103-
"dark": "var(--base-color-scale-orange-2)"
104-
},
105-
"pink": {
106-
"value": "var(--base-color-scale-pink-5)",
107-
"dark": "var(--base-color-scale-pink-2)"
108-
},
109-
"purple": {
110-
"value": "var(--base-color-scale-purple-5)",
111-
"dark": "var(--base-color-scale-purple-2)"
112-
},
113-
"red": {
114-
"value": "var(--base-color-scale-red-5)",
115-
"dark": "var(--base-color-scale-red-2)"
116-
},
117-
"teal": {
118-
"value": "var(--base-color-scale-teal-5)",
119-
"dark": "var(--base-color-scale-teal-2)"
120-
},
121-
"yellow": {
122-
"value": "var(--base-color-scale-yellow-5)",
123-
"dark": "var(--base-color-scale-yellow-2)"
124-
}
125-
}
1268
}
1279
}
12810
}

‎packages/design-tokens/src/tokens/functional/components/icon/colors.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
},
6161
"color": {
6262
"default": {
63-
"value": "var(--base-color-scale-gray-5)",
64-
"dark": "var(--base-color-scale-gray-2)"
63+
"value": "var(--brand-color-text-default)",
64+
"dark": "var(--brand-color-text-default)"
6565
},
6666
"blue": {
6767
"value": "var(--base-color-scale-blue-5)",

‎packages/react/src/Bento/Bento.stories.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
22
import {Meta} from '@storybook/react'
3-
import {Bento} from '.'
4-
import {Link} from '../Link'
5-
63
import {CopilotIcon} from '@primer/octicons-react'
4+
import {Bento} from '.'
5+
import {Link} from '../'
6+
import {Icon} from '../Icon'
77

88
export default {
99
title: 'Components/Bento',
@@ -22,7 +22,10 @@ export default {
2222
export const Default = () => (
2323
<Bento>
2424
<Bento.Item rowSpan={{xsmall: 4, small: 5}} flow={{xsmall: 'row', small: 'row'}}>
25-
<Bento.Content padding={{xsmall: 'normal', small: 'spacious'}} leadingVisual={<CopilotIcon />}>
25+
<Bento.Content
26+
padding={{xsmall: 'normal', small: 'spacious'}}
27+
leadingVisual={<Icon icon={CopilotIcon} color="gray" />}
28+
>
2629
<Bento.Heading>
2730
Push what&apos;s possible with GitHub Copilot, the world&apos;s most trusted and widely adopted AI developer
2831
tool.

‎packages/react/src/Bento/Bento.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, {ReactHTML, ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'
22
import clsx from 'clsx'
3-
import {Icon, IconProps} from '@primer/octicons-react'
43
import {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'
54
import type {BaseProps} from '../component-helpers'
65
import findElementInChildren from '../findElementInChildren'
76

87
import {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image, Label} from '../'
98

9+
import type {IconProps} from '../Icon'
10+
1011
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'
1112
import styles from './Bento.module.css'
1213

@@ -169,7 +170,7 @@ const Item = ({
169170
}
170171

171172
type BentoContentProps = {
172-
leadingVisual?: ReactElement | Icon
173+
leadingVisual?: ReactElement<IconProps>
173174
padding?: Padding | ResponsivePadding
174175
verticalAlign?: Align | ResponsiveAlign
175176
horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>
@@ -203,9 +204,9 @@ const Content = ({
203204
return (
204205
<div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>
205206
{React.isValidElement(LeadingVisual) &&
206-
React.cloneElement(LeadingVisual as React.ReactElement<IconProps>, {
207+
React.cloneElement(LeadingVisual as ReactElement<IconProps>, {
207208
className: styles['Bento__Content-icon'],
208-
size: LeadingVisual['size'] || 44,
209+
size: LeadingVisual.props.size || 44,
209210
})}
210211

211212
{React.isValidElement(LabelChild) &&

‎packages/react/src/Bento/Bento.visual.spec.ts-snapshots/Visual-Comparison-Bento-Bento-Default-1-linux.png

-41 Bytes
Loading

0 commit comments

Comments
 (0)