From b8eb156ff05d995855fde0166d0891c2372dcb37 Mon Sep 17 00:00:00 2001
From: Bloom <remi.blom-ohlsen@puzzlepart.com>
Date: Tue, 7 Nov 2023 08:44:13 +0100
Subject: [PATCH] =?UTF-8?q?Visuelt=20l=C3=B8ft=20-=20Filterpanel=20(#1299)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Visual overhaul - FilterPanel

* Minor change

* Use Icon component from shared
---
 .../FilterPanel/Filter/Filter.module.scss     | 39 ++++++++-----------
 .../components/FilterPanel/Filter/Filter.tsx  | 14 +++----
 .../FilterItem/FilterItem.module.scss         | 10 +++--
 .../FilterPanel/FilterItem/FilterItem.tsx     | 11 +++---
 .../FilterPanel/FilterPanel.module.scss       |  6 +++
 .../components/FilterPanel/FilterPanel.tsx    | 22 +++++++----
 6 files changed, 57 insertions(+), 45 deletions(-)
 create mode 100644 SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.module.scss

diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.module.scss b/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.module.scss
index 66bcfd55a..fc9037edc 100644
--- a/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.module.scss
+++ b/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.module.scss
@@ -1,26 +1,19 @@
 .filter {
-    margin: 20px 0 0 0;     
-    .filterSectionHeader {
-        position: relative;
-        color: #666666;
-        height: 20px;
-        padding: 6px 0;
-        cursor: pointer;
+  .sectionHeader {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    cursor: pointer;
+    border-radius: var(--borderRadiusMedium);
+    padding: 6px;
+    color: var(--colorNeutralForeground3);
 
-        .titleText {
-            font-size: 14px;
-            font-weight: 400;
-        }
-        .titleIcon {            
-            font-size: 14px;
-            position: absolute;
-            right: 0;
-        }
+    &:hover {
+      background-color: var(--colorSubtleBackgroundHover);
     }
-    .filterSectionContent {
-        font-size: 12px;
-        list-style-type: none;
-        margin: 4px 0 0 0;
-        padding: 0;
-    }
-}
\ No newline at end of file
+  }
+  .sectionContent {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.tsx b/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.tsx
index 968985cfe..08aa7c085 100644
--- a/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.tsx
+++ b/SharePointFramework/shared-library/src/components/FilterPanel/Filter/Filter.tsx
@@ -1,22 +1,22 @@
-import { Icon } from '@fluentui/react/lib/Icon'
 import React, { FC } from 'react'
 import styles from './Filter.module.scss'
 import { IFilterProps } from './types'
 import { useFilter } from './useFilter'
+import { getFluentIcon } from '../../../icons'
 
 export const Filter: FC<IFilterProps> = (props) => {
   const { state, onToggleSectionContent, renderItems } = useFilter(props)
 
   return (
     <div className={styles.filter}>
-      <div className={styles.filterSectionHeader} onClick={onToggleSectionContent}>
-        <span className={styles.titleText}>{props.column.name}</span>
-        <span className={styles.titleIcon}>
-          <Icon iconName={state.isCollapsed ? 'ChevronUp' : 'ChevronDown'} />
-        </span>
+      <div className={styles.sectionHeader} onClick={onToggleSectionContent}>
+        <span>{props.column.name}</span>
+        {state.isCollapsed
+          ? getFluentIcon('ChevronUp', { size: 16 })
+          : getFluentIcon('ChevronDown', { size: 16 })}
       </div>
       <div hidden={state.isCollapsed}>
-        <ul className={styles.filterSectionContent}>{renderItems()}</ul>
+        <div className={styles.sectionContent}>{renderItems()}</div>
       </div>
     </div>
   )
diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.module.scss b/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.module.scss
index 6fe2e1ba8..5c2f865f1 100644
--- a/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.module.scss
+++ b/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.module.scss
@@ -1,4 +1,8 @@
 .filterItem {
-    padding: 8px 0;
-    font-size: 14px;
-}
\ No newline at end of file
+  border-radius: var(--borderRadiusMedium);
+  color: var(--colorNeutralForeground1) !important;
+
+  &:hover {
+    background-color: var(--colorSubtleBackgroundHover);
+  }
+}
diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.tsx b/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.tsx
index 074ab1516..1893ef840 100644
--- a/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.tsx
+++ b/SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.tsx
@@ -5,10 +5,11 @@ import { Checkbox } from '@fluentui/react-components'
 
 export const FilterItem: FC<IFilterItemProps> = (props) => {
   return (
-    <li>
-      <div className={styles.filterItem}>
-        <Checkbox label={props.name} checked={props.selected} onChange={props.onChange} />
-      </div>
-    </li>
+    <Checkbox
+      className={styles.filterItem}
+      label={props.name}
+      checked={props.selected}
+      onChange={props.onChange}
+    />
   )
 }
diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.module.scss b/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.module.scss
new file mode 100644
index 000000000..4bfd77063
--- /dev/null
+++ b/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.module.scss
@@ -0,0 +1,6 @@
+.filterPanel {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  gap: 16px;
+}
diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.tsx b/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.tsx
index a3aa87256..9c7edfe13 100644
--- a/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.tsx
+++ b/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.tsx
@@ -2,17 +2,25 @@ import { Panel, PanelType } from '@fluentui/react'
 import React, { FC } from 'react'
 import { Filter } from './Filter/Filter'
 import { IFilterPanelProps } from './types'
+import styles from './FilterPanel.module.scss'
+import { useId, IdPrefixProvider, FluentProvider, webLightTheme } from '@fluentui/react-components'
 
 export const FilterPanel: FC<IFilterPanelProps> = (props) => {
+  const fluentProviderId = useId('fp-filterPanel')
+
   return (
     <Panel {...props} type={PanelType.smallFixedFar}>
-      <div>
-        {props.filters
-          .filter((f) => f.items.length > 1)
-          .map((f, idx) => (
-            <Filter {...f} key={idx} onFilterChange={props.onFilterChange} />
-          ))}
-      </div>
+      <IdPrefixProvider value={fluentProviderId}>
+        <FluentProvider theme={webLightTheme}>
+          <div className={styles.filterPanel}>
+            {props.filters
+              .filter((f) => f.items.length > 1)
+              .map((f, idx) => (
+                <Filter {...f} key={idx} onFilterChange={props.onFilterChange} />
+              ))}
+          </div>
+        </FluentProvider>
+      </IdPrefixProvider>
     </Panel>
   )
 }