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 EditIcon from "@material-ui/icons/Edit";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import React from "react";
@ -28,7 +27,8 @@ const useStyles = makeStyles(
width: 148
},
mediaOverlay: {
background: "rgba(0, 0, 0, 0.6)",
background: theme.palette.background.default,
opacity: 0.8,
cursor: "move",
display: "none",
height: 148,
@ -47,6 +47,21 @@ const useStyles = makeStyles(
mediaOverlayToolbar: {
display: "flex",
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" }
@ -84,14 +99,14 @@ const MediaTile: React.FC<MediaTileProps> = props => {
) : (
<div className={classes.mediaOverlayToolbar}>
{onEdit && (
<IconButton variant="secondary" color="primary" onClick={onEdit}>
<button className={classes.controlButton} onClick={onEdit}>
<EditIcon />
</IconButton>
</button>
)}
{onDelete && (
<IconButton color="primary" onClick={onDelete}>
<button className={classes.controlButton} onClick={onDelete}>
<DeleteIcon />
</IconButton>
</button>
)}
</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"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -40357,7 +40352,6 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -41116,12 +41110,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -41136,7 +41125,6 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -43232,12 +43220,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -43252,7 +43235,6 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -44006,12 +43988,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -44026,7 +44003,6 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -44778,12 +44754,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -44798,7 +44769,6 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -51179,12 +51149,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -51199,7 +51164,6 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -52655,12 +52619,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -52675,7 +52634,6 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
@ -55027,12 +54985,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
class="MediaTile-mediaOverlayToolbar-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
class="MediaTile-controlButton-id"
>
<svg
aria-hidden="true"
@ -55047,7 +55000,6 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>