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

Fix dropdown buttons styles (#2151)

Browse source 
* Fix filterStructure typo, fixes #2140

* Fix dropdown button styles

* Update assign warehouse button to product or variant

* Update test snapshots
This commit is contained in:
Dawid 2022-07-19 16:10:10 +02:00 committed by GitHub
parent 9aab4fb3a2
commit 537cce95a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 658 additions and 489 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/LinkChoice/LinkChoice.tsx
View file

@ -1,52 +1,13 @@
import { ClickAwayListener, MenuItem, Paper, Popper } from "@material-ui/core";
import { FormChange } from "@saleor/hooks/useForm";
import ArrowDropdown from "@saleor/icons/ArrowDropdown";
import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
import { codes } from "keycode";
import React from "react";
import Link from "../Link";
import { SingleAutocompleteChoiceType } from "../SingleAutocompleteSelectField";
const useStyles = makeStyles(
theme => ({
arrow: {
position: "relative",
top: 6,
transition: theme.transitions.duration.short + "ms",
},
highlighted: {
background: theme.palette.background.default,
},
menuItem: {
"&:not(:last-of-type)": {
marginBottom: theme.spacing(),
},
borderRadius: 4,
},
paper: {
padding: theme.spacing(),
},
popper: {
marginTop: theme.spacing(1),
zIndex: 2,
},
root: {
"&:focus": {
textDecoration: "underline",
},
outline: 0,
position: "relative",
},
rotate: {
transform: "rotate(180deg)",
},
}),
{
name: "LinkChoice",
},
);
import { useStyles } from "./styles";
export interface LinkChoiceProps {
className?: string;
@ -63,7 +24,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
value,
onChange,
}) => {
const classes = useStyles({});
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const anchor = React.useRef<HTMLInputElement>(null);
const current = choices.find(c => c.value === value);

40
src/components/LinkChoice/styles.ts Normal file
View file

@ -0,0 +1,40 @@
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
arrow: {
position: "relative",
top: 6,
transition: theme.transitions.duration.short + "ms",
},
highlighted: {
background: theme.palette.background.default,
},
menuItem: {
"&:not(:last-of-type)": {
marginBottom: theme.spacing(),
},
borderRadius: 4,
},
paper: {
padding: theme.spacing(),
},
popper: {
marginTop: theme.spacing(1),
zIndex: 2,
},
root: {
"&:focus, &:hover": {
textDecoration: "underline",
},
outline: 0,
position: "relative",
},
rotate: {
transform: "rotate(180deg)",
},
}),
{
name: "LinkChoice",
},
);

67
src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx
View file

