v6: Components - feedback / bugs

[coliff]

I'm keeping a running list of issues/bugs/requests (non exhaustive right now, but I'll keep it updated).

Accordion

Alert

Avatar

Badge

Breadcrumb

Button group

Buttons

• Suggestion: aria-disabled buttons should have same CSS as disabled aria-disabled buttons should have same CSS as disabled #39727

Card

Carousel

• Dark carousel chevron icons are dark grey on dark gray. could do with improved contrast

Close button

• Dark variant docs says you just need to add data-bs-theme="dark" but in the example you also need to add fg-white class to the SVG.

Collapse

Dialog

• We should add a 2XL dialog. (I requested this for v5 a few years ago and there's an open PR for it modal-xxl size #39433)

Drawer

List group

Menu

• BUG?: Submenus can be used by tabbing to go through options but I expected to be able to use arrow key (not sure if it's a bug or not). You can use arrow key to cycle though non-submenus, it just skips the submenus.

Nav

Nav overflow

Navbar

Pagination

Placeholder

Popover

Progress

• BUG?: If you set a taller custom height like in the example, the corners aren't perfectly round and I think they should be.

Scrollspy

Spinner

Stepper

Tab

Toasts

Toggler

Tooltip

[mdo]

I'm torn on SVGs as masks because CSS file-size, customization, and future web components implementations can nullify the problem of repetition and extra markup. Hmm… will think on that more.

[crdo]

Drawer Sheet variant docs are missing. Found it in the sources.

[crdo]

Navbar with inverse theme does not handle hover state of hamburger menu correctly.
Repro: narrow down the navbar to show the hamburger and hover the blue or dark version of navbar.

[crdo]

Drawer/Dialog - different backdrop color. Drawer has light backdrop, Dialog has dark backdrop. Should be same, or consumer should be able to choose.

[JredLewis]

OTP Input - Is it possible to allow the placeholder attribute to be passed down from the input to the slots?

[coliff]

There are some fixes and improvements to OTP input in an open PR:
#42524
Take a look and maybe comment there with any feedback.

[flying-sheep]

How much of this is addressed? https://anvme.github.io/v6-proposal/

I see that e.g. the toast and popover doesn’t use the popover/popovertarget attributes.

[coliff]

Regarding popover - I think was looked into late last year and decided against. Browser support just isn't fully there yet.

• Popover API & Anchor Positioning #41923
• Use the new HTML popover attribute for dropdown and popovers #40740

[mdo]

Yeah, that was my take away from the efforts. Sadly popover API only renders in the top layer which felt like a deal breaker, among other things. Some things did get addressed though:

• Accordion is details/summary
• Dialog and Drawer are dialog based
• Carousel got overhauled, but still a mix of CSS and JS
• Scrollspy rewritten
• Form validation plugin punted for 6.1 or later

Some features are just not there for us. I didn't want to go too far on the browser support.

[flying-sheep]

That’s great to know, thanks. Did you tell the WhatWG about these issues? I feel like they’d want to know.

There are already issues filed that might match what you ran into: whatwg/html#9936

[davidm49090]

Could we please enhance the range forms control to be two-sided so that it can have sliders representing both the minimum and maximum desired values (such as 2-5 within a range of 1-10 for example)?