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

@@ -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";
-
+import { useStyles } from "./styles";
-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",
-  },
-);
 
 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);

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",
+  },
+);

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";
-
+import { useStyles } from "./styles";
-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" },
-);
 
 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
-              <div>{selectedWarehouse?.name ?? <Skeleton />}</div>
+              onClick={onWarehouseChange}
-              <ChevronIcon />
+              className={classes.toolbarButton}
-            </div>
+              data-test-id="select-warehouse-button"
+            >
+              <div className={classes.toolbarButtonContent}>
+                <div>{selectedWarehouse?.name ?? <Skeleton />}</div>
+                <ChevronIcon />
+              </div>
+            </IconButton>
           }
         />
         <ResponsiveTable className={classes.table}>

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" },
+);

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}

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>
+                <ClickAwayListener onClickAway={() => setExpansionState(false)}>
-                  <TableCell colSpan={3}>
+                  <TableRow
-                    <Typography variant="body2">
+                    className={classes.addRow}
-                      <FormattedMessage {...messages.assignWarehouse} />
+                    onClick={() => setExpansionState(!isExpanded)}
-                    </Typography>
+                  >
-                  </TableCell>
+                    <TableCell colSpan={3} className={classes.actionableText}>
-                  <TableCell className={classes.colAction}>
+                      <Typography variant="body2">
-                    <ClickAwayListener
+                        <FormattedMessage {...messages.assignWarehouse} />
-                      onClickAway={() => setExpansionState(false)}
+                      </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>
-                  </TableCell>
+                  </TableRow>
-                </TableRow>
+                </ClickAwayListener>
               )}
             </TableBody>
           </Table>

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),