diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs index a1f1dc8eddac..00eb9ca7f9d8 100644 --- a/packages/main/src/DatePicker.hbs +++ b/packages/main/src/DatePicker.hbs @@ -20,11 +20,13 @@ {{/unless}} diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index 91e42dc5cedd..25745c75889a 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -12,6 +12,7 @@ import CalendarType from "@ui5/webcomponents-base/dist/dates/CalendarType.js"; import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import { isShow } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; +import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import "./icons/appointment-2.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT } from "./generated/i18n/i18n-defaults.js"; @@ -419,6 +420,10 @@ class DatePicker extends UI5Element { return this.i18nBundle.getText(DATEPICKER_DATE_ACC_TEXT); } + get dir() { + return getRTL() ? "rtl" : "ltr"; + } + _getPopover() { return this.shadowRoot.querySelector("ui5-popover"); } @@ -539,14 +544,6 @@ class DatePicker extends UI5Element { return this.getFormat().parse(this.value); } - get classes() { - return { - icon: { - "ui5-datepicker-icon--pressed": this._isPickerOpen, - }, - }; - } - get styles() { return { main: { diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index d14189f684ed..a71c486f8a5f 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -1,37 +1,46 @@ -
- + + {{#each items}} + {{#if this.selected}} + {{this.textContent}} + {{/if}} + {{/each}} + + + - - - {{#each items}} - {{#if this.selected}} - {{this.textContent}} - {{/if}} - {{/each}} - + @input="{{_inputLiveChange}}" + @change={{_inputChange}} + @keydown="{{_keydown}}" + @focusin="{{_focusin}}" + @focusout="{{_focusout}}"> + - {{#unless readonly}} - - {{/unless}} - + {{#unless readonly}} + + {{/unless}} { - input.valueState = oldValueState; + this._validationTimeout = setTimeout(() => { + this.valueState = oldValueState; + this._validationTimeout = null; }, 2000); return; } @@ -296,11 +325,10 @@ class MultiComboBox extends UI5Element { if (tokensCount === 0 && this._deleting) { setTimeout(() => { - this.shadowRoot.querySelector("ui5-input").focus(); + this.shadowRoot.querySelector("input").focus(); + this._deleting = false; }, 0); } - - this._deleting = false; } _keydown(event) { @@ -315,6 +343,19 @@ class MultiComboBox extends UI5Element { list._itemNavigation.current = 0; list.items[0].focus(); } + + if (isBackSpace(event) && event.target.value === "") { + event.preventDefault(); + + const lastTokenIndex = this._tokenizer.tokens.length - 1; + + if (lastTokenIndex < 0) { + return; + } + + this._tokenizer.tokens[lastTokenIndex].focus(); + this._tokenizer._itemNav.currentIndex = lastTokenIndex; + } } _filterItems(value) { @@ -360,6 +401,14 @@ class MultiComboBox extends UI5Element { popover && popover.openBy(this); } + _focusin() { + this.focused = true; + } + + _focusout() { + this.focused = false; + } + onBeforeRendering() { this._inputLastValue = this.value; @@ -371,7 +420,7 @@ class MultiComboBox extends UI5Element { morePopover && morePopover.close(); } - const input = this.shadowRoot.querySelector("ui5-input"); + const input = this.shadowRoot.querySelector("input"); if (input && !input.value) { this._filteredItems = this.items; @@ -381,22 +430,30 @@ class MultiComboBox extends UI5Element { this._filteredItems = filteredItems; } + get _tokenizer() { + return this.shadowRoot.querySelector("ui5-tokenizer"); + } + + rootFocusIn() { + this.expandedTokenizer = true; + } + + rootFocusOut(event) { + if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) { + this.expandedTokenizer = false; + } + } get editable() { return !this.readonly; } - get selectedItemsListMode() { - return this.readonly ? "None" : "MultiSelect"; + get dir() { + return getRTL() ? "rtl" : "ltr"; } - get classes() { - return { - icon: { - [`ui5-multi-combobox-icon-root-pressed`]: this._iconPressed, - [`ui5-multi-combobox-icon`]: true, - }, - }; + get selectedItemsListMode() { + return this.readonly ? "None" : "MultiSelect"; } static async define(...params) { diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 8f8e17a1c48e..059ccc02639f 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -1,7 +1,7 @@
{{/if}} -
- -
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index a204c7fb75bf..0c29662d4bb1 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -100,6 +100,11 @@ const metadata = { noAttribute: true, }, + _iconPressed: { + type: Boolean, + noAttribute: true, + }, + /** * @private */ @@ -312,6 +317,8 @@ class Select extends UI5Element { } _applyFocusAfterOpen() { + this._toggleIcon(); + if (!this._currentlySelectedOption) { return; } @@ -371,6 +378,8 @@ class Select extends UI5Element { } _afterClose() { + this._toggleIcon(); + if (this._escapePressed) { this._select(this._selectedIndexBeforeOpen); this._escapePressed = false; @@ -380,6 +389,10 @@ class Select extends UI5Element { } } + _toggleIcon() { + this._iconPressed = !this._iconPressed; + } + get _currentSelectedItem() { return this.shadowRoot.querySelector(`#${this.options[this._selectedIndex]._id}-li`); } @@ -392,8 +405,8 @@ class Select extends UI5Element { return this.disabled ? "-1" : "0"; } - get rtl() { - return getRTL() ? "rtl" : undefined; + get dir() { + return getRTL() ? "rtl" : "ltr"; } static async define(...params) { diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 711c1856ba54..c8ea4ebb8a14 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -58,6 +58,8 @@ const metadata = { readonly: { type: Boolean }, _tabIndex: { type: String, defaultValue: "-1", noAttribute: true }, + + overflows: { type: Boolean }, }, events: /** @lends sap.ui.webcomponents.main.Token.prototype */ { diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs index f2f9425b484d..7a7051f7a614 100644 --- a/packages/main/src/Tokenizer.hbs +++ b/packages/main/src/Tokenizer.hbs @@ -1,8 +1,5 @@
-
-
-
{{#each tokens}} {{/each}} diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 49f47af4ddf3..b2a26269781f 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -24,6 +24,13 @@ const metadata = { properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { showMore: { type: Boolean }, disabled: { type: Boolean }, + + /** + * Indicates if the tokenizer should show all tokens or n more label instead + * + * @private + */ + expanded: { type: Boolean }, _nMoreText: { type: String }, }, events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { @@ -93,7 +100,9 @@ class Tokenizer extends UI5Element { return []; } - return this._getTokens(); + return this._getTokens().filter((token, index) => { + return index < (this._getTokens().length - this.overflownTokens.length); + }); }; this.i18nBundle = getI18nBundle("@ui5/webcomponents"); @@ -102,11 +111,10 @@ class Tokenizer extends UI5Element { } onBeforeRendering() { - this._itemNav.init(); - setTimeout(() => { // wait for the layouting and update the text - this._nMoreText = this.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, [this.overflownTokensCount]); + this._nMoreText = this.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, [this.overflownTokens.length]); + this._itemNav.init(); }, 0); } @@ -170,22 +178,28 @@ class Tokenizer extends UI5Element { } get showNMore() { - return this.showMore && this.overflownTokensCount; + return !this.expanded && this.showMore && this.overflownTokens.length; } - get overflownTokensCount() { - const placeholderToken = this.shadowRoot.querySelector(".ui5-tokenizer-token-placeholder"); + get contentDom() { + return this.shadowRoot.querySelector(".ui5-tokenizer--content"); + } - if (!placeholderToken) { - return; + get overflownTokens() { + if (!this.contentDom) { + return []; } - const placeholderTokenRect = placeholderToken.getBoundingClientRect(); - const tokens = this.tokens.filter(token => { - return placeholderTokenRect.top < token.getBoundingClientRect().top; - }); + return this.tokens.filter(token => { + const parentRect = this.contentDom.getBoundingClientRect(); + const tokenRect = token.getBoundingClientRect(); + const tokenLeft = tokenRect.left + tokenRect.width; + const parentLeft = parentRect.left + parentRect.width; + + token.overflows = (tokenLeft > parentLeft) && !this.expanded; - return tokens.length; + return token.overflows; + }); } get classes() { diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css index 5544baaa1a69..fe6e0fc97485 100644 --- a/packages/main/src/themes/DatePicker.css +++ b/packages/main/src/themes/DatePicker.css @@ -1,4 +1,5 @@ @import "./InvisibleTextStyles.css"; +@import "./InputIcon.css"; :host(:not([hidden])) { display: inline-block; @@ -7,29 +8,3 @@ :host { width: 100%; } - -.ui5-datepicker-icon { - color: var(--sapUiContentIconColor); - cursor: pointer; - outline: none; - border: var(--_ui5_datepicker_icon_border); -} - -.ui5-datepicker-icon:hover, -.ui5-datepicker-icon.ui5-datepicker-icon--pressed { - border-left-color: white; -} - -.ui5-datepicker-icon:active { - background-color: var(--sapUiButtonLiteActiveBackground); - color: var(--sapUiButtonActiveTextColor); -} - -.ui5-datepicker-icon.ui5-datepicker-icon--pressed { - background: var(--sapUiToggleButtonPressedBackground); - color: var(--sapUiButtonActiveTextColor); -} - -.ui5-datepicker-icon:not(.ui5-datepicker-icon--pressed):not(:active):hover { - background: var(--sapUiButtonLiteHoverBackground); -} diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 742c231c0d7a..a93b29346e71 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -20,7 +20,7 @@ height: var(--_ui5_input_compact_height); } -:host([data-ui5-compact-size]) .ui5-input-inner { +:host([data-ui5-compact-size]) input { padding: 0 0.5rem; } @@ -55,7 +55,7 @@ color: var(--sapUiContentDisabledTextColor); } -.ui5-input-inner { +input { background: transparent; color: inherit; border: none; @@ -73,22 +73,22 @@ font-family: inherit; } -.ui5-input-inner::-webkit-input-placeholder { +input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--sapUiFieldPlaceholderTextColor); } -.ui5-input-inner::-moz-placeholder { +input::-moz-placeholder { /* Firefox 19+ */ color: var(--sapUiFieldPlaceholderTextColor); } -.ui5-input-inner:-ms-input-placeholder { +input:-ms-input-placeholder { /* IE 10+ */ color: var(--sapUiFieldPlaceholderTextColor); } -.ui5-input-inner:-moz-placeholder { +input:-moz-placeholder { /* Firefox 18- */ color: var(--sapUiFieldPlaceholderTextColor); } @@ -119,12 +119,12 @@ border-width: var(--_ui5_input_state_border_width); } -:host([value-state="Error"]) .ui5-input-inner, -:host([value-state="Warning"]) .ui5-input-inner { +:host([value-state="Error"]) input, +:host([value-state="Warning"]) input { font-style: var(--_ui5_input_error_warning_font_style); } -:host([value-state="Error"]) .ui5-input-inner { +:host([value-state="Error"]) input { font-weight: var(--_ui5_input_error_font_weight); } @@ -149,7 +149,7 @@ } /* Remove IE's defaut clear button */ -.ui5-input-inner::-ms-clear { +input::-ms-clear { height: 0; width: 0; } diff --git a/packages/main/src/themes/InputIcon.css b/packages/main/src/themes/InputIcon.css new file mode 100644 index 000000000000..d6d231d42b88 --- /dev/null +++ b/packages/main/src/themes/InputIcon.css @@ -0,0 +1,46 @@ +/* + This CSS file enables visual alignment of all icons within input elements. + API: + - add input-icon attribute to an icon + - [Optional] pressed attribute set to the icon will enable additional styling (check MultiComboBox, Select, etc.) +*/ + +[input-icon] { + color: var(--sapUiContentIconColor); + cursor: pointer; + outline: none; + padding: var(--_ui5-input-icon-padding); + border-left: 1px solid transparent; +} + +[input-icon][data-ui5-compact-size] { + padding: .25rem .5rem; +} + +[input-icon][pressed] { + background: var(--sapUiToggleButtonPressedBackground); + color: var(--sapUiButtonActiveTextColor); +} + +[input-icon]:active { + background-color: var(--sapUiButtonLiteActiveBackground); + color: var(--sapUiButtonActiveTextColor); +} + +[input-icon]:not([pressed]):not(:active):hover { + background: var(--sapUiButtonLiteHoverBackground); +} + +[input-icon]:hover { + border-left: var(--_ui5_select_hover_icon_left_border); +} + +[input-icon][dir="rtl"]:hover { + border-left: none; + border-right: var(--_ui5_select_hover_icon_left_border); +} + +[input-icon][dir="rtl"] { + border-left: none; + border-right: 1px solid transparent; +} \ No newline at end of file diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css index bd56233e22ca..ba5fd53ebf59 100644 --- a/packages/main/src/themes/MessageStrip.css +++ b/packages/main/src/themes/MessageStrip.css @@ -1,11 +1,6 @@ @import "./InvisibleTextStyles.css"; -:host(ui5-messagestrip:not([hidden])) { - display: inline-block; - width: 100%; -} - -ui5-messagestrip:not([hidden]) { +:host(:not([hidden])) { display: inline-block; width: 100%; } @@ -31,7 +26,7 @@ ui5-messagestrip:not([hidden]) { } .ui5-messagestrip-root .ui5-messagestrip-text { - width: 100%; + width: 100%; color: var(--sapTextColor); line-height: 1.2; } @@ -137,4 +132,4 @@ ui5-messagestrip:not([hidden]) { /* FF renders outine around element content, causing double outline - around the button and the icon */ .ui5-messagestrip-close-icon-wrapper::-moz-focus-inner { border: none; -} \ No newline at end of file +} diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 965912af762e..1f28a2ba930d 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -1,4 +1,7 @@ -:host(ui5-multi-combobox:not([hidden])) { +@import "./Input.css"; +@import "./InputIcon.css"; + +:host(:not([hidden])) { display: inline-block; width: 100%; @@ -12,35 +15,6 @@ height: 100%; } -.ui5-multi-combobox-token { - margin-top: var(--_ui5-multi_combobox_token_margin_top); -} - -.ui5-multi-combobox-icon { - color: var(--sapUiContentIconColor); - cursor: pointer; - outline: none; -} - -.ui5-multi-combobox-icon:active { - background-color: var(--sapUiButtonLiteActiveBackground); - color: var(--sapUiButtonActiveTextColor); -} - -.ui5-multi-combobox-icon.ui5-multi-combobox-icon-root-pressed { - background: var(--sapUiToggleButtonPressedBackground); - color: var(--sapUiButtonActiveTextColor); -} - -.ui5-multi-combobox-icon:not(.ui5-multi-combobox-icon-root-pressed):not(:active):hover { - background: var(--sapUiButtonLiteHoverBackground); -} - -:host([data-ui5-compact-size]) .ui5-multi-combobox-token { - height: 100%; - margin-top: 0; -} - .ui5-multi-combobox-tokenizer { max-width: calc(100% - 3rem - var(--sap_wc_input_icon_min_width)); border: none; diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 7f189d48ef9f..d40e4518f0cc 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -1,67 +1,18 @@ -:host(:not([hidden])) { - display: inline-block; - width: 100%; -} - -:host { - height: 2.25rem; - max-width: 100%; - min-width: 5rem; - background-color: var(--sapUiFieldBackground); - border: 1px solid var(--sapUiFieldBorderColor); - box-sizing: border-box; -} - -:host(:not([disabled]):not([value-state]):not([opened]):hover) { - background-color: var(--sapUiFieldHoverBackground); - border: 1px solid var(--sapUiFieldHoverBorderColor); -} +@import "./InputIcon.css"; +@import "./Input.css"; .ui5-select-root { width: 100%; height: 100%; - position: relative; display: flex; - justify-content: space-between; - align-items: center; - box-sizing: border-box; - cursor: pointer; outline: none; -} - -/* Hovered Icon */ - -:host(:not([disabled]):not([opened]):hover) .ui5-select-icon-root { - background: var(--sapUiButtonLiteHoverBackground); -} - -/* Opened */ - -:host([opened]) .ui5-select-icon-root { - background: var(--sapUiToggleButtonPressedBackground); - color: var(--sapUiToggleButtonPressedTextColor); -} - -:host([disabled]) { - background: var(--_ui5_select_disabled_background); - border-color: var(--_ui5_select_disabled_border_color); - cursor: default; - opacity: 0.5; -} - -:host(:not([disabled]):not([opened])[focused]) { - outline: var(--_ui5_select_focus_width) dotted var(--sapUiContentFocusColor); - outline-offset: -3px; -} - -:host(:not([disabled])[value-state]:not([value-state="Default"])[focused]) { - outline-offset: -4px; + cursor: pointer; } .ui5-select-label-root { display: inline-flex; align-items: center; - width: 100%; + flex: 1; height: 100%; min-width: 1rem; padding-left: 0.5rem; @@ -71,59 +22,17 @@ cursor: pointer; } -.ui5-select-icon-root { - display: flex; - justify-content: center; - align-items: center; - width: 2.5rem; - height: 100%; - box-sizing: border-box; - color: var(--sapUiContentIconColor); -} - -:host(:hover:not([disabled])) .ui5-select-icon-root { - border-left: var(--_ui5_select_hover_icon_left_border); -} - -.ui5-select-icon { - color: inherit; - pointer-events: none; -} - -:host([value-state]:not([value-state="Default"])) { - border-style: solid; - border-width: 0.125rem; -} - -:host([value-state="Error"]) { - border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldInvalidColor); - background-color: var(--sapUiFieldInvalidBackground); -} - -:host([value-state="Warning"]) { - border: var(--_ui5_select_state_error_warning_border_width) var(--_ui5_select_state_error_warning_border_style) var(--sapUiFieldWarningColor); - background-color: var(--sapUiFieldWarningBackground); -} - -:host([value-state="Success"]) { - background-color: var(--sapUiFieldSuccessBackground); - border-color: var(--sapUiFieldSuccessColor); -} - -:host([data-ui5-compact-size]) { - height: 1.625rem; -} - -:host([data-ui5-compact-size]) .ui5-select-icon-root { - width: 2rem; -} - :host [dir="rtl"].ui5-select-root .ui5-select-label-root { padding-left: 0; padding-right: 0.5rem; } -:host(:hover:not([disabled])) [dir="rtl"].ui5-select-root .ui5-select-icon-root { - border-left: var(--_ui5_select_rtl_hover_icon_left_border); - border-right: var(--_ui5_select_rtl_hover_icon_right_border); +:host(:not([disabled])) { + cursor: pointer; } + +:host([value-state="Error"]), +:host([value-state="Warning"]), +:host([value-state="Success"]) { + overflow: hidden; +} \ No newline at end of file diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css index 6a91f33f5c49..153413e67ae7 100644 --- a/packages/main/src/themes/TextArea.css +++ b/packages/main/src/themes/TextArea.css @@ -11,12 +11,6 @@ box-sizing: border-box; } -:host .ui5-textarea-inner { - background-color: var(--sapUiFieldBackground); - border: 1px solid var(--sapUiFieldBorderColor); - border-radius: inherit; -} - :host([disabled]) { opacity: var(--sap_wc_input_disabled_opacity); cursor: default; @@ -45,6 +39,7 @@ outline: none; overflow: hidden; box-sizing: border-box; + border-radius: inherit; } .ui5-textarea-inner { @@ -62,7 +57,9 @@ -moz-appearance: textfield; overflow: auto; resize: none; - border: none; + background-color: var(--sapUiFieldBackground); + border: 1px solid var(--sapUiFieldBorderColor); + border-radius: inherit; } :host([growing]) .ui5-textarea-root { diff --git a/packages/main/src/themes/TimelineItem.css b/packages/main/src/themes/TimelineItem.css index 514bc1a37d7f..b77fbaf7d98a 100644 --- a/packages/main/src/themes/TimelineItem.css +++ b/packages/main/src/themes/TimelineItem.css @@ -44,11 +44,7 @@ transform: translateX(-50%); } -:host(ui5-timeline-item:last-child) .ui5-tli-indicator::before { - display: none; -} - -ui5-timeline-item:last-child .ui5-tli-indicator::before { +:host(:last-child) .ui5-tli-indicator::before { display: none; } diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css index 8e01e111940e..4fd9b1344a25 100644 --- a/packages/main/src/themes/Token.css +++ b/packages/main/src/themes/Token.css @@ -1,4 +1,4 @@ -:host(ui5-token) { +:host { display: inline-block; background: var(--sapUiButtonBackground); border-width: 1px; @@ -10,45 +10,49 @@ box-sizing: border-box; } -:host(ui5-token[data-ui5-compact-size]) { +:host([data-ui5-compact-size]) { font-size: 0.75rem; height: 1.25rem; } -:host(ui5-token[data-ui5-compact-size]) .ui5-token--icon { +:host([data-ui5-compact-size]) .ui5-token--icon { padding: 0 0.25rem; width: 0.75rem; height: 0.75rem; } -:host(ui5-token:not([readonly]):hover) { +:host(:not([readonly]):hover) { background: var(--sapUiButtonHoverBackground); border-color: var(--_ui5_token_hover_border_color); } -:host(ui5-token[selected]:not([readonly])) { +:host([selected]:not([readonly])) { color: var(--sapUiToggleButtonPressedTextColor); background: var(--sapUiToggleButtonPressedBackground); border: 1px solid var(--sapUiToggleButtonPressedBorderColor); } -:host(ui5-token[selected]:not([readonly]):hover) { +:host([selected]:not([readonly]):hover) { background: var(--sapUiToggleButtonPressedHoverBackground); border: 1px solid var(--sapUiToggleButtonPressedHoverBorderColor); } -:host(ui5-token[readonly]) { +:host([readonly]) { color: var(--sapUiContentForegroundTextColor); } -:host(ui5-token[readonly]) .ui5-token--wrapper { +:host([readonly]) .ui5-token--wrapper { padding-right: 0.375rem; } -:host(ui5-token[selected]) .ui5-token--wrapper:focus { +:host([selected]) .ui5-token--wrapper:focus { outline: 1px dotted var(--sapUiContentContrastFocusColor); } +:host([overflows]) { + visibility: hidden; +} + .ui5-token--icon { padding: 0.25rem 0.5rem; color: inherit; diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index 900d95a96475..7a811d6611cb 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -6,7 +6,7 @@ } :host([data-ui5-compact-size]) .ui5-tokenizer-root { - padding: 0.1875rem 0.125rem; + padding: 0.125rem; } .ui5-tokenizer-root { @@ -19,6 +19,7 @@ font-family: var(--sapUiFontFamily); } +:host([data-ui5-compact-size]) .ui5-tokenizer-root.ui5-tokenizer-no-padding, .ui5-tokenizer-no-padding { padding: 0; } @@ -36,6 +37,9 @@ .ui5-tokenizer--content { height: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; } .ui5-tokenizer--content.ui5-tokenizer-nmore--content { @@ -44,7 +48,7 @@ .ui5-tokenizer-more-text { display: inline-block; - margin-left: 3px; + margin-left: .25rem; cursor: pointer; white-space: nowrap; font-size: var(--sapMFontMediumSize); @@ -52,7 +56,23 @@ .ui5-tokenizer-token-placeholder { display: inline-block; - height: 100%; + height: 1.625rem; width: 1px; margin-top: auto; } + +:host([data-ui5-compact-size]) .ui5-tokenizer-token-placeholder { + height: 1.25rem; +} + +:host([expanded]) .ui5-tokenizer--content { + overflow: auto; +} + +:host ::slotted(ui5-token) { + margin-left: .25rem; +} + +:host([data-ui5-compact-size]) :slotted(ui5-token) { + height: 100%; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/InputIcon-parameters.css b/packages/main/src/themes/base/InputIcon-parameters.css new file mode 100644 index 000000000000..ac52fd6d03b3 --- /dev/null +++ b/packages/main/src/themes/base/InputIcon-parameters.css @@ -0,0 +1,3 @@ +:root { + --_ui5-input-icon-padding: .56275rem .6875rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Select-parameters.css b/packages/main/src/themes/base/Select-parameters.css index 468dbab339a7..677bbd266f93 100644 --- a/packages/main/src/themes/base/Select-parameters.css +++ b/packages/main/src/themes/base/Select-parameters.css @@ -3,7 +3,7 @@ --_ui5_select_disabled_border_color: var(--sapUiFieldBorderColor); --_ui5_select_state_error_warning_border_style: solid; --_ui5_select_state_error_warning_border_width: 0.125rem; - --_ui5_select_hover_icon_left_border: none; + --_ui5_select_hover_icon_left_border: 1px solid transparent; --_ui5_select_rtl_hover_icon_left_border: none; --_ui5_select_rtl_hover_icon_right_border: none; --_ui5_select_focus_width: 1px; diff --git a/packages/main/src/themes/sap_belize/InputIcon-parameters.css b/packages/main/src/themes/sap_belize/InputIcon-parameters.css new file mode 100644 index 000000000000..5e773a9129de --- /dev/null +++ b/packages/main/src/themes/sap_belize/InputIcon-parameters.css @@ -0,0 +1,5 @@ +@import "../base/InputIcon-parameters.css"; + +:root { + --_ui5-input-icon-padding: 0.6875rem .6875rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 1e974d977ff5..b436d1691b02 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -12,6 +12,7 @@ @import "./CheckBox-parameters.css"; @import "./GroupHeaderListItem-parameters.css"; @import "./Input-parameters.css"; +@import "./InputIcon-parameters.css"; @import "./Link-parameters.css"; @import "./ListItemBase-parameters.css"; @import "./MessageStrip-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css b/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css new file mode 100644 index 000000000000..5e773a9129de --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css @@ -0,0 +1,5 @@ +@import "../base/InputIcon-parameters.css"; + +:root { + --_ui5-input-icon-padding: 0.6875rem .6875rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 09a31005fed9..489e9112a486 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -11,6 +11,7 @@ @import "./DayPicker-parameters.css"; @import "./GroupHeaderListItem-parameters.css"; @import "./Input-parameters.css"; +@import "./InputIcon-parameters.css"; @import "./Link-parameters.css"; @import "./ListItemBase-parameters.css"; @import "./MonthPicker-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/InputIcon-parameters.css b/packages/main/src/themes/sap_fiori_3/InputIcon-parameters.css new file mode 100644 index 000000000000..1480f9c48000 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3/InputIcon-parameters.css @@ -0,0 +1 @@ +@import "../base/InputIcon-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index aaeb1da5696c..960556a1af01 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -10,6 +10,7 @@ @import "./DayPicker-parameters.css"; @import "./GroupHeaderListItem-parameters.css"; @import "./Input-parameters.css"; +@import "./InputIcon-parameters.css"; @import "./Link-parameters.css"; @import "./ListItemBase-parameters.css"; @import "./MonthPicker-parameters.css"; diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/InputsAlignment.html b/packages/main/test/sap/ui/webcomponents/main/pages/InputsAlignment.html new file mode 100644 index 000000000000..8b67c9a307fd --- /dev/null +++ b/packages/main/test/sap/ui/webcomponents/main/pages/InputsAlignment.html @@ -0,0 +1,56 @@ + + + + + + + ui5-input + + + + + + + + + +
+ +
+ + + + + + diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index 7fb52f116656..51c45f112932 100644 --- a/packages/main/test/specs/MultiComboBox.spec.js +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -5,7 +5,7 @@ describe("MultiComboBox general interaction", () => { describe("toggling", () => { it("opens/closes", () => { - const icon = browser.$("#multi1").shadow$("#ui5-multi-combobox-input ui5-icon"); + const icon = browser.$("#multi1").shadow$("[input-icon]"); const popover = browser.$("#multi1").shadow$(".ui5-multi-combobox-all-items-popover").shadow$(".ui5-popup-root"); icon.click(); @@ -19,7 +19,7 @@ describe("MultiComboBox general interaction", () => { describe("selection and filtering", () => { it("Opens all items popover, selects and deselects the first item", () => { - const icon = browser.$("#mcb").shadow$("#ui5-multi-combobox-input ui5-icon"); + const icon = browser.$("#mcb").shadow$("[input-icon]"); const popover = browser.$("#mcb").shadow$(".ui5-multi-combobox-all-items-popover"); const firstItem = browser.$("#first-item"); const firstItemCheckbox = browser.$("#mcb").shadow$(".ui5-multi-combobox-all-items-list > ui5-li").shadow$("ui5-checkbox"); @@ -51,7 +51,7 @@ describe("MultiComboBox general interaction", () => { }); it("Opens all items popover when start typing and filters items", () => { - const input = browser.$("#mcb").shadow$("#ui5-multi-combobox-input").shadow$("input"); + const input = browser.$("#mcb").shadow$("#ui5-multi-combobox-input"); const popover = browser.$("#mcb").shadow$(".ui5-multi-combobox-all-items-popover"); input.click(); @@ -80,7 +80,7 @@ describe("MultiComboBox general interaction", () => { it("tests built in validation by typing a non existing option", () => { const mcb = $("#mcb-validation"); const input = browser.$("#mcb-validation").shadow$("#ui5-multi-combobox-input"); - const innerInput = browser.$("#mcb-validation").shadow$("#ui5-multi-combobox-input").shadow$("input"); + const innerInput = browser.$("#mcb-validation").shadow$("#ui5-multi-combobox-input"); innerInput.click(); innerInput.keys("c"); @@ -105,4 +105,26 @@ describe("MultiComboBox general interaction", () => { // assert.ok(nMoreText.getText(), "1 More", "token 1 should be visible"); // }); }); + + describe("keyboard handling", () => { + browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/MultiComboBox.html"); + + it ("tests backspace when combobox has an empty value", () => { + let tokens = $("#multi1").shadow$$(".ui5-multi-combobox-token"); + const input = $("#multi1").shadow$("input"); + + $("#multi1").setProperty("value", ""); + + input.click(); + input.keys('Backspace'); + + assert.strictEqual(tokens.length, 3, "3 tokens are visible"); + + input.keys('Backspace'); + + tokens = $("#multi1").shadow$$(".ui5-multi-combobox-token"); + + assert.strictEqual(tokens.length, 2, "2 tokens are visible"); + }); + }); });