umbraco/umbraco.ui

Umbraco UI Components

Umbraco UI Library

This is a UI-library for Umbraco CMS and friends. It is a collection of user interface components that can be used to build Umbraco style interfaces.

The elements are web components built with Lit and are meant to be displayed with UI Library Storybook.

The Storybook is also a development environment for the components.

If you want to use a component in your project find it in the table below and follow the instructions from components readme.

If you want to develop a component or contribute to the repository go to "Get started" section.

Components

Component	Status
uui bundle package
uui-css bundle package
<uui-action-bar>
<uui-avatar>
<uui-avatar-group>
<uui-badge>
<uui-base>
<uui-boolean-input>
<uui-box>
<uui-breadcrumbs>
<uui-button>
<uui-button-group>
<uui-button-inline-create>
<uui-card>
<uui-card-content-node>
<uui-card-media>
<uui-card-user>
<uui-caret>
<uui-checkbox>
<uui-color-area>
<uui-color-picker>
<uui-color-slider>
<uui-color-swatch>
<uui-color-swatches>
<uui-combobox>
<uui-combobox-list>
<uui-dialog>
<uui-dialog-layout>
<uui-file-dropzone>
<uui-file-preview>
<uui-form>
<uui-form-layout-item>
<uui-form-validation-message>
<uui-icon>
<uui-icon-registry>
<uui-icon-registry-essential>
<uui-input>
<uui-input-file>
<uui-input-lock>
<uui-input-password>
<uui-keyboard-shortcut>
<uui-label>
<uui-loader>
<uui-loader-bar>
<uui-loader-circle>
<uui-menu-item>
<uui-modal>
<uui-pagination>
<uui-popover>
<uui-popover-container>
<uui-progress-bar>
<uui-range-slider>
<uui-radio>
<uui-ref>
<uui-ref-list>
<uui-ref-node>
<uui-ref-node-data-type>
<uui-ref-node-document-type>
<uui-ref-node-form>
<uui-ref-node-member>
<uui-ref-node-package>
<uui-ref-node-user>
<uui-scroll-container>
<uui-select>
<uui-slider>
<uui-symbol-expand>
<uui-symbol-file>
<uui-symbol-file-dropzone>
<uui-symbol-file-thumbnail>
<uui-symbol-folder>
<uui-symbol-lock>
<uui-symbol-more>
<uui-symbol-sort>
<uui-table>
<uui-tabs>
<uui-tag>
<uui-textarea>
<uui-toast-notification>
<uui-toast-notification-container>
<uui-toast-notification-layout>
<uui-toggle>
<uui-visually-hidden>

Get started

Installation

This project uses nodejs, so you should install nodejs as the package manager on your machine. See installation guide. The UI Library requires npm in version 7 or higher, due to the use of npm workspaces.

git clone https://github.com/umbraco/Umbraco.UI.git
cd .\Umbraco.UI\
npm install

Run storybook

This command will start a server running storybook and watch for changes.

npm run storybook

Run tests

This command will build the project and run tests.

npm run test

Scripts overview

• storybook opens storybook for the elements
• storybook:analyze generate or update custom-elements.json file
• test runs your test suite with Web Test Runner
• format runs linter and autoformatter

See the rest of the scripts here.

Contributions

• 📥 Pull requests and 🌟 Stars are always welcome.
• Read our contributing guide to get started.
• Please report bugs and feature requests in the issue tracker
• The main branch is the latest development branch. Please make your pull requests against this branch: v1/contrib
  • You can see the latest features in the Storybook attached to this branch: v1/contrib

umbraco.ui's Issues

Avatar not always keeps circular shape

The avatar component gets squeezed by its parent container.
It should always be a circle.

uui-badge: Storybook Error Expecting an HTML snippet or DOM node from the story

Feature: uui-time-ago

This component shall make it easy to display when something occurred. For shorter periods it will be precise and as time passes the precision will decrease.

