feat(ui): create DescriptionList with DescriptionTerm and DescriptionDefinition by guoda-puidokaite · Pull Request #1486 · cloudoperators/juno

guoda-puidokaite · 2026-02-26T12:36:22Z

Summary

Introduce a standardised DescriptionList component along with its child components, DescriptionTerm and DescriptionDefinition, to display terms and descriptions consistently across applications following semantically correct HTML elements.

Closes [Task](ui): create DescriptionList with child components #1172
Previous PR feat(ui): create DescriptionList with DescriptionTerm and DescriptionDefinition #1329

Changes Made

Created DescriptionList, DescriptionTerm, and DescriptionDefinition Components using corresponding html elements.
Alias Export: Provided shorter alias names (DL, DT, DD) for easy use in React code, promoting cleaner and more readable syntax.

Testing Instructions

Check ACs, Figma and test in Storybook.

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 · 2026-02-26T12:36:28Z

🦋 Changeset detected

Latest commit: 051b951

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 · 2026-02-26T12:38:14Z

PR Preview Action v1.8.1
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1486/
Built to branch `gh-pages` at 2026-02-26 14:00 UTC. Preview will be ready when the GitHub Pages deployment is complete.

MartinS-git · 2026-02-27T07:29:37Z

The text should start at the top baseline and must not be vertically centered.

ArtieReus

very cool!!! Added just some thoughts

ArtieReus · 2026-02-27T10:48:03Z

packages/ui-components/src/components/DescriptionDefinition/description-definition.css

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors


did you already have written the files in 2024????

it applies to all files

ArtieReus · 2026-02-27T10:48:19Z

packages/ui-components/src/components/DescriptionDefinition/description-definition.css

