Skip to content

feat(ui): add alignRight to DataGridToolbar#1515

Open
guoda-puidokaite wants to merge 3 commits intomainfrom
guoda-improve-toolbar
Open

feat(ui): add alignRight to DataGridToolbar#1515
guoda-puidokaite wants to merge 3 commits intomainfrom
guoda-improve-toolbar

Conversation

@guoda-puidokaite
Copy link
Contributor

Summary

Introduced an alignRight prop for the DataGridToolbar component, enhancing layout flexibility by allowing users to control the alignment of toolbar content.

Changes Made

  • Added alignRight prop to the DataGridToolbar component.
  • Updated component logic to conditionally apply the ml-auto class based on the alignRight value.
  • Added new Storybook stories to demonstrate both complex right-aligned and left-aligned toolbar configurations.
  • Updated tests to include coverage for the alignRight prop functionality.

Related Issues

Closes #1051

Testing Instructions

See Storybook.

Checklist

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • I have made corresponding changes to the documentation (if applicable).
  • My changes generate no new warnings or errors.
  • I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

@guoda-puidokaite guoda-puidokaite self-assigned this Mar 10, 2026
@guoda-puidokaite guoda-puidokaite requested review from a team and franzheidl as code owners March 10, 2026 06:36
@guoda-puidokaite guoda-puidokaite added package All tasks related to package under packages/ ui-components All tasks related to juno-ui-components library labels Mar 10, 2026
@changeset-bot
Copy link

changeset-bot bot commented Mar 10, 2026

🦋 Changeset detected

Latest commit: b05f9bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages
Name Type
@cloudoperators/juno-ui-components Minor
@cloudoperators/juno-app-carbon Patch
@cloudoperators/juno-app-doop Patch
@cloudoperators/juno-app-example Patch
@cloudoperators/juno-app-greenhouse Patch
@cloudoperators/juno-app-heureka Patch
@cloudoperators/juno-app-supernova Patch
@cloudoperators/juno-app-template Patch
@cloudoperators/juno-messages-provider Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@guoda-puidokaite guoda-puidokaite changed the title add alignRight feat(ui): add alignRight to DataGridToolbar Mar 10, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 10, 2026

PR Preview Action v1.8.1

🚀 View preview at
https://cloudoperators.github.io/juno/pr-preview/pr-1515/

Built to branch gh-pages at 2026-03-10 06:45 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

export const Default: Story = {
render: (args: DataGridToolbarProps) => (
<DataGridToolbar {...args}>
<button>Add</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use a <Button> for this story (component instead of native button).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something we didn't notice in the past, done. Thanks.


export const ComplexLayout: Story = {
render: (args: DataGridToolbarProps) => (
<DataGridToolbar {...args}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please adjust this so that the searchbox is aligned to the right, everything else to the left (as in our pattern that we use in apps often.


export const ComplexLayoutAlignLeft: Story = {
render: (args: DataGridToolbarProps) => (
<DataGridToolbar {...args}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this story, or remove the SearchInput from it. If we wanted to place all of these components in a toolbar we would separate them left and right as above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package All tasks related to package under packages/ ui-components All tasks related to juno-ui-components library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Improvement](ui): Enhance Styling and Generalise Purpose of DataGridToolbar

2 participants