You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by kg...@apache.org on 2022/12/06 20:04:25 UTC
[superset] branch master updated: fix: Styling fixes for horizontal filter bar (#22337)
This is an automated email from the ASF dual-hosted git repository.
kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new d2b76a8b1a fix: Styling fixes for horizontal filter bar (#22337)
d2b76a8b1a is described below
commit d2b76a8b1a42b16c72979693380f26b4d8c02fe5
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Tue Dec 6 21:04:17 2022 +0100
fix: Styling fixes for horizontal filter bar (#22337)
---
.../integration/dashboard/nativeFilters.test.ts | 2 +-
.../src/components/DropdownContainer/index.tsx | 2 +-
.../FilterBar/ActionButtons/index.tsx | 3 +-
.../FilterBar/FilterControls/FilterControls.tsx | 2 +-
.../FilterBar/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 99174a5eab..eb38aca4e8 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 ed2295dafa..5c526cf9cc 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 a64f878c89..cb6f17d96d 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 586154aa8b..2b265e547f 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<FilterControlsProps> = ({
<div
css={(theme: SupersetTheme) =>
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 5ea38b1345..e06a56ac7b 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) => {
<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}
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 5057bef9b1..023d86c9ae 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 29df46ef82..3bb762054b 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<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}