From d2b76a8b1a42b16c72979693380f26b4d8c02fe5 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 6 Dec 2022 21:04:17 +0100 Subject: [PATCH] fix: Styling fixes for horizontal filter bar (#22337) --- .../dashboard/nativeFilters.test.ts | 2 +- .../components/DropdownContainer/index.tsx | 2 +- .../FilterBar/ActionButtons/index.tsx | 3 +- .../FilterControls/FilterControls.tsx | 2 +- .../FilterControls/FilterDivider.tsx | 10 ++--- .../nativeFilters/FilterBar/Header/index.tsx | 39 ++++++++++++------- .../nativeFilters/FilterBar/Horizontal.tsx | 16 ++++---- 7 files changed, 42 insertions(+), 32 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts index 99174a5eab58..eb38aca4e8d0 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -286,7 +286,7 @@ describe('Horizontal FilterBar', () => { setFilterBarOrientation('horizontal'); cy.getBySel('form-item-value').should('have.length', 3); - cy.viewport(800, 1024); + cy.viewport(768, 1024); cy.getBySel('form-item-value').should('have.length', 0); openMoreFilters(); cy.getBySel('form-item-value').should('have.length', 3); diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx index ed2295dafa4c..5c526cf9cc03 100644 --- a/superset-frontend/src/components/DropdownContainer/index.tsx +++ b/superset-frontend/src/components/DropdownContainer/index.tsx @@ -316,7 +316,7 @@ const DropdownContainer = forwardRef( display: flex; align-items: center; gap: ${theme.gridUnit * 4}px; - margin-right: ${theme.gridUnit * 3}px; + margin-right: ${theme.gridUnit * 4}px; min-width: 0px; `} data-test="container" diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx index a64f878c89b8..cb6f17d96dbf 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx @@ -87,7 +87,8 @@ const verticalStyle = (theme: SupersetTheme, width: number) => css` `; const horizontalStyle = (theme: SupersetTheme) => css` - margin: 0 ${theme.gridUnit * 4}px; + align-items: center; + margin-left: auto; && > .filter-clear-all-button { text-transform: capitalize; font-weight: ${theme.typography.weights.normal}; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx index 586154aa8bd7..2b265e547fd1 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -160,7 +160,7 @@ const FilterControls: FC = ({
css` - padding-left: ${theme.gridUnit * 4}px; + padding: 0 ${theme.gridUnit * 4}px; min-width: 0; flex: 1; ` diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx index 5ea38b134566..e06a56ac7bc6 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx @@ -56,7 +56,7 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => {

{title} @@ -126,12 +125,11 @@ const HorizontalOverflowDivider = ({ ref={descriptionRef} data-test="divider-description" css={css` - ${truncationCSS} + ${truncationCSS}; display: block; font-size: ${theme.typography.sizes.s}px; color: ${theme.colors.grayscale.base}; - margin: ${theme.gridUnit * 2}px 0 0 0; - line-height: 1; + margin: ${theme.gridUnit}px 0 0 0; `} > {description} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx index 5057bef9b143..023d86c9aeee 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx @@ -35,29 +35,40 @@ import { RootState } from 'src/dashboard/types'; import { getFilterBarTestId } from '../utils'; import FilterBarOrientationSelect from '../FilterBarOrientationSelect'; -const TitleArea = styled.h4` - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0; - padding: ${({ theme }) => theme.gridUnit * 2}px; +const TitleArea = styled.div` + ${({ theme }) => css` + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + margin: 0; + padding: 0 ${theme.gridUnit * 2}px ${theme.gridUnit * 2}px; + + & > span { + font-size: ${theme.typography.sizes.l}px; + flex-grow: 1; + font-weight: ${theme.typography.weights.bold}; + } + + & > div:first-of-type { + line-height: 0; + } - & > span { - flex-grow: 1; - } + & > button > span.anticon { + line-height: 0; + } + `} `; const HeaderButton = styled(Button)` padding: 0; - - .anticon { - padding-top: ${({ theme }) => `${theme.gridUnit + 2}px`}; - } `; const Wrapper = styled.div` ${({ theme }) => ` - padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px; + padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 2}px ${ + theme.gridUnit + }px; .ant-dropdown-trigger span { padding-right: ${theme.gridUnit * 2}px; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx index 29df46ef827a..3bb762054b52 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx @@ -29,7 +29,9 @@ import FilterConfigurationLink from './FilterConfigurationLink'; const HorizontalBar = styled.div` ${({ theme }) => ` - padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 2}px; + padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 2}px ${ + theme.gridUnit * 3 + }px ${theme.gridUnit * 4}px; background: ${theme.colors.grayscale.light5}; box-shadow: inset 0px -2px 2px -1px ${theme.colors.grayscale.light2}; `} @@ -42,7 +44,6 @@ const HorizontalBarContent = styled.div` flex-wrap: nowrap; align-items: center; justify-content: flex-start; - padding: 0 ${theme.gridUnit * 2}px; line-height: 0; .loading { @@ -54,7 +55,6 @@ const HorizontalBarContent = styled.div` const FilterBarEmptyStateContainer = styled.div` ${({ theme }) => ` - margin: 0 ${theme.gridUnit * 2}px 0 ${theme.gridUnit * 4}px; font-weight: ${theme.typography.weights.bold}; color: ${theme.colors.grayscale.base}; font-size: ${theme.typography.sizes.s}px; @@ -106,11 +106,6 @@ const HorizontalFilterBar: React.FC = ({ ) : ( <> {canEdit && } - {!hasFilters && ( - - {t('No filters are currently added to this dashboard.')} - - )} {canEdit && ( = ({ )} + {!hasFilters && ( + + {t('No filters are currently added to this dashboard.')} + + )} {hasFilters && (