Random fixes part 5

package.json

@@ -27,7 +27,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.3.0-a.5",
+    "@saleor/macaw-ui": "github:saleor/macaw-ui#d694292",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "apollo": "^2.32.5",

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { ButtonBase, Card, CardContent, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -75,8 +75,9 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                 description="link"
               />
             </ExternalLink>
-            <Button
+            <ButtonBase
               className={classes.headerLinkContainer}
+              disableRipple
               onClick={navigateToAppSettings}
             >
               <SVG src={settingsIcon} />
@@ -85,11 +86,10 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                 defaultMessage="Edit settings"
                 description="link"
               />
-            </Button>
-            <Button
-              variant="tertiary"
+            </ButtonBase>
+            <ButtonBase
               className={classes.headerLinkContainer}
-              disableFocusRipple
+              disableRipple
               onClick={data.isActive ? onAppDeactivateOpen : onAppActivateOpen}
             >
               <SVG src={activateIcon} />
@@ -104,7 +104,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                   description="link"
                 />
               )}
-            </Button>
+            </ButtonBase>
           </div>
         ) : (
           <Skeleton />

src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -7,6 +7,7 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
@@ -106,9 +107,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
             <DialogActions>
               {step === "form" ? (
                 <>
-                  <Button className={classes.cancel} onClick={onClose}>
-                    <FormattedMessage {...buttonMessages.back} />
-                  </Button>
+                  <BackButton className={classes.cancel} onClick={onClose} />
                   <ConfirmButton
                     data-test="submit"
                     transitionState={confirmButtonState}

src/apps/styles.ts

@@ -87,6 +87,7 @@ export const useStyles = makeStyles(
         fontWeight: 500
       },
       alignItems: "center",
+      color: theme.palette.text.primary,
       display: "flex",
       fontSize: theme.spacing(2),
       fontWeight: 500,

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -6,12 +6,13 @@ import {
   TextField
 } from "@material-ui/core";
 import { getAttributeValueErrorMessage } from "@saleor/attributes/errors";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { getFormErrors } from "@saleor/utils/errors";
 import React from "react";
@@ -85,9 +86,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
               />
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 data-test="submit"
                 transitionState={confirmButtonState}

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -5,6 +5,7 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import { buttonMessages } from "@saleor/intl";
 import { Button, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
@@ -57,9 +58,7 @@ const CategoryDeleteDialog: React.FC<CategoryDeleteDialogProps> = props => {
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <Button
           className={classes.deleteButton}
           variant="primary"

src/components/ActionDialog/DialogButtons.tsx

@@ -1,9 +1,10 @@
 import { DialogActions } from "@material-ui/core";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import ConfirmButton from "../ConfirmButton";
 import { ActionDialogVariant } from "./types";
 
@@ -35,16 +36,7 @@ const DialogButtons: React.FC<DialogButtonsProps> = props => {
   return (
     <DialogActions>
       {children}
-      {showBackButton && (
-        <Button
-          data-test="back"
-          color="text"
-          onClick={onClose}
-          variant="secondary"
-        >
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
-      )}
+      {showBackButton && <BackButton onClick={onClose} />}
       {variant !== "info" && (
         <ConfirmButton
           disabled={disabled}

src/components/AppLayout/AppChannelSelect.tsx

@@ -8,6 +8,9 @@ import SingleSelectField from "../SingleSelectField";
 
 const useStyles = makeStyles(
   theme => ({
+    input: {
+      height: 40
+    },
     root: {
       "&& fieldset": {
         borderColor: theme.palette.divider
@@ -36,6 +39,9 @@ const AppChannelSelect: React.FC<AppChannelSelectProps> = ({
   return (
     <div className={classes.root}>
       <SingleSelectField
+        InputProps={{
+          className: classes.input
+        }}
         testId="app-channel-select"
         choices={mapNodeToChoice(channels)}
         value={selectedChannelId}

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -21,19 +21,16 @@ import useElementScroll, {
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
+
 const useStyles = makeStyles(
   theme => ({
     actions: {
@@ -213,9 +210,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           [classes.dropShadow]: !isScrolledToBottom(anchor, position)
         })}
       >
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           type="submit"

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -11,14 +11,14 @@ import {
 } from "@material-ui/core";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { DialogProps, FetchMoreProps, Node } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage } from "react-intl";
 
+import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import ConfirmButton from "../ConfirmButton";
 import { messages } from "./messages";
@@ -162,9 +162,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           type="submit"

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -13,8 +13,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
@@ -23,6 +22,7 @@ import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
@@ -163,9 +163,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           data-test="submit"
           transitionState={confirmButtonState}

src/components/AssignVariantDialog/AssignVariantDialog.tsx

@@ -14,8 +14,7 @@ import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import {
   getById,
@@ -31,6 +30,7 @@ import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
@@ -275,9 +275,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           data-test="submit"
           transitionState={confirmButtonState}

src/components/Attributes/Attributes.tsx

@@ -144,7 +144,6 @@ const Attributes: React.FC<AttributesProps> = ({
           </div>
           <IconButton
             variant="secondary"
-            hoverOutline
             className={classes.expansionBarButton}
             onClick={toggleExpansion}
             data-test="attributes-expand"

src/components/BackButton.tsx

@@ -0,0 +1,13 @@
+import { buttonMessages } from "@saleor/intl";
+import { Button, ButtonProps } from "@saleor/macaw-ui";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const BackButton: React.FC<ButtonProps> = props => (
+  <Button data-test="back" variant="secondary" color="text" {...props}>
+    <FormattedMessage {...buttonMessages.back} />
+  </Button>
+);
+
+BackButton.displayName = "BackButton";
+export default BackButton;

src/components/CardTitle/CardTitle.tsx

@@ -19,7 +19,7 @@ const CardTitle: React.FC<CardTitleProps> = ({
   onClick,
   ...rest
 }) => (
-  <CardHeader action={toolbar} title={title} {...rest}>
+  <CardHeader action={toolbar} className={className} title={title} {...rest}>
     {children}
   </CardHeader>
 );

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -53,7 +53,7 @@ const useStyles = makeStyles(
       },
       display: "grid",
       gridColumnGap: theme.spacing(3),
-      gridTemplateColumns: "repeat(3, 1fr)",
+      gridTemplateColumns: "repeat(3, 210px)",
       padding: theme.spacing(2, 3)
     },
     contentContainer: {
@@ -65,6 +65,14 @@ const useStyles = makeStyles(
     dropShadow: {
       boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
     },
+    label: {
+      "& span": {
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis"
+      },
+      marginRight: 0
+    },
     loadMoreLoaderContainer: {
       alignItems: "center",
       display: "flex",
@@ -138,6 +146,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
           <div className={classes.content}>
             {columns.map(column => (
               <ControlledCheckbox
+                className={classes.label}
                 checked={isSelected(
                   column.value,
                   selectedColumns,
@@ -159,13 +168,14 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
         })}
       >
         <div className={classes.actionBar}>
-          <Button color="text" onClick={onReset}>
+          <Button variant="secondary" color="text" onClick={onReset}>
             <FormattedMessage defaultMessage="Reset" description="button" />
           </Button>
           <div>
             <Button
               className={classes.cancelButton}
               color="text"
+              variant="secondary"
               onClick={onCancel}
             >
               <FormattedMessage {...buttonMessages.cancel} />

src/components/DeletableItem/DeletableItem.tsx

@@ -10,7 +10,7 @@ const DeletableItem: React.FC<DeletableItemProps> = ({ onDelete, id }) => {
   const handleDelete = () => onDelete(id);
 
   return (
-    <IconButton variant="secondary" hoverOutline onClick={handleDelete}>
+    <IconButton variant="secondary" onClick={handleDelete}>
       <DeleteIcon />
     </IconButton>
   );