djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix invisible edit button in media tiles hover state (#1920)

Browse source 
* Fix control icons in media tiles

* Update snapshots

* Change divs to buttons

* Update snapshots
This commit is contained in:
Michał Droń 2022-03-21 12:37:55 +01:00 committed by GitHub
parent 90ff0ebb5f
commit f3bca9af39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 126 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/MediaTile/MediaTile.tsx
View file

@ -1,6 +1,5 @@
import { CircularProgress } from "@material-ui/core"; import { CircularProgress } from "@material-ui/core";
import EditIcon from "@material-ui/icons/Edit"; import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
@ -28,7 +27,8 @@ const useStyles = makeStyles(
width: 148 width: 148
}, },
mediaOverlay: { mediaOverlay: {
background: "rgba(0, 0, 0, 0.6)", background: theme.palette.background.default,
opacity: 0.8,
cursor: "move", cursor: "move",
display: "none", display: "none",
height: 148, height: 148,
@ -47,6 +47,21 @@ const useStyles = makeStyles(
mediaOverlayToolbar: { mediaOverlayToolbar: {
display: "flex", display: "flex",
justifyContent: "flex-end" justifyContent: "flex-end"
},
controlButton: {
color: theme.palette.saleor.main[1],
backgroundColor: "transparent",
border: "none",
cursor: "pointer",
margin: theme.spacing(2),
padding: 0,
"&:hover": {
color: theme.palette.saleor.active[1]
},
"&:first-child": {
marginRight: 0
}
} }
}), }),
{ name: "MediaTile" } { name: "MediaTile" }
@ -84,14 +99,14 @@ const MediaTile: React.FC<MediaTileProps> = props => {
) : ( ) : (
<div className={classes.mediaOverlayToolbar}> <div className={classes.mediaOverlayToolbar}>
{onEdit && ( {onEdit && (
<IconButton variant="secondary" color="primary" onClick={onEdit}> <button className={classes.controlButton} onClick={onEdit}>
<EditIcon /> <EditIcon />
</IconButton> </button>
)} )}
{onDelete && ( {onDelete && (
<IconButton color="primary" onClick={onDelete}> <button className={classes.controlButton} onClick={onDelete}>
<DeleteIcon /> <DeleteIcon />
</IconButton> </button>
)} )}
</div> </div>
)} )}

64
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -40337,12 +40337,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -40357,7 +40352,6 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -41116,12 +41110,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -41136,7 +41125,6 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -43232,12 +43220,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -43252,7 +43235,6 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -44006,12 +43988,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -44026,7 +44003,6 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -44778,12 +44754,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -44798,7 +44769,6 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -51179,12 +51149,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -51199,7 +51164,6 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -52655,12 +52619,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -52675,7 +52634,6 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -55027,12 +54985,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
class="MediaTile-mediaOverlayToolbar-id" class="MediaTile-mediaOverlayToolbar-id"
> >
<button <button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id" class="MediaTile-controlButton-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -55047,7 +55000,6 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
fill-rule="evenodd" fill-rule="evenodd"
/> />
</svg> </svg>
</span>
</button> </button>
</div> </div>
</div> </div>