feat(ui): implement `textContain` prop on `DT`and `DD` by franzheidl · Pull Request #2125 · cloudoperators/juno

franzheidl · 2026-10-27T15:29:43Z

Summary

Implements the textContain prop on DescriptionTerm (DT) and DescriptionDefinition (DD), following the same pattern established for DataGridCell in #1955.

Both components now accept textContain?: TextContainType from the shared src/shared/textContain utility:

"truncate-end" / "truncate-start": single-line truncation with ellipsis, rendered on an inner <span> block wrapper (required because <dt>/<dd> are grid containers and text-overflow does not apply to grid containers directly); truncate-start wraps content in <bdi> to prevent bidi reordering
"break-word" / "break-all" / "no-wrap": applied directly to the element
jn:min-w-0 added for all non-no-wrap values so the grid item can shrink within its track

Closes #2122.

Changes

DescriptionTerm.component.tsx, DescriptionDefinition.component.tsx: add textContain prop + conditional truncation wrapper
DescriptionTerm.test.tsx, DescriptionDefinition.test.tsx: add 8 new tests each covering all values, inner wrapper, <bdi> isolation, and min-w-0 behaviour
DescriptionList.stories.tsx: new TextContain story showing all 6 modes on both DT and DD

Follow-up fixes based on review feedback from Copilot:

break-word now correctly wraps long unbroken text in both DT and DD
truncate-start no longer overrides alignTerms on right-aligned terms

Testing Instructions

pnpm i
cd packages/ui-components && pnpm run test DescriptionTerm & pnpm run test DescriptionDefinition

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.

…nition Signed-off-by: Franz Heidl <franz.heidl@sap.com>

… DT/DD branch Signed-off-by: Franz Heidl <franz.heidl@sap.com>

changeset-bot · 2026-10-27T15:29:55Z

🦋 Changeset detected

Latest commit: 17b39aa

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

This PR includes changesets to release 7 packages

Name	Type
@cloudoperators/juno-ui-components	Minor
@cloudoperators/juno-app-doop	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 · 2026-10-27T15:31:33Z

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-10-28 09:18 UTC

Signed-off-by: Franz Heidl <franz.heidl@sap.com>

Copilot

🟡 Changes recommended

Long unbroken text still overflows in break-word mode, and start truncation overrides right-aligned terms.

2 open issues

What changed in this PR

Extends the shared textContain API to DT and DD, bringing description lists in line with DataGridCell and addressing #2122.

Changes:

Adds wrapping and truncation modes, including inner truncation wrappers and bidirectional text isolation.
Adds component tests and a Storybook example covering all modes.
Adds release metadata and Intent review-state records.

File	Description
`packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.test.tsx`	Tests term containment classes and wrappers.
`packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx`	Adds `textContain` support to terms.
`packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx`	Demonstrates each containment mode.
`packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.test.tsx`	Tests definition containment classes and wrappers.
`packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx`	Adds `textContain` support to definitions.
`.intent/review-state.json`	Records source-review outcomes.
`.changeset/olive-showers-admire.md`	Records a UI-components patch release.

_{Review effort: Balanced}

…nd DD Signed-off-by: Franz Heidl <franz.heidl@sap.com>

Copilot

🔵 Needs a closer look

Browser validation is needed to confirm grid wrapping, truncation, and term alignment beyond the added class-based assertions.

No open issues 🎉

2 resolved since last review

_{Review effort: Balanced}

Signed-off-by: Franz Heidl <franz.heidl@sap.com>

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

🟢 Approval recommended

Static review identified no blocking issues, and the changes address the previously reported wrapping and alignment defects.

No open issues 🎉

_{Review effort: Balanced}

Signed-off-by: Franz Heidl <franz.heidl@sap.com>

franzheidl added 2 commits October 27, 2026 16:16

feat(ui): add textContain prop to DescriptionTerm and DescriptionDefi…

7e03255

…nition Signed-off-by: Franz Heidl <franz.heidl@sap.com>

chore(core): record intent maintainer review outcomes for textContain…

baac91f

… DT/DD branch Signed-off-by: Franz Heidl <franz.heidl@sap.com>

Create olive-showers-admire.md

c82e90c

Signed-off-by: Franz Heidl <franz.heidl@sap.com>

franzheidl marked this pull request as ready for review October 27, 2026 15:38

franzheidl requested a review from a team as a code owner October 27, 2026 15:38

Copilot AI balanced review requested due to automatic review settings October 27, 2026 15:38

Copilot started reviewing on behalf of franzheidl October 27, 2026 15:39

View session

Copilot AI reviewed Oct 27, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx

Comment thread packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx Outdated

franzheidl self-assigned this Oct 27, 2026

franzheidl requested a balanced review from Copilot October 27, 2026 15:59

Copilot started reviewing on behalf of franzheidl October 27, 2026 15:59

View session

fix(ui): fix break-word overflow and truncate-start alignment on DT a…

aa2060b

…nd DD Signed-off-by: Franz Heidl <franz.heidl@sap.com>

Copilot AI reviewed Oct 27, 2026

View reviewed changes

chore(core): record intent maintainer review outcomes for review fixes

d3a82ca

Signed-off-by: Franz Heidl <franz.heidl@sap.com>

franzheidl requested a balanced review from Copilot October 27, 2026 16:12

Copilot AI reviewed Oct 27, 2026

franzheidl requested a balanced review from Copilot October 27, 2026 16:17

Copilot started reviewing on behalf of franzheidl October 27, 2026 16:17

View session

Copilot AI reviewed Oct 27, 2026

View reviewed changes

franzheidl added the ui-components All tasks related to juno-ui-components library label Oct 27, 2026

franzheidl added this to Juno Roadmap Oct 27, 2026

github-project-automation Bot moved this to New in Juno Roadmap Oct 27, 2026

franzheidl moved this from New to In progress in Juno Roadmap Oct 27, 2026

edda reviewed Oct 27, 2026

View reviewed changes

Comment thread .changeset/olive-showers-admire.md Outdated

feat(ui): update changeset to minor

17b39aa

Signed-off-by: Franz Heidl <franz.heidl@sap.com>

franzheidl requested a review from edda October 28, 2026 09:13

edda approved these changes Oct 28, 2026

View reviewed changes

guoda-puidokaite approved these changes Oct 28, 2026

View reviewed changes

franzheidl merged commit d066076 into main Oct 28, 2026
26 checks passed

franzheidl deleted the franz-textcontain-dt-dd-2122 branch October 28, 2026 09:18

github-project-automation Bot moved this from In progress to Done in Juno Roadmap Oct 28, 2026

Navigation Menu

Repository navigation

feat(ui): implement `textContain` prop on `DT`and `DD` - #2125

feat(ui): implement `textContain` prop on `DT`and `DD`#2125
franzheidl merged 6 commits into
mainfrom
franz-textcontain-dt-dd-2122

franzheidl commented Oct 27, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

franzheidl commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Follow-up fixes based on review feedback from Copilot:

Testing Instructions

Checklist

PR Manifesto

Uh oh!

changeset-bot Bot commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

franzheidl commented Oct 27, 2026 •

edited

Loading

changeset-bot Bot commented Oct 27, 2026 •

edited

Loading

github-actions Bot commented Oct 27, 2026 •

edited

Loading