From f5232623d1831cdc2908b9b74c62c6a7a44b8530 Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Wed, 30 Nov 2022 15:44:07 -0700 Subject: [PATCH 1/3] Remove extra divider line if horizontal divider is first item. --- .../FilterBar/FilterControls/FilterControls.tsx | 1 + .../nativeFilters/FilterBar/FilterControls/FilterDivider.tsx | 5 +++++ 2 files changed, 6 insertions(+) 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 c45b54ebe5e5d..6640a9156a4c5 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -114,6 +114,7 @@ const FilterControls: FC = ({ id: filter.id, element: (
{ height: ${8 * theme.gridUnit}px; border-left: 1px solid ${theme.colors.grayscale.light2}; padding-left: ${4 * theme.gridUnit}px; + + .filter-item-wrapper:first-child & { + border-left: none; + padding-left: 0; + } `} > From 18e8c250fc438e049ca44914c4e771284cc715cf Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Wed, 30 Nov 2022 15:45:36 -0700 Subject: [PATCH 2/3] Fix horizontal divider line height. --- .../nativeFilters/FilterBar/FilterControls/FilterDivider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3227247ebe9c6..3ca74651db73c 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx @@ -42,7 +42,7 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => { css={css` display: flex; align-items: center; - height: ${8 * theme.gridUnit}px; + height: ${6 * theme.gridUnit}px; border-left: 1px solid ${theme.colors.grayscale.light2}; padding-left: ${4 * theme.gridUnit}px; From 64b49d2dc343844255b5179b1950e8df2503d099 Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Wed, 30 Nov 2022 16:21:27 -0700 Subject: [PATCH 3/3] Styling tweaks. --- .../FilterControls/FilterControl.tsx | 7 ++- .../FilterControls/FilterDivider.tsx | 4 +- .../FiltersDropdownContent/index.tsx | 2 + .../FiltersOutOfScopeCollapsible/index.tsx | 60 ++++++++++++------- 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx index 29cdf9d460b1f..47ca4b4a5b7d9 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx @@ -97,8 +97,11 @@ const HorizontalFilterControlContainer = styled(Form)` const HorizontalOverflowFilterControlContainer = styled( VerticalFilterControlContainer, )` - && .ant-form-item-label > label { - padding-right: unset; + && .ant-form-item-label { + line-height: 1; + & > label { + padding-right: unset; + } } `; 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 3ca74651db73c..cc5e9e70f8ca2 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx @@ -114,6 +114,7 @@ const HorizontalOverflowDivider = ({ font-weight: ${theme.typography.weights.normal}; font-size: ${theme.typography.sizes.m}px; margin: 0 0 ${theme.gridUnit}px 0; + line-height: 1; `} > {title} @@ -129,7 +130,8 @@ const HorizontalOverflowDivider = ({ display: block; font-size: ${theme.typography.sizes.s}px; color: ${theme.colors.grayscale.base}; - margin: 0; + margin: ${theme.gridUnit * 2.5}px 0 0 0; + line-height: 1; `} > {description} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx index 7ed19f44c670a..ebbf8fb22622b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx @@ -38,6 +38,7 @@ export const FiltersDropdownContent = ({ css={(theme: SupersetTheme) => css` width: ${theme.gridUnit * 56}px; + padding: ${theme.gridUnit}px 0; ` } > @@ -46,6 +47,7 @@ export const FiltersDropdownContent = ({ )}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx index aee46f8d61569..d0ce297ae7f55 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx @@ -18,46 +18,66 @@ */ import React, { ReactNode } from 'react'; import { css } from '@emotion/react'; -import { Divider, Filter, t } from '@superset-ui/core'; +import { Divider, Filter, SupersetTheme, t } from '@superset-ui/core'; import { AntdCollapse } from 'src/components'; export interface FiltersOutOfScopeCollapsibleProps { filtersOutOfScope: (Filter | Divider)[]; renderer: (filter: Filter | Divider) => ReactNode; hasTopMargin?: boolean; + horizontalOverflow?: boolean; } export const FiltersOutOfScopeCollapsible = ({ filtersOutOfScope, - hasTopMargin, renderer, + hasTopMargin, + horizontalOverflow, }: FiltersOutOfScopeCollapsibleProps) => ( css` - &.ant-collapse { - margin-top: ${hasTopMargin - ? theme.gridUnit * 6 - : theme.gridUnit * -3}px; - & > .ant-collapse-item { - & > .ant-collapse-header { - padding-left: 0; - padding-bottom: ${theme.gridUnit * 2}px; + css={(theme: SupersetTheme) => + horizontalOverflow + ? css` + &.ant-collapse > .ant-collapse-item { + & > .ant-collapse-header { + padding: 0; + + & > .ant-collapse-arrow { + right: 0; + padding: 0; + } + } - & > .ant-collapse-arrow { - right: ${theme.gridUnit}px; + & .ant-collapse-content-box { + padding: ${theme.gridUnit * 4}px 0 0; + margin-bottom: ${theme.gridUnit * -4}px; + } } - } + ` + : css` + &.ant-collapse { + margin-top: ${hasTopMargin ? theme.gridUnit * 6 : 0}px; + & > .ant-collapse-item { + & > .ant-collapse-header { + padding-left: 0; + padding-bottom: ${theme.gridUnit * 2}px; - & .ant-collapse-content-box { - padding: ${theme.gridUnit * 4}px 0 0; - } - } - } - `} + & > .ant-collapse-arrow { + right: ${theme.gridUnit}px; + } + } + + & .ant-collapse-content-box { + padding: ${theme.gridUnit * 4}px 0 0; + } + } + } + ` + } >