Merge branch 'releases/1.9' of https://github.com/Puzzlepart/prosjekt…

…portalen365 into releases/1.9

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;
-    }
-}
+  }
+  .sectionContent {
+    display: flex;
+    flex-direction: column;
+  }
+}

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>
   )

SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.module.scss

@@ -1,4 +1,8 @@
 .filterItem {
-    padding: 8px 0;
-    font-size: 14px;
-}
+  border-radius: var(--borderRadiusMedium);
+  color: var(--colorNeutralForeground1) !important;
+
+  &:hover {
+    background-color: var(--colorSubtleBackgroundHover);
+  }
+}

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}
+    />
   )
 }

SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.module.scss

@@ -0,0 +1,6 @@
+.filterPanel {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  gap: 16px;
+}

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>
   )
 }