Fix partially cut checkboxes in channel dialogs (#1560) (#1613)

* wip logic for indeterminate icon

* wip remove unused imports

* fix cutted off checkbox ripples

* refactor & cleanup

src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx

@@ -6,8 +6,6 @@ import {
   Typography
 } from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
-import IconCheckboxChecked from "@saleor/icons/CheckboxChecked";
-import IconCheckboxSemiChecked from "@saleor/icons/CheckboxSemiChecked";
 import IconChevronDown from "@saleor/icons/ChevronDown";
 import { makeStyles } from "@saleor/macaw-ui";
 import Label from "@saleor/orders/components/OrderHistory/Label";
@@ -126,15 +124,19 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
       ? addVariantToChannel(channelId, variantId)
       : removeVariantFromChannel(channelId, variantId);
 
-  const selectChannelIcon = (channelId: string) =>
-    areAllChannelVariantsSelected(
+  const isChannelPartiallySelected = (channelId: string) => {
+    const selectedVariants = channelVariantListingDiffToDict(
+      channelsWithVariants
+    )[channelId];
+
+    if (selectedVariants.length === 0) {
+      return false;
+    }
+    return !areAllChannelVariantsSelected(
       allVariants?.map(variant => variant.id),
-      channelVariantListingDiffToDict(channelsWithVariants)[channelId]
-    ) ? (
-      <IconCheckboxChecked />
-    ) : (
-      <IconCheckboxSemiChecked />
+      selectedVariants
     );
+  };
 
   return (
     <>
@@ -172,7 +174,7 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
                 <div className={classes.channelCheckboxContainer}>
                   <ControlledCheckbox
                     checked={isChannelSelected(channelId)}
-                    checkedIcon={selectChannelIcon(channelId)}
+                    indeterminate={isChannelPartiallySelected(channelId)}
                     name={name}
                     label={
                       <div className={classes.channelTitleContainer}>

src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx

@@ -38,6 +38,11 @@ export const useStyles = makeStyles(
       },
       overflowY: "scroll",
       overflowX: "hidden",
+      // overflowX can't be "visible" when overflowY is "scroll"
+      // workaround for visible button ripples:
+      marginLeft: -15,
+      paddingLeft: 15,
+
       marginBottom: theme.spacing(3)
     },
     text: {

src/components/ControlledCheckbox.tsx

@@ -6,6 +6,7 @@ interface ControlledCheckboxProps {
   name: string;
   label?: React.ReactNode;
   checked: boolean;
+  indeterminate?: boolean;
   disabled?: boolean;
   checkedIcon?: React.ReactNode;
   onChange(event: any);
@@ -18,6 +19,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
   label,
   onChange,
   checkedIcon,
+  indeterminate,
   ...props
 }) => (
   <FormControlLabel
@@ -26,6 +28,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
       <Checkbox
         checkedIcon={checkedIcon}
         checked={!!checked}
+        indeterminate={indeterminate}
         disabled={disabled}
         name={name}
         onChange={() => onChange({ target: { name, value: !checked } })}