From 30c39d821a74a2b8c9965793eefaac8f62e1ad0b Mon Sep 17 00:00:00 2001
From: Mattias Andersson <mattias800@gmail.com>
Date: Tue, 10 Oct 2023 08:55:19 +0200
Subject: [PATCH] - 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.

---
 .../components/SearchFilterDrawer.tsx         |   7 +-
 .../components/SearchFilterPanelHeader.tsx    |   8 +-
 .../stories/SearchFilter.stories.tsx          | 315 +++++++++---------
 .../src/components/drawer/Drawer.module.css   |   5 +
 .../modal/src/components/drawer/Drawer.tsx    |  13 +-
 5 files changed, 187 insertions(+), 161 deletions(-)

diff --git a/packages/filter/src/features/search-filter/components/SearchFilterDrawer.tsx b/packages/filter/src/features/search-filter/components/SearchFilterDrawer.tsx
index f7452e9f7..1a64b81b8 100644
--- a/packages/filter/src/features/search-filter/components/SearchFilterDrawer.tsx
+++ b/packages/filter/src/features/search-filter/components/SearchFilterDrawer.tsx
@@ -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)"}
diff --git a/packages/filter/src/features/search-filter/components/SearchFilterPanelHeader.tsx b/packages/filter/src/features/search-filter/components/SearchFilterPanelHeader.tsx
index f638df21e..7d3a71521 100644
--- a/packages/filter/src/features/search-filter/components/SearchFilterPanelHeader.tsx
+++ b/packages/filter/src/features/search-filter/components/SearchFilterPanelHeader.tsx
@@ -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;
@@ -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"}
diff --git a/packages/filter/src/features/search-filter/stories/SearchFilter.stories.tsx b/packages/filter/src/features/search-filter/stories/SearchFilter.stories.tsx
index e4eddf3e3..b7d6ba774 100644
--- a/packages/filter/src/features/search-filter/stories/SearchFilter.stories.tsx
+++ b/packages/filter/src/features/search-filter/stories/SearchFilter.stories.tsx
@@ -1,6 +1,5 @@
 import { Box, Heading, Indent, Row, useBoolean } from "@stenajs-webui/core";
 import {
-  Card,
   FlatButton,
   PrimaryButton,
   stenaCalendar,
@@ -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"}
@@ -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
@@ -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={
@@ -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"}
diff --git a/packages/modal/src/components/drawer/Drawer.module.css b/packages/modal/src/components/drawer/Drawer.module.css
index 42652afec..029cac677 100644
--- a/packages/modal/src/components/drawer/Drawer.module.css
+++ b/packages/modal/src/components/drawer/Drawer.module.css
@@ -12,6 +12,11 @@
     position: absolute;
     transition: transform var(--swui-animation-time-medium) ease-in-out;
 
+    &.floating {
+      margin: var(--swui-metrics-space);
+      border-radius: var(--swui-border-radius);
+    }
+
     &:focus-visible {
       outline: unset;
     }
diff --git a/packages/modal/src/components/drawer/Drawer.tsx b/packages/modal/src/components/drawer/Drawer.tsx
index 0a2e5f660..5d53f469f 100644
--- a/packages/modal/src/components/drawer/Drawer.tsx
+++ b/packages/modal/src/components/drawer/Drawer.tsx
@@ -41,6 +41,12 @@ interface DrawerBaseProps
     | "parentSelector"
   > {
   background?: string;
+
+  /**
+   * When true, there will be a gap between the drawer and the viewport.
+   */
+  floating?: boolean;
+
   zIndex?: number;
   onRequestClose?: () => void;
   /**
@@ -55,6 +61,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   children,
   slideFrom = "left",
   portalTarget,
+  floating,
   ...reactModalProps
 }) => {
   const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;
@@ -69,7 +76,11 @@ export const Drawer: React.FC<DrawerProps> = ({
         beforeClose: styles.beforeClose,
       }}
       className={{
-        base: cx(styles.content, getClassNameForSlide(slideFrom)),
+        base: cx(
+          styles.content,
+          getClassNameForSlide(slideFrom),
+          floating && styles.floating
+        ),
         afterOpen: styles.afterOpen,
         beforeClose: styles.beforeClose,
       }}