From 1245e0832613941c3c41dc599835c3beee45dc9d Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Mon, 26 Aug 2024 16:15:21 +1000 Subject: [PATCH] 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 --- .../Filter/components/Filter/filter.styles.ts | 3 +- .../Filter/components/Filter/filter.tsx | 1 + .../FilterLabel/filterLabel.stories.tsx | 2 ++ .../FilterLabel/filterLabel.styles.ts | 30 +++++++++++++++---- .../components/FilterLabel/filterLabel.tsx | 3 ++ .../FilterTags/filterTags.styles.ts | 9 ++---- .../components/Filters/filters.styles.ts | 27 +++++++---------- .../Filter/components/Filters/filters.tsx | 22 ++------------ 8 files changed, 47 insertions(+), 50 deletions(-) diff --git a/src/components/Filter/components/Filter/filter.styles.ts b/src/components/Filter/components/Filter/filter.styles.ts index 7e2965c5..62e949c0 100644 --- a/src/components/Filter/components/Filter/filter.styles.ts +++ b/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. } diff --git a/src/components/Filter/components/Filter/filter.tsx b/src/components/Filter/components/Filter/filter.tsx index 7f2bd193..8a0e0906 100644 --- a/src/components/Filter/components/Filter/filter.tsx +++ b/src/components/Filter/components/Filter/filter.tsx @@ -79,6 +79,7 @@ export const Filter = ({ diff --git a/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx b/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx index 17ef6c57..04363f6b 100644 --- a/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx +++ b/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", }; diff --git a/src/components/Filter/components/FilterLabel/filterLabel.styles.ts b/src/components/Filter/components/FilterLabel/filterLabel.styles.ts index ed70e83e..43a642e8 100644 --- a/src/components/Filter/components/FilterLabel/filterLabel.styles.ts +++ b/src/components/Filter/components/FilterLabel/filterLabel.styles.ts @@ -1,17 +1,25 @@ +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", +})` 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 { @@ -19,16 +27,28 @@ export const FilterLabel = styled(Button)` } & .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); + } + } + `}; `; diff --git a/src/components/Filter/components/FilterLabel/filterLabel.tsx b/src/components/Filter/components/FilterLabel/filterLabel.tsx index d3c6545b..1b7668c6 100644 --- a/src/components/Filter/components/FilterLabel/filterLabel.tsx +++ b/src/components/Filter/components/FilterLabel/filterLabel.tsx @@ -5,6 +5,7 @@ import { FilterLabel as Label } from "./filterLabel.styles"; export interface FilterLabelProps { count?: number; disabled?: boolean; + isOpen: boolean; label: string; onClick: (event: MouseEvent) => void; } @@ -12,6 +13,7 @@ export interface FilterLabelProps { export const FilterLabel = ({ count, disabled = false, + isOpen, label, onClick, }: FilterLabelProps): JSX.Element => { @@ -22,6 +24,7 @@ export const FilterLabel = ({ disabled={disabled} endIcon={} fullWidth + isOpen={isOpen} onClick={onClick} > {filterLabel} diff --git a/src/components/Filter/components/FilterTags/filterTags.styles.ts b/src/components/Filter/components/FilterTags/filterTags.styles.ts index 3f048efa..714b1c81 100644 --- a/src/components/Filter/components/FilterTags/filterTags.styles.ts +++ b/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; - } `; diff --git a/src/components/Filter/components/Filters/filters.styles.ts b/src/components/Filter/components/Filters/filters.styles.ts index 7b6004dc..d0d3254e 100644 --- a/src/components/Filter/components/Filters/filters.styles.ts +++ b/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.isBaseStyle ? textBody500(props) : textBody400(props))}; - color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))}; +export const Filters = styled("div")` + ${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; `; diff --git a/src/components/Filter/components/Filters/filters.tsx b/src/components/Filter/components/Filters/filters.tsx index 70dd78b5..5f3c2e98 100644 --- a/src/components/Filter/components/Filters/filters.tsx +++ b/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(null); const [height, setHeight] = useState(0); - const isLabeled = useMemo( - () => isCategoryViewsLabeled(categoryFilters), - [categoryFilters] - ); useEffect(() => { setHeight(calculateListHeight(windowHeight, filterListRef.current)); }, [windowHeight]); return ( - + {categoryFilters.map(({ categoryViews, label }, i) => ( {i !== 0 && } @@ -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); -}