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:
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.
Currently DataGridToolbar unconditionally applies
n:bg-theme-background-lvl-1. The updated DataGrid header design uses two siblingDataGridToolbarinstances — 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:
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
DataGridToolbarthat relied on the built-in background will lose it. Consumers need to addclassName="jn:bg-theme-background-lvl-1"explicitly.