feat(ui): streamline DatagridCheckboxCell component

[franzheidl]

Summary

This PR simplifies the until now WIPed DataGridCheckbox component, adds a verticalAlignment prop to the regular DataGridCell component, and updates the stories to better demonstrate how to set up DataGrids and -Cells.

DataGridCheckboxCell does not render a Checkbox anymore, it also does not accept Checkbox-related props anymore, and thus becomes a container purely to position a checkbox correctly, and stops being a proxy for inherently Checkbox-native functionality. In order to do that, DataGridCheckboxCell now accepts children and renders them. Developers then can wire up the desired state and functionality with the Checkbox directly.

DataGridCheckboxCell now only ensures vertical centering regardless of the settings on a parent DataGrid, and in its name expresses the intended use, even though it would render and align any other children, too.

Reciprocally, DataGridCell now has a verticalAlignment prop to override parent DataGrid vertical alignment settings, too.

Updated tests now reflect this new behavior, and the stories have been changed to better show usage and context of both DatagridCell and DataGridCheckboxCell accordingly.

Changes Made

• DataGridCheckboxCell: remove Checkbox import and internal render
• DataGridCheckboxCell: remove selected, disabled, onChange props; add children prop
• DataGridCheckboxCell: explicitly omit onChange from props interface to catch stale callsites at compile time
• DataGridCheckboxCell: always apply vertical centering classes, ignoring parent cellVerticalAlignment context
• DataGridCheckboxCell: un-WIP in Storybook
• DataGridCheckboxCell stories: rewrite with Checkbox child, wired state, disabled and always-centered variants
• DataGridCell: add verticalAlignment prop overriding parent DataGrid context per cell
• DataGridCell stories: add VerticalAlignmentOverride story; add radio controls for verticalAlignment
• DataGridCell stories: extend NoWrap story with longer content and ellipsis truncation example
• DataGridHeader FullyFeatured story: update DataGridCheckboxCell usage to new API with wired Checkbox child
• Update tests for both components accordingly, add missing tests

Related Issues

Closes #1884

Screenshots (if applicable)

Testing Instructions

1. pnpm i
2. pnpm run test DataGridCheckboxCell DataGridCell

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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1ce5f52

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

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1886/
Built to branch gh-pages at 2026-08-12 15:18 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Copilot]

Pull request overview

This PR finalizes and streamlines DataGridCheckboxCell by turning it into a layout-only container for aligning a consumer-provided Checkbox child, introduces a per-cell verticalAlignment override on DataGridCell, and updates tests/stories to reflect the new APIs and recommended usage patterns.

Changes:

• Refactors DataGridCheckboxCell to accept children and removes Checkbox-specific props/behavior.
• Adds verticalAlignment to DataGridCell to override the parent DataGrid’s cellVerticalAlignment on a per-cell basis.
• Updates unit tests and Storybook stories (including DataGridHeader’s FullyFeatured story) to demonstrate the new patterns.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/ui-components/src/components/DataGridCheckboxCell/DataGridCheckboxCell.component.tsx	Refactors checkbox cell to be child-driven and enforces vertical centering behavior.
packages/ui-components/src/components/DataGridCheckboxCell/DataGridCheckboxCell.test.tsx	Updates tests to validate new classnames/children behavior and centering.
packages/ui-components/src/components/DataGridCheckboxCell/DataGridCheckboxCell.stories.tsx	Rewrites stories to demonstrate wiring selection state on the child Checkbox.
packages/ui-components/src/components/DataGridCell/DataGridCell.component.tsx	Adds verticalAlignment prop and applies it as an override to grid context alignment.
packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx	Adds coverage for inherited vs overridden vertical alignment and other props.
packages/ui-components/src/components/DataGridCell/DataGridCell.stories.tsx	Updates stories to show grid context, nowrap/ellipsis patterns, and alignment overrides.
packages/ui-components/src/components/DataGrid/DataGridHeader.stories.tsx	Updates FullyFeatured story to use the new DataGridCheckboxCell API with a child Checkbox.

Suppressed comments (3)

packages/ui-components/src/components/DataGridCheckboxCell/DataGridCheckboxCell.stories.tsx:99

• This disabled Checkbox has no accessible name. Add an aria-label (or a visible label) so assistive tech users can understand what the control represents even when disabled.

          <DataGridCheckboxCell>
            <Checkbox disabled />
          </DataGridCheckboxCell>

packages/ui-components/src/components/DataGridCheckboxCell/DataGridCheckboxCell.stories.tsx:128

• These row Checkbox controls have no accessible name. Add an aria-label per item (or a visible label) so the example is accessible and demonstrates best-practice usage.

          <DataGridCheckboxCell>
            <Checkbox />
          </DataGridCheckboxCell>

packages/ui-components/src/components/DataGrid/DataGridHeader.stories.tsx:380

• This second table instance also renders row selection Checkbox components without an accessible name. Add an aria-label (or visible label) per row to keep the example accessible.

      <DataGridCheckboxCell>
        <Checkbox
          checked={!!selected[s.id]}
          onChange={(e) => setSelected((prev) => ({ ...prev, [s.id]: e.target.checked }))}
        />

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated no new comments.

Suppressed comments (1)

packages/ui-components/src/components/DataGridCheckboxCell/DataGridCheckboxCell.component.tsx:24

• The inline comment claims the bubbled onChange would be typed as ChangeEventHandler<HTMLDivElement>, but for HTMLAttributes<HTMLDivElement> React types onChange as a FormEventHandler<HTMLDivElement>. Updating this avoids confusion for consumers reading the rationale for omitting onChange from the props.

// Omit onChange: React's synthetic onChange bubbles, so it would fire when the child Checkbox changes, but the type would be ChangeEventHandler<HTMLDivElement> — misleading consumers into thinking they're wiring up checkbox state. Wire onChange directly on the Checkbox child instead.