refactor(ui5-input-icon): simplify public API and forward value state via CSS - #13873
Conversation
… via CSS - Remove `disabled`, `readonly`, `showTooltip`, and `valueState` public properties from `ui5-input-icon`. Also remove the private `_parentDisabled` flag — the icon has no notion of parent state. - Tooltip is now always on when `accessibleName` is set (no opt-in flag). - Icon uses `tabindex="-1"` so it stays out of the tab chain. - Forward the parent Input's value state to slotted icons via inherited CSS custom properties instead of imperative `setAttribute` in `onBeforeRendering`. Parent Input's `:host([value-state="…"])` publishes `--_ui5_input_icon_state_*` custom properties that inherit through the shadow boundary into slotted icons — no JS DOM mutation per render, no stale attributes on the icon. - Collapse InputIcon.css from seven state-specific selector blocks to a single set of rules reading the inherited custom properties, with fallbacks preserving the plain (no-value-state) appearance. - Add `InputIcon.mdx` under Input's docs folder so it appears as a related page under Input in the website sidebar (auto-picked up by the autogenerated sidebar). - Update Cypress test to verify value-state forwarding via inherited CSS custom properties rather than the removed attribute.
👋 Heads-up: dev close is in effectThanks for the contribution! This repository is currently in dev close ahead of release This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):
Could you please hold off on merging into If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.
Posted automatically by the Dev Close Notice workflow. |
… CSS custom properties Extend the same CSS-custom-property forwarding pattern used for value state to the parent Input's disabled state: - Parent Input publishes `--_ui5_input_icon_state_opacity`, `--_ui5_input_icon_state_pointer_events`, and `--_ui5_input_icon_state_cursor` on `:host([disabled])`. - Icon reads them via `var(…, default)` — defaults preserve the plain interactive appearance. Native `pointer-events: none` blocks hover/active/click, so the icon's `:not(.inputIcon--disabled)` guards (dead selectors since the disabled property was removed) are also cleaned up. - Adds a Cypress test verifying the vars actually inherit into a slotted icon when the parent input is disabled.
|
🚀 Deployed on https://pr-13873--ui5-webcomponents-preview.netlify.app |
There was a problem hiding this comment.
- I would prefer if we trim the obvious comments from the code, or atleast make them shorter.
- Also when the input is readonly and has custom icon, the active state of the icon is still applied on hover. In UI5 in case of readonly input the icon get's removed from the input itself.
… CSS custom properties Mirror the disabled forwarding pattern for readonly: - Parent Input's `:host([readonly]:not([disabled]))` publishes `--_ui5_input_icon_state_pointer_events: none` and `--_ui5_input_icon_state_cursor: default`. No opacity change — readonly inputs stay readable, they don't dim. - Interactive icons (search, voice, camera, …) become non-interactive alongside the input; the icon reads the inherited vars via the same `var(…, default)` pattern already in place. - Cypress test asserts the vars actually inherit into a slotted icon when the parent is readonly, and that opacity is *not* forwarded.
|
🧹 Preview deployment cleaned up: https://pr-13873--ui5-webcomponents.netlify.app |
2 participants
Summary
Simplifies the
ui5-input-iconpublic API and switches value-state forwarding from imperative DOM mutation to pure CSS custom-property inheritance.Public API changes on
ui5-input-iconRemoves four public properties that either duplicated state owned by the parent
ui5-inputor were unnecessary opt-ins:disabled— removed. The icon has no notion of parent state; consumers who want a non-interactive icon should not slot it.readonly— removed. Same rationale as above.showTooltip— removed. Tooltip is now always on whenaccessibleNameis set (no opt-in flag).valueState— removed as a JS property. Visual value-state styling is preserved via CSS inheritance (see below).Also removes the private
_parentDisabledflag. The icon now usestabindex=\"-1\"so it stays out of the tab chain — the parent input is what the user tabs to, not each icon.Value-state forwarding: setAttribute → CSS custom properties
Before: Parent Input walked every slotted icon in
onBeforeRenderingand calledsetAttribute(\"value-state\", …)on each. The icon's CSS then read that attribute via seven distinct:host([value-state=\"Negative\"]),[…\"Critical\"], etc. selector blocks (~70 lines of duplication).After: Parent Input publishes state-specific CSS custom properties on its own host via
:host([value-state=\"Negative\"]) { --_ui5_input_icon_state_padding: …; --_ui5_input_icon_state_pressed_shadow: …; … }. Those custom properties inherit through the shadow boundary into every slottedui5-input-icon's shadow root — no JS wiring needed. The icon's CSS collapses to a single set of rules readingvar(--_ui5_input_icon_state_*, fallback).Benefits:
this.icon.forEachinonBeforeRendering).value-stateselectors also publish the derived icon vars.Docs
Adds
packages/website/docs/_components_pages/main/Input/InputIcon.mdx(modelled onSuggestionItem.mdx) soInputIconappears as a related page under Input in the website sidebar. Docusaurus's autogenerated sidebar picks it up automatically.Test coverage
The Cypress
InputIcon Integrationblock inInput.cy.tsxnow:All 131 tests in
Input.cy.tsxpass.Verification
InputIcon Integrationtests.