Skip to content

Commit d18ec44

Browse files
rezrahrezrah
committed
make secondary the default 2nd button variant
1 parent 5a351d6 commit d18ec44

12 files changed

Lines changed: 54 additions & 38 deletions

File tree

‎.changeset/hero-button-group.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Migrate using the following approach:
1515
+ <Button as="a" href="#">
1616
+ Primary action
1717
+ </Button>
18-
+ <Button as="a" href="#" variant="secondary">
18+
+ <Button as="a" href="#">
1919
+ Secondary action
2020
+ </Button>
2121
+</Hero.ButtonGroup>

‎apps/next-docs/content/components/ButtonGroup/react.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {ActionMenu, Button, ButtonGroup} from '@primer/react-brand'
1919

2020
### Default
2121

22-
This is the default variant for the ButtonGroup component. The first item in the group uses the primary button variant and the second uses the subtle button variant.
22+
This is the default variant for the ButtonGroup component. The first item in the group uses the primary button variant and the second uses the secondary button variant.
2323

2424
```jsx live
2525
<ButtonGroup>

‎apps/next-docs/content/components/Hero/react.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {ActionMenu, Button, Hero} from '@primer/react-brand'
3737
<Button as="a" href="#">
3838
Primary action
3939
</Button>
40-
<Button as="a" href="#" variant="secondary">
40+
<Button as="a" href="#">
4141
Secondary action
4242
</Button>
4343
</Hero.ButtonGroup>
@@ -46,7 +46,7 @@ import {ActionMenu, Button, Hero} from '@primer/react-brand'
4646

4747
### Action menus
4848

49-
`Hero.ButtonGroup` accepts up to two `Button` or `ActionMenu` children and applies the primary variant to the first item and the subtle variant to the second. Set `variant` on `Button` or `ActionMenu.Button` to override it.
49+
`Hero.ButtonGroup` accepts up to two `Button` or `ActionMenu` children and applies the primary variant to the first item and the secondary variant to the second. Set `variant` on `Button` or `ActionMenu.Button` to override it.
5050

5151
```jsx live
5252
<Hero>

‎apps/next-docs/content/getting-started/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ import {Button, Hero} from '@primer/react-brand'
9898
<Button as="a" href="#">
9999
Primary action
100100
</Button>
101-
<Button as="a" href="#" variant="secondary">
101+
<Button as="a" href="#">
102102
Secondary action
103103
</Button>
104104
</Hero.ButtonGroup>

‎packages/react/src/ButtonGroup/ButtonGroup.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ describe('ButtonGroup', () => {
8282
expect(buttonEl.classList).toContain(expectedClass)
8383
})
8484

