fix: 🐛 Missing scroll bar in expanded filter (#487)

* fix: 🐛 removed "scroll-bar" height css. * bump * bump workspace-fusion
equinor · Oct 9, 2023 · 7d18c52 · 7d18c52
1 parent 35b1438
commit 7d18c52
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 98 deletions.
diff --git a/apps/test-app/src/index.tsx b/apps/test-app/src/index.tsx
@@ -102,6 +102,76 @@ export function App() {
               filterItems: [{ count: 1, value: 'abc' }],
               isQuickFilter: true,
             },
+            {
+              name: 'item1',
+              filterItems: [{ count: 1, value: 'value1' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item2',
+              filterItems: [{ count: 1, value: 'value2' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item3',
+              filterItems: [{ count: 1, value: 'value3' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item4',
+              filterItems: [{ count: 1, value: 'value4' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item5',
+              filterItems: [{ count: 1, value: 'value5' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item6',
+              filterItems: [{ count: 1, value: 'value6' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item7',
+              filterItems: [{ count: 1, value: 'value7' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item8',
+              filterItems: [{ count: 1, value: 'value8' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item9',
+              filterItems: [{ count: 1, value: 'value9' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item10',
+              filterItems: [{ count: 1, value: 'value10' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item11',
+              filterItems: [{ count: 1, value: 'value11' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item12',
+              filterItems: [{ count: 1, value: 'value12' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item13',
+              filterItems: [{ count: 1, value: 'value13' }],
+              isQuickFilter: true,
+            },
+            {
+              name: 'item14',
+              filterItems: [{ count: 1, value: 'value14' }],
+              isQuickFilter: true,
+            },
           ],
         },
       }}

diff --git a/packages/filter/package.json b/packages/filter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-filter",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/filter/src/lib/components/filterView/filterView.styles.ts b/packages/filter/src/lib/components/filterView/filterView.styles.ts
@@ -1,96 +1,92 @@
-import { Button, ButtonProps } from '@equinor/eds-core-react';
-import { tokens } from '@equinor/eds-tokens';
-import styled from 'styled-components';
-
-export const StyledWrapper = styled.section`
-  display: flex;
-  flex-direction: row;
-  height: 200px;
-
-  background-color: ${tokens.colors.ui.background__light.rgba};
-  border-bottom: 1.5px solid ${tokens.colors.ui.background__medium.rgba};
-  transition: height 0.35s ease;
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  animation-duration: 0.5s;
-  animation-name: fadeIn;
-`;
-
-export const StyledFilterSelect = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-width: fit-content;
-  margin: 0rem 0.5rem 0rem 0.5rem;
-  padding-right: 0.5rem;
-  overflow: hidden;
-  border-right: 2px solid ${tokens.colors.ui.background__medium.rgba};
-
-  label {
-    padding: 0;
-    span {
-      font-size: 14px;
-      padding: 0;
-      :last-child {
-        padding-right: 0.5rem;
-      }
-    }
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-`;
-export const StyledFilterGroups = styled.div`
-  display: flex;
-  flex-direction: row;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  width: -webkit-fill-available;
-  background-color: ${tokens.colors.ui.background__light.rgba};
-
-  ::-webkit-scrollbar {
-    height: 0.3rem;
-  }
-`;
-
-export const StyledFilterGroupWrapper = styled.div``;
-
-export const StyledSearchFilterWrapper = styled.div`
-  overflow-x: scroll;
-  height: -webkit-fill-available;
-
-  ::-webkit-scrollbar {
-    width: 0.3rem;
-  }
-`;
-
-export const StyledSelectBar = styled.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${tokens.colors.ui.background__light.rgba};
-  border-right: 2px solid ${tokens.colors.ui.background__medium.rgba};
-`;
-
-export const StyledAddButton: (props: ButtonProps) => JSX.Element = styled(Button)`
-  width: 36px;
-  height: 36px;
-`;
-export const StyledSearchButton: (props: ButtonProps) => JSX.Element = styled(Button)`
-  width: 36px;
-  height: 36px;
-`;
-
-export const StyledFilterSelectHeaderGroup = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
+import { Button, ButtonProps } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import styled from 'styled-components';
+
+export const StyledWrapper = styled.section`
+  display: flex;
+  flex-direction: row;
+  height: 200px;
+
+  background-color: ${tokens.colors.ui.background__light.rgba};
+  border-bottom: 1.5px solid ${tokens.colors.ui.background__medium.rgba};
+  transition: height 0.35s ease;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  animation-duration: 0.5s;
+  animation-name: fadeIn;
+`;
+
+export const StyledFilterSelect = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: fit-content;
+  margin: 0rem 0.5rem 0rem 0.5rem;
+  padding-right: 0.5rem;
+  overflow: hidden;
+  border-right: 2px solid ${tokens.colors.ui.background__medium.rgba};
+
+  label {
+    padding: 0;
+    span {
+      font-size: 14px;
+      padding: 0;
+      :last-child {
+        padding-right: 0.5rem;
+      }
+    }
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+`;
+export const StyledFilterGroups = styled.div`
+  display: flex;
+  flex-direction: row;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  width: -webkit-fill-available;
+  background-color: ${tokens.colors.ui.background__light.rgba};
+`;
+
+export const StyledFilterGroupWrapper = styled.div``;
+
+export const StyledSearchFilterWrapper = styled.div`
+  overflow-x: scroll;
+  height: -webkit-fill-available;
+
+  ::-webkit-scrollbar {
+    width: 0.3rem;
+  }
+`;
+
+export const StyledSelectBar = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${tokens.colors.ui.background__light.rgba};
+  border-right: 2px solid ${tokens.colors.ui.background__medium.rgba};
+`;
+
+export const StyledAddButton: (props: ButtonProps) => JSX.Element = styled(Button)`
+  width: 36px;
+  height: 36px;
+`;
+export const StyledSearchButton: (props: ButtonProps) => JSX.Element = styled(Button)`
+  width: 36px;
+  height: 36px;
+`;
+
+export const StyledFilterSelectHeaderGroup = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",