feat: Update expand filter button (#640)

Update expand filter button to make it clear that there are more filters than the quick
equinor · Sep 19, 2024 · 9d53aa1 · 9d53aa1
1 parent d80012c
commit 9d53aa1
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/packages/filter/package.json b/packages/filter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-filter",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx b/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
@@ -12,12 +12,13 @@ import { FilterQuickSearch } from '../filterQuickSearch/FilterQuickSearch';
 import { FiltersAppliedInfo } from '../filtersAppliedInfo/FiltersAppliedInfo';
 import { FilterGroup as IFilterGroup } from '../../types';
 import { useFilterContext } from '../../context/filterContext';
-import { StyledButton } from '../toggleHideFilterPopover/toggleHideFilterPopover.styles';
+import { StyledButton, StyledButtonContent } from '../toggleHideFilterPopover/toggleHideFilterPopover.styles';
 import { FilterClearIcon, FilterCollapseIcon, FilterExpandIcon } from '../../icons';
 import { ToggleHideFilterPopover } from '../toggleHideFilterPopover/ToggleHideFilterPopover';
 import { FilterView } from '../filterView/FilterView';
 import { useFilterStyles } from '../../hooks/useFilterStyles';
 import { FilterLoadingFallback } from '../Filter';
+import { Button, Tooltip } from '@equinor/eds-core-react';
 
 /**
  * How to separate controller and visual logic in this component?
@@ -111,13 +112,25 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
           <FiltersAppliedInfo activeFilters={calculateHiddenFiltersApplied()} />
           {isFilterExpanded && <ToggleHideFilterPopover allFilters={allFilterGroups} setFilterOrder={setFilterOrder} />}
 
-          <StyledButton onClick={() => clearActiveFilters()}>
-            <FilterClearIcon isDisabled={uncheckedValues.map((s) => s.values).flat().length === 0} />
-          </StyledButton>
-
-          <StyledButton onClick={toggleFilterIsExpanded}>
-            {isFilterExpanded ? <FilterCollapseIcon /> : <FilterExpandIcon />}
-          </StyledButton>
+          <Tooltip title="Clear all active filters">
+            <StyledButton onClick={() => clearActiveFilters()}>
+              <FilterClearIcon isDisabled={uncheckedValues.map((s) => s.values).flat().length === 0} />
+            </StyledButton>
+          </Tooltip>
+
+          <Tooltip title={isFilterExpanded ? 'Hide all filter options' : 'Show all filter options'}>
+            <Button variant="ghost" onClick={toggleFilterIsExpanded}>
+              {isFilterExpanded ? (
+                <StyledButtonContent>
+                  <FilterCollapseIcon /> <div>Hide all</div>
+                </StyledButtonContent>
+              ) : (
+                <StyledButtonContent>
+                  <FilterExpandIcon /> <div>Show all</div>
+                </StyledButtonContent>
+              )}
+            </Button>
+          </Tooltip>
         </StyledButtonWrapper>
       </StyledCompactFilterWrapper>
       {isFilterExpanded && (

diff --git a/packages/filter/src/lib/components/quickFilter/quickFilter.styles.ts b/packages/filter/src/lib/components/quickFilter/quickFilter.styles.ts
@@ -11,6 +11,8 @@ export const StyledCompactFilterWrapper = styled.div<{ isExpanded: boolean }>`
   height: 48px;
   width: 100%;
   background-color: ${tokens.colors.ui.background__light.hex};
+  padding: 0 6px;
+  box-sizing: border-box;
 `;
 
 export const StyledQuickFilterGroupsLayout = styled.div`
@@ -36,4 +38,5 @@ export const StyledButtonWrapper = styled.div`
   align-items: center;
   justify-content: flex-end;
   background-color: ${tokens.colors.ui.background__light.hex};
+  gap: 10px;
 `;
diff --git a/packages/filter/src/lib/components/toggleHideFilterPopover/toggleHideFilterPopover.styles.ts b/packages/filter/src/lib/components/toggleHideFilterPopover/toggleHideFilterPopover.styles.ts
@@ -27,3 +27,11 @@ export const StyledButton = styled.button`
   align-items: center;
   text-align: center;
 `;
+
+export const StyledButtonContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 80px;
+  white-space: nowrap;
+`;
diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "9.0.11",
+  "version": "9.0.12",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",