A tooltip appearing on hover (For A11Y it might appears on focus or the tooltip can be opened by interaction/keyboard), The tooltip should display the exact time of the occurrence, as full DateTime string, like 1. January 2022 16:04:34

Examples of different appearances depending on the time since the given date-time:

now
28 seconds ago
16 minutes ago
3 hours ago
yesterday
4 days ago
last month
2 months ago
1 year ago
24 years ago

This should preferably update runtime, meaning example the second's display will update every second, to match the exact time difference.

I´m not sure how to determine when it makes sense to write yesterday etc. It would seem weird to write yesterday for 23:59 viewed at 00:01 (2minuts after). There should be a certain threshold before writing such. This has to be clarified how a system like that can work, if it does not make sense to use the words "yesterday"/"last month" then that should be kept out.

Implement `prefers-color-scheme` media querry in UI Library storybook readme addon

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

Storybook

Bug summary

When the system is set to dark mode, the readme addon syntax highlight has very low legibility.

Specifics

That can be seen in the image below.

Steps to reproduce

1. Set your system to dark mode.
2. Visit uui.umbraco.com or run storybook locally

Expected result / actual result

No response

Case sensitive Combobox

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

Version 1.0.0

Bug summary

The search in uui-combobox is case sensitive, which seems quite inconvenient. 🙂

Specifics

This is the URL where I found the bug: https://uui.umbraco.com/?path=/story/uui-combobox--avatars&args=selected:

I tried this in Chrome and Edge.

Steps to reproduce

Search for something with uppercase then lowercase 😄

Expected result / actual result

Expected Result:
To find the desired value no matter the casing.

Actual Result:
Only found the desired value if the casing matched.

uui-input append slot does not work well with button

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.2.1

Bug summary

When uui-button is put to the uui-input append (and prepend too I suppose) slot it does not work nicely out of the box. The button is too tall.

Specifics

Steps to reproduce

Put uui-button with icon into the uui-input append slot

Expected result / actual result

Although it is of course possible to tackle that with a bit of styling, It woulod be nice if that worked correctly out of the box. I think it quite often might be a desired combination to have a button in the input slot and add some funcionality to it. It would also make a nice story in the storybook.

Feature: Field with copy button

It would be beneficial to have a component that exposes a text that can be copied by clicking a button. The copy functionality should work cross-browser and have some kind of interaction to know you clicked.

Example:

Advanced Table Usage

It would be good to see example of more advanced use cases in the Table control

1. Column ordering
2. Column scrolling (an alternative to overflowing content, could we allow the table to scroll horizontally?)
3. Multi-line content
4. None text content (images, other controls)

Maybe take a look at https://gridjs.io/ and https://www.datatables.net/ for inspiration.

uui-button slot content is not centered when it renders anchot tag instead of button

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-RC1

Bug summary

Button with an anchor tag does not center properly

Specifics

No response

Steps to reproduce

Set href atribute on uui-button put something to slot and watch is as it is not centered :)

Expected result / actual result

No response

Typo in the storyboard docs for input

A small thing but the code is "<uui-input><uui-input/>" instead of "<uui-input></uui-input>"

https://uui.umbraco.com/?path=/docs/uui-input--aaa-overview

Feature Request: Code Sandbox for easy exploration

Can I suggest that we use a code playground service as a prebuilt example/setup for people to start experimenting with uui-library.

Ideas

• codepen.io
• JSFiddle.net
• codesandbox.io
• glitch.io
• new example repo & GitHub CodeSpace setup

Error indication on card should appear outside box

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.0.0

Bug summary

Currently the border shrinks the content of the box. See Selection for reference on appending the indication(border) on the outside. This means when a card with an error is selected the error isn't visible. We will have to see if that ever could become problematic and react to it from there.

Specifics

No response

Steps to reproduce

See storybook

Expected result / actual result

No response

