zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.

Home Page:https://www.mdui.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`mdui-select` should have label CSS Part

Sduby22 opened this issue · comments

there is color inconsistency when using text-field and select components on non-primary-color background (like a secondary container), because their labels are hardcoded background-color: rgb(var(--mdui-color-background))

image

a work-around is to use ::part(label) to set the background color manually to match background.

    .item::part(label) {
      color: rgb(var(--mdui-color-on-secondary-container));
      background-color: rgb(var(--mdui-color-secondary-container));
    }

Unfortunately, mdui-select doesn't provide this label CSS part. I have to fallback to @material/web implementation.

Interestingly, Google's official implementation is a bit more complex but doesn't have this problem. A brief introduction of Google's implementation is as follows:

image

Google didn't use a color mask. A text-field / select is divided into 3 parts, when user input something and the label will move to top, with the mid "notch" part's top border disappearing.

The select component now exports CSS parts for chip and text-field internals. You can update to 2.1.0 to use it.