From 02ea9a451635b9b0d75833889e7cdf3c022cd137 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Mon, 18 Dec 2023 21:18:12 +0200 Subject: [PATCH] feat(ui5-select): introduce `readonly` state (#7950) Introduces readonly state to the Select web component and align the readonly styles for all input fields to the latest specs. Changes in Select API: new property readonly; VD: respective visual styling for readonly state, dropdown icon is not displayed; InteractionDesign: dropdown remains always closed, no changes in selection allowed; a11y: new aria attribute aria-readonly true|false accordingly. Fixes: #7727 --- packages/main/src/Select.hbs | 13 ++++--- packages/main/src/Select.ts | 39 ++++++++++++++++--- packages/main/src/themes/Input.css | 8 ++++ .../main/src/themes/base/Input-parameters.css | 2 + .../themes/sap_horizon/Input-parameters.css | 2 + .../sap_horizon_dark/Input-parameters.css | 2 + .../sap_horizon_dark_exp/Input-parameters.css | 2 + .../sap_horizon_exp/Input-parameters.css | 2 + packages/main/test/pages/Select.html | 9 ++++- packages/main/test/pages/SelectMenu.html | 36 +++++++++++++++++ packages/main/test/specs/Select.spec.js | 27 +++++++++++++ .../_stories/main/Select/Select.stories.ts | 6 +++ 12 files changed, 137 insertions(+), 11 deletions(-) diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 8b378dd2848d..839d44942e10 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -19,6 +19,7 @@ aria-describedby="{{valueStateTextId}}" aria-disabled="{{isDisabled}}" aria-required="{{required}}" + aria-readonly="{{readonly}}" aria-expanded="{{_isPickerOpen}}" aria-roledescription="{{_ariaRoleDescription}}" @keydown="{{_onkeydown}}" @@ -34,11 +35,13 @@ {{/if}} - + {{#unless readonly}} + + {{/unless}} {{#if hasValueState}} {{valueStateText}} diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 4e257d76ad96..2c760c8158b0 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -286,6 +286,21 @@ class Select extends UI5Element implements IFormElement { @property({ type: Boolean }) required!: boolean; + /** + * Defines whether the component is read-only. + *

+ * Note: A read-only component is not editable, + * but still provides visual feedback upon user interaction. + * + * @type {boolean} + * @name sap.ui.webc.main.Select.prototype.readonly + * @defaultvalue false + * @since 1.21.0 + * @public + */ + @property({ type: Boolean }) + readonly!: boolean; + /** * Defines the accessible ARIA name of the component. * @@ -589,7 +604,7 @@ class Select extends UI5Element implements IFormElement { } async _toggleRespPopover() { - if (this.disabled) { + if (this.disabled || this.readonly) { return; } @@ -739,7 +754,7 @@ class Select extends UI5Element implements IFormElement { } _handleKeyboardNavigation(e: KeyboardEvent) { - if (isEnter(e)) { + if (isEnter(e) || this.readonly) { return; } @@ -790,13 +805,22 @@ class Select extends UI5Element implements IFormElement { _handleHomeKey(e: KeyboardEvent) { e.preventDefault(); + + if (this.readonly) { + return; + } + this._changeSelectedItem(this._selectedIndex, 0); } _handleEndKey(e: KeyboardEvent) { - const lastIndex = this.selectOptions.length - 1; - e.preventDefault(); + + if (this.readonly) { + return; + } + + const lastIndex = this.selectOptions.length - 1; this._changeSelectedItem(this._selectedIndex, lastIndex); } @@ -870,11 +894,16 @@ class Select extends UI5Element implements IFormElement { } _handleArrowNavigation(e: KeyboardEvent) { + e.preventDefault(); + + if (this.readonly) { + return; + } + let nextIndex = -1; const currentIndex = this._selectedIndex; const isDownKey = isDown(e); - e.preventDefault(); if (isDownKey) { nextIndex = this._getNextOptionIndex(); } else { diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 94a3b435b93a..5d1ea0a06faa 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -51,6 +51,14 @@ right: var(--_ui5_input_focus_offset); } +:host([focused][readonly]:not([opened])) .ui5-input-focusable-element::after { + top: var(--_ui5_input_readonly_focus_offset); + bottom: var(--_ui5_input_readonly_focus_offset); + left: var(--_ui5_input_readonly_focus_offset); + right: var(--_ui5_input_readonly_focus_offset); + border-radius: var(--_ui5_input_readonly_focus_border_radius); +} + .ui5-input-root::before { content: ""; position: absolute; diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index 7df445341f97..d2c4666496c5 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -9,6 +9,7 @@ --_ui5_input_background_color: var(--sapField_Background); --_ui5_input_border_radius: var(--sapField_BorderCornerRadius); --_ui5_input_focus_border_radius: 0; + --_ui5_input_readonly_focus_border_radius: 0; --_ui5-input-border: 2px solid transparent; /* The value of this variable defaults to sap_horizon theme, because if it defaults to fiori, then a flickering of the border is present*/ --_ui5_input_placeholder_style: italic; --_ui5_input_placeholder_color: var(--sapField_PlaceholderTextColor); @@ -62,6 +63,7 @@ --_ui5-input-value-state-information-border-width: 1px; --_ui5-input-background-image: none; --_ui5_input_focus_offset: 1px; + --_ui5_input_readonly_focus_offset: 1px; --ui5_input_focus_pseudo_element_content: ''; --_ui5_input_value_state_error_warning_placeholder_font_weight: normal; --_ui5_input_focus_outline_color: var(--sapContent_FocusColor); diff --git a/packages/main/src/themes/sap_horizon/Input-parameters.css b/packages/main/src/themes/sap_horizon/Input-parameters.css index 12085851c879..487061e1be67 100644 --- a/packages/main/src/themes/sap_horizon/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -13,6 +14,7 @@ --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; diff --git a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css index 12085851c879..487061e1be67 100644 --- a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -13,6 +14,7 @@ --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css index 60006362adc5..ea0d1835f1fa 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -14,6 +15,7 @@ --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_icon_min_width: 2.125rem; --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; diff --git a/packages/main/src/themes/sap_horizon_exp/Input-parameters.css b/packages/main/src/themes/sap_horizon_exp/Input-parameters.css index 2edfd89b4e86..e3975f1e4d32 100644 --- a/packages/main/src/themes/sap_horizon_exp/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Input-parameters.css @@ -4,6 +4,7 @@ --_ui5-input-border: none; --_ui5_input_hover_border: none; --_ui5_input_focus_border_radius: 0.25rem; + --_ui5_input_readonly_focus_border_radius: 0.125rem; --_ui5_input_error_warning_border_style: none; --_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background); --_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background); @@ -13,6 +14,7 @@ --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; + --_ui5_input_readonly_focus_offset: 0.125rem; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index 58b7fe68ca9c..4b203d6d6364 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -22,7 +22,6 @@ Restore Items click -

Content size

@@ -69,6 +68,14 @@

Success Select

Disabled Select

+

Readonly Select

+ + Cozy + Compact + Condensed + + +

Input with suggestions

diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html index b1d11b252466..08632eec990e 100644 --- a/packages/main/test/pages/SelectMenu.html +++ b/packages/main/test/pages/SelectMenu.html @@ -38,6 +38,8 @@ + +
@@ -612,6 +614,40 @@ + + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +