Skip to content

Commit

Permalink
Floating SearchFilterDrawer (#616)
Browse files Browse the repository at this point in the history 
- Add `floating` prop to Drawer. It creates a gap between Drawer and viewport, and adds round corners.
- SearchFilterDrawer is now floating.
- Header of SearchFilterDrawer is now sticky.
  • Loading branch information
@mattias800
mattias800 authored Oct 11, 2023
1 parent 2826f6a commit 7250c23
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 161 deletions.
7 changes: 6 additions & 1 deletion packages/filter/src/features/search-filter/components/SearchFilterDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@ export const SearchFilterDrawer: React.FC<SearchFilterDrawerProps> = ({
}, [actions, dispatch]);

return (
<Drawer isOpen={open} onRequestClose={closeDrawer} {...drawerProps}>
<Drawer
floating
isOpen={open}
onRequestClose={closeDrawer}
{...drawerProps}
>
<Column
height={"100%"}
borderRadius={"var(--swui-border-radius)"}
Expand Down
8 changes: 7 additions & 1 deletion packages/filter/src/features/search-filter/components/SearchFilterPanelHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from "react";
import { ReactNode } from "react";
import { FlatButton, stenaTimes } from "@stenajs-webui/elements";
import { Heading, Row, Space, Spacing } from "@stenajs-webui/core";
import { cssColor } from "@stenajs-webui/theme";

interface SearchFilterPanelHeaderProps {
onRequestClose: () => void;
Expand All @@ -13,7 +14,12 @@ export const SearchFilterPanelHeader: React.FC<
SearchFilterPanelHeaderProps
> = ({ onRequestClose, header = "Filter", contentRight }) => {
return (
<Spacing>
<Spacing
position={"sticky"}
top={0}
background={cssColor("--lhds-color-ui-50")}
zIndex={100}
>
<Row
justifyContent={"space-between"}
alignItems={"center"}
Expand Down
315 changes: 157 additions & 158 deletions packages/filter/src/features/search-filter/stories/SearchFilter.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Box, Heading, Indent, Row, useBoolean } from "@stenajs-webui/core";
import {
Card,
FlatButton,
PrimaryButton,
stenaCalendar,
Expand Down Expand Up @@ -332,49 +331,49 @@ export const Demo = () => {

return (
<SearchFilterContext state={state} actions={actions} dispatch={dispatch}>
<Card>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
>
<Row alignItems={"center"}>
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"comparisonDate"}
emptyChipLabel={"No dates"}
{...createChipsPropsForDateRange(
state.formModel,
"startDate",
"endDate"
)}
/>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
/>
<SectionChips
sectionId={"categories"}
emptyChipLabel={"All categories"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"categories",
categoryOptions
)}
/>
</SearchFilterChips>
</Row>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
shadow={"box"}
>
<Row alignItems={"center"}>
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"comparisonDate"}
emptyChipLabel={"No dates"}
{...createChipsPropsForDateRange(
state.formModel,
"startDate",
"endDate"
)}
/>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
/>
<SectionChips
sectionId={"categories"}
emptyChipLabel={"All categories"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"categories",
categoryOptions
)}
/>
</SearchFilterChips>
</Row>
</Card>
</Row>

<SearchFilterDrawer headerContentRight={<SearchFilterClearButton />}>
<DateRangeCalendarSection
label={"Date"}
Expand Down Expand Up @@ -453,51 +452,51 @@ export const WithStickyFooter = () => {

return (
<SearchFilterContext state={state} actions={actions} dispatch={dispatch}>
<Card>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
>
<Row alignItems={"center"}>
<Heading style={{ whiteSpace: "nowrap" }}>App name</Heading>
<Indent />
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"comparisonDate"}
emptyChipLabel={"No dates"}
{...createChipsPropsForDateRange(
state.formModel,
"startDate",
"endDate"
)}
/>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
/>
<SectionChips
sectionId={"categories"}
emptyChipLabel={"All categories"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"categories",
categoryOptions
)}
/>
</SearchFilterChips>
</Row>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
shadow={"box"}
>
<Row alignItems={"center"}>
<Heading style={{ whiteSpace: "nowrap" }}>App name</Heading>
<Indent />
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"comparisonDate"}
emptyChipLabel={"No dates"}
{...createChipsPropsForDateRange(
state.formModel,
"startDate",
"endDate"
)}
/>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
/>
<SectionChips
sectionId={"categories"}
emptyChipLabel={"All categories"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"categories",
categoryOptions
)}
/>
</SearchFilterChips>
</Row>
</Card>
</Row>

<SearchFilterDrawer>
<Box overflow={"auto"}>
<DateRangeCalendarSection
Expand Down Expand Up @@ -573,51 +572,51 @@ export const WithClearFiltersInHeader = () => {

return (
<SearchFilterContext state={state} actions={actions} dispatch={dispatch}>
<Card>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
>
<Row alignItems={"center"}>
<Heading style={{ whiteSpace: "nowrap" }}>App name</Heading>
<Indent />
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"comparisonDate"}
emptyChipLabel={"No dates"}
{...createChipsPropsForDateRange(
state.formModel,
"startDate",
"endDate"
)}
/>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
/>
<SectionChips
sectionId={"categories"}
emptyChipLabel={"All categories"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"categories",
categoryOptions
)}
/>
</SearchFilterChips>
</Row>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
shadow={"box"}
>
<Row alignItems={"center"}>
<Heading style={{ whiteSpace: "nowrap" }}>App name</Heading>
<Indent />
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"comparisonDate"}
emptyChipLabel={"No dates"}
{...createChipsPropsForDateRange(
state.formModel,
"startDate",
"endDate"
)}
/>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
/>
<SectionChips
sectionId={"categories"}
emptyChipLabel={"All categories"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"categories",
categoryOptions
)}
/>
</SearchFilterChips>
</Row>
</Card>
</Row>

<SearchFilterDrawer headerContentRight={<ClearFiltersButton />}>
<DateRangeCalendarSection
contentRight={
Expand Down Expand Up @@ -707,34 +706,34 @@ export const ManyChips = () => {

return (
<SearchFilterContext state={state} actions={actions} dispatch={dispatch}>
<Card>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
>
<Row alignItems={"center"}>
<Heading style={{ whiteSpace: "nowrap" }}>App name</Heading>
<Indent />
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
chips={divisionOptions}
/>
</SearchFilterChips>
</Row>
<Row
alignItems={"center"}
justifyContent={"space-between"}
indent={2}
spacing
minHeight={"56px"}
shadow={"box"}
>
<Row alignItems={"center"}>
<Heading style={{ whiteSpace: "nowrap" }}>App name</Heading>
<Indent />
<SearchFilterButton />
<Indent num={0.5} />
<SearchFilterChips>
<SectionChips
sectionId={"divisions"}
emptyChipLabel={"All divisions"}
{...createChipsPropsForBooleanRecord(
state.formModel,
"divisions",
divisionOptions
)}
chips={divisionOptions}
/>
</SearchFilterChips>
</Row>
</Card>
</Row>

<SearchFilterDrawer>
<ChipMultiSelectSection
sectionId={"divisions"}
Expand Down
Loading

0 comments on commit 7250c23

Please sign in to comment.