fix(native-filters): Misc spacing fixes for horizontal and horizontal…

… overflow filter bar items (#22288)
apache · Dec 1, 2022 · 04e0bb9 · 04e0bb9
1 parent afc10a2
commit 04e0bb9
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 24 deletions.
diff --git a/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/...rontend/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/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -121,6 +121,7 @@ const FilterControls: FC<FilterControlsProps> = ({
         id: filter.id,
         element: (
           <div
+            className="filter-item-wrapper"
             css={css`
               flex-shrink: 0;
             `}

diff --git a/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -42,9 +42,14 @@ 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;
+
+        .filter-item-wrapper:first-child & {
+          border-left: none;
+          padding-left: 0;
+        }
       `}
     >
       <Tooltip overlay={titleIsTruncated ? title : null}>
@@ -109,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}
@@ -124,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/...rontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/...rontend/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 = ({
       <FiltersOutOfScopeCollapsible
         filtersOutOfScope={filtersOutOfScope}
         renderer={renderer}
+        horizontalOverflow
       />
     )}
   </div>

diff --git a/...d/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/...d/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) => (
   <AntdCollapse
     ghost
     bordered
     expandIconPosition="right"
     collapsible={filtersOutOfScope.length === 0 ? 'disabled' : undefined}
-    css={theme => 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;
+                }
+              }
+            }
+          `
+    }
   >
     <AntdCollapse.Panel
       header={t('Filters out of scope (%d)', filtersOutOfScope.length)}