Update iconButton.tsx (#1512)

This commit is contained in:
Naresh Chavan 2021-10-20 17:51:24 +05:30 committed by GitHub
parent e5e7501efb
commit 4465a85c3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 185 additions and 185 deletions

View file

@ -168,14 +168,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -232,14 +232,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -287,14 +287,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -357,14 +357,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -417,14 +417,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -490,14 +490,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -550,14 +550,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -773,14 +773,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -846,14 +846,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -910,14 +910,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"
@ -965,14 +965,14 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="dnd-handle"

View file

@ -30,14 +30,14 @@ exports[`components/cardDetail/comment return comment 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>
@ -140,14 +140,14 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>

View file

@ -15,14 +15,14 @@ exports[`src/components/gallery/Gallery return Gallery and click new 1`] = `
class="MenuWrapper optionsMenu"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="gallery-item"
@ -38,14 +38,14 @@ exports[`src/components/gallery/Gallery return Gallery and click new 1`] = `
class="MenuWrapper optionsMenu"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="gallery-item"
@ -102,14 +102,14 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
class="MenuWrapper optionsMenu"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>
@ -224,14 +224,14 @@ exports[`src/components/gallery/Gallery should match snapshot 1`] = `
class="MenuWrapper optionsMenu"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
class="gallery-item"

View file

@ -67,9 +67,9 @@ exports[`components/sidebarSidebar sidebar in dashboard page 1`] = `
<div
class="sidebarSwitcher"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="HideSidebarIcon Icon"
@ -83,7 +83,7 @@ exports[`components/sidebarSidebar sidebar in dashboard page 1`] = `
points="50,20 20,50, 50,80"
/>
</svg>
</div>
</button>
</div>
</div>
<div

View file

@ -1927,9 +1927,9 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -1940,7 +1940,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label empty "
title="Items with an empty Property 1 property will go here. This column cannot be removed."
@ -1962,23 +1962,23 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</button>
</div>
</div>
</div>

View file

@ -11,9 +11,9 @@ exports[`should match snapshot on read only 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton readonly"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -24,7 +24,7 @@ exports[`should match snapshot on read only 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label propColorBrown "
>
@ -61,9 +61,9 @@ exports[`should match snapshot with Group 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -74,7 +74,7 @@ exports[`should match snapshot with Group 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label propColorBrown "
>
@ -100,23 +100,23 @@ exports[`should match snapshot with Group 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</button>
</div>
</div>
`;
@ -132,9 +132,9 @@ exports[`should match snapshot, add new 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -145,7 +145,7 @@ exports[`should match snapshot, add new 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label propColorBrown "
>
@ -171,23 +171,23 @@ exports[`should match snapshot, add new 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</button>
</div>
</div>
`;
@ -203,9 +203,9 @@ exports[`should match snapshot, edit title 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -216,7 +216,7 @@ exports[`should match snapshot, edit title 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label propColorBrown "
>
@ -242,23 +242,23 @@ exports[`should match snapshot, edit title 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</button>
</div>
</div>
`;
@ -274,9 +274,9 @@ exports[`should match snapshot, hide group 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -287,7 +287,7 @@ exports[`should match snapshot, hide group 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label propColorBrown "
>
@ -313,23 +313,23 @@ exports[`should match snapshot, hide group 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</button>
</div>
</div>
`;
@ -345,9 +345,9 @@ exports[`should match snapshot, no groups 1`] = `
class="octo-table-cell"
style="width: 100px;"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -358,7 +358,7 @@ exports[`should match snapshot, no groups 1`] = `
points="37,35 37,65 63,50"
/>
</svg>
</div>
</button>
<span
class="Label empty "
title="Items with an empty Property 1 property will go here. This column cannot be removed."
@ -380,23 +380,23 @@ exports[`should match snapshot, no groups 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
</div>
</button>
</div>
</div>
`;

View file

@ -31,14 +31,14 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
</div>
@ -75,14 +75,14 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and Set Te
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>
@ -178,14 +178,14 @@ exports[`components/viewHeader/emptyCardButton return EmptyCardButton and addCar
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
</div>

View file

@ -8,16 +8,16 @@ exports[`components/viewHeader/filterComponent return filterComponent 1`] = `
<div
class="toolbar hideOnWidescreen"
>
<div
<button
aria-label="Close"
class="Button IconButton"
role="button"
title="Close"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</button>
</div>
<div
class="FilterComponent"
@ -191,16 +191,16 @@ exports[`components/viewHeader/filterComponent return filterComponent and add Fi
<div
class="toolbar hideOnWidescreen"
>
<div
<button
aria-label="Close"
class="Button IconButton"
role="button"
title="Close"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</button>
</div>
<div
class="FilterComponent"
@ -374,16 +374,16 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
<div
class="toolbar hideOnWidescreen"
>
<div
<button
aria-label="Close"
class="Button IconButton"
role="button"
title="Close"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</button>
</div>
<div
class="FilterComponent"
@ -557,16 +557,16 @@ exports[`components/viewHeader/filterComponent return filterComponent and filter
<div
class="toolbar hideOnWidescreen"
>
<div
<button
aria-label="Close"
class="Button IconButton"
role="button"
title="Close"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</div>
</button>
</div>
<div
class="FilterComponent"

View file

@ -60,14 +60,14 @@ exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
<div
@ -179,14 +179,14 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
<div
@ -298,14 +298,14 @@ exports[`components/viewHeader/newCardButton return NewCardButton and addCardTem
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
<div

View file

@ -22,14 +22,14 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>
@ -170,14 +170,14 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>
@ -318,14 +318,14 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
</div>
@ -353,14 +353,14 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>
@ -501,14 +501,14 @@ exports[`components/viewHeader/newCardButtonTemplateItem return NewCardButtonTem
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect left"
>

View file

@ -17,14 +17,14 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
</button>
</div>
<div
class="octo-spacer"
@ -104,14 +104,14 @@ exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
</div>
</div>
<div
@ -158,14 +158,14 @@ exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = `
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
</button>
</div>
<div
class="octo-spacer"

View file

@ -10,14 +10,14 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect bottom"
>
@ -120,14 +120,14 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu and verify call
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect bottom"
>
@ -230,14 +230,14 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu with Share Boar
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect bottom"
>
@ -340,14 +340,14 @@ exports[`components/viewHeader/viewHeaderActionsMenu return menu without Share B
class="MenuWrapper"
role="button"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</button>
<div
class="Menu noselect bottom"
>

View file

@ -70,9 +70,9 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
<div
class="sidebarSwitcher"
>
<div
<button
class="Button IconButton"
role="button"
type="button"
>
<svg
class="HideSidebarIcon Icon"
@ -86,7 +86,7 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
points="50,20 20,50, 50,80"
/>
</svg>
</div>
</button>
</div>
</div>
<div

View file

@ -5,11 +5,11 @@ import React from 'react'
import './iconButton.scss'
type Props = {
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
title?: string
icon?: React.ReactNode
className?: string
onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void
onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void
}
function IconButton(props: Props): JSX.Element {
@ -18,8 +18,8 @@ function IconButton(props: Props): JSX.Element {
className += ' ' + props.className
}
return (
<div
role='button'
<button
type='button'
onClick={props.onClick}
onMouseDown={props.onMouseDown}
className={className}
@ -27,7 +27,7 @@ function IconButton(props: Props): JSX.Element {
aria-label={props.title}
>
{props.icon}
</div>
</button>
)
}