From 7d18c524258c33eb4edc5e3620995264b15d46d6 Mon Sep 17 00:00:00 2001 From: Espen Kalleberg <108390105+espenkalle@users.noreply.github.com> Date: Mon, 9 Oct 2023 14:54:59 +0200 Subject: [PATCH] fix: :bug: Missing scroll bar in expanded filter (#487) * fix: :bug: removed "scroll-bar" height css. * bump * bump workspace-fusion --- apps/test-app/src/index.tsx | 70 +++++++ packages/filter/package.json | 2 +- .../filterView/filterView.styles.ts | 188 +++++++++--------- packages/workspace-fusion/package.json | 2 +- 4 files changed, 164 insertions(+), 98 deletions(-) diff --git a/apps/test-app/src/index.tsx b/apps/test-app/src/index.tsx index 8f7fc1e23..dfc143a1e 100644 --- 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 index ccdd8989f..b9a8b5cd0 100644 --- 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 index b4f14d599..ca2cb0ac4 100644 --- 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 index c4a8f11ce..1ca4efe5d 100644 --- 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",