This is an automated email from the ASF dual-hosted git repository.
eschutho pushed a commit to branch
fix-dataset-list-bulk-select-new-button-spacing
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to
refs/heads/fix-dataset-list-bulk-select-new-button-spacing by this push:
new ba3c7c59efc fix(datasets): add gap between Bulk select and New buttons
ba3c7c59efc is described below
commit ba3c7c59efc5cf55f89ae9b95d83d884709cc022
Author: Elizabeth Thompson <[email protected]>
AuthorDate: Fri Oct 23 00:00:42 2026 +0000
fix(datasets): add gap between Bulk select and New buttons
SubMenu wraps custom component entries in a span, so Button's
adjacent-sibling margin rule never applied to a component that follows a
Button. Add a child-combinator rule in SubMenu to space such a component
from the preceding Button, and drop the DatasetList margin that never
reached the DOM.
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
---
.../src/features/home/SubMenu.test.tsx | 59 ++++++++++++++++++++++
superset-frontend/src/features/home/SubMenu.tsx | 6 +++
superset-frontend/src/pages/DatasetList/index.tsx | 3 --
3 files changed, 65 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/src/features/home/SubMenu.test.tsx
b/superset-frontend/src/features/home/SubMenu.test.tsx
index caa2a7761e3..c849debe48c 100644
--- a/superset-frontend/src/features/home/SubMenu.test.tsx
+++ b/superset-frontend/src/features/home/SubMenu.test.tsx
@@ -159,3 +159,62 @@ test('should render both leftIcon and rightIcon together',
async () => {
expect(await screen.findByTestId('mobile-left')).toBeInTheDocument();
expect(await screen.findByTestId('mobile-right')).toBeInTheDocument();
});
+
+// Spacing between a plain Button and a custom `component` entry (wrapped in a
+// <span>), which the Button adjacent-sibling margin rule cannot reach.
+const componentButtons = (): ButtonProps[] => [
+ {
+ name: 'Bulk select',
+ buttonStyle: 'secondary',
+ onClick: jest.fn(),
+ },
+ {
+ name: 'New',
+ buttonStyle: 'primary',
+ component: <button type="button">New component</button>,
+ },
+];
+
+const componentWrapper = () =>
+ screen.getByText('New component').parentElement as HTMLElement;
+
+test('adds a gap between a button and a following component entry', () => {
+ setup({ buttons: componentButtons(), dropDownLinks: undefined });
+ expect(getComputedStyle(componentWrapper()).marginLeft).toBe('8px');
+});
+
+test('adds the same gap in the collapsed layout', () => {
+ const original = window.innerWidth;
+ Object.defineProperty(window, 'innerWidth', {
+ configurable: true,
+ writable: true,
+ value: 700,
+ });
+ try {
+ setup({
+ buttons: [{ name: 'Import', buttonStyle: 'link' },
...componentButtons()],
+ dropDownLinks: undefined,
+ });
+ expect(componentWrapper().parentElement).toHaveClass('nav-right-collapse');
+ expect(getComputedStyle(componentWrapper()).marginLeft).toBe('8px');
+ } finally {
+ Object.defineProperty(window, 'innerWidth', {
+ configurable: true,
+ writable: true,
+ value: original,
+ });
+ }
+});
+
+test('does not add a gap to a lone component entry', () => {
+ setup({
+ buttons: [componentButtons()[1]],
+ dropDownLinks: undefined,
+ });
+ expect(getComputedStyle(componentWrapper()).marginLeft).not.toBe('8px');
+});
+
+test('does not add a gap to a component entry that follows a menu', () => {
+ setup({ buttons: [componentButtons()[1]] });
+ expect(getComputedStyle(componentWrapper()).marginLeft).not.toBe('8px');
+});
diff --git a/superset-frontend/src/features/home/SubMenu.tsx
b/superset-frontend/src/features/home/SubMenu.tsx
index 471071453c3..d692857db79 100644
--- a/superset-frontend/src/features/home/SubMenu.tsx
+++ b/superset-frontend/src/features/home/SubMenu.tsx
@@ -85,6 +85,12 @@ const StyledHeader = styled.div<{ backgroundColor?: string
}>`
float: left;
padding-left: 10px;
}
+ /* Button's adjacent-sibling margin can't reach a custom component entry,
+ which is wrapped in a <span>; space it from a preceding Button here. */
+ .nav-right > .superset-button + span,
+ .nav-right-collapse > .superset-button + span {
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
+ }
.menu {
align-items: center;
}
diff --git a/superset-frontend/src/pages/DatasetList/index.tsx
b/superset-frontend/src/pages/DatasetList/index.tsx
index d5e9f414578..76206a546b4 100644
--- a/superset-frontend/src/pages/DatasetList/index.tsx
+++ b/superset-frontend/src/pages/DatasetList/index.tsx
@@ -1357,9 +1357,6 @@ const DatasetList: FunctionComponent<DatasetListProps> =
({
buttonStyle: 'primary',
component: (
<Dropdown
- css={css`
- margin-left: ${theme.sizeUnit * 2}px;
- `}
menu={{
items: [
{