@ -5,7 +5,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { OrderLineFragment, WarehouseFragment } from "@saleor/graphql";
import { commonMessages } from "@saleor/intl";
import { ChevronIcon, makeStyles } from "@saleor/macaw-ui";
import { ChevronIcon, IconButton } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -13,60 +13,7 @@ import { FormattedMessage } from "react-intl";
import OrderCardTitle from "../OrderCardTitle";
import TableHeader from "../OrderProductsCardElements/OrderProductsCardHeader";
import TableLine from "../OrderProductsCardElements/OrderProductsTableRow";
const useStyles = makeStyles(
theme => ({
actions: {
flexDirection: "row-reverse",
padding: theme.spacing(2, 3),
},
table: {
"& td, & th": {
"&:not(:first-child):not(:last-child)": {
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
},
tableLayout: "fixed",
},
toolbar: {
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
borderRadius: "4px",
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
paddingRight: theme.spacing(0.5),
paddingLeft: theme.spacing(1.5),
"&:hover": {
backgroundColor: theme.palette.saleor.active[5],
color: theme.palette.saleor.active[1],
},
"& > div": {
minWidth: 0,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
},
},
cardTitle: {
justifyContent: "space-between",
"& > div": {
"&:first-child": {
flex: 0,
whiteSpace: "nowrap",
},
"&:last-child": {
flex: "0 1 auto",
minWidth: 0,
marginLeft: theme.spacing(1),
},
},
},
}),
{ name: "OrderUnfulfilledItems" },
);
import { useStyles } from "./styles";
interface OrderUnfulfilledProductsCardProps {
showFulfillmentAction: boolean;
@ -86,7 +33,7 @@ const OrderUnfulfilledProductsCard: React.FC<OrderUnfulfilledProductsCardProps>
selectedWarehouse,
onWarehouseChange,
} = props;
const classes = useStyles({});
const classes = useStyles();
if (!lines.length) {
return null;
@ -101,10 +48,16 @@ const OrderUnfulfilledProductsCard: React.FC<OrderUnfulfilledProductsCardProps>
status="unfulfilled"
className={classes.cardTitle}
toolbar={
<div className={classes.toolbar} onClick={onWarehouseChange}>
<IconButton
onClick={onWarehouseChange}
className={classes.toolbarButton}
data-test-id="select-warehouse-button"
>
<div className={classes.toolbarButtonContent}>
<div>{selectedWarehouse?.name ?? <Skeleton />}</div>
<ChevronIcon />
</div>
</IconButton>
}
/>
<ResponsiveTable className={classes.table}>

43
src/orders/components/OrderUnfulfilledProductsCard/styles.ts Normal file
View file

@ -0,0 +1,43 @@
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
actions: {
flexDirection: "row-reverse",
padding: theme.spacing(2, 3),
},
table: {
"& td, & th": {
"&:not(:first-child):not(:last-child)": {
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
},
tableLayout: "fixed",
},
toolbarButton: {
border: 0,
},
toolbarButtonContent: {
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
},
cardTitle: {
justifyContent: "space-between",
"& > div": {
"&:first-child": {
flex: 0,
whiteSpace: "nowrap",
},
"&:last-child": {
flex: "0 1 auto",
minWidth: 0,
marginLeft: theme.spacing(1),
},
},
},
}),
{ name: "OrderUnfulfilledItems" },
);

4
src/pages/components/PageListPage/PageListSearchAndFilters.tsx
View file