Several READMEs are missing a link to NPM package

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.2.0

Bug summary

@bjarnef has discovered that several of the newer components are missing a link to their npm package. This used to be the norm after PR #57 but was somehow overlooked later on.

We should add this to the plop templates, so it is not forgotten, and also the newer components should be fixed.

Specifics

Example of uui-avatar where the badge at the top of the README is linking to NPM: https://github.com/umbraco/Umbraco.UI/blob/dev/packages/uui-avatar/README.md'

Example of uui-action-bar where the badge is NOT linking to anything: https://github.com/umbraco/Umbraco.UI/blob/dev/packages/uui-action-bar/README.md

Steps to reproduce

Expected result / actual result

No response

Feature: Color picker

Based on some comments here umbraco/Umbraco-CMS#11713 it would be great to have a color picker similar to the current <umb-color-picker> component in Umbraco.

Features

• Zero dependencies / Vanilla JS
• Touch support
• Accessible
• Alpha channel (opacity)

Nice to have

• Popup or inline
• Palette / predefined colors

I found an example here:
https://www.npmjs.com/package/color-picker-web-component
https://gh.grahamsh.com/color-picker/

Not working with latest NodeJS

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0+

Bug summary

Failing running storybook

Specifics

Does not work with these versions:
NPM 8.19.1
Node 18.9.0

Steps to reproduce

downlad latest, run npm install, run npm run storybook

Expected result / actual result

No response

Pagination do not reload when total changes

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0

Bug summary

When updating only the total number and not the current in the Pagination, it do not update the ui correct.

Specifics

No response

Steps to reproduce

Screen.Recording.2022-10-26.at.15.11.41.mov

Expected result / actual result

I expect it to update the number of pages, even that I only change the total number

Table-row focus outline is hidden by selected border

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-rc

Bug summary

Selected state, technically overwrites focus-outline. Meaning that focus-outline can not be seen.

Specifics

No response

Steps to reproduce

view the story

Expected result / actual result

No response

uui-popover missing from bundle package

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.1

Bug summary

uui-popover seems to be missing from the bundle package, this causes an error in the Webpack build.

Specifics

The error message:

ERROR in ./node_modules/@umbraco-ui/uui/lib/index.js 36:0-37
Module not found: Error: Can't resolve '@umbraco-ui/uui-popover/lib' in '/home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/uui/lib'
resolve '@umbraco-ui/uui-popover/lib' in '/home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/uui/lib'
  Parsed request is a module
  using description file: /home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/uui/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/uui/lib/node_modules doesn't exist or is not a directory
      /home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/uui/node_modules doesn't exist or is not a directory
      /home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/node_modules doesn't exist or is not a directory
      /home/projects/ojo-uui-0-1-1-webpack-test/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/projects/ojo-uui-0-1-1-webpack-test/node_modules
        /home/projects/ojo-uui-0-1-1-webpack-test/node_modules/@umbraco-ui/uui-popover doesn't exist
      /home/projects/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/index.js 1:0-25

webpack 5.72.0 compiled with 1 error in 1820 ms

You can see it happen here in this Stackblitz: https://stackblitz.com/edit/ojo-uui-0-1-1-webpack-test?file=webpack.config.js&terminal=build%2Cstart

Steps to reproduce

1. Install and setup Webpack via npm.
2. Install UUI, via npm, and add an import to your .js file.
3. Setup a Webpack build script to build the .js file containing the UUI import.
   • Remember to include the fullySpecified: false rule as recommended here.
4. Attempt to run the Webpack build script.

Expected result / actual result

Expected result:
Webpack should run the build script with no errors

Actual result:
The build script completes but with 1 error

Popover/Combobox doesn't work well on mobile

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-rc2

Bug summary

The combobox component doesn't work well on mobile. On mobile/touch the virtuel keyboard push the dropdown out of screen spare, so it is almost impossible to select an element.

