amaannawab923 commented on code in PR #33054:
URL: https://github.com/apache/superset/pull/33054#discussion_r2037787611
##########
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx:
##########
@@ -151,20 +169,21 @@ const HorizontalOverflowFormItem = VerticalFormItem;
const useFilterControlDisplay = (
orientation: FilterBarOrientation,
overflow: boolean,
+ showExcludeSelection: boolean,
) =>
useMemo(() => {
if (orientation === FilterBarOrientation.Horizontal) {
if (overflow) {
return {
FilterControlContainer: HorizontalOverflowFilterControlContainer,
- FormItem: HorizontalOverflowFormItem,
+ FormItem : HorizontalOverflowFormItem,
FilterControlTitleBox: HorizontalOverflowFilterControlTitleBox,
FilterControlTitle: HorizontalOverflowFilterControlTitle,
};
}
return {
FilterControlContainer: HorizontalFilterControlContainer,
- FormItem: HorizontalFormItem,
+ FormItem: (props: any) => <HorizontalFormItem {...props}
showExcludeSelection={showExcludeSelection} />,
Review Comment:
This particular setting is when the FormItem is part of horizontal list but
not in overflowing dropdown and not in Vertical list
In this case the Width of this native filter is frozen to gridUnit * 41 px
but we need space for the exclude filters checkbox as well so this prop is used
as Styled Components props
`
.ant-form-item-control {
width: ${({ theme, showExcludeSelection }) =>
// Requires twice the space
showExcludeSelection ? theme.gridUnit * 41 * 2 : theme.gridUnit *
41}px;
}
.ant-form-item-control-input-content {
// both the elements needs to be in flex display
${({ showExcludeSelection }) => showExcludeSelection && 'display: flex;'}
}
.select-container {
${({ showExcludeSelection, theme }) =>
// Since the select container takes 100% width by default it tries to
takes the entire space of ant-form-item-control
// hence we need to tell it to take same width as you did when you didnt
have the exlude checkbox
showExcludeSelection &&
`
width: ${theme.gridUnit * 41}px;
`}
}
.exclude-filter {
// and since its not below the Native filter but on the right side of it ,
we do not need a margin top
margin-top: 0px;
}`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
