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
2022-07-19 16:10:10 +02:00 · 2022-07-19 16:10:10 +02:00 · 537cce95a7
commit 537cce95a7
parent 9aab4fb3a2
8 changed files with 658 additions and 489 deletions
--- 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<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);
--- a/src/components/LinkChoice/styles.ts
+++ 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",
+  },
+);
--- 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<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}>
-              <div>{selectedWarehouse?.name ?? <Skeleton />}</div>
-              <ChevronIcon />
-            </div>
+            <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}>
--- a/src/orders/components/OrderUnfulfilledProductsCard/styles.ts
+++ 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" },
+);
--- a/src/pages/components/PageListPage/PageListSearchAndFilters.tsx
+++ b/src/pages/components/PageListPage/PageListSearchAndFilters.tsx
@ -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}
--- a/src/products/components/ProductStocks/ProductStocks.tsx
+++ b/src/products/components/ProductStocks/ProductStocks.tsx
@ -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}>
-                    <Typography variant="body2">
-                      <FormattedMessage {...messages.assignWarehouse} />
-                    </Typography>
-                  </TableCell>
-                  <TableCell className={classes.colAction}>
-                    <ClickAwayListener
-                      onClickAway={() => setExpansionState(false)}
-                    >
+                <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}>
                      <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>
+                    </TableCell>
+                  </TableRow>
+                </ClickAwayListener>
              )}
            </TableBody>
          </Table>
--- 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),
--- a/src/storybook/snapshots/Stories.test.ts.snap
+++ b/src/storybook/snapshots/Stories.test.ts.snap