From 1dd504479ab7906cb9a2c2dc4972d529638ba35f Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 19 May 2026 16:53:42 +0200 Subject: [PATCH 01/11] feat(ui): remove bg-color from DataGridToolbar component (1692) --- .../src/components/DataGridToolbar/DataGridToolbar.component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx b/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx index ada64863f5..0657f7e011 100644 --- a/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx +++ b/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx @@ -6,7 +6,6 @@ import React, { HTMLAttributes, ReactNode } from "react" const baseToolbarStyles = ` - jn:bg-theme-background-lvl-1 jn:py-3 jn:px-6 jn:mb-px From 27c5409daf3cc2f619422ffbd560089a94aedde1 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 19 May 2026 17:28:31 +0200 Subject: [PATCH 02/11] feat(ui): remove alignRight prop from DataGridToolbar Users now have to use Stack(s) themselves as childrne, and have full control over item distribution --- .../DataGridToolbar.component.tsx | 25 +-- .../DataGridToolbar.stories.tsx | 210 ++++++++++++++---- .../DataGridToolbar/DataGridToolbar.test.tsx | 12 - 3 files changed, 177 insertions(+), 70 deletions(-) diff --git a/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx b/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx index 0657f7e011..c5c650e7b7 100644 --- a/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx +++ b/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx @@ -12,22 +12,15 @@ const baseToolbarStyles = ` ` /** - * `DataGridToolbar` provides an action bar for a `DataGrid`, designed to hold controls like buttons and search inputs - * for performing group operations and interfacing with the grid content. + * `DataGridToolbar` is a spacing wrapper for a `DataGrid` header row. It provides consistent padding and separation + * from the grid below. Use `Stack` inside to compose and position toolbar content. * @see https://cloudoperators.github.io/juno/?path=/docs/components-datagrid-datagridtoolbar--docs * @see {@link DataGridToolbarProps} */ -export const DataGridToolbar = ({ - className = "", - children, - alignRight = true, - ...props -}: DataGridToolbarProps): ReactNode => { - const childrenWrapperStyles = alignRight ? "jn:ml-auto" : "" - const alignmentToolbarStyles = alignRight ? "jn:flex jn:items-center" : "" +export const DataGridToolbar = ({ className = "", children, ...props }: DataGridToolbarProps): ReactNode => { return ( -
-
{children}
+
+ {children}
) } @@ -43,12 +36,4 @@ export interface DataGridToolbarProps extends HTMLAttributes { * @default "" */ className?: string - - /** - * Determines whether the children are automatically aligned to the right side within the toolbar. - * When true, applies `ml-auto` to the children wrapper, pushing content right. - * When false, no automatic alignment is applied, allowing for custom layouts. - * @default true - */ - alignRight?: boolean } diff --git a/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.stories.tsx b/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.stories.tsx index 237221f690..2005200e6b 100644 --- a/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.stories.tsx +++ b/packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.stories.tsx @@ -3,18 +3,25 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from "react" +import React, { useState } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { DataGridToolbar, DataGridToolbarProps } from "./index" -import { Pill } from "../Pill" +import { DataGridToolbar } from "./index" +import { DataGrid } from "../DataGrid" +import { DataGridRow } from "../DataGridRow" +import { DataGridCell } from "../DataGridCell" +import { DataGridHeadCell } from "../DataGridHeadCell" import { Stack } from "../Stack" -import { SearchInput } from "../SearchInput" -import { ComboBox } from "../ComboBox" -import { ComboBoxOption } from "../ComboBoxOption" import { Button } from "../Button" -import { NativeSelectOption } from "../NativeSelectOption" -import { NativeSelect } from "../NativeSelect" +import { Checkbox } from "../Checkbox" +import { Select } from "../Select" +import { SelectOption } from "../SelectOption" +import { SortButton } from "../SortButton" +import { PopupMenu, PopupMenuOptions, PopupMenuItem } from "../PopupMenu" import { InputGroup } from "../InputGroup" +import { ComboBox } from "../ComboBox" +import { ComboBoxOption } from "../ComboBoxOption" +import { SearchInput } from "../SearchInput" +import { Pill } from "../Pill" import { PortalProvider } from "../PortalProvider" const meta: Meta = { @@ -23,9 +30,7 @@ const meta: Meta = { argTypes: { children: { control: false, - table: { - type: { summary: "ReactNode" }, - }, + table: { type: { summary: "ReactNode" } }, }, }, } @@ -33,23 +38,32 @@ const meta: Meta = { export default meta type Story = StoryObj -export const Default: Story = { - render: (args: DataGridToolbarProps) => ( - -