chore(ui): improve developer docs by guoda-puidokaite · Pull Request #1428 · cloudoperators/juno

guoda-puidokaite · 2026-01-27T10:27:10Z

Summary

Enhance documentation of all UI Components in the editor, providing descriptions for all components and their props

Changes Made

Before

After

For all components:

Display available props
Add description, explaining use case
Add component Storybook link
Add interface definition link

For all props:

Add description, including defaults

Related Issues

Closes #1429

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-01-27T10:27:15Z

🦋 Changeset detected

Latest commit: dbb25ca

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	Patch
@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-01-27T10:29:02Z

PR Preview Action v1.6.3
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1428/
Built to branch `gh-pages` at 2026-02-17 10:20 UTC. Preview will be ready when the GitHub Pages deployment is complete.

ArtieReus

Just putting it into that state so I can suggest you something before. I hope it is fine :)

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

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

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

ArtieReus

amazing!!!!

ArtieReus

some foundings to review...

ArtieReus · 2026-02-17T12:37:04Z

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


-/** A all-purpose date and time picker component. Highly configurable, based on Flatpickr. */
+/**
+ * A all-purpose date and time picker component. Highly configurable, based on Flatpickr.


“A all-purpose …” → should be “An all-purpose …”

ArtieReus · 2026-02-17T12:37:28Z

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

+  /** Whether the DateTimePicker input element allows direct user keyboard input. Default is `false`.
+   */
  allowInput?: boolean
  /** Allows the preloading of an invalid date (e.g. a date that hass been disable by passing `disable`). When disabled, the field will be cleared if the provided date is invalid */


“hass been disable” → should be “has been disabled”

ArtieReus · 2026-02-17T12:38:45Z

.changeset/hip-regions-deny.md

+"@cloudoperators/juno-ui-components": patch
+---
+
+Improve component descriptions and prop documentation in editor for better developer experience


This reads okay, but you might consider “in the editor” instead of “in editor”

ArtieReus · 2026-02-17T12:39:44Z

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

+   */
+  className?: string
+}
+export interface DataGridCellProps extends HTMLAttributes<HTMLDivElement> {


DataGridCell.component.tsx: the diff shows export interface DataGridCellProps ... declared twice... is this correct?

ArtieReus · 2026-02-17T12:41:22Z

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

-export const Textarea: React.FC<TextareaProps> = ({
+/**
+ * A controlled Text Input.
+ * Also covers email, telephone, password, url derivates.


“url derivates” → should be “URL derivatives”

ArtieReus · 2026-02-17T12:42:14Z

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

-  /** The title of the modal. This will be rendering as the heading of the modal, and the modal's `arial-labelledby` attribute will reference the title/heading element. If the modal does not have `title` or `heading`, use `ariaLabel` to provide an accessible name for the modal. */
+export interface ModalProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "title"> {
+  /**
+   * The title of the modal. This will be rendering as the heading of the modal, and the modal's `arial-labelledby` attribute will reference the title/heading element. If the modal does not have `title` or `heading`, use `ariaLabel` to provide an accessible name for the modal.


arial-labelledby → should be aria-labelledby

ArtieReus · 2026-02-17T12:45:41Z

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

+  /** Whether the DateTimePicker input element allows direct user keyboard input. Default is `false`.
+   */
  allowInput?: boolean
  /** Allows the preloading of an invalid date (e.g. a date that hass been disable by passing `disable`). When disabled, the field will be cleared if the provided date is invalid */


/** Allows the preloading of an invalid date (e.g. a date that hass been disable by passing disable). ... /
could be:
/* Allows preloading an invalid date (e.g. a date that has been disabled by passing disable). ... */

ArtieReus · 2026-02-17T12:47:43Z

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

  /** A handler to execute once the navigation item is clicked. Will render the item as a button element if passed */
-  onClick?: React.MouseEventHandler<HTMLElement>
+  onClick?: MouseEventHandler<HTMLElement>
  /** An optional technical identifier fort the tab. If not passed, the label will be used to identify the tab. NOTE: If value is passed, the value of the active tab MUST be used when setting the activeItem prop on the parent TabNavigation.*/


** An optional technical identifier fort the tab. ... /
to
/* An optional technical identifier for the tab. ... */

improve docs

7c6a670

guoda-puidokaite self-assigned this Jan 27, 2026

guoda-puidokaite requested review from a team and franzheidl as code owners January 27, 2026 10:27

guoda-puidokaite added documentation Improvements or additions to documentation package All tasks related to package under packages/ ui-components All tasks related to juno-ui-components library labels Jan 27, 2026

ArtieReus requested changes Jan 27, 2026

View reviewed changes

show props in component signature

bc192fc

github-code-quality bot found potential problems Feb 17, 2026

View reviewed changes

guoda-puidokaite added 7 commits February 17, 2026 07:33

fix import

18d8f21

add links to dev docs

f6e88e8

merge

66bb88e

merge

095899c

tidy imports

7c235cb

tidy imports

c00233a

tidy imports

dbb25ca

guoda-puidokaite changed the title ~~chore(ui): improve developer docs by adding component and prop descriptions~~ chore(ui): improve developer docs Feb 17, 2026

guoda-puidokaite requested a review from ArtieReus February 17, 2026 10:23

ArtieReus approved these changes Feb 17, 2026

View reviewed changes

ArtieReus reviewed Feb 17, 2026

View reviewed changes

Conversation

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

Uh oh!

Summary

Changes Made

Related Issues

Checklist

PR Manifesto

Uh oh!

changeset-bot bot commented Jan 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 Jan 27, 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-17 10:20 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

ArtieReus left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ArtieReus left a comment

Choose a reason for hiding this comment

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

guoda-puidokaite commented Jan 27, 2026 •

edited

Loading

changeset-bot bot commented Jan 27, 2026 •

edited

Loading

github-actions bot commented Jan 27, 2026 •

edited

Loading

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