Skip to content

[Task](ui): remove built-in DataGridToolbar background color for updated design #1692

@franzheidl

Description

@franzheidl

Currently DataGridToolbar unconditionally applies n:bg-theme-background-lvl-1. The updated DataGrid header design uses two sibling DataGridToolbar instances — one for Zone 1 (actions, no background) and one for Zones 2+3 (filters/search/state, with background). Having the background baked in makes Zone 1 incorrect by default.

Figma: https://www.figma.com/design/kpxMkXyQ2bsdQ1xjX8gAaN/%F0%9F%9F%A2-DS_HF-Style-Guide-Library?node-id=34-2727&p=f&m=dev

Changes:

  • Remove `jn:bg-theme-background-lvl-1´ from baseToolbarStyles in DataGridToolbar.component.tsx
  • Update the component JSDoc to describe it as a spacing/padding wrapper, and clarify that background color should be applied via className when needed
  • Update the ComplexCustomLayout story to add className="jn:bg-theme-background-lvl-1" so it retains its current appearance (double-check the exact color to use with Figma).

Once the change is done, update existing stories and add sensible new ones (to be covered in a separate issue)

Breaking change: Any existing usage of DataGridToolbar that relied on the built-in background will lose it. Consumers need to add className="jn:bg-theme-background-lvl-1" explicitly.

Metadata

Metadata

Assignees

Labels

ui-componentsAll tasks related to juno-ui-components library

Type

No fields configured for Task.

Projects

Status

In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions