feat(ui): add alignRight to DataGridToolbar (#1515)

* add alignRight

* remove unused import

* remove unused const

* remove search and update story

* tidy

* tidy

* fix storybook

Author: guoda-puidokaite

.changeset/violet-towns-wear.md

@@ -0,0 +1,6 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+- Added `alignRight` prop to `DataGridToolbar` for flexible alignment control, allowing users to customize layout.
+- Removed `search` prop, which is a BREAKING CHANGE. All elements should be passed as `children`.

packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.component.tsx

@@ -3,42 +3,37 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { HTMLAttributes, ReactElement, ReactNode } from "react"
+import React, { HTMLAttributes, ReactNode } from "react"
 
-const datagridtoolbarstyles = `
-	jn:flex
-	jn:items-center
+const baseToolbarStyles = `
 	jn:bg-theme-background-lvl-1
 	jn:py-3
 	jn:px-6
 	jn:mb-px
 `
 
-const childrenWrapperStyles = `
-	jn:ml-auto
-`
-
 /**
  * `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.
  * @see https://cloudoperators.github.io/juno/?path=/docs/components-datagrid-datagridtoolbar--docs
  * @see {@link DataGridToolbarProps}
  */
-export const DataGridToolbar = ({ search, className = "", children, ...props }: DataGridToolbarProps): ReactNode => {
+export const DataGridToolbar = ({
+  className = "",
+  children,
+  alignRight = true,
+  ...props
+}: DataGridToolbarProps): ReactNode => {
+  const childrenWrapperStyles = alignRight ? "jn:ml-auto" : ""
+  const alignmentToolbarStyles = alignRight ? "jn:flex jn:items-center" : ""
   return (
-    <div className={`juno-datagrid-toolbar ${datagridtoolbarstyles} ${className}`} {...props}>
-      {search && <div>{search}</div>}
+    <div className={`juno-datagrid-toolbar ${baseToolbarStyles} ${alignmentToolbarStyles} ${className}`} {...props}>
       <div className={childrenWrapperStyles}>{children}</div>
     </div>
   )
 }
 
 export interface DataGridToolbarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * An optional `SearchInput` component for inclusion in the toolbar.
-   */
-  search?: ReactElement
-
   /**
    * Elements or components to render within the DataGridToolbar.
    */
@@ -49,4 +44,12 @@ export interface DataGridToolbarProps extends HTMLAttributes<HTMLDivElement> {
    * @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
 }

packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.stories.tsx

@@ -6,6 +6,15 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { DataGridToolbar, DataGridToolbarProps } from "./index"
+import { Pill } from "../Pill"
+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 { InputGroup } from "../InputGroup"
 
 const meta: Meta<typeof DataGridToolbar> = {
   title: "Components/DataGrid/DataGridToolbar",
@@ -17,12 +26,6 @@ const meta: Meta<typeof DataGridToolbar> = {
         type: { summary: "ReactNode" },
       },
     },
-    search: {
-      control: false,
-      table: {
-        type: { summary: "ReactElement" },
-      },
-    },
   },
 }
 
@@ -32,15 +35,58 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   render: (args: DataGridToolbarProps) => (
     <DataGridToolbar {...args}>
-      <button>Add</button>
+      <Button label="Create" />
     </DataGridToolbar>
   ),
   parameters: {
     docs: {
       description: {
-        story: "Optional toolbar for use in DataGrid. Use ButtonRow for multiple buttons",
+        story:
+          "Demonstrates a simple toolbar layout with children right-aligned by default. Use ButtonRow for multiple buttons.",
+      },
+    },
+  },
+}
+
+export const ComplexCustomLayout: Story = {
+  render: (args: DataGridToolbarProps) => (
+    <DataGridToolbar {...args}>
+      <Stack direction="horizontal" distribution="between">
+        <Stack direction="vertical" gap="4">
+          <Stack alignment="center" gap="4">
+            <InputGroup>
+              <NativeSelect name="Filter" value="category" wrapperClassName="jn:w-full">
+                <NativeSelectOption value="category" label="Category" />
+                <NativeSelectOption value="status" label="Status" />
+                <NativeSelectOption value="priority" label="Priority" />
+              </NativeSelect>
+              <ComboBox>
+                <ComboBoxOption value="Electronics" />
+                <ComboBoxOption value="Clothing" />
+                <ComboBoxOption value="Furniture" />
+              </ComboBox>
+            </InputGroup>
+            <Button label="Clear all" variant="subdued" />
+          </Stack>
+          <Stack gap="2" wrap>
+            <Pill pillKey="category" pillValue="electronics" closeable />
+            <Pill pillKey="status" pillValue="active" closeable />
+            <Pill pillKey="priority" pillValue="high" closeable />
+          </Stack>
+        </Stack>
+        <SearchInput placeholder="Search items..." />
+      </Stack>
+    </DataGridToolbar>
+  ),
+  args: {
+    alignRight: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates a complex toolbar layout with custom styling - children aligned left and search aligned right.",
       },
     },
   },
-  args: {},
 }

packages/ui-components/src/components/DataGridToolbar/DataGridToolbar.test.tsx

@@ -24,4 +24,16 @@ describe("DataGridToolbar", () => {
     expect(screen.getByTestId("23")).toBeInTheDocument()
     expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
   })
+
+  test("applies jn:ml-auto correctly when alignRight true", () => {
+    render(<DataGridToolbar data-testid="my-datagridtoolbar" />)
+    expect(screen.getByTestId("my-datagridtoolbar")).toBeInTheDocument()
+    expect(screen.getByTestId("my-datagridtoolbar").firstChild).toHaveClass("jn:ml-auto")
+  })
+
+  test("doesn't apply jn:ml-auto correctly when alignRight false", () => {
+    render(<DataGridToolbar data-testid="my-datagridtoolbar" alignRight={false} />)
+    expect(screen.getByTestId("my-datagridtoolbar")).toBeInTheDocument()
+    expect(screen.getByTestId("my-datagridtoolbar").firstChild).not.toHaveClass("jn:ml-auto")
+  })
 })