[aura] Documented component CSS properties that do not work

[sissbruecker]

The following is a list of component custom CSS properties that are currently documented as supported by Aura, but either do not work, or may not work 100% as intended. For testing the props have been applied to the host element directly.

Checkbox:

• --vaadin-checkbox-marker-color
• --vaadin-checkbox-label-font-weight (incorrectly documented, --vaadin-checkbox-font-weight works instead, but naming is inconsistent with other label props)

Context menu:

• --vaadin-icon-visual-size
  • Should modify checkmark icon in items? Same result when applied to items. Probably applies to other item components?

CRUD: (not Aura-related, but base-styles)

• --vaadin-crud-form-padding (padding-top is set to 0, probably intentional?)
  • Similar to dashboard-widget and dialog, the top padding is expected to come from the header)

Dashboard

• --vaadin-dashboard-widget-padding (only defined in Lumo – should be in base styles. Doesn't affect padding-top)
• --vaadin-dashboard-widget-header-padding (when editable)
• --vaadin-dashboard-widget-shadow (need to target vaadin-dashboard-widget selector instead of html, this property is overridden in base style on the host on various states)
• --vaadin-dashboard-drop-target-border (only defined in Lumo – base styles define --vaadin-dashboard-drop-target-border-color)
• --vaadin-dashboard-drop-target-background-color (instead of vaadin-dashboard-widget, target vaadin-dashboard-widget:not([dragging]) in Aura dashboard.css)

Dialog / Confirm dialog:

• --vaadin-dialog-shadow

Grid:

• --vaadin-grid-column-border-width (with column-borders)
• --vaadin-grid-row-highlight-background-color (applied to all rows, no clue when this is useful)
  • Jouni: this is useful for custom row styles, if you want to highlight a certain row with a background color, using a custom part name

Login overlay:

• --vaadin-login-overlay-background
• --vaadin-login-overlay-shadow
• --vaadin-login-overlay-brand-padding (not applied to bottom, probably intentional)

Master detail layout:

• --vaadin-master-detail-layout-detail-background
• --vaadin-master-detail-layout-detail-shadow
• --vaadin-master-detail-layout-backdrop (only defined in Lumo, never used)

Message input: (not Aura-related, these are broken in base styles)

• --vaadin-input-field-top-start-radius
• --vaadin-input-field-top-end-radius
• --vaadin-input-field-bottom-start-radius
• --vaadin-input-field-bottom-start-radius
• --vaadin-input-field-container-gap (doesn't make sense for this component?)

Multi-select combo box:

• --vaadin-multi-select-combo-box-chip-min-width (doesn't work for either theme)
  • Jouni: the component expects this to be a pixel value (uses parseInt() in JS). This seems to be broken in base styles. And I’m not even sure what the purpose of this property is and how it should behave – I assume it should guarantee that chips don't get smaller than this, but I would also not expect the chips to ever grow bigger than the content needs, so using min-width explicitly for them seems wrong.

Notification (card):

• --vaadin-notification-shadow

Popover:

• --vaadin-popover-shadow
• --vaadin-popover-background

Radio button:

• --vaadin-radio-button-marker-color
• --vaadin-radio-button-label-font-weight (--vaadin-radio-button-font-weight works instead, but naming is inconsistent with other label props)

Rich text editor:

• --vaadin-rich-text-editor-toolbar-button-text-color

Tooltip:

• --vaadin-tooltip-background

Upload:

• --vaadin-upload-gap (need to use var(--vaadin-upload-gap) instead of 0 in

  web-components/packages/aura/src/components/upload.css

  Line 53 in ff15b1e

  margin-top: 0;

  )
• --vaadin-upload-file-border-radius
• --vaadin-upload-file-padding (only applies to start and end)

[rolfsmeds]

Many of these are probably quite easy (e.g. refac to use internal property instead of setting a value on the root element level), so let's just fix them.
Harder ones we can re-asses when we see how many they are.

[DiegoCardoso]

Maybe it's my CSS skills failing me, but I am not sure how the --vaadin-checkbox-marker-color is supposed to work?
The name implies that it is used to set a color, but according to

web-components/packages/field-base/src/styles/checkable-base-styles.js

Lines 135 to 143 in fd06802

	[part='${unsafeCSS(part)}']::after {
	content: '\\2003' / '';
	background: currentColor;
	border-radius: inherit;
	display: flex;
	align-items: center;
	--_filter: var(--vaadin-${unsafeCSS(propName)}-marker-color, saturate(0) invert(1) hue-rotate(180deg) contrast(100) brightness(100));
	filter: var(--_filter);
	}

it is used to set the filter. But the filter itself doesn't seem to be doing much, or I can't understand it completely.

[jouni]

I am not sure how the --vaadin-checkbox-marker-color is supposed to work?

This is a workaround for Safari 17 support, which doesn't support relative color syntax with light-dark() colors.

By default, when no custom marker color is defined, the marker color is the same as the background color of the checkbox/radio-button. The default filter then converts that color to a contrasting color (black or white).

If a custom marker color is defined, that is also applied to the filter property, which in turn is an invalid value for filter, so the filter reverts to its initial value, which is none.

[jouni]

--vaadin-checkbox-marker-color

Perhaps this and --vaadin-radio-button-marker-color are exceptions, where we want these properties to apply to the checked/selected state of the component, not only in the default state. But disabled and read-only states should still be overridden by Aura, and if you want to override those, you need a specific selector for that.

[jouni]

--vaadin-checkbox-label-font-weight

Not related to Aura. These are documented incorrectly in base styles. These are aligned with vaadin-button base style props, where the label is "within" the component vs a label that sits above the input component. Perhaps illogical, but I don't think we should change these anymore.

[jouni]

--vaadin-icon-visual-size

Aura has opinions regarding some component icons, and it overrides the size of those icons, so no need to do anything for this. This property is mainly for developer-defined/app-specific icons, i.e., when you use the <vaadin-icon> element.

[jouni]

--vaadin-dashboard-widget-padding

This is only defined in Lumo, not in base styles. Should be moved to base styles, then it should work with Aura as well.

[jouni]

I’d skip MDL for now, until the implementation has settled more.

[jouni]

All the overlay-related issues come from the fact that Aura overrides ::part(overlay) globally. We should probably change that, and target each component overlay specifically, to avoid targeting shadow parts that are not owned by Vaadin components.