85-
it('applies primary variant automatically to the first button and subtle variant to second', () => {
85+
it('applies primary variant automatically to the first button and secondary variant to second', () => {
8686
const {getAllByRole} = render(
8787
<ButtonGroup>
8888
<Button>Primary Action</Button>
@@ -91,7 +91,7 @@ describe('ButtonGroup', () => {
9191
)
9292
const buttons = getAllByRole('button')
9393
expect(buttons[0].classList).toContain('Button--primary')
94-
expect(buttons[1].classList).toContain('Button--subtle')
94+
expect(buttons[1].classList).toContain('Button--secondary')
9595
})
9696

9797
it('does not render arrows on buttons by default', () => {
@@ -132,7 +132,7 @@ describe('ButtonGroup', () => {
132132

133133
const menuButton = getByRole('button', {name: 'More actions'})
134134
expect(menuButton).toHaveClass('Button--size-small')
135-
expect(menuButton).toHaveClass('Button--subtle')
135+
expect(menuButton).toHaveClass('Button--secondary')
136136

137137
fireEvent.click(menuButton)
138138

@@ -177,7 +177,7 @@ describe('ButtonGroup', () => {
177177
)
178178

179179
expect(getByRole('button', {name: 'Primary actions'})).toHaveClass('Button--primary')
180-
expect(getByRole('button', {name: 'Secondary actions'})).toHaveClass('Button--subtle')
180+
expect(getByRole('button', {name: 'Secondary actions'})).toHaveClass('Button--secondary')
181181
})
182182

183183
it('allows ActionMenu.Button variants to override automatic variants', () => {

‎packages/react/src/ButtonGroup/ButtonGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const ButtonGroup = forwardRef(
2323
)
2424
.slice(0, 2)
2525
.map((child, index) => {
26-
const variant = index === 0 ? 'primary' : 'subtle'
26+
const variant = index === 0 ? 'primary' : 'secondary'
2727

2828
if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {
2929
return React.cloneElement(child, {

‎packages/react/src/CTABanner/CTABanner.features.stories.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const Variants: Story = {
130130
turpis felis nam pulvinar risus elementum.
131131
</CTABanner.Description>
132132
<CTABanner.ButtonGroup>
133-
<Button variant="primary">Get started for free</Button>
133+
<Button>Get started for free</Button>
134134
<Button>View docs</Button>
135135
</CTABanner.ButtonGroup>
136136
</CTABanner>
@@ -142,7 +142,7 @@ export const Variants: Story = {
142142
</CTABanner.Description>
143143
<CTABanner.Image src={placeholderImage} alt="Blank image" />
144144
<CTABanner.ButtonGroup>
145-
<Button variant="primary">Get started for free</Button>
145+
<Button>Get started for free</Button>
146146
<Button>View docs</Button>
147147
</CTABanner.ButtonGroup>
148148
</CTABanner>
@@ -153,7 +153,7 @@ export const Variants: Story = {
153153
turpis felis nam pulvinar risus elementum.
154154
</CTABanner.Description>
155155
<CTABanner.ButtonGroup>
156-
<Button variant="primary">Get started for free</Button>
156+
<Button>Get started for free</Button>
157157
<Button>View docs</Button>
158158
</CTABanner.ButtonGroup>
159159
</CTABanner>
@@ -166,7 +166,7 @@ export const WithPrimaryButton: Story = {
166166
<CTABanner>
167167
<CTABanner.Heading size="2">Start coding in seconds with Codespaces</CTABanner.Heading>
168168
<CTABanner.ButtonGroup>
169-
<Button variant="primary">Get started for free</Button>
169+
<Button>Get started for free</Button>
170170
<Button>View docs</Button>
171171
</CTABanner.ButtonGroup>
172172
</CTABanner>
@@ -543,7 +543,7 @@ export const WithLogo: Story = {
543543
turpis felis nam pulvinar risus elementum.
544544
</CTABanner.Description>
545545
<CTABanner.ButtonGroup>
546-
<Button variant="primary">Get started for free</Button>
546+
<Button>Get started for free</Button>
547547
<Button>View docs</Button>
548548
</CTABanner.ButtonGroup>
549549
</CTABanner>
@@ -565,7 +565,7 @@ export const WithLogo: Story = {
565565
turpis felis nam pulvinar risus elementum.
566566
</CTABanner.Description>
567567
<CTABanner.ButtonGroup>
568-
<Button variant="primary">Get started for free</Button>
568+
<Button>Get started for free</Button>
569569
<Button>View docs</Button>
570570
</CTABanner.ButtonGroup>
571571
</CTABanner>
@@ -615,7 +615,7 @@ export const WithDuotoneText: Story = {
615615
Use <b>duotone emphasis</b> to highlight key parts of your headline. Wrap text in a <code>b</code> tag.
616616
</CTABanner.Description>
617617
<CTABanner.ButtonGroup>
618-
<Button variant="primary">Get started for free</Button>
618+
<Button>Get started for free</Button>
619619
<Button>View docs</Button>
620620
</CTABanner.ButtonGroup>
621621
</CTABanner>
@@ -627,7 +627,7 @@ export const WithDuotoneText: Story = {
627627
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
628628
</CTABanner.Description>
629629
<CTABanner.ButtonGroup>
630-
<Button variant="primary">Get started for free</Button>
630+
<Button>Get started for free</Button>
631631
<Button>View docs</Button>
632632
</CTABanner.ButtonGroup>
633633
<CTABanner.Image src={placeholderImage} alt="Blank image" />
@@ -640,7 +640,7 @@ export const WithDuotoneText: Story = {
640640
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
641641
</CTABanner.Description>
642642
<CTABanner.ButtonGroup>
643-
<Button variant="primary">Get started for free</Button>
643+
<Button>Get started for free</Button>
644644
<Button>View docs</Button>
645645
</CTABanner.ButtonGroup>
646646
</CTABanner>

‎packages/react/src/CTABanner/CTABanner.test.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,22 @@ describe('CTABanner', () => {
4848
expect(ctaBannerEl.classList).toContain(expectedCustomClass)
4949
})
5050

51+
it('applies primary and secondary variants to ButtonGroup actions', () => {
52+
const {getAllByRole} = render(
53+
<CTABanner>
54+
<CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
55+
<CTABanner.ButtonGroup>
56+
<Button>Primary Action</Button>
57+
<Button>Secondary Action</Button>
58+
</CTABanner.ButtonGroup>
59+
</CTABanner>,
60+
)
61+
62+
const buttons = getAllByRole('button')
63+
expect(buttons[0]).toHaveClass('Button--primary')
64+
expect(buttons[1]).toHaveClass('Button--secondary')
65+
})
66+
5167
it('renders the correct default heading type', () => {
5268
const expectedTag = 'h3'
5369
const headingText = 'This is your heading'

‎packages/react/src/Hero/Hero.examples.stories.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const CustomBackgroundBlockEndImage: Story = {
8585
<Button as="a" href="#">
8686
Primary action
8787
</Button>
88-
<Button as="a" href="#" variant="secondary">
88+
<Button as="a" href="#">
8989
Secondary action
9090
</Button>
9191
</Hero.ButtonGroup>
@@ -120,7 +120,7 @@ export const CustomBackgroundInlineEndPaddedImage: Story = {
120120
<Button as="a" href="#">
121121
Primary action
122122
</Button>
123-
<Button as="a" href="#" variant="secondary">
123+
<Button as="a" href="#">
124124
Secondary action
125125
</Button>
126126
</Hero.ButtonGroup>
@@ -154,7 +154,7 @@ export const CustomBackgroundBlockEndVideo: Story = {
154154
<Button as="a" href="#">
155155
Primary action
156156
</Button>
157-
<Button as="a" href="#" variant="secondary">
157+
<Button as="a" href="#">
158158
Secondary action
159159
</Button>
160160
</Hero.ButtonGroup>
@@ -194,7 +194,7 @@ export const CustomBackgroundInlineEndPaddedVideo: Story = {
194194
<Button as="a" href="#">
195195
Primary action
196196
</Button>
197-
<Button as="a" href="#" variant="secondary">
197+
<Button as="a" href="#">
198198
Secondary action
199199
</Button>
200200
</Hero.ButtonGroup>
@@ -239,7 +239,7 @@ export const WithCards: Story = {
239239
<Button as="a" href="#">
240240
Watch video
241241
</Button>
242-
<Button as="a" href="#" variant="secondary">
242+
<Button as="a" href="#">
243243
Start using project tables
244244
</Button>
245245
</Hero.ButtonGroup>
@@ -365,7 +365,7 @@ export const GridlineExpressiveBlockEndPaddedTrailingComponent: Story = {
365365
<Button as="a" href="#">
366366
Try Copilot now
367367
</Button>
368-
<Button as="a" href="#" variant="secondary">
368+
<Button as="a" href="#">
369369
See plans & pricing
370370
</Button>
371371
</Hero.ButtonGroup>
@@ -418,7 +418,7 @@ export const GridlineExpressiveWithImageCarousel: Story = {
418418
<Button as="a" href="#">
419419
Watch video
420420
</Button>
421-
<Button as="a" href="#" variant="secondary">
421+
<Button as="a" href="#">
422422
Start using project tables
423423
</Button>
424424
</Hero.ButtonGroup>

‎packages/react/src/Hero/Hero.features.stories.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ export const WithPrimaryButton: Story = {
106106
large projects as tables, boards, or roadmaps, and automate everything with code.
107107
</Hero.Description>
108108
<Hero.ButtonGroup>
109-
<Button as="a" variant="primary" href="#">
109+
<Button as="a" href="#">
110110
Start using projects
111111
</Button>
112-
<Button as="a" variant="secondary" href="#" trailingVisual={<PlayIcon />}>
112+
<Button as="a" href="#" trailingVisual={<PlayIcon />}>
113113
What is GitHub Issues
114114
</Button>
115115
</Hero.ButtonGroup>
@@ -223,7 +223,7 @@ export const WithCustomClassnames: Story = {
223223
<Button as="a" href="#" className="test-class">
224224
Primary action
225225
</Button>
226-
<Button as="a" href="#" variant="secondary" className="test-class">
226+
<Button as="a" href="#" className="test-class">
227227
Secondary action
228228
</Button>
229229
</Hero.ButtonGroup>
@@ -244,7 +244,7 @@ export const WithCustomHeadingAndDescriptionSizes: Story = {
244244
<Button as="a" href="#" className="test-class">
245245
Primary action
246246
</Button>
247-
<Button as="a" href="#" variant="secondary" className="test-class">
247+
<Button as="a" href="#" className="test-class">
248248
Secondary action
249249
</Button>
250250
</Hero.ButtonGroup>
@@ -287,7 +287,7 @@ export const NarrowView: Story = {
287287
<Button as="a" href="#">
288288
Watch video
289289
</Button>
290-
<Button as="a" href="#" variant="secondary">
290+
<Button as="a" href="#">
291291
Start using project tables
292292
</Button>
293293
</Hero.ButtonGroup>
@@ -310,7 +310,7 @@ export const NarrowViewCentered: Story = {
310310
<Button as="a" href="#">
311311
Watch video
312312
</Button>
313-
<Button as="a" href="#" variant="secondary">
313+
<Button as="a" href="#">
314314
Start using project tables
315315
</Button>
316316
</Hero.ButtonGroup>

0 commit comments

Comments
 (0)