From 537cce95a7108c2237e9276ab193ae88b7376add Mon Sep 17 00:00:00 2001 From: Dawid Date: Tue, 19 Jul 2022 16:10:10 +0200 Subject: [PATCH] Fix dropdown buttons styles (#2151) * Fix filterStructure typo, fixes #2140 * Fix dropdown button styles * Update assign warehouse button to product or variant * Update test snapshots --- src/components/LinkChoice/LinkChoice.tsx | 43 +- src/components/LinkChoice/styles.ts | 40 + .../OrderUnfulfilledProductsCard.tsx | 73 +- .../OrderUnfulfilledProductsCard/styles.ts | 43 + .../PageListPage/PageListSearchAndFilters.tsx | 4 +- .../ProductStocks/ProductStocks.tsx | 50 +- .../components/ProductStocks/styles.ts | 11 + .../__snapshots__/Stories.test.ts.snap | 883 ++++++++++-------- 8 files changed, 658 insertions(+), 489 deletions(-) create mode 100644 src/components/LinkChoice/styles.ts create mode 100644 src/orders/components/OrderUnfulfilledProductsCard/styles.ts diff --git a/src/components/LinkChoice/LinkChoice.tsx b/src/components/LinkChoice/LinkChoice.tsx index c18b02e89..41a83d71a 100644 --- a/src/components/LinkChoice/LinkChoice.tsx +++ b/src/components/LinkChoice/LinkChoice.tsx @@ -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 = ({ value, onChange, }) => { - const classes = useStyles({}); + const classes = useStyles(); const [open, setOpen] = React.useState(false); const anchor = React.useRef(null); const current = choices.find(c => c.value === value); diff --git a/src/components/LinkChoice/styles.ts b/src/components/LinkChoice/styles.ts new file mode 100644 index 000000000..22b260649 --- /dev/null +++ b/src/components/LinkChoice/styles.ts @@ -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", + }, +); diff --git a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx index f3b3d5f1a..41f37c16f 100644 --- a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx +++ b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx @@ -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 selectedWarehouse, onWarehouseChange, } = props; - const classes = useStyles({}); + const classes = useStyles(); if (!lines.length) { return null; @@ -101,10 +48,16 @@ const OrderUnfulfilledProductsCard: React.FC status="unfulfilled" className={classes.cardTitle} toolbar={ -
-
{selectedWarehouse?.name ?? }
- -
+ +
+
{selectedWarehouse?.name ?? }
+ +
+ } /> diff --git a/src/orders/components/OrderUnfulfilledProductsCard/styles.ts b/src/orders/components/OrderUnfulfilledProductsCard/styles.ts new file mode 100644 index 000000000..cd1fc49a3 --- /dev/null +++ b/src/orders/components/OrderUnfulfilledProductsCard/styles.ts @@ -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" }, +); diff --git a/src/pages/components/PageListPage/PageListSearchAndFilters.tsx b/src/pages/components/PageListPage/PageListSearchAndFilters.tsx index 46210ea98..25941ac57 100644 --- a/src/pages/components/PageListPage/PageListSearchAndFilters.tsx +++ b/src/pages/components/PageListPage/PageListSearchAndFilters.tsx @@ -75,7 +75,7 @@ const PageListSearchAndFilters: React.FC = ({ 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 = ({ return ( <> = ({ const classes = useStyles(); const intl = useIntl(); const anchor = React.useRef(); + 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 = ({ onFormDataChange, ); + const handleWarehouseStockAdd = (warehouseId: string) => { + onWarehouseStockAdd(warehouseId); + setLastStockRowFocus(true); + }; + + const handleStockInputFocus = (input: HTMLDivElement) => { + if (lastStockRowFocus && input) { + input.focus(); + setLastStockRowFocus(false); + } + }; + return ( @@ -248,7 +261,7 @@ const ProductStocks: React.FC = ({ - {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 = ({ }} onChange={handleQuantityChange} value={stock.value} + inputRef={input => + stocks.length === index + 1 && + handleStockInputFocus(input) + } /> @@ -288,22 +305,23 @@ const ProductStocks: React.FC = ({ ); })} {warehousesToAssign.length > 0 && ( - - - - - - - - setExpansionState(false)} - > + setExpansionState(false)}> + setExpansionState(!isExpanded)} + > + + + + + +
setExpansionState(!isExpanded)} + className={classes.actionableText} > @@ -326,7 +344,7 @@ const ProductStocks: React.FC = ({ - onWarehouseStockAdd(warehouse.id) + handleWarehouseStockAdd(warehouse.id) } > {warehouse.name} @@ -337,9 +355,9 @@ const ProductStocks: React.FC = ({ )}
- - - + + + )} diff --git a/src/products/components/ProductStocks/styles.ts b/src/products/components/ProductStocks/styles.ts index 8579b6523..91b581f4c 100644 --- a/src/products/components/ProductStocks/styles.ts +++ b/src/products/components/ProductStocks/styles.ts @@ -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), diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 36d5a84dd..f7def19ae 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -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 @@ -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 @@ -5188,7 +5188,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = ` - will become published on 07/30/2020 + will become published on Jul 30, 2020 @@ -113949,36 +113949,47 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +
-
-
- - ‌ - -
- -
+
+
+ + ‌ + +
+ +
+ +