fix: Styling fixes for horizontal filter bar (#22337)

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);

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"

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};

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx

@@ -160,7 +160,7 @@ const FilterControls: FC<FilterControlsProps> = ({
     <div
       css={(theme: SupersetTheme) =>
         css`
-          padding-left: ${theme.gridUnit * 4}px;
+          padding: 0 ${theme.gridUnit * 4}px;
           min-width: 0;
           flex: 1;
         `

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx

@@ -56,7 +56,7 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
         <h3
           ref={titleRef}
           css={css`
-            ${truncationCSS}
+            ${truncationCSS};
             max-width: ${theme.gridUnit * 32.5}px;
             font-size: ${theme.typography.sizes.m}px;
             font-weight: ${theme.typography.weights.normal};
@@ -108,13 +108,12 @@ const HorizontalOverflowDivider = ({
         <h3
           ref={titleRef}
           css={css`
-            ${truncationCSS}
+            ${truncationCSS};
             display: block;
             color: ${theme.colors.grayscale.dark1};
             font-weight: ${theme.typography.weights.normal};
             font-size: ${theme.typography.sizes.m}px;
             margin: 0 0 ${theme.gridUnit}px 0;
-            line-height: 1;
           `}
         >
           {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}

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 {
-    flex-grow: 1;
-  }
+    & > span {
+      font-size: ${theme.typography.sizes.l}px;
+      flex-grow: 1;
+      font-weight: ${theme.typography.weights.bold};
+    }
+
+    & > div:first-of-type {
+      line-height: 0;
+    }
+
+    & > 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;

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<HorizontalBarProps> = ({
         ) : (
           <>
             {canEdit && <FilterBarOrientationSelect />}
-            {!hasFilters && (
-              <FilterBarEmptyStateContainer data-test="horizontal-filterbar-empty">
-                {t('No filters are currently added to this dashboard.')}
-              </FilterBarEmptyStateContainer>
-            )}
             {canEdit && (
               <FiltersLinkContainer hasFilters={hasFilters}>
                 <FilterConfigurationLink
@@ -121,6 +116,11 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
                 </FilterConfigurationLink>
               </FiltersLinkContainer>
             )}
+            {!hasFilters && (
+              <FilterBarEmptyStateContainer data-test="horizontal-filterbar-empty">
+                {t('No filters are currently added to this dashboard.')}
+              </FilterBarEmptyStateContainer>
+            )}
             {hasFilters && (
               <FilterControls
                 dataMaskSelected={dataMaskSelected}