This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch add-filter-and-divider-buttons
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/add-filter-and-divider-buttons
by this push:
new 033fd31684 fix(filters): improving the add filter/divider UI.
033fd31684 is described below
commit 033fd316846575db7b09d7f8382d52ac3c3bdc3b
Author: Evan Rusackas <[email protected]>
AuthorDate: Tue Dec 3 23:07:38 2024 -0700
fix(filters): improving the add filter/divider UI.
---
.../src/SqlLab/components/TableElement/index.tsx | 1 -
.../src/components/ButtonGroup/index.tsx | 13 ++++-
.../src/components/Icons/AntdEnhanced.tsx | 2 +
.../FiltersConfigModal/FilterTitlePane.tsx | 64 +++++++++-------------
4 files changed, 37 insertions(+), 43 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
index bb70587ca6..5817e5662c 100644
--- a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
@@ -267,7 +267,6 @@ const TableElement = ({ table, ...props }:
TableElementProps) => {
return (
<ButtonGroup
css={css`
- display: flex;
column-gap: ${theme.gridUnit * 1.5}px;
margin-right: ${theme.gridUnit}px;
& span {
diff --git a/superset-frontend/src/components/ButtonGroup/index.tsx
b/superset-frontend/src/components/ButtonGroup/index.tsx
index c3be51c9ed..a4db7f34c1 100644
--- a/superset-frontend/src/components/ButtonGroup/index.tsx
+++ b/superset-frontend/src/components/ButtonGroup/index.tsx
@@ -21,6 +21,7 @@ import { ReactNode } from 'react';
export interface ButtonGroupProps {
className?: string;
children: ReactNode;
+ expand?: boolean;
}
export default function ButtonGroup(props: ButtonGroupProps) {
@@ -30,22 +31,28 @@ export default function ButtonGroup(props:
ButtonGroupProps) {
role="group"
className={className}
css={{
- '& :nth-of-type(1):not(:nth-last-of-type(1))': {
+ display: 'flex',
+ '& > :nth-of-type(1):not(:nth-last-of-type(1))': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
borderRight: 0,
marginLeft: 0,
},
- '& :not(:nth-of-type(1)):not(:nth-last-of-type(1))': {
+ '& > :not(:nth-of-type(1)):not(:nth-last-of-type(1))': {
borderRadius: 0,
borderRight: 0,
marginLeft: 0,
},
- '& :nth-last-of-type(1):not(:nth-of-type(1))': {
+ '& > :nth-last-of-type(1):not(:nth-of-type(1))': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
marginLeft: 0,
},
+ ...(props.expand && {
+ '& .superset-button': {
+ flexGrow: 1,
+ },
+ }),
}}
>
{children}
diff --git a/superset-frontend/src/components/Icons/AntdEnhanced.tsx
b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
index ce19dd862f..4dcbc494a1 100644
--- a/superset-frontend/src/components/Icons/AntdEnhanced.tsx
+++ b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
@@ -54,6 +54,7 @@ import {
LineChartOutlined,
LoadingOutlined,
MonitorOutlined,
+ PicCenterOutlined,
PlusCircleOutlined,
PlusOutlined,
ReloadOutlined,
@@ -106,6 +107,7 @@ const AntdIcons = {
LineChartOutlined,
LoadingOutlined,
MonitorOutlined,
+ PicCenterOutlined,
PlusCircleOutlined,
PlusOutlined,
ReloadOutlined,
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 8014f3bbb1..df823bc248 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -19,8 +19,10 @@
import { useRef, FC } from 'react';
import { NativeFilterType, styled, t, useTheme } from '@superset-ui/core';
-import { AntdDropdown } from 'src/components';
-import { MainNav as Menu } from 'src/components/Menu';
+import { Button } from 'src/components';
+import Icons from 'src/components/Icons';
+import ButtonGroup from 'src/components/ButtonGroup';
+
import FilterTitleContainer from './FilterTitleContainer';
import { FilterRemoval } from './types';
@@ -37,27 +39,15 @@ interface Props {
erroredFilters: string[];
}
-const StyledAddBox = styled.div`
- ${({ theme }) => `
- cursor: pointer;
- margin: ${theme.gridUnit * 4}px;
- color: ${theme.colors.primary.base};
- &:hover {
- color: ${theme.colors.primary.dark1};
- }
-`}
-`;
const TabsContainer = styled.div`
height: 100%;
display: flex;
flex-direction: column;
+ padding: ${({ theme }) => theme.gridUnit * 3}px;
+ padding-bottom: 2px;
+ /* align-items: stretch; */
`;
-const options = [
- { label: t('Filter'), type: NativeFilterType.NativeFilter },
- { label: t('Divider'), type: NativeFilterType.Divider },
-];
-
const FilterTitlePane: FC<Props> = ({
getFilterTitle,
onChange,
@@ -71,7 +61,6 @@ const FilterTitlePane: FC<Props> = ({
erroredFilters,
}) => {
const filtersContainerRef = useRef<HTMLDivElement>(null);
- const theme = useTheme();
const handleOnAdd = (type: NativeFilterType) => {
onAdd(type);
@@ -88,33 +77,30 @@ const FilterTitlePane: FC<Props> = ({
});
}, 0);
};
- const menu = (
- <Menu mode="horizontal">
- {options.map(item => (
- <Menu.Item onClick={() => handleOnAdd(item.type)}>
- {item.label}
- </Menu.Item>
- ))}
- </Menu>
- );
return (
<TabsContainer>
- <AntdDropdown
- overlay={menu}
- arrow
- placement="topLeft"
- trigger={['hover']}
- >
- <StyledAddBox>
- <div data-test="new-dropdown-icon" className="fa fa-plus" />{' '}
- <span>{t('Add filters and dividers')}</span>
- </StyledAddBox>
- </AntdDropdown>
+ <ButtonGroup expand>
+ <Button
+ buttonSize="default"
+ buttonStyle="tertiary"
+ icon={<Icons.Filter iconSize="m" />}
+ onClick={() => handleOnAdd(NativeFilterType.NativeFilter)}
+ >
+ {t('Add Filter')}
+ </Button>
+ <Button
+ buttonSize="default"
+ buttonStyle="tertiary"
+ icon={<Icons.PicCenterOutlined iconSize="m" />}
+ onClick={() => handleOnAdd(NativeFilterType.Divider)}
+ >
+ {t('Add Divider')}
+ </Button>
+ </ButtonGroup>
<div
css={{
height: '100%',
overflowY: 'auto',
- marginLeft: theme.gridUnit * 3,
}}
>
<FilterTitleContainer