@ -75,7 +75,7 @@ const PageListSearchAndFilters: React.FC<PageListSearchAndFiltersProps> = ({
cleanupFn: reset,
});
const filterStrucutre = createFilterStructure(intl, filterOpts);
const filterStructure = createFilterStructure(intl, filterOpts);
const { open: openModal, close: closeModal } = actionDialogOpts;
@ -105,7 +105,7 @@ const PageListSearchAndFilters: React.FC<PageListSearchAndFiltersProps> = ({
return (
<>
<FilterBar
filterStructure={filterStrucutre}
filterStructure={filterStructure}
initialSearch={""}
onAll={resetFilters}
onFilterChange={changeFilters}

36
src/products/components/ProductStocks/ProductStocks.tsx
View file

@ -107,6 +107,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
const classes = useStyles();
const intl = useIntl();
const anchor = React.useRef<HTMLDivElement>();
const [lastStockRowFocus, setLastStockRowFocus] = React.useState(false);
const [isExpanded, setExpansionState] = React.useState(false);
const unitsLeft = parseInt(data.globalThreshold, 10) - data.globalSoldUnits;
@ -120,6 +121,18 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
onFormDataChange,
);
const handleWarehouseStockAdd = (warehouseId: string) => {
onWarehouseStockAdd(warehouseId);
setLastStockRowFocus(true);
};
const handleStockInputFocus = (input: HTMLDivElement) => {
if (lastStockRowFocus && input) {
input.focus();
setLastStockRowFocus(false);
}
};
return (
<Card>
<CardTitle title={intl.formatMessage(messages.title)} />
@ -248,7 +261,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
</TableRow>
</TableHead>
<TableBody>
{renderCollection(stocks, stock => {
{renderCollection(stocks, (stock, index) => {
const handleQuantityChange = createNonNegativeValueChangeHandler(
event => onChange(stock.id, event.target.value),
);
@ -273,6 +286,10 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
}}
onChange={handleQuantityChange}
value={stock.value}
inputRef={input =>
stocks.length === index + 1 &&
handleStockInputFocus(input)
}
/>
</TableCell>
<TableCell className={classes.colAction}>
@ -288,22 +305,23 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
);
})}
{warehousesToAssign.length > 0 && (
<TableRow>
<TableCell colSpan={3}>
<ClickAwayListener onClickAway={() => setExpansionState(false)}>
<TableRow
className={classes.addRow}
onClick={() => setExpansionState(!isExpanded)}
>
<TableCell colSpan={3} className={classes.actionableText}>
<Typography variant="body2">
<FormattedMessage {...messages.assignWarehouse} />
</Typography>
</TableCell>
<TableCell className={classes.colAction}>
<ClickAwayListener
onClickAway={() => setExpansionState(false)}
>
<div ref={anchor}>
<IconButton
data-test-id="add-warehouse"
color="primary"
variant="secondary"
onClick={() => setExpansionState(!isExpanded)}
className={classes.actionableText}
>
<PlusIcon />
</IconButton>
@ -326,7 +344,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<MenuItem
className={classes.menuItem}
onClick={() =>
onWarehouseStockAdd(warehouse.id)
handleWarehouseStockAdd(warehouse.id)
}
>
{warehouse.name}
@ -337,9 +355,9 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
)}
</Popper>
</div>
</ClickAwayListener>
</TableCell>
</TableRow>
</ClickAwayListener>
)}
</TableBody>
</Table>

11
src/products/components/ProductStocks/styles.ts
View file

@ -40,6 +40,8 @@ export const useStyles = makeStyles(
popper: {
marginTop: theme.spacing(1),
zIndex: 2,
maxHeight: 400,
overflow: "scroll",
},
quantityContainer: {
paddingTop: theme.spacing(),
@ -75,6 +77,15 @@ export const useStyles = makeStyles(
thresholdInput: {
maxWidth: 400,
},
addRow: {
"&:hover": {
cursor: "pointer",
"& $actionableText": {
color: theme.palette.primary.main,
},
},
},
actionableText: {},
preorderItemsLeftCount: {
fontSize: 14,
paddingTop: theme.spacing(2),

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

@ -2570,7 +2570,7 @@ exports[`Storyshots Channels / Channels with variants availability card default
class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
style="font-size:12px"
>
Visible since 07/30/2020
Visible since Jul 30, 2020
</div>
</div>
</div>
@ -2918,7 +2918,7 @@ exports[`Storyshots Channels / Channels with variants availability card default
class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
style="font-size:12px"
>
Visible since 07/30/2020
Visible since Jul 30, 2020
</div>
</div>
</div>
@ -5188,7 +5188,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
<span
class="ChannelsAvailabilityCard-secondLabel-id"
>
will become published on 07/30/2020
will become published on Jul 30, 2020
</span>
</span>
</label>
@ -113948,9 +113948,18 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -113979,6 +113988,8 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -115862,9 +115873,18 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -115893,6 +115913,8 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -117978,9 +118000,18 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -118009,6 +118040,8 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -120728,9 +120761,18 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -120759,6 +120801,8 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -122844,9 +122888,18 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -122875,6 +122928,8 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -124898,9 +124953,18 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -124929,6 +124993,8 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -127006,9 +127072,18 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -127037,6 +127112,8 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -129122,9 +129199,18 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -129153,6 +129239,8 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -131238,9 +131326,18 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -131269,6 +131366,8 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -133354,9 +133453,18 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -133385,6 +133493,8 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -135470,9 +135580,18 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -135501,6 +135620,8 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -137586,9 +137707,18 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -137617,6 +137747,8 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -139702,9 +139834,18 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
</div>
<div
class="MuiCardHeader-action-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
data-test-id="select-warehouse-button"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<div
class="OrderUnfulfilledItems-toolbar-id"
class="OrderUnfulfilledItems-toolbarButtonContent-id"
>
<div>
<span
@ -139733,6 +139874,8 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
/>
</svg>
</div>
</span>
</button>
</div>
</div>
<div
@ -233944,10 +234087,10 @@ exports[`Storyshots Views / Products / Product variant details when loading data
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id MuiTableRow-hover-id"
class="MuiTableRow-root-id ProductStocks-addRow-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-actionableText-id"
colspan="3"
>
<div
@ -233961,7 +234104,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
>
<div>
<button
class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
class="MuiButtonBase-root-id IconButton-secondary-id ProductStocks-actionableText-id IconButton-hoverOutline-id"
color="primary"
data-test-id="add-warehouse"
tabindex="0"