feat(ui): remove DatagridCheckboxCell component

[franzheidl]

Summary

This PR removes the long-WIPed DataGridCheckboxCell component and adds a verticalAlignment prop to DataGridCell, along with story improvements across the DataGrid family.

During the initially planned streamlining of DataGridCheckboxCell (removing its internal Checkbox render in favour of a child-based approach), it became clear that DataGridCell itself can cover the vertical centering that DataGridCheckboxCell was solely responsible for.

With DataGridCell now able to override the parent grid's alignment per cell, DataGridCheckboxCell has no remaining purpose and is removed entirely. Consumers who need a checkbox cell should use a regular DataGridCell with verticalAlignment="center" and place a Checkbox as a child, wiring up state and handlers directly on it.

Changes

• DataGridCheckboxCell: removed entirely
• DataGridCell: add verticalAlignment prop overriding parent DataGrid cellVerticalAlignment per cell
• DataGridCell stories: add VerticalAlignmentOverride story; add radio controls for verticalAlignment
• DataGridCell stories: extend NoWrap story with longer content and ellipsis truncation example
• DataGridCell tests: add missing tests for verticalAlignment, nowrap, colSpan, and prop passthrough
• DataGridHeader FullyFeatured story: replace DataGridCheckboxCell with DataGridCell using verticalAlignment="center" and a wired Checkbox child

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: 32bd9ca

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-13 14:09 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.