+.dd {
+  display: grid;
+  align-items: center;
+  border-bottom: 1px solid var(--color-dd-dt-border);


If this is applied to the last row too, you may get an extra divider at the end.

ArtieReus · 2026-02-27T10:50:49Z

packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx

+ * Represents the definition or description in a description list, rendering as an HTML <dd> element.
+ * Pairs with DescriptionTerm to complete the term-description association, offering flexible content styling.
+ */
+export const DescriptionDefinition: React.FC<DescriptionDefinitionProps> = ({ children, className = "" }) => (


Do we have a check <dd> is only valid inside a <dl>?

Interesting (and somewhat fundamental) question.

We generally do not check for parent validity (we may do in some places, but I can't think of any from the top of my head).

We may check for the validity of children in some places where we do only allow a certain type of children, and then it is not necessarily about strict html validity, but also Juno-UI-Components architectural validity, but even there I doubt we are being 100% consistent tbh.

Short answer: In this case specifically we'd rather not do it., leave as is

The best we could do is display a React warning in the console OR throw an error and prevent the component from rendering. As a general rule we have decided against the latter and preserve some user responsibility. Also, users may choose to render a surrounding dl element themselves not using our component, and the result would be totally valid, we couldn't 100% detect that thus still emitting a warning.

ArtieReus · 2026-02-27T10:54:00Z

packages/ui-components/src/components/DescriptionList/description-list.css

+
+.dl {
+  display: grid;
+  grid-template-columns: 1fr 2fr;


grid-template-columns: 1fr 2fr; is simple and fine, but it hard-codes the proportion. If terms (.dt) can be long, they may wrap more than desired; if definitions are short, you “waste” space. Would be useful being overwritten by props?

Yes, we shouldn't hardcode the proportion and choose a default that works in most cases. I think going with 1fr 3fr is a more sensible default. But we need to make this overwriteable by users and document what the default is, too.

Even if people figured out how they can overwrite the proportions it is currently not that easily accomplished due to how the CSS cascade works (the styles from the css file are applied after styles passed via class name which makes them hard to overwrite).

Agreed, smth in the 25% to 30% range seems a good starting point.

We can add more complex behaviour later (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns).

ArtieReus · 2026-02-27T10:55:00Z

packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx

+  children:
+    | ReactElement<DescriptionTermProps | DescriptionDefinitionProps>
+    | Array<ReactElement<DescriptionTermProps | DescriptionDefinitionProps>>
+    | ReactElement<"div">


why allowing a div element?

Valid as per spec, so if we offer a component that basically just (re-)creates an html element, we should stick to the spec.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl#wrapping_name-value_groups_in_div_elements

Makes total sense if you think about it, it allows for cleanly styling individual pairs of dt and dd elements (or groups of a single dt with multiple dd elements, which is also valid as per spec).

edda · 2026-02-27T16:36:35Z

packages/ui-components/src/global.css


  /* Component Border Colors: */
-  --border-color-theme-default: var(--color-default-border);
+  --border-color-theme-default: var(--color-dd-dt-border);


Danger: You are overwriting the default border color with the specific color for the dd/dt component!!! This looks like an accidental change. Did you mean to set --color-dd-dt-border to the value of --border-color-theme-default?

edda · 2026-02-27T16:39:32Z

packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx

+ * This component enforces structure by expecting child elements of DescriptionTerm or DescriptionDefinition,
+ * aligning them according to the specified terms alignment.
+ */
+export const DescriptionList: React.FC<DescriptionListProps> = ({ children, alignTerms = "left", className = "" }) => (


Default alignment is right, not left (according to ticket)

edda · 2026-02-27T16:39:50Z

packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx

+ */
+export const DescriptionList: React.FC<DescriptionListProps> = ({ children, alignTerms = "left", className = "" }) => (
+  <dl
+    className={`dl ${alignTerms === "right" ? "align-right" : "align-left"} ${className}`}


see above, wrong default alignment

edda · 2026-02-27T17:12:10Z

packages/ui-components/src/components/DescriptionDefinition/description-definition.css

+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.dd {


So far we have always been following the rule that styles should be specified in the component itself as tailwind styles. We use dedicated css files only in cases where doing it in tailwind is complicated or impossible. In this case there is nothing here that warrants a dedicated css file for the styles. Please remove and turn into tailwind styles as usual.

edda · 2026-02-27T17:13:05Z

packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx

+ */
+
+import React, { ReactNode } from "react"
+import "./description-definition.css"


see above, please define style in a const using tailwind classes here

edda · 2026-02-27T17:23:13Z

packages/ui-components/src/components/DescriptionList/description-list.css

+  display: contents;
+}
+
+.dl.align-left .dt {


These simple parent selectors can be done in tailwind via the group- selector. See here: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

Please move to component as tailwind styles. Also the next one.

edda · 2026-02-27T17:24:12Z

packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx

+export const Default: Story = {
+  render: (args) => (
+    <DescriptionList {...args}>
+      <DT>Warranty</DT>


Please add a few more dt/dd children so it's easier to understand the usecase (the typical case is multiple key/value pairs in a list)

edda · 2026-02-27T17:25:28Z

packages/ui-components/src/components/DescriptionTerm/description-term.css

+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.dt {


See above, please move styles to tailwind classes in component instead of separate css file.

edda · 2026-02-27T17:28:21Z

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

+ */
+
+import React, { ReactNode } from "react"
+import "./description-term.css"


replace with inline tailwind styles (see above)

edda · 2026-02-27T17:29:42Z

packages/ui-components/src/global.css

 @import "./components/ThemeToggle/themeToggle.css" layer(utilities);
 @import "./components/DataGridRow/data-grid-row.css" layer(utilities);
 @import "./components/SideNavigationItem/sidenavigationitem.css" layer(utilities);
+@import "./components/DescriptionList/description-list.css" layer(utilities);


Remember to remove these imports after you've made the change to tailwind styles instead of separate css files.

franzheidl · 2026-03-03T08:17:18Z

packages/ui-components/src/components/Modal/Modal.stories.tsx

Changes (if any?) seem unrelated to DescriptionList? Please review and exclude the file (unless I'm missing something).

franzheidl · 2026-03-03T08:44:50Z

packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx

+ * Represents the definition or description in a description list, rendering as an HTML <dd> element.
+ * Pairs with DescriptionTerm to complete the term-description association, offering flexible content styling.
+ */
+export const DescriptionDefinition: React.FC<DescriptionDefinitionProps> = ({ children, className = "" }) => (


Interesting (and somewhat fundamental) question.

We generally do not check for parent validity (we may do in some places, but I can't think of any from the top of my head).

We may check for the validity of children in some places where we do only allow a certain type of children, and then it is not necessarily about strict html validity, but also Juno-UI-Components architectural validity, but even there I doubt we are being 100% consistent tbh.

Short answer: In this case specifically we'd rather not do it., leave as is

The best we could do is display a React warning in the console OR throw an error and prevent the component from rendering. As a general rule we have decided against the latter and preserve some user responsibility. Also, users may choose to render a surrounding dl element themselves not using our component, and the result would be totally valid, we couldn't 100% detect that thus still emitting a warning.

franzheidl · 2026-03-03T09:11:30Z

packages/ui-components/src/components/DescriptionList/description-list.css

+
+.dl {
+  display: grid;
+  grid-template-columns: 1fr 2fr;


Agreed, smth in the 25% to 30% range seems a good starting point.

We can add more complex behaviour later (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns).

franzheidl

Basically what Esther said:

use inline/tw-styles and remove external css
fix default alignment of dt
fix re-defining --border-color-theme-default
update story wiht a few more dt/dd terms to reflect a typical use case

plus removing any changes to Modal from this PR.

Thanks 🙏

guoda-puidokaite and others added 14 commits October 30, 2025 11:54

initial description list

ef78491

Merge branch 'main' into guoda-description-list

0efe2f8

description

abba480

Merge branch 'main' into guoda-description-list

f8b967d

fix stories, logic, styling

92b2d7f

Merge branch 'main' into guoda-description-list

312c43a

Merge branch 'main' into guoda-description-list

7aebde5

Merge branch 'main' into guoda-description-list

109aabb

border and other fixes

24a86fc

Merge branch 'main' into guoda-description-list

1b69ce8

update design

868b4dd

fix styling

b7bf791

merge main

1c30089

export components

7dab5a8

guoda-puidokaite self-assigned this Feb 26, 2026

guoda-puidokaite added package All tasks related to package under packages/ ui-components All tasks related to juno-ui-components library labels Feb 26, 2026

guoda-puidokaite added 3 commits February 26, 2026 13:40

changeset

f8b7ce8

update stor

051b951

update stor

d1fa1f6

guoda-puidokaite marked this pull request as ready for review February 27, 2026 08:56

guoda-puidokaite requested review from a team and franzheidl as code owners February 27, 2026 08:56

ArtieReus reviewed Feb 27, 2026

View reviewed changes

edda requested changes Feb 27, 2026

View reviewed changes

franzheidl requested changes Mar 3, 2026

View reviewed changes

		@@ -0,0 +1,14 @@
		/*
		* SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors

Conversation

guoda-puidokaite commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made

Testing Instructions

Checklist

PR Manifesto

Uh oh!

changeset-bot bot commented Feb 26, 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 Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-02-26 14:00 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

MartinS-git commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ArtieReus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

franzheidl left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

guoda-puidokaite commented Feb 26, 2026 •

edited

Loading

changeset-bot bot commented Feb 26, 2026 •

edited

Loading

github-actions bot commented Feb 26, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-02-26 14:00 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

MartinS-git commented Feb 27, 2026 •

edited

Loading

franzheidl Mar 3, 2026 •

edited

Loading

franzheidl Mar 3, 2026 •

edited

Loading

franzheidl Mar 3, 2026 •

edited

Loading

franzheidl left a comment •

edited

Loading