Currently it is using Popper, but it could alternatively use Floating UI, but probably not in v1 #301

Also when virtual keyboard is closed the overlay doesn't re-positionate.

Specifics

No response

Steps to reproduce

...

Expected result / actual result

No response

---

This item has been added to our backlog AB#21816

Bug: Validation with Combobox

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

CDN UUI Bundle Latest aka 1.0.0-rc.1 https://cdn.jsdelivr.net/npm/@umbraco-ui/uui@latest/dist/uui.min.js

Bug summary

When using the required and required-message attributes on the combobox the validation will not show if you use the cross/clear button inside the input to clear your selection, I would have thought

Specifics

Here is a short video showing the problem
https://user-images.githubusercontent.com/1389894/178718148-77c1509b-be19-4ad9-9a34-858d98fbb93a.mp4

Steps to reproduce

See this Stackblitz & attached video
https://stackblitz.com/edit/uui-combobox-bug?file=index.html

• Click into combobox and away again - Validation message fires
• Click into combobox and choose an option - validation hides as expected
• Clear out the chosen item with the X - I expect validation to reappear as its now empty and required
• Submit form - form does not submit as expected but no way to know there is an error
• Choose a value and submit - form submits/redirects to Google

Expected result / actual result

No response

Implement look in uui-tag, make styling possibilities consistent

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-RC

Bug summary

1. uui-tag

With the new look and color system, the uui-tag component lost the possibility to set the look on it. In my opinion it was way more versatile before and it should stay that way - in UCP I use it to display user roles or indicate if a feature belong to a certain plan. For that a more "dicscreete" option is necessary, take a look at the examples below.

BEFORE:

AFTER:

2. Inconsistency

The look/color system is not consistent across the UI Library.

Specifics

### 1. uui-tag

As it may seem that all the looks (like outline or placeholder) are not necessary for the tag at first, one may want to add a placeholder look for a tag to make it clickable and add more tags. Generally, as tag component is used to reflect or indicate some state it would be nice if it remains as flexible as possible.

2. Inconsistency

The button implements color/look system fully, tag is missing the look property entirely and a badge allows to set the color property to secondary, which is part of the look, not the color. I think the system should stay the same across all the components. For button, badge and tag it should be possible to utilize both color and look (one may argue gthat badge might not need the look option, but tag definitely does). Stepping out from the system in case of a badge makes it hard to predict the beheavior, forces to go check the source code.

Steps to reproduce

not applicable

Expected result / actual result

No response

Storyboard - "Docs" tab - Code is broken on first render

If you follow this sequence:

• navigate to https://uui.umbraco.com/
• switch to the Docs tab

The code window is broken:

[object Object],[object Object],[object Object],...

Once you are in the Docs tab, navigating to any other component fixes the problem.
I'm using Chrome Version 96.0.4664.110 (Official Build) (64-bit)

Feature: Form item component

Let's build a component for Form Layouting, which takes input through a slot.

This component ensures that a form gets a proper layout, by putting the label and validation message in the right spot.

The component would internally use uui-label
The component should also host the configuration of validation.

Inspiration from Ant Design:
https://ant.design/components/form/

Test coverage check

Test coverage

We should add a test coverage action/check to Github to enforce minimum test coverage. Codecov seems to be a good tool, which is free for FOSS: https://about.codecov.io/

What tools are there and is this generally speaking a good idea?

Custom icon missing from reference node

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-rc.1

Bug summary

I noticed here the custom icon <uui-icon slot="icon" name="colorpicker"></uui-icon> isn't showing the color picker icon:
https://uui.umbraco.com/?path=/story/uui-ref-node-data-type--custom-icon

or the custom icons here:
https://uui.umbraco.com/?path=/story/uui-ref-node-document-type--custom-icon
https://uui.umbraco.com/?path=/story/uui-ref-node-form--custom-icon
https://uui.umbraco.com/?path=/story/uui-ref-node-member--custom-icon
https://uui.umbraco.com/?path=/story/uui-ref-node-package--custom-icon
https://uui.umbraco.com/?path=/story/uui-ref-node-user--custom-icon
https://uui.umbraco.com/?path=/story/uui-ref-node--custom-icon

Specifics

No response

Steps to reproduce

...

Expected result / actual result

No response

---

This item has been added to our backlog AB#21611

<uui-key> - Would <kbd> be more suitable?

👋 Hello! I've been exploring the UI Library (Storybook), I'm liking it. Great work!

I'd like to get involved, but want to start small, so an easy question first. 😃

With the <uui-key> component, (source link), it appears to be presentational rather than functional.

Would the native <kbd> element be more suitable?

With the <uui-keyboard-shortcut> component, it'd be...

<uui-keyboard-shortcut>
  <kbd>CTRL</kbd> + <kbd>S</kbd>
</uui-keyboard-shortcut>

uui-ref-list: Doc Code Snippet does not match up with what is previewed/shown

The code snippet does not match what is shown/displayed as I can not see any published tag in the preview above the code sample.
It would be good if the code sample below matched what I see in the preview.

UUI: make uui-input accessible

Based on this screenshot, we could make uui-input more accessible by supporting "aria-label". However, we don't want to duplicate code from the uui-label field above. Can we somehow make them talk with each other?

---

This item has been added to our backlog AB#21088

uui-input looks incorrect when autocompleted

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0

Bug summary

When filled with autocompoleted value the native input gets a light-blue background (in chrome).
This is not displayed correctly because the input is not stretched for entire height of uui-input. Blue background gets a white frame around.

Specifics

No response

Steps to reproduce

Use uui-input in a context that provides autocompletion. For example in this story

Expected result / actual result

Expected result

Package-card

Make a display card for Packages, be inspired by the one in BackOffice.

Storybook: not all custom properties are listed in the custom properties story.

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-RC

Bug summary

The --uui-color-interactive and --uui-color-default custom properties are not listed in this story

All available custom properties should be there along with some short instrucion what "standalone" and "emphasis" means. It is not clear (at least for me) what are the use cases for those (which should be used for hover state for example). A few simple examples might be nice.

Specifics

No response

Steps to reproduce

not applicable

Expected result / actual result

No response

Changes to disabled prop on uui-radio-group not propagating to child radio controls

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0

Bug summary

When toggling the disabled property on the uui-radio-group the value is not correctly propagating down to the child uui-radio controls.

Specifics

This relates to usage of uui-radio-group in the Marketplace build - on a category view, we render a filter panel, which uses the UUI components. To avoid tabbing into the panel when it is closed, the radio group is disabled when the panel is closed, and enabled when the panel is open. This works correctly (ie disabled attribute is added/removed when the panel state changes), but the radio controls remain disabled regardless of the group state.

Radio group implementation looks like this:

render() {
  return ...
    html`<uui-radio-group name=${filter.alias} .disabled=${!this.open}>
      ${filter.options.map((o: Option) =>
        this._renderRadioButton(o, filter.alias)
      )}
    </uui-radio-group>`
    ...
}

///
private _renderRadioButton(option: Option, key: string) {
    return html`<uui-radio
      label="${option.name}"
      value="${option.value}"
      .checked=${option.selected || false}
      @change=${(e: any) => this._filterChange(e, key)}
    ></uui-radio>`;
  }

this.open is toggled via a button click. The disabled attribute on the group changes, but the child controls are not updated (notice in the screenshots below - the disabled attribute on the group is removed, but no change on children)

Page load (this.open === false)

Filters open (this.open === true)

I've also tried setting disabled on the radio control, which toggles correctly but the tabindex is always set to -1 after the first toggle.

Annnnnnd in having written all that, have had a closer look at the uui-radio element, and I think I have found at least a partial cause, where the aria-hidden and tabindex attributes are set when disabled, but never reset when enabled:

Umbraco.UI/packages/uui-radio/lib/uui-radio.element.ts

Lines 196 to 204 in 3dcb9ce

	set disabled(newVal) {
	const oldVal = this._disabled;
	this._disabled = newVal;
	if (newVal) {
	this.setAttribute('aria-hidden', 'true');
	this.setAttribute('tabindex', '-1');
	}
	this.requestUpdate('disabled', oldVal);
	}

I've updated locally to the below, which seems to work when toggling this disabled property on the radio element, but the issue remains when toggling disabled on the parent group

  set disabled(newVal) {
    const oldVal = this._disabled;
    this._disabled = newVal;

    this.setAttribute("aria-hidden", newVal);
    this.setAttribute("tabindex", newVal || !this.checked ? "-1" : "0");
  
    this.requestUpdate("disabled", oldVal);
  }

Steps to reproduce

Visit https://marketplace.umbraco.com/category/developer-tools and try to tab through the page, with the filter panel open and closed
Tabbing works correctly when the panel is closed
Tabbing skips the radio controls when the panel is open, because the controls have tabindex=-1

Expected result / actual result

Toggling disabled attribute on the group or radio element should correctly update the state of the radio elements

---

This item has been added to our backlog AB#25359

Feature Request: Input with icon button

A feature request to have an input field have a nested/positioned icon button inside the input field

Use cases:

• Eye icon used with a password input field to toggle visibility of password
• Search input field and a X icon to clear/empty out the input field

uui-card´s should not take 100% width

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.1.0

Bug summary

We should strive to make the card appear nicely without being part of the grid.

Specifics

No response

Steps to reproduce

Use the card without a defined width.

Expected result / actual result

A solution could be to set a max-width on the card. or the desired width?

Fail to import the bundled package in any Typescript project

I'm trying to import the Umbraco.UI components (bundled @umbraco-ui/uui package) in a basic project setup with Webpack as bundler.

index.ts:

import './styles.scss';
import '@umbraco-ui/uui/lib';

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <uui-button label="Basic">Basic</uui-button>
</body>
</html>

In all the configurations / webpack versions / etc. I tested, I always get the same errors:

First a series of warning like these ones:

WARNING in ./node_modules/@umbraco-ui/uui-avatar-group/lib/index.js 7:33-40
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@umbraco-ui/uui/lib/index.js 3:0-48
 @ ./src/index.ts 2:0-29

WARNING in ./node_modules/@umbraco-ui/uui-avatar/lib/index.js 7:33-40
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@umbraco-ui/uui/lib/index.js 2:0-42
 @ ./src/index.ts 2:0-29

. . .

And then several errors like this one (I don't know if they are related to the previous warnings)

ERROR in ./node_modules/@umbraco-ui/uui-button/lib/index.js 6:0-65
Module not found: Error: Can't resolve '@umbraco-ui/uui-base/lib/svgs/icon-check' in 'D:\01-Codigo\Lit\pruebas-lit2\node_modules\@umbraco-ui\uui-button\lib'
resolve '@umbraco-ui/uui-base/lib/svgs/icon-check' in 'D:\01-Codigo\Lit\pruebas-lit2\node_modules\@umbraco-ui\uui-button\lib'
  Parsed request is a module
  using description file: D:\01-Codigo\Lit\pruebas-lit2\node_modules\@umbraco-ui\uui-button\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      D:\01-Codigo\Lit\pruebas-lit2\node_modules\@umbraco-ui\uui-button\lib\node_modules doesn't exist or is not a directory
      D:\01-Codigo\Lit\pruebas-lit2\node_modules\@umbraco-ui\uui-button\node_modules doesn't exist or is not a directory
      D:\01-Codigo\Lit\pruebas-lit2\node_modules\@umbraco-ui\node_modules doesn't exist or is not a directory
      D:\01-Codigo\Lit\pruebas-lit2\node_modules\node_modules doesn't exist or is not a directory

One of the webpack starters I used is this one: https://github.com/Golosay/webpack-seed ... but I got exactly the same errors with several other setups.

Is there a way to integrate the UI components in a webpack project? Thanks!

uui-avatar should be uppercase when showing initials

Feature: min/max character requirement validation

This feature should be used when there is a character min/max requirement.

• Should work for both input and textarea and be open for use with other elements.
• This will never limit the amount of characters going into a input, it will only let the user know, and by form validation prevent submitting the form.
• This is very likely part of the form-control validation feature, eventually initialized on uui-input and uui-textarea and hooked into the validation system. Thereby displayed through the validation message.

General
When the requirements are held, the message should only be shown when input has focus.

When only a maximum limitation:
below 80% of the max: "Maximum 100 characters"
between 80%-100%: "Maximum 100 characters, 18 characters left"
above 100%: "Maximum 100 characters, 12 too many. (red text color)

When only a minimum limitation:
when no characters: "Minimum 100 characters"
1-100: "Minimum 100 characters, missing 24" (red text color)
above the min: "Minimum 100 characters"

When both a minimum and maximum limitation:
when no characters: "100-200 characters"
below the min: "100-200 characters, missing 24" (red text color)
in a good state: "100-200 characters"
above min but between 80%-100%: "Maximum 100 characters, 18 characters left"
above 100%: "Maximum 100 characters, 12 too many. (red text color)

`uui-input` components dispatches the input event twice.

This is caused by this line.

Umbraco.UI/packages/uui-input/lib/uui-input.element.ts

Line 286 in 419cb04

this.dispatchEvent(new UUIInputEvent(UUIInputEvent.INPUT));

The native input element that in encapsulated in the uui-input emits th enatiuve input event. The native input event is composed. That means it will propagate outside of the uui-input shadow root. Therefore there is no need to dispatch a custom input event. The native one works just fine.

On a contrary, the native change event is not composed.

You can read more about it under this link.

---

This item has been added to our backlog AB#21489

UI Devops test

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0

Bug summary

Please ignore this

Specifics

No response

Steps to reproduce

No

Expected result / actual result

No response

---

This item has been added to our backlog AB#21121

--uui-box-default-padding does not change the header slot padding

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.2.0

Bug summary

The --uui-box-default-padding property for uui-box has no effect on the box's header slot padding.

Specifics

Observed in:

• Edge v101.0.1210.47
• Firefox v100.0.1
• Chrome v101.0.4951.54

Steps to reproduce

1. Add a uui-box:

<uui-box class="my-uui-box">
     <div class="my-uui-box__header" slot="headline">
          My header
     </div>
     <div class="my-uui-box__main">
          My content
     </div>
</uui-box>  

2. Add these styles:

.my-uui-box {
    --uui-box-default-padding: 0;
    margin-bottom: 20px;
}

.my-uui-box__header {
    color: #ffffff;
    background-color: #1b264f;
    border-radius: 3px 3px 0 0;
}

3. Observe the output

Expected result / actual result

How it looks in 0.2.0, the padding in the header remains the default, but the content padding has been set to 0:

Setting --uui-box-default-padding: 0; should affect both the content and the header slots.

---

Also, previously in 0.0.10 (prior to the --uui-box-default-padding property being added), the blue background would simply fill the header:

But, at some point since that version, the padding was added which now encompasses the content within the box slots; and this is why I tried to remove the default padding and then found it does not affect the header.

I think it would also be a good idea to maybe add a --uui-box-header-background property (or something similar) so that we can easily customise the box header background colour, as having colourable headers makes for some nice ui (in my opinion).

uui-symbol-expand does not work on Safari (desktop and mobile)

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.2.1

Bug summary

When used in safari, the triangle svg in uui-expand-symbol is not rendered. It should appear where the red circles are.

Specifics

It might be related to this issue. The svg inside does not have height and width attributes, they are not defined in css either.

Steps to reproduce

Open storybook in safari.

Expected result / actual result

Expected: see the arrow inside
Actual: the arrow symbol is not rendered at all.

uui-action-bar is not rendered correctly in safari

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

0.2.1

Bug summary

Action bar gets stretched

Specifics

No response

Steps to reproduce

I was using this markup:

<uui-box>
  <div id="header" slot="header">
    <uui-action-bar>
        <!--Put some buttons here -->
    <uui-action-bar>
  </div>
</uui-box>

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Expected result / actual result

Expected (that how it looks in chrome):

Actual (safari):

Missing footer background in disabled media card

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0-rc.1

Bug summary

I noticed here the story for disabled media card, where the background in missing in the footer:
https://uui.umbraco.com/?path=/story/uui-card-media--disabled

compared to other versions.

It also seems in the "actions" story the remove button on hover isn't readable until hovering the button.

Specifics

No response

Steps to reproduce

Review different stories in media cards: https://uui.umbraco.com/?path=/story/uui-card-media--aaa-overview

Expected result / actual result

No response

---

This item has been added to our backlog AB#21599

Consider indirect sibling css selector in toggle

When extending the uui-toggle component, when you override the renderCheckbox() method, to keep the component working you cannot really add any sibling to #slider without breaking the component, as the #slider is no longer an adjacent sibling of input.

Umbraco.UI/packages/uui-toggle/lib/uui-toggle.element.ts

Line 131 in 89e0441

input:checked + #slider::after {

Would you consider changing the adjacent sibling + combinator to a general sibling ~ instead in any selector that targets slider and input?

UUI Table: Do not render "..." if cell has overflow but no text node

If the table cell has overflow but has no text node as a child, change the text-overflow CSS property from ellipsis to something else, so the ... does not show up. See screenshot.

Imrpove code examples for UUI-tabs

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0

Bug summary

Currently code examples for tabs in UUI Storybook do not follow stories.
A tab has multiple slots, but there is no example of how to use them and what goes where.

Specifics

No response

Steps to reproduce

Go to storybook, search for tabs component :)

Expected result / actual result

No response

Assumptive base styles

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

Latest

Bug summary

Whilst reviewing a demo @warrenbuckley created https://codepen.io/warrenbuckley/pen/WNdxOLv I noticed his "Praise" panel on the right hand side was formatted badly with the header overlapping. When reviewing why this is, it appears this comes from the UUI css file which is applying negative left margins to all hX tags. This to me feels like a style that is situation specific and should not be a base style for the h tags as clearly these can be used in places that style doesn't make sense.

Specifics

No response

Steps to reproduce

Review @warrenbuckley's demo link to see it reproduced

Expected result / actual result

I don't think global styles for elements should have this kind of formatting. It feels like it's assuming that the h tags will be used in a specific location / within a specific element and in that particular use case negative margins make sense. But from a global / reuse perspective, these styles should not apply.

Disabled input, when wrapped in `uui-form-layout` is not displayed properly in Safari

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.0.0

Bug summary

The color of the text inside the input is incorrect when input is disabled and wrapped in form layout element.
That happens in safari. See screenshot below.
Since this not happens to input itself, only in form layout, the problem most likely lies there.

Specifics

No response

Steps to reproduce

1. open sotrybook in safari
2. go to the story with form layout
3. type some
4. disable the input from console
5. see that the text is white not dark gray as it should be

Expected result / actual result

No response

---

This item has been added to our backlog AB#25358

uui-avatar element should set title-attribute

So you can hover to see the full text being shortened...

Feature request: Range slider

Currently there is a slider component, but it would be useful with a range slider as well (maybe same component to make it possible to switch from slider to range slider dynamically?)

Some of the features in noUiSlider would be useful:

• Tooltip at handles
• Pips/steps