diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx index c6ce03e0398..2e4a0ad1dda 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx @@ -16,7 +16,6 @@ * specific language governing permissions and limitations * under the License. */ -import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants'; import { render, screen, userEvent } from 'spec/helpers/testing-library'; import ActionButtons from './index'; @@ -76,30 +75,3 @@ test('should apply', () => { userEvent.click(applyBtn); expect(mockedProps.onApply).toHaveBeenCalled(); }); - -// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks -describe('custom width', () => { - test('sets its default width with OPEN_FILTER_BAR_WIDTH', () => { - const mockedProps = createProps(); - render(, { useRedux: true }); - const container = screen.getByTestId('filterbar-action-buttons'); - expect(container).toHaveStyle({ - width: `${OPEN_FILTER_BAR_WIDTH - 1}px`, - }); - }); - - test('sets custom width', () => { - const mockedProps = createProps(); - const expectedWidth = 423; - const { getByTestId } = render( - , - { - useRedux: true, - }, - ); - const container = getByTestId('filterbar-action-buttons'); - expect(container).toHaveStyle({ - width: `${expectedWidth - 1}px`, - }); - }); -}); 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 7c685842946..7b0c671000b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx @@ -27,13 +27,11 @@ import { } from '@superset-ui/core'; import { css, SupersetTheme, styled } from '@apache-superset/core/theme'; import { Button, Tooltip, Icons, Flex } from '@superset-ui/core/components'; -import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants'; import tinycolor from 'tinycolor2'; import { FilterBarOrientation } from 'src/dashboard/types'; import { getFilterBarTestId } from '../utils'; interface ActionButtonsProps { - width?: number; onApply: () => void; onClearAll: () => void; dataMaskSelected: DataMaskState; @@ -44,17 +42,16 @@ interface ActionButtonsProps { hasOutOfScopeRequiredFilters?: boolean; } -const ButtonsContainer = styled.div<{ isVertical: boolean; width: number }>` - ${({ theme, isVertical, width }) => css` +const ButtonsContainer = styled.div<{ isVertical: boolean }>` + ${({ theme, isVertical }) => css` display: flex; ${isVertical ? css` flex-direction: column; align-items: center; - position: fixed; + position: sticky; z-index: 100; - width: ${width - 1}px; bottom: 0; padding: ${theme.sizeUnit * 4}px; padding-top: ${theme.sizeUnit * 6}px; @@ -100,7 +97,6 @@ const clearAllButtonStyle = (theme: SupersetTheme, isVertical: boolean) => css` `; const ActionButtons = ({ - width = OPEN_FILTER_BAR_WIDTH, onApply, onClearAll, dataMaskApplied, @@ -143,7 +139,6 @@ const ActionButtons = ({ return (