[Ongoing](ui): Juno UI Components Roadmap

[edda]

Description

Collection of all known roadmap items for juno-ui-components, prioritized.

Priority 0

• [Task](ui): switch in-built Modal button sequence #1487
• [Feature](ui): expandable SideNavigation #1460
• [Task](ui): fix SideNavigation problems #1573

Priority 1

• [EPIC](ui-components): decouple ui-components public interfaces from third party libraries types #1388
• [Task](ui): create SignInForm component #1439
• [Task](ui): create Login page templates #1440
• Link style for links in PageHeader (we only have text colors defined but those don't apply to links)
• [Epic](ui): Notification Manager #721
• AppShell refactor: new layout, separate global layout components from page level components
• Global text styles for h1 - h6
• 📝 (Feature) Form: new prop required (working title) which renders a legend explaining what the required indicator does (easy) Prio 1
  • [Feat](ui): Add 'Required Field' Legend to Form #1014
• (Feature) DescriptionList component: [Task](ui): create DescriptionList with child components #1172
• [Task](ui): update PageFooter #1237
• 📝 (Improvement/Breaking) Icon component: dynamic icons instead of only baked in ones --> needs research, check other design systems (medium/complex) Prio 1
  • possible solution 1: rewrite Icon component to accept svg as prop
  • possible solution 2: dynamically load icons by name - research: try Lucide icons dynamic icon component feature to see if we could use this
  • then decide what we want to do
  • Decision: as an intermediate step look into solution 1 first, this shouldn't (TM) be too hard to implement and can provide help quickly
  • [Spike](ui): Research Dynamic Loading for Icons in Icon Component #1049
• Remove css duplication in global.css and theme.css (the CSS variables and global styles are duplicated, one is used for ui component styles and the other is exported to be used as theme basis in apps). It should be possible to extract the common pieces into a separate css file that both import to remove the duplication
• [Task](ui): add Reveal/Hide icon to TextInput type="password" #1468
• [Bug](ui): background image in IntroBox broken? #1485
• Solve overflow issues in DataGridCells

Not ready for implementation

• 📝 (Improvement)DataGridToolbar:

  • forced right-alignment of children (make more flexible)
  • turn into generic Toolbar component which isn't tied to the DataGrid
  • --> conceptual Prio 1.5
  • [Improvement](ui): Enhance Styling and Generalise Purpose of DataGridToolbar #1051

• (Improvement) Badge component should nicely display single-digit or low digit numbers. Maybe needs a new component --> research

• Upload Dialog (no new component yet, UX pattern only for now)

• (Feature) ComboBox: Discuss and decide whether we want to introduce a generically useable mechanism to allow developers to clear ComboBox immediately after changing/ selecting a value, as is needed in filters with immediate effect where we want users to be able to select another filter suing the same ComboBox. ([Feature](ComboBox): Add options to clear search and selected value after item selection #1627 )

• 📝 (Feature) Finalize InputGroup component --> needs revisit (handle input element corner rounding via props, not via css cascade), decision what it should be, then finalize (medium)

  • [Improvement](ui): Enhance Focus and Styling in InputGroup #1053

• 📝 (Theme) SAP on brand experience --> concept work needed (design and technical) (medium?) Prio 1

  • [Feat](ui): Implement SAP Theme #1046

• [ ]❓(Improvement) React19 optimization, mostly related to useEffects --> research, POC, concept needed Prio 1

  • [Technical Backlog Item](ui): React19 Optimisations #1047 Approach ?

• 📝 (Feature) Notification Manager. Maybe use a lib for the management part, must work with our PortalProvider/must not break in shadowroot. Separate manager and visual component. Manager is headless, doesn't render components, only as children or in slots. (implement in Aurora first) (complex) Prio 1

  • [Epic](ui): Notification Manager #721

• (Feature) Allow passing a specific z-index for portal root to AppShell to override the default --> needs research regarding effects, probably we'll need to have custom z-index on all (or most) components which have a z-index (easy/medium) Prio 3

  • [Feature](context): Allow passing a specific z-index for portal root to AppShell #1048

• 📝 (Improvement/Breaking) Don't bundle webfonts into the ui-components package anymore --> solution needed (medium)

  • [Spike](ui): Evaluate and Implement Solutions for Webfont Decoupling in UI Components #1052

• Add option to clear contents/value to TextInput(currently exists for SearchInput only, ensure consistency between the two)

• Handle whitespace / breaking behaviour in DataGrid cells (sensible default to handle word breaking when necessary, provide additional props to help fine-tune whitespace and wordbreaking (also allow for elipsis overflow?)

• Design / Introduce a column layout component (using grid internally)

• Make Select / ComboBox menus discernable from backgrounds (when a menu opens over some background colors or over a text input, it becomes almost invisible)

• Properly handle vertical overflow on SideNavigation items (remove fixed height), don't center align labels, properly name classes (.level-2 -> juno-sidenavigation-item-lvl-2), doule-check width / behaviour in conjunction with current and future AppShell behaviour (Will be fixed with completion of [Task](ui): fix SideNavigation problems #1573 )

• design an implement a spacing utility that accepts numeric tw-spacing tokens, a spacing mechanism (padding, margin, gap, …?), and direction (left, bottom, right, top, x, y, all), and returns a tw-class that can be used directly by the component calling it. Goal is to keep our spacing systematic and consistent.

  • [Task](ui): create a dedicated tailwind token-based spacing utility #1641

Priority 2

• 📝 (Bug) DateTimePicker issues. Reference: bug(ui): DateTimePicker issues #68 --> evaluate (medium)
  • [Bug](ui): Improve Time Selection in Date Range Mode for DateTimePicker #1043
  • [Bug](ui): DateTimePicker Overflows When Parent is Narrower #1064
  • [Task](ui): fix DateTimePicker time input field buttons #1029 (Priority?)
• 📝 (Bug) When NativeSelectionGroup is disabled, the dropdown doesn't disable the default value. Disabled only appears on click. And default value sometimes dissapears. (medium)
  • [Bug](ui): Default Value in NativeSelect Not Disabled When Group is Disabled #1044

Not ready for implementation

• 📝 (Inconsistency) Look into simplifications for Select/ComboBox regarding super flexible API allowing value/label/ --> evaluation + decision needed --> all topic regarding simplification of these components: first look into new stylable native select options (medium/complex) Prio 2
  • [Spike](ui): Simplification of Select/ComboBox API and Exploration of Stylable Native Select Options #1055
• 📝 (Inconsistency)Unification of tightly connected components, specifically those where children don't make sense to use standalone and tests for the parent can't be written without the children. Decide on whether we want to use "Dot-notation" for tightly coupled parent/child components or no --> evaluate and design architecture. Also look into grouping stories for parents and their subcomponents into one (new tab nav feature in storybook)(medium) Prio 2
  • [Spike](ui): Investigate Methods for Managing Tightly Coupled Components #1054

Backlog

• [Task](ui): use global border color variable for Card component #1332
• [Task](ui): find, clarify and consolidate global border color variables #1333

Not ready for implementation

• (Inconsistency/Breaking) Harmonise event handler return values [TASK](ui): Harmonise event handler return values #722 --> needs evaluation, find all handlers, complete harmonisation most likely doesn't make sense, just needs a review and sensible concept (medium) Prio 3
• (Feature) Badge + Icon: for semantic badges it should be possible to replace the default semantic icon --> needs API design (easy) Prio 3
  • [Feat](ui): Badge + Icon: for semantic badges it should be possible to replace the default semantic icon #1045
• (Feature) Pill: add optional toggle to turn on/off feat(ui): Pill: add optional toggle to turn on/off #73 --> design needed (easy) Prio 3
• (Inconsistency) Type improvements: rather than going over the whole codebase we're improving this bit by bit triggered by user feedback. Starting with the already known topics (modal header, Pagination, ...) (incremental) Prio 3
• (Inconsistency) API inconsistencies: same as above, will start with known inconsistencies in specific components, and then as we go (title, heading, spacing, unpad, disable/disabled) (incremental) Prio 3

Non-prioritized

• (Improvement) Message: Update layout, replace gradient background, and reduce spacing

Not ready for implementation

• (Feature) Stack: add spacing boolean prop to add standard gap spacing value (similar to the ones on the Container component) --> consistency topic, affects more than Stack --> needs design/decision, combine with unpad prop refactor for Box component (not ready) (easy)
• (Inconsistency) Address all type casting in components with "as" --> clarify
• (Inconsistency) Stop using enums --> clarify
• (Improvement) Modal: generalize Modal, add specialized modal dialogs for specific usecases #1080
• [Task](ui): ComboBox/Select: refactor internal state #1071

Done

• tailwindcss 4.* upgrade Prio 0
• 📝 (Feature) make modal(footer) buttons deactivateable via bool reference [Feature](juno-ui): make modal(footer) buttons deactivateable via bool reference #516 -> needs API decision (easy) Prio 1
  • [Feat](ui): Allow Buttons to be Disabled in Modal and ModalFooter #1010 (Contains template hints)
• 📝 (Inconsistency) Check storybook code examples for stories for errors and fix. e.g. code that doesn't work at all when you try to use it, code where tw classnames with jn: prefix are used, manually written code example that doesn't match the story anymore (easy) Prio 1
  • [Docs](ui): Enhance Storybook Code Examples #1016
    • (Apps Task) [Task](apps): Remove 'jn' Prefixes from Example, Heureka and Greenhouse Apps #1036
• 📝 NEW Modal XL size - Aurora - [Feat](ui): Add xl and 2xl sizes to Modal #1120
• 📝 (Feature) Card component needed --> design needed, container only (for now), conceptual/semantic differentiation to Box (medium) Prio 1 - Aurora
  • [Feat](ui): Create Card Component for Semantic Differentiation from Box #1065 (will be superseded by [Task] (ui): create basic Card Component #1109)
• 📝 (Improvement)PageHeader:
  • vertical alignment issues when arbitrary children are added
  • needs more robust layout
  • later: we should provide the components that can be added to the header, maybe not allow arbitrary components at all (?)
  • --> conceptual Prio 1.5
  • [Improvement](ui): Enhance PageHeader Layout for Vertical Alignment #1050
• 📝 (Feature) DataGrid Row hover/active state (plus prop to toggle hover/active behaviour) --> check with Martin about design, otherwise use Supernova implementation (easy) Prio 1
  • [Feat](ui): Make DataGridRow Clickable, Stop Event Propogation and Apply Interaction Styling #1015
• (Improvement) [Task](ui): enable PageHeader theming #1152
• 📝 (Bug) modal title/heading doesn't work well with nodes anymore --> evaluate, check how SAP Design System behaves (easy)
  • [Bug](ui): Passing Node as Title and Heading Breaks Modal #1042
• [Task](ui): allow for disabling Modal Close button #1224
• (Fix) Spinner: remove hardcoded mr-3 margin-right from base styles; add explicit spacing at all affected usage sites in ui-components and apps — PR fix(ui): remove hardcoded margin-right from Spinner component #1676
• (Feature) Button: add xs size variant — closes [Task](ui): Add extra-small size to Button component #1638, PR feat(ui): add extra-small size to Button component #1644
• (Fix) ComboBox + Select: fix dropdown toggle gap and input text overlapping toggle button / valid/invalid icons — closes [Task](ui): Fix dropdown icon right-gap in ComboBox and Select #1639, PR fix(ui): adjust dropdown icon right-gap in ComboBox and Select #1653

Additional Notes

New Proposals:

• Accordion - Aurora
• Wizard - Aurora
• [Improvement](ui docs): Improve Storybook Controls with Defaults #1087
• Link/Anchor component as Button https://convergedcloud.slack.com/archives/G010AU3TTJT/p1762848908280499
• [Task](ui): create DescriptionList with child components #1172 (comment)