feat: update filter ui and hover state (#165) (#176)

* feat: update filter ui and hover state (#165)

* feat: updated filter tag and filter popover position (#165)

---------

Co-authored-by: Fran McDade <[email protected]>

src/components/Filter/components/Filter/filter.styles.ts

@@ -6,13 +6,14 @@ import { IconButton as DXIconButton } from "../../../common/IconButton/iconButto
 
 export const FilterPopover = styled(Popover)`
   .MuiPaper-menu {
-    margin: 0;
+    margin: 4px 0;
   }
 
   ${mediaDesktopSmallDown} {
     .MuiPaper-root {
       background-color: ${smokeLight};
       height: 100%;
+      margin: 0;
       max-height: 100%;
       overflow: visible; // required; allows backdrop button to render outside of drawer container.
     }

src/components/Filter/components/Filter/filter.tsx

@@ -79,6 +79,7 @@ export const Filter = ({
       <FilterLabel
         count={categoryView.values.length}
         disabled={categoryView.isDisabled}
+        isOpen={isOpen}
         label={categoryView.label}
         onClick={onOpenFilter}
       />

src/components/Filter/components/FilterLabel/filterLabel.stories.tsx

@@ -6,6 +6,7 @@ export default {
   argTypes: {
     count: { control: "number" },
     disabled: { control: "boolean" },
+    isOpen: { control: "boolean" },
     label: { control: "text" },
   },
   component: FilterLabel,
@@ -27,5 +28,6 @@ export const FilterLabelStory = FilterLabelTemplate.bind({});
 FilterLabelStory.args = {
   count: 123,
   disabled: false,
+  isOpen: false,
   label: "Label",
 };

src/components/Filter/components/FilterLabel/filterLabel.styles.ts

@@ -1,34 +1,54 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkLight, smokeMain } from "../../../../styles/common/mixins/colors";
 
-export const FilterLabel = styled(Button)`
+interface Props {
+  isOpen: boolean;
+}
+
+export const FilterLabel = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "isOpen",
+})<Props>`
   font-weight: inherit;
   gap: 0;
   justify-content: space-between;
-  padding: 10px 16px;
+  padding: 10px 8px;
   text-transform: none;
   text-align: left;
 
   :hover {
-    background-color: transparent;
+    background-color: ${smokeMain};
   }
 
   &.Mui-disabled {
     opacity: 0.3;
   }
 
   & .MuiButton-endIcon {
+    color: ${inkLight};
     margin-right: -4px;
     transform: rotate(-90deg);
   }
 
   ${mediaDesktopSmallUp} {
-    padding: 6px 0;
+    padding: 6px 8px;
 
     & .MuiButton-endIcon {
-      margin-right: 0;
       transform: unset;
     }
   }
+
+  ${(props) =>
+    props.isOpen &&
+    css`
+      background-color: ${smokeMain(props)};
+
+      ${mediaDesktopSmallUp(props)} {
+        & .MuiButton-endIcon {
+          transform: rotate(180deg);
+        }
+      }
+    `};
 `;

src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -5,13 +5,15 @@ import { FilterLabel as Label } from "./filterLabel.styles";
 export interface FilterLabelProps {
   count?: number;
   disabled?: boolean;
+  isOpen: boolean;
   label: string;
   onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const FilterLabel = ({
   count,
   disabled = false,
+  isOpen,
   label,
   onClick,
 }: FilterLabelProps): JSX.Element => {
@@ -22,6 +24,7 @@ export const FilterLabel = ({
       disabled={disabled}
       endIcon={<ArrowDropDownRoundedIcon fontSize="small" />}
       fullWidth
+      isOpen={isOpen}
       onClick={onClick}
     >
       {filterLabel}

src/components/Filter/components/FilterTags/filterTags.styles.ts

@@ -1,18 +1,13 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 
 export const FilterTags = styled.span`
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 8px;
-  padding: 0 16px;
+  margin: 4px 0 8px;
+  padding: 0 8px;
 
   &:last-child {
     margin-bottom: 0;
   }
-
-  ${mediaDesktopSmallUp} {
-    padding: 0;
-  }
 `;

src/components/Filter/components/Filters/filters.styles.ts

@@ -3,25 +3,22 @@ import styled from "@emotion/styled";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
 import {
-  textBody400,
   textBody500,
+  textUppercase500,
 } from "../../../../styles/common/mixins/fonts";
 
 interface Props {
   disabled: boolean;
   height: number;
-  isBaseStyle: boolean;
 }
 
-export const Filters = styled("div", {
-  shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
-})<Props>`
-  ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
-  color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};
+export const Filters = styled("div")<Props>`
+  ${textBody500};
+  color: ${inkMain};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
-  padding: 0 0 8px;
+  padding: 0 8px 8px;
 
   // Filters are globally "disabled".
   ${({ disabled }) =>
@@ -31,22 +28,18 @@ export const Filters = styled("div", {
     `};
 
   .MuiDivider-root {
-    margin: 8px 0;
+    margin: 8px;
   }
 
   ${mediaDesktopSmallUp} {
     height: unset;
     overflow: unset;
-    padding: 0 12px 0 16px;
+    padding: 0 8px;
   }
 `;
 
 export const CategoryViewsLabel = styled("div")`
-  ${textBody500};
-  color: ${inkMain};
-  padding: 8px 16px;
-
-  ${mediaDesktopSmallUp} {
-    padding: 8px 0;
-  }
+  ${textUppercase500};
+  color: ${inkLight};
+  padding: 8px;
 `;

src/components/Filter/components/Filters/filters.tsx

@@ -1,5 +1,5 @@
 import { Divider } from "@mui/material";
-import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import {
@@ -76,22 +76,13 @@ export const Filters = ({
   const { height: windowHeight } = useWindowResize();
   const filterListRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
-  const isLabeled = useMemo(
-    () => isCategoryViewsLabeled(categoryFilters),
-    [categoryFilters]
-  );
 
   useEffect(() => {
     setHeight(calculateListHeight(windowHeight, filterListRef.current));
   }, [windowHeight]);
 
   return (
-    <FilterList
-      disabled={disabled}
-      height={height}
-      isBaseStyle={!isLabeled}
-      ref={filterListRef}
-    >
+    <FilterList disabled={disabled} height={height} ref={filterListRef}>
       {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}
@@ -126,12 +117,3 @@ function calculateListHeight(
 ): number {
   return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
 }
-
-/**
- * Returns true if any category views are labelled.
- * @param categoryFilters - Category filters.
- * @returns true if any category views are labelled.
- */
-function isCategoryViewsLabeled(categoryFilters: CategoryFilter[]): boolean {
-  return categoryFilters.some(({ label }) => label);
-}