Add new input group + addon components#1391
Conversation
|
Hi there @bjarnef, thank you for this contribution! 👍 While we wait for the team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:
Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution. If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request. Thanks, from your friendly Umbraco GitHub bot 🤖 🙂 |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds new uui-input-group and uui-input-group-addon web components (Lit) plus Storybook stories, README docs, and basic tests, and exports them from the components index.
Changes:
- Introduces
uui-input-group+uui-input-group-addonelements with base styling for grouped controls. - Adds Storybook stories/examples (including a select-based example) and component READMEs.
- Adds Vitest tests (instance + axe a11y) and exports the components via
src/components/index.ts.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/input-group/input-group.ts | Registers uui-input-group and re-exports the element class. |
| src/components/input-group/input-group.element.ts | Implements UUIInputGroupElement and group styling rules. |
| src/components/input-group/input-group.story.ts | Adds Storybook stories demonstrating input-group usage patterns. |
| src/components/input-group/input-group-select.example.ts | Adds a Storybook example element combining addon + select. |
| src/components/input-group/input-group.test.ts | Adds basic instantiation and a11y tests for input-group. |
| src/components/input-group/README.md | Documents usage/import for uui-input-group. |
| src/components/input-group-addon/input-group-addon.ts | Registers uui-input-group-addon and re-exports the element class. |
| src/components/input-group-addon/input-group-addon.element.ts | Implements UUIInputGroupAddonElement styles + slot rendering. |
| src/components/input-group-addon/input-group-addon.story.ts | Adds Storybook stories for addon. |
| src/components/input-group-addon/input-group-addon.test.ts | Adds basic instantiation and a11y tests for addon. |
| src/components/input-group-addon/README.md | Documents usage/import for uui-input-group-addon. |
| src/components/index.ts | Exports the new components from the package index. |
| } | ||
|
|
||
| #onChange = (e: UUISelectEvent) => { | ||
| this.value = e.target.value as string; |
|
|
||
| /* not last addon → remove RIGHT border (only if another addon follows) */ | ||
| ::slotted(uui-input-group-addon:not(:last-child)), | ||
| ::slotted(uui-button:not(:last-child)) { | ||
| border-right: none; | ||
| } |
| html`<uui-input-group ${spread(args)} | ||
| >${renderSlots(args)}</uui-input-group | ||
| >`, |
| import { html } from 'lit'; | ||
| import { render } from 'vitest-browser-lit'; | ||
| import { axeRun } from '../../internal/test/a11y.js'; | ||
| import { UUIInputGroupElement } from './input-group.element'; |
|
A bit more polishing and not quite sure how to use non-essential icons in the stories. I think it would make to allow a |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Description
Currently
uui-inputallows prepend and append.https://uui.umbraco.com/?path=/docs/uui-input--docs#prepend-and-append-1
However the styles is added specific in the story and when used in CMS it has some slightly different styles:
umbraco/Umbraco-CMS#22917
When used in extend of backoffice, e.g. in the property editor or a dashboard, developers have to copy these prepend/append styles, which is difficult to maintain if Umbraco later change the look and feel of this.
I considered it to be added in CMS, but I think it belong to UI library and easier for other addons like Forms, Deploy, Commerce to benefits from this.
Another downside it that it only
uui-inputcomponent support this, it doesn't allow to combine this withuui-select.An use case for this can be seen here: https://primevue.org/inputgroup/#basic
Prepend may still make sense inside
uui-inpute.g. search icon in input:http://localhost:6006/?path=/story/uui-input--prepend-icon
With the
uui-input-groupwe can also other components as addon, e.g. auui-color-swatchin prepend slot or auui-buttonin append slot.I am considering if it would be best to always wrap prepend/append insider
uui-input-group-addon(it may be easier to control rounding, e.g. if custom components can be used insider this as well) or if e.g.uui-buttoncan be added directly.I think the former may be easier to control.
Types of changes
Motivation and context
How to test?
Screenshots (if appropriate)
Checklist