Skip to content

Commit 44a3dc9

Browse files
joshblackjoshblack
authored
fix(UnderlinePanels): add explicit type="button" to UnderlinePanels (#4970)
* refactor(eslint): enable react/button-has-type rule * fix(UnderlinePanels): add explicit type="button" to UnderlinePanels * chore: add changeset * chore: fix eslint violation --------- Co-authored-by: Josh Black <[email protected]>
1 parent 0b89fc0 commit 44a3dc9

File tree

15 files changed

+113
-42
lines changed

15 files changed

+113
-42
lines changed

‎.changeset/selfish-carpets-breathe.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Update tab in UnderlinePanels to set explicit type

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ module.exports = {
6161
// rules which apply to JS, TS, etc.
6262
rules: {
6363
'no-shadow': 'off',
64+
'react/button-has-type': 'error',
6465
'react/prop-types': 'off',
6566
'react/display-name': 'off',
6667
'react-hooks/exhaustive-deps': 'error',

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,11 @@ export const InsideOverlay = () => {
637637
open={open}
638638
onOpen={toggle}
639639
onClose={toggle}
640-
renderAnchor={props => <button {...props}>toggle overlay</button>}
640+
renderAnchor={props => (
641+
<button type="button" {...props}>
642+
toggle overlay
643+
</button>
644+
)}
641645
>
642646
<ActionList>
643647
<ActionList.Item>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,9 @@ describe('ActionList', () => {
465465

466466
return (
467467
<FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
468-
<button onClick={focusRef}>Prompt</button>
468+
<button type="button" onClick={focusRef}>
469+
Prompt
470+
</button>
469471
<ActionList>
470472
<ActionList.Item ref={ref}>Item 1</ActionList.Item>
471473
<ActionList.Item>Item 2</ActionList.Item>

‎packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ describe('Tooltip', () => {
128128
<fieldset>
129129
<legend>Legend</legend>
130130
<Tooltip text="Tooltip text">
131-
<button>Button Text</button>
131+
<button type="button">Button Text</button>
132132
</Tooltip>
133133
</fieldset>,
134134
)

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ describe('Markup', () => {
249249
const user = userEvent.setup({delay: null})
250250
const {getByRole} = renderWithTheme(
251251
<div>
252-
<button>Focusable element</button>
252+
<button type="button">Focusable element</button>
253253
<TreeView aria-label="Test tree">
254254
<TreeView.Item id="item-1">Item 1</TreeView.Item>
255255
<TreeView.Item id="item-2" current>
@@ -277,7 +277,7 @@ describe('Markup', () => {
277277
const user = userEvent.setup({delay: null})
278278
const {getByRole} = renderWithTheme(
279279
<div>
280-
<button>Focusable element</button>
280+
<button type="button">Focusable element</button>
281281
<TreeView aria-label="Test tree">
282282
<TreeView.Item id="item-1">
283283
Item 1
@@ -318,13 +318,13 @@ describe('Markup', () => {
318318
<TreeView.Item id="item-1">Item 1</TreeView.Item>
319319
<TreeView.Item id="item-2">
320320
Item 2
321-
<button id="item-2-button" tabIndex={-1} aria-hidden>
321+
<button id="item-2-button" tabIndex={-1} aria-hidden type="button">
322322
Link in Item 2
323323
</button>
324324
</TreeView.Item>
325325
<TreeView.Item id="item-3">Item 3</TreeView.Item>
326326
</TreeView>
327-
<button>Focusable element</button>
327+
<button type="button">Focusable element</button>
328328
</div>,
329329
)
330330

@@ -1359,7 +1359,9 @@ describe('Asyncronous loading', () => {
13591359
return (
13601360
<div>
13611361
{/* Mimic the completion of async loading by clicking the button */}
1362-
<button onClick={() => setState('done')}>Done</button>
1362+
<button type="button" onClick={() => setState('done')}>
1363+
Done
1364+
</button>
13631365
<TreeView aria-label="Test tree">
13641366
<TreeView.Item id="parent" defaultExpanded>
13651367
Parent

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const ResponsiveUnderlineNav = ({
6767
</UnderlineNav.Item>
6868
))}
6969
</UnderlineNav>
70-
{displayExtraEl && <button>Custom button</button>}
70+
{displayExtraEl && <button type="button">Custom button</button>}
7171
</div>
7272
)
7373
}

‎packages/react/src/__tests__/Dialog.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const DialogWithCustomFocusRef = () => {
6161
<Dialog.Header id="header">Title</Dialog.Header>
6262
<Box p={3}>
6363
<Text fontFamily="sans-serif">Some content</Text>
64-
<button data-testid="inner-button" ref={buttonRef}>
64+
<button type="button" data-testid="inner-button" ref={buttonRef}>
6565
hi
6666
</button>
6767
</Box>
@@ -90,7 +90,7 @@ const DialogWithCustomFocusRefAndReturnFocusRef = () => {
9090
<Dialog.Header id="header">Title</Dialog.Header>
9191
<Box p={3}>
9292
<Text fontFamily="sans-serif">Some content</Text>
93-
<button data-testid="inner-button" ref={buttonRef}>
93+
<button type="button" data-testid="inner-button" ref={buttonRef}>
9494
hi
9595
</button>
9696
</Box>

‎packages/react/src/__tests__/TextInputWithTokens.test.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,9 @@ describe('TextInputWithTokens', () => {
317317
onTokenRemove={onRemoveMock}
318318
visibleTokenCount={visibleTokenCount}
319319
/>
320-
<button id="focusableOutsideComponent">Focus me</button>
320+
<button type="button" id="focusableOutsideComponent">
321+
Focus me
322+
</button>
321323
</>,
322324
)
323325
const inputNode = getByLabelText('Tokens')
@@ -373,7 +375,9 @@ describe('TextInputWithTokens', () => {
373375
onTokenRemove={onRemoveMock}
374376
visibleTokenCount={visibleTokenCount}
375377
/>
376-
<button id="focusableOutsideComponent">Focus me</button>
378+
<button type="button" id="focusableOutsideComponent">
379+
Focus me
380+
</button>
377381
</>,
378382
)
379383
const inputNode = getByLabelText('Tokens')

‎packages/react/src/__tests__/ThemeProvider.test.tsx‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,9 @@ it('updates when colorMode prop changes', async () => {
203203
return (
204204
<ThemeProvider theme={exampleTheme} colorMode={colorMode}>
205205
<Text color="text">{colorMode}</Text>
206-
<button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
206+
<button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
207+
Toggle
208+
</button>
207209
</ThemeProvider>
208210
)
209211
}
@@ -229,7 +231,9 @@ it('updates when dayScheme prop changes', async () => {
229231
return (
230232
<ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
231233
<Text color="text">{dayScheme}</Text>
232-
<button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
234+
<button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
235+
Toggle
236+
</button>
233237
</ThemeProvider>
234238
)
235239
}
@@ -255,7 +259,9 @@ it('updates when nightScheme prop changes', async () => {
255259
return (
256260
<ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
257261
<Text color="text">{nightScheme}</Text>
258-
<button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
262+
<button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
263+
Toggle
264+
</button>
259265
</ThemeProvider>
260266
)
261267
}
@@ -280,7 +286,9 @@ it('inherits colorMode from parent', async () => {
280286
const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
281287
return (
282288
<ThemeProvider theme={exampleTheme} colorMode={colorMode}>
283-
<button onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
289+
<button type="button" onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>
290+
Toggle
291+
</button>
284292
<ThemeProvider>
285293
<Text color="text">{colorMode}</Text>
286294
</ThemeProvider>
@@ -304,7 +312,9 @@ it('inherits dayScheme from parent', async () => {
304312
const [dayScheme, setDayScheme] = React.useState('light')
305313
return (
306314
<ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
307-
<button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
315+
<button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
316+
Toggle
317+
</button>
308318
<ThemeProvider colorMode="day">
309319
<Text color="text">{dayScheme}</Text>
310320
</ThemeProvider>
@@ -328,7 +338,9 @@ it('inherits nightScheme from parent', async () => {
328338
const [nightScheme, setNightScheme] = React.useState('dark')
329339
return (
330340
<ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
331-
<button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
341+
<button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
342+
Toggle
343+
</button>
332344
<ThemeProvider colorMode="night">
333345
<Text color="text">{nightScheme}</Text>
334346
</ThemeProvider>
@@ -351,7 +363,11 @@ describe('setColorMode', () => {
351363

352364
function ToggleMode() {
353365
const {colorMode, setColorMode} = useTheme()
354-
return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
366+
return (
367+
<button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
368+
Toggle
369+
</button>
370+
)
355371
}
356372

357373
render(
@@ -377,7 +393,11 @@ describe('setDayScheme', () => {
377393

378394
function ToggleDayScheme() {
379395
const {dayScheme, setDayScheme} = useTheme()
380-
return <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>Toggle</button>
396+
return (
397+
<button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>
398+
Toggle
399+
</button>
400+
)
381401
}
382402

383403
render(
@@ -403,7 +423,11 @@ describe('setNightScheme', () => {
403423

404424
function ToggleNightScheme() {
405425
const {nightScheme, setNightScheme} = useTheme()
406-
return <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
426+
return (
427+
<button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
428+
Toggle
429+
</button>
430+
)
407431
}
408432

409433
render(
@@ -429,7 +453,11 @@ describe('useColorSchemeVar', () => {
429453

430454
function ToggleMode() {
431455
const {colorMode, setColorMode} = useTheme()
432-
return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
456+
return (
457+
<button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
458+
Toggle
459+
</button>
460+
)
433461
}
434462

435463
function CustomBg() {
@@ -464,7 +492,11 @@ describe('useColorSchemeVar', () => {
464492

465493
function ToggleMode() {
466494
const {colorMode, setColorMode} = useTheme()
467-
return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
495+
return (
496+
<button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
497+
Toggle
498+
</button>
499+
)
468500
}
469501

470502
function CustomBg() {

0 commit comments

Comments
 (0)