This is an automated email from the ASF dual-hosted git repository. amitmiran pushed a commit to branch 1.3 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 65fe7ef0bb145156e80697ddd8ac4deb59d1ee72 Author: Michael S. Molina <[email protected]> AuthorDate: Mon Jun 28 14:03:14 2021 -0300 fix: Cascading filter popover widens automatically (#15390) (cherry picked from commit ac18c90da254c1360741ae46342e23f81644a095) --- .../CascadeFilters/CascadeFilterControl/index.tsx | 54 +++++++++------------- .../CascadeFilters/CascadePopover/index.tsx | 25 ++++++---- .../FilterBar/FilterControls/FilterControl.tsx | 16 +++---- 3 files changed, 45 insertions(+), 50 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx index 9190882..75d6497 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx @@ -18,7 +18,6 @@ */ import React from 'react'; import { styled, DataMask } from '@superset-ui/core'; -import Icon from 'src/components/Icon'; import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl'; import { CascadeFilter } from 'src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/types'; import { Filter } from 'src/dashboard/components/nativeFilters/types'; @@ -31,19 +30,15 @@ export interface CascadeFilterControlProps { onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void; } -const StyledCascadeChildrenList = styled.ul` - list-style-type: none; - & > * { - list-style-type: none; - } -`; - -const StyledFilterControlBox = styled.div` +const StyledDiv = styled.div` display: flex; -`; + width: 100%; + flex-direction: column; + align-items: center; -const StyledCaretIcon = styled(Icon)` - margin-top: ${({ theme }) => -theme.gridUnit}px; + .ant-form-item { + margin-bottom: ${({ theme }) => theme.gridUnit * 4}px; + } `; const CascadeFilterControl: React.FC<CascadeFilterControlProps> = ({ @@ -53,28 +48,23 @@ const CascadeFilterControl: React.FC<CascadeFilterControlProps> = ({ onFilterSelectionChange, }) => ( <> - <StyledFilterControlBox> - <StyledCaretIcon name="caret-down" /> - <FilterControl - dataMaskSelected={dataMaskSelected} - filter={filter} - directPathToChild={directPathToChild} - onFilterSelectionChange={onFilterSelectionChange} - /> - </StyledFilterControlBox> - - <StyledCascadeChildrenList> + <FilterControl + dataMaskSelected={dataMaskSelected} + filter={filter} + directPathToChild={directPathToChild} + onFilterSelectionChange={onFilterSelectionChange} + /> + <StyledDiv> {filter.cascadeChildren?.map(childFilter => ( - <li key={childFilter.id}> - <CascadeFilterControl - dataMaskSelected={dataMaskSelected} - filter={childFilter} - directPathToChild={directPathToChild} - onFilterSelectionChange={onFilterSelectionChange} - /> - </li> + <CascadeFilterControl + key={childFilter.id} + dataMaskSelected={dataMaskSelected} + filter={childFilter} + directPathToChild={directPathToChild} + onFilterSelectionChange={onFilterSelectionChange} + /> ))} - </StyledCascadeChildrenList> + </StyledDiv> </> ); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx index 6ec8780..82afdcf 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx @@ -74,6 +74,11 @@ const StyledPill = styled(Pill)` background: ${({ theme }) => theme.colors.grayscale.light1}; `; +const ContentWrapper = styled.div` + max-height: 700px; + overflow-y: auto; +`; + const CascadePopover: React.FC<CascadePopoverProps> = ({ dataMaskSelected, filter, @@ -166,14 +171,16 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({ ); const content = ( - <CascadeFilterControl - dataMaskSelected={dataMaskSelected} - data-test="cascade-filters-control" - key={filter.id} - filter={filter} - directPathToChild={visible ? currentPathToChild : undefined} - onFilterSelectionChange={onFilterSelectionChange} - /> + <ContentWrapper> + <CascadeFilterControl + dataMaskSelected={dataMaskSelected} + data-test="cascade-filters-control" + key={filter.id} + filter={filter} + directPathToChild={visible ? currentPathToChild : undefined} + onFilterSelectionChange={onFilterSelectionChange} + /> + </ContentWrapper> ); return ( @@ -185,7 +192,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({ onVisibleChange={onVisibleChange} placement="rightTop" id={filter.id} - overlayStyle={{ minWidth: '400px', maxWidth: '600px' }} + overlayStyle={{ width: '400px' }} > <div> {activeFilters.map(activeFilter => ( 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 db57fdf..f450306 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx @@ -23,13 +23,6 @@ import FilterValue from './FilterValue'; import { FilterProps } from './types'; import { checkIsMissingRequiredValue } from '../utils'; -const StyledFormItem = styled(FormItem)` - & label { - width: 100%; - padding-right: ${({ theme }) => theme.gridUnit * 11}px; - } -`; - const StyledIcon = styled.div` position: absolute; right: 0; @@ -52,6 +45,11 @@ const StyledFilterControlTitleBox = styled.div` const StyledFilterControlContainer = styled(Form)` width: 100%; + & .ant-form-item-label > label { + text-transform: none; + width: 100%; + padding-right: ${({ theme }) => theme.gridUnit * 11}px; + } `; const FilterControl: React.FC<FilterProps> = ({ @@ -71,7 +69,7 @@ const FilterControl: React.FC<FilterProps> = ({ return ( <StyledFilterControlContainer layout="vertical"> - <StyledFormItem + <FormItem label={ <StyledFilterControlTitleBox> <StyledFilterControlTitle data-test="filter-control-name"> @@ -90,7 +88,7 @@ const FilterControl: React.FC<FilterProps> = ({ onFilterSelectionChange={onFilterSelectionChange} inView={inView} /> - </StyledFormItem> + </FormItem> </StyledFilterControlContainer> ); };
