From 424149f312b7b0125650d34bfd272c62dfd820c0 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Wed, 12 May 2021 16:33:43 +0200 Subject: [PATCH 01/24] initial push --- packages/main/bundle.common.js | 1 + packages/main/src/SegmentedButton.hbs | 4 +- packages/main/src/SegmentedButton.js | 18 +- packages/main/src/SegmentedButtonItem.hbs | 47 ++ packages/main/src/SegmentedButtonItem.js | 473 ++++++++++++++++++ .../main/src/themes/SegemntedButtonItem.css | 55 ++ .../src/themes/SegemntedButtonItem.ie11.css | 48 ++ packages/main/src/themes/SegmentedButton.css | 14 +- packages/main/test/pages/SegmentedButton.html | 8 +- 9 files changed, 651 insertions(+), 17 deletions(-) create mode 100644 packages/main/src/SegmentedButtonItem.hbs create mode 100644 packages/main/src/SegmentedButtonItem.js create mode 100644 packages/main/src/themes/SegemntedButtonItem.css create mode 100644 packages/main/src/themes/SegemntedButtonItem.ie11.css diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js index f9d79132589f..5f6e2add52fb 100644 --- a/packages/main/bundle.common.js +++ b/packages/main/bundle.common.js @@ -58,6 +58,7 @@ import Panel from "./dist/Panel.js"; import RadioButton from "./dist/RadioButton.js"; import ResponsivePopover from "./dist/ResponsivePopover.js"; import SegmentedButton from "./dist/SegmentedButton.js"; +import SegmentedButtonItem from "./dist/SegmentedButtonItem.js"; import Select from "./dist/Select.js"; import Slider from "./dist/Slider.js"; import StepInput from "./dist/StepInput.js"; diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 83e72684964f..4c402c47ce32 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -1,4 +1,4 @@ -
-
+ diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 84140fe8f306..85cbce8c12c3 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -6,7 +6,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; import { SEGMENTEDBUTTON_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; -import ToggleButton from "./ToggleButton.js"; +import SegmentedButtonItem from "./SegmentedButtonItem.js"; // Template import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js"; @@ -29,7 +29,7 @@ const metadata = { *

* Note: Multiple buttons are allowed. *

- * Note: Use the ui5-togglebutton for the intended design. + * Note: Use the ui5-segmentedbutton-item for the intended design. * @type {sap.ui.webcomponents.main.IButton[]} * @slot buttons * @public @@ -97,7 +97,7 @@ class SegmentedButton extends UI5Element { } static get dependencies() { - return [ToggleButton]; + return [SegmentedButtonItem]; } static async onDefine() { @@ -128,7 +128,17 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { + // let length = 0; this.normalizeSelection(); + + // this.getSlottedNodes("buttons").forEach((item, index) => { + // item.posinset = index + 1; + // length += 1; + // }); + // + // this.getSlottedNodes("buttons").forEach((item, index) => { + // item.setsize = length; + // }); } async onAfterRendering() { @@ -236,7 +246,7 @@ class SegmentedButton extends UI5Element { * Currently selected button. * * @readonly - * @type { ui5-togglebutton } + * @type { ui5-segmentedbutton-item } * @public */ get selectedButton() { diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs new file mode 100644 index 000000000000..0e8897919d1b --- /dev/null +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -0,0 +1,47 @@ +
  • ariaPressed}} + dir="{{effectiveDir}}" + @focusout={{_onfocusout}} + @focusin={{_onfocusin}} + @click={{_onclick}} + @mousedown={{_onmousedown}} + @mouseup={{_onmouseup}} + @keydown={{_onkeydown}} + @keyup={{_onkeyup}} + @touchstart="{{_ontouchstart}}" + @touchend="{{_ontouchend}}" + tabindex={{tabIndexValue}} + aria-expanded="{{accInfo.ariaExpanded}}" + aria-controls="{{accInfo.ariaControls}}" + aria-haspopup="{{accInfo.ariaHaspopup}}" + aria-label="{{ariaLabelText}}" + title="{{accInfo.title}}" +> + {{#if icon}} + + {{/if}} + + + + + + +
    • + +{{#*inline "ariaPressed"}} + aria-pressed="{{pressed}}" + selected="{{pressed}}" + role="option" + aria-multiselectable="true" + aria-roledescription="Segmented button" + aria-posinset="{{posinset}}" + aria-setsize="{{setsize}}" +{{/inline}} diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js new file mode 100644 index 000000000000..9e2e489e4b72 --- /dev/null +++ b/packages/main/src/SegmentedButtonItem.js @@ -0,0 +1,473 @@ +import UI5Element from "@ui5/webcomponents-base"; +import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js"; +// import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/src/i18nBundle.js"; +import { isPhone, isTablet } from "@ui5/webcomponents-base/src/Device.js"; +import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js"; +import { isEnter, isSpace } from "@ui5/webcomponents-base/src/Keys.js"; +import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/src/util/AriaLabelHelper.js"; +import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js"; +import Icon from "./Icon.js"; +import Button from "./Button.js"; +import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; + +// Styles +import segmentedBtnItemCss from "./generated/themes/SegemntedButtonItem.css.js"; +import segmentedBtnItemIECss from "./generated/themes/SegemntedButtonItem.ie11.css.js"; + +let activeButton = null; + +/** + * @public + */ +const metadata = { + tag: "ui5-segmentedbutton-item", + properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { + + /** + * Defines whether the ui5-button is disabled + * (default is set to false). + * A disabled ui5-button can't be pressed or + * focused, and it is not in the tab chain. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + disabled: { + type: Boolean, + }, + + /** + * Defines the icon to be displayed as graphical element within the ui5-button. + * The SAP-icons font provides numerous options. + *

    + * Example: + *
    + * 
    ui5-button icon="palette"
    + * + * See all the available icons in the Icon Explorer. + * + * @type {string} + * @defaultvalue "" + * @public + */ + icon: { + type: String, + }, + + /** + * Defines whether the icon should be displayed after the ui5-button text. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + iconEnd: { + type: Boolean, + }, + + /** + * Defines the size of the icon inside the ui5-button. + * + * @type {string} + * @defaultvalue undefined + * @public + * @since 1.0.0-rc.8 + */ + iconSize: { + type: String, + defaultValue: undefined, + }, + + /** + * When set to true, the ui5-button will + * automatically submit the nearest form element upon press. + *

    + * Important: For the submits property to have effect, you must add the following import to your project: + * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; + * + * @type {boolean} + * @defaultvalue false + * @public + */ + submits: { + type: Boolean, + }, + + /** + * Defines the tooltip of the button. + *
    + * Important: Tooltips should only be set to icon only buttons. + * @type {string} + * @defaultvalue: "" + * @private + * @since 1.0.0-rc.11 + */ + title: { + type: String, + }, + + /** + * Used to switch the active state (pressed or not) of the ui5-button. + * @private + */ + active: { + type: Boolean, + }, + + /** + * Defines if a content has been added to the default slot + * @private + */ + iconOnly: { + type: Boolean, + }, + + /** + * Indicates if the elements is on focus + * @private + */ + focused: { + type: Boolean, + }, + + /** + * Indicates if the elements has a slotted icon + * @private + */ + hasIcon: { + type: Boolean, + }, + + /** + * Defines the aria-label attribute for the button + * @type {String} + * @defaultvalue: "" + * @private + * @since 1.0.0-rc.7 + */ + ariaLabel: { + type: String, + defaultValue: undefined, + }, + + /** + * Receives id(or many ids) of the elements that label the button + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.7 + */ + ariaLabelledby: { + type: String, + defaultValue: "", + }, + + /** + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.8 + */ + ariaExpanded: { + type: String, + }, + + /** + * Indicates if the element if focusable + * @private + */ + nonInteractive: { + type: Boolean, + }, + + _iconSettings: { + type: Object, + }, + + _buttonAccInfo: { + type: Object, + }, + + /** + * Defines the tabIndex of the component. + * @private + */ + _tabIndex: { + type: String, + defaultValue: "0", + noAttribute: true, + }, + + /** + * @since 1.0.0-rc.13 + * @private + */ + _isTouch: { + type: Boolean, + }, + + /** + * Determines whether the ui5-segmentedbutton-item is displayed as pressed. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + pressed: { + type: Boolean, + }, + + /** + * Defines the index of the item inside of the SegmentedButton. + * @private + * @type {String} + */ + posinset: { + type: String, + }, + + /** + * Defines how many items are inside of the SegmentedButton. + * @private + * @type {String} + */ + setsize: { + type: String, + }, + }, + managedSlots: true, + slots: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { + /** + * Defines the text of the ui5-button. + *

    + * Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + * + * @type {Node[]} + * @slot + * @public + */ + "default": { + type: Node, + }, + }, + events: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { + + /** + * Fired when the ui5-button is activated either with a + * mouse/tap or by using the Enter or Space key. + *

    + * Note: The event will not be fired if the disabled + * property is set to true. + * + * @event + * @public + * @native + */ + click: {}, + }, +}; + +/** + * @class + * + *

    Overview

    + * + * The ui5-segmentedbutton-item component is an enhanced ui5-button + * that can be toggled between pressed and normal states. + * Users can use the ui5-segmentedbutton-item as part of ui5-segmentedbutton. + *

    + * Clicking or tapping on a ui5-segmentedbutton-item changes its state to pressed. The button returns to + * its initial state when other ui5-segmentedbutton-item is clicked or tapped. + * By applying additional custom CSS-styling classes, apps can give a different style to any ui5-segmentedbutton-item. + * + *

    ES6 Module Import

    + * + * import "@ui5/webcomponents/dist/SegmentedButtonItem"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.SegmentedButtonItem + * @extends Button + * @tagname ui5-segmentedbutton-item + * @public + */ +class SegmentedButtonItem extends UI5Element { + static get metadata() { + return metadata; + } + + static get render() { + return litRender; + } + + static get template() { + return SegmentedButtonItemTemplate; + } + + static get styles() { + return [Button.styles, segmentedBtnItemCss, isLegacyBrowser() && segmentedBtnItemIECss]; + } + + static get dependencies() { + return [Icon]; + } + + constructor() { + super(); + + this._deactivate = () => { + if (activeButton) { + activeButton.active = false; + } + }; + + // if (!isGlobalHandlerAttached) { + // document.addEventListener("mouseup", this._deactivate); + // + // isGlobalHandlerAttached = true; + // } + + // this.i18nBundle = getI18nBundle("@ui5/webcomponents"); + } + + onEnterDOM() { + this._isTouch = isPhone() || isTablet(); + } + + onBeforeRendering() { + const FormSupport = getFeature("FormSupport"); + if (this.submits && !FormSupport) { + console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line + } + + this.iconOnly = this.isIconOnly; + this.hasIcon = !!this.icon; + } + + _onclick(event) { + if (this.nonInteractive) { + return; + } + event.isMarked = "button"; + const FormSupport = getFeature("FormSupport"); + if (FormSupport) { + FormSupport.triggerFormSubmit(this); + } + + this.pressed = !this.pressed; + } + + _onmousedown(event) { + if (this.nonInteractive || this._isTouch) { + return; + } + + event.isMarked = "button"; + this.active = true; + activeButton = this; // eslint-disable-line + } + + _ontouchstart(event) { + event.isMarked = "button"; + if (this.nonInteractive) { + return; + } + + this.active = true; + } + + _ontouchend(event) { + this.active = false; + + if (activeButton) { + activeButton.active = false; + } + } + + _onmouseup(event) { + event.isMarked = "button"; + } + + _onkeydown(event) { + event.isMarked = "button"; + + if (isSpace(event) || isEnter(event)) { + this.active = true; + } + } + + _onkeyup(event) { + if (isSpace(event) || isEnter(event)) { + this.active = false; + } + } + + _onfocusout(_event) { + if (this.nonInteractive) { + return; + } + this.active = false; + this.focused = false; + } + + _onfocusin(event) { + if (this.nonInteractive) { + return; + } + + event.isMarked = "button"; + this.focused = true; + } + + get isIconOnly() { + return !Array.from(this.childNodes).filter(node => { + return node.nodeType !== Node.COMMENT_NODE + && (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0); + }).length; + } + + get accInfo() { + return { + "ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded), + "ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls, + "ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup, + "title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title), + }; + } + + get ariaLabelText() { + return getEffectiveAriaLabelText(this); + } + + get tabIndexValue() { + const tabindex = this.getAttribute("tabindex"); + + if (tabindex) { + return tabindex; + } + + return this.nonInteractive ? "-1" : this._tabIndex; + } + + get showIconTooltip() { + return this.iconOnly && !this.title; + } + + get styles() { + return { + icon: { + width: this.iconSize, + height: this.iconSize, + }, + }; + } + + static async onDefine() { + // await fetchI18nBundle("@ui5/webcomponents"); + } +} + +SegmentedButtonItem.define(); + +export default SegmentedButtonItem; diff --git a/packages/main/src/themes/SegemntedButtonItem.css b/packages/main/src/themes/SegemntedButtonItem.css new file mode 100644 index 000000000000..d1f596d5da95 --- /dev/null +++ b/packages/main/src/themes/SegemntedButtonItem.css @@ -0,0 +1,55 @@ +:host(:not([hidden])) { + display: inline-block; +} + +/* this line is also included from the Button.css, but keep it here in case we start using it for automatic IE11 compilation */ +:host([disabled]) { + pointer-events: none; +} + +:host([design="Positive"][pressed]), +:host([design="Positive"][pressed][focused]), +:host([design="Positive"][pressed]:hover) { + background: var(--sapButton_Accept_Active_Background); + border-color: var(--sapButton_Accept_Active_BorderColor); + color: var(--sapButton_Selected_TextColor); + outline-color: var(--sapContent_ContrastFocusColor); +} + +:host([design="Positive"][pressed][active]), +:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { + background: var(--sapButton_Accept_Selected_Hover_Background); +} + +:host([design="Negative"][pressed]), +:host([design="Negative"][pressed][focused]), +:host([design="Negative"][pressed]:hover) { + background: var(--sapButton_Reject_Active_Background); + border-color: var(--sapButton_Reject_Active_BorderColor); + color: var(--sapButton_Selected_TextColor); + outline-color: var(--sapContent_ContrastFocusColor); +} + +:host([design="Negative"][pressed][active]), +:host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { + background: var(--sapButton_Reject_Selected_Hover_Background); +} + + +:host([pressed]), +:host([pressed]:hover), +:host([pressed][focused]), +:host([design="Transparent"][pressed]), +:host([design="Transparent"][pressed]:hover), +:host([design="Emphasized"][pressed]), +:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { + background: var(--sapButton_Selected_Background); + border-color: var(--sapButton_Selected_BorderColor); + color: var(--sapButton_Selected_TextColor); + outline-color: var(--sapContent_ContrastFocusColor); +} + +:host([pressed][active]), +:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { + background: var(--sapButton_Selected_Hover_Background); +} diff --git a/packages/main/src/themes/SegemntedButtonItem.ie11.css b/packages/main/src/themes/SegemntedButtonItem.ie11.css new file mode 100644 index 000000000000..8adfe5c9d819 --- /dev/null +++ b/packages/main/src/themes/SegemntedButtonItem.ie11.css @@ -0,0 +1,48 @@ +[ui5-togglebutton][focused] { + outline: none; +} + +[ui5-togglebutton][focused] .ui5-button-root { + position: relative; +} + +[ui5-togglebutton][focused] .ui5-button-root::after { + content: ""; + position: absolute; + border-width: 1px; + border-style: dotted; + border-color: var(--_ui5_button_focus_color); + top: var(--_ui5_button_focus_offset); + bottom: var(--_ui5_button_focus_offset); + left: var(--_ui5_button_focus_offset); + right: var(--_ui5_button_focus_offset); +} + +[ui5-togglebutton][active] .ui5-button-root::after { + border-color: var(--sapContent_ContrastFocusColor); +} + +[ui5-togglebutton][design="Positive"][focused] .ui5-button-root::after { + border-color: var(--_ui5_button_positive_border_focus_hover_color); +} + +[ui5-togglebutton][design="Positive"][active][focused] .ui5-button-root::after { + border-color: var(--sapContent_ContrastFocusColor); +} + +[ui5-togglebutton][design="Negative"][focused] .ui5-button-root::after { + border-color: var(--_ui5_button_positive_border_focus_hover_color); +} + +[ui5-togglebutton][design="Negative"][active][focused] .ui5-button-root::after { + border-color: var(--sapContent_ContrastFocusColor); +} + +[ui5-togglebutton][design="Emphasized"][focused] .ui5-button-root::after { + border-color: var(--sapContent_ContrastFocusColor); +} + +[ui5-togglebutton] [ui5-icon].ui5-button-icon { + height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ + top: 0; +} diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index 7aab0301c745..bb9a0cfde54b 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -6,7 +6,7 @@ display: flex; } -::slotted([ui5-togglebutton]) { +::slotted([ui5-segmentedbutton-item]) { border-radius: 0; height: var(--_ui5_button_base_height); min-width: 2.5rem; @@ -15,25 +15,25 @@ text-overflow: ellipsis; } -::slotted([ui5-togglebutton]:nth-child(odd)) { +::slotted([ui5-segmentedbutton-item]:nth-child(odd)) { border: 1px solid var(--sapButton_Selected_BorderColor); border-right: 0; border-left: 0; } -::slotted([ui5-togglebutton]:last-child) { +::slotted([ui5-segmentedbutton-item]:last-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-right: 1px solid var(--sapButton_Selected_BorderColor); } -::slotted([ui5-togglebutton]:first-child) { +::slotted([ui5-segmentedbutton-item]:first-child) { border-top-left-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); border-left: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-togglebutton]:first-child) { +[dir="rtl"] ::slotted([ui5-segmentedbutton-item]:first-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: 0; @@ -41,7 +41,7 @@ border-right: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-togglebutton]:last-child) { +[dir="rtl"] ::slotted([ui5-segmentedbutton-item]:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--_ui5_segmented_btn_border_radius); @@ -49,7 +49,7 @@ border-left: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-togglebutton]:only-child) { +[dir="rtl"] ::slotted([ui5-segmentedbutton-item]:only-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: var(--_ui5_segmented_btn_border_radius); diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 323444afafc7..1bd30a2240c5 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -26,14 +26,14 @@

    ui5-segmentedbutton

    Segmentedbutton example

    - Button + Button
    - - ToggleButton - Button + + ToggleButton + Button
    From ae3eb86eee3afd7ab434564bd9b9fc0c344c0cfb Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Wed, 12 May 2021 17:42:17 +0200 Subject: [PATCH 02/24] working version --- packages/main/src/SegmentedButtonItem.hbs | 20 +- packages/main/src/SegmentedButtonItem.js | 430 +------------------ packages/main/src/themes/SegmentedButton.css | 2 + 3 files changed, 26 insertions(+), 426 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 0e8897919d1b..506509a1bc65 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -1,8 +1,9 @@
  • ariaPressed}} + {{> ariaPressed}} dir="{{effectiveDir}}" @focusout={{_onfocusout}} @focusin={{_onfocusin}} @@ -19,6 +20,7 @@ aria-haspopup="{{accInfo.ariaHaspopup}}" aria-label="{{ariaLabelText}}" title="{{accInfo.title}}" + part="button" > {{#if icon}} + + {{#if hasButtonType}} + {{buttonTypeText}} + {{/if}}
    • -{{#*inline "ariaPressed"}} - aria-pressed="{{pressed}}" - selected="{{pressed}}" - role="option" - aria-multiselectable="true" - aria-roledescription="Segmented button" - aria-posinset="{{posinset}}" - aria-setsize="{{setsize}}" -{{/inline}} +{{#*inline "ariaPressed"}}{{/inline}} diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 9e2e489e4b72..4efeb9fdc4af 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -1,20 +1,10 @@ -import UI5Element from "@ui5/webcomponents-base"; -import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js"; -// import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/src/i18nBundle.js"; -import { isPhone, isTablet } from "@ui5/webcomponents-base/src/Device.js"; -import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js"; -import { isEnter, isSpace } from "@ui5/webcomponents-base/src/Keys.js"; -import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/src/util/AriaLabelHelper.js"; import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js"; -import Icon from "./Icon.js"; import Button from "./Button.js"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; // Styles -import segmentedBtnItemCss from "./generated/themes/SegemntedButtonItem.css.js"; -import segmentedBtnItemIECss from "./generated/themes/SegemntedButtonItem.ie11.css.js"; - -let activeButton = null; +import toggleBtnCss from "./generated/themes/ToggleButton.css.js"; +import toggleBtnIECss from "./generated/themes/ToggleButton.ie11.css.js"; /** * @public @@ -22,193 +12,8 @@ let activeButton = null; const metadata = { tag: "ui5-segmentedbutton-item", properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { - - /** - * Defines whether the ui5-button is disabled - * (default is set to false). - * A disabled ui5-button can't be pressed or - * focused, and it is not in the tab chain. - * - * @type {boolean} - * @defaultvalue false - * @public - */ - disabled: { - type: Boolean, - }, - - /** - * Defines the icon to be displayed as graphical element within the ui5-button. - * The SAP-icons font provides numerous options. - *

    - * Example: - *
    - * 
    ui5-button icon="palette"
    - * - * See all the available icons in the Icon Explorer. - * - * @type {string} - * @defaultvalue "" - * @public - */ - icon: { - type: String, - }, - - /** - * Defines whether the icon should be displayed after the ui5-button text. - * - * @type {boolean} - * @defaultvalue false - * @public - */ - iconEnd: { - type: Boolean, - }, - - /** - * Defines the size of the icon inside the ui5-button. - * - * @type {string} - * @defaultvalue undefined - * @public - * @since 1.0.0-rc.8 - */ - iconSize: { - type: String, - defaultValue: undefined, - }, - - /** - * When set to true, the ui5-button will - * automatically submit the nearest form element upon press. - *

    - * Important: For the submits property to have effect, you must add the following import to your project: - * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; - * - * @type {boolean} - * @defaultvalue false - * @public - */ - submits: { - type: Boolean, - }, - - /** - * Defines the tooltip of the button. - *
    - * Important: Tooltips should only be set to icon only buttons. - * @type {string} - * @defaultvalue: "" - * @private - * @since 1.0.0-rc.11 - */ - title: { - type: String, - }, - - /** - * Used to switch the active state (pressed or not) of the ui5-button. - * @private - */ - active: { - type: Boolean, - }, - - /** - * Defines if a content has been added to the default slot - * @private - */ - iconOnly: { - type: Boolean, - }, - - /** - * Indicates if the elements is on focus - * @private - */ - focused: { - type: Boolean, - }, - - /** - * Indicates if the elements has a slotted icon - * @private - */ - hasIcon: { - type: Boolean, - }, - - /** - * Defines the aria-label attribute for the button - * @type {String} - * @defaultvalue: "" - * @private - * @since 1.0.0-rc.7 - */ - ariaLabel: { - type: String, - defaultValue: undefined, - }, - - /** - * Receives id(or many ids) of the elements that label the button - * @type {String} - * @defaultvalue "" - * @private - * @since 1.0.0-rc.7 - */ - ariaLabelledby: { - type: String, - defaultValue: "", - }, - - /** - * @type {String} - * @defaultvalue "" - * @private - * @since 1.0.0-rc.8 - */ - ariaExpanded: { - type: String, - }, - - /** - * Indicates if the element if focusable - * @private - */ - nonInteractive: { - type: Boolean, - }, - - _iconSettings: { - type: Object, - }, - - _buttonAccInfo: { - type: Object, - }, - /** - * Defines the tabIndex of the component. - * @private - */ - _tabIndex: { - type: String, - defaultValue: "0", - noAttribute: true, - }, - - /** - * @since 1.0.0-rc.13 - * @private - */ - _isTouch: { - type: Boolean, - }, - - /** - * Determines whether the ui5-segmentedbutton-item is displayed as pressed. + * Determines whether the ui5-togglebutton is displayed as pressed. * * @type {boolean} * @defaultvalue false @@ -217,54 +22,6 @@ const metadata = { pressed: { type: Boolean, }, - - /** - * Defines the index of the item inside of the SegmentedButton. - * @private - * @type {String} - */ - posinset: { - type: String, - }, - - /** - * Defines how many items are inside of the SegmentedButton. - * @private - * @type {String} - */ - setsize: { - type: String, - }, - }, - managedSlots: true, - slots: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { - /** - * Defines the text of the ui5-button. - *

    - * Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. - * - * @type {Node[]} - * @slot - * @public - */ - "default": { - type: Node, - }, - }, - events: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { - - /** - * Fired when the ui5-button is activated either with a - * mouse/tap or by using the Enter or Space key. - *

    - * Note: The event will not be fired if the disabled - * property is set to true. - * - * @event - * @public - * @native - */ - click: {}, }, }; @@ -273,199 +30,42 @@ const metadata = { * *

    Overview

    * - * The ui5-segmentedbutton-item component is an enhanced ui5-button + * The ui5-togglebutton component is an enhanced ui5-button * that can be toggled between pressed and normal states. - * Users can use the ui5-segmentedbutton-item as part of ui5-segmentedbutton. + * Users can use the ui5-togglebutton as a switch to turn a setting on or off. + * It can also be used to represent an independent choice similar to a check box. *

    - * Clicking or tapping on a ui5-segmentedbutton-item changes its state to pressed. The button returns to - * its initial state when other ui5-segmentedbutton-item is clicked or tapped. - * By applying additional custom CSS-styling classes, apps can give a different style to any ui5-segmentedbutton-item. + * Clicking or tapping on a ui5-togglebutton changes its state to pressed. The button returns to + * its initial state when the user clicks or taps on it again. + * By applying additional custom CSS-styling classes, apps can give a different style to any ui5-togglebutton. * *

    ES6 Module Import

    * - * import "@ui5/webcomponents/dist/SegmentedButtonItem"; + * import "@ui5/webcomponents/dist/ToggleButton"; * * @constructor * @author SAP SE - * @alias sap.ui.webcomponents.main.SegmentedButtonItem + * @alias sap.ui.webcomponents.main.ToggleButton * @extends Button - * @tagname ui5-segmentedbutton-item + * @tagname ui5-togglebutton * @public */ -class SegmentedButtonItem extends UI5Element { +class SegmentedButtonItem extends Button { static get metadata() { return metadata; } - static get render() { - return litRender; - } - static get template() { return SegmentedButtonItemTemplate; } static get styles() { - return [Button.styles, segmentedBtnItemCss, isLegacyBrowser() && segmentedBtnItemIECss]; - } - - static get dependencies() { - return [Icon]; - } - - constructor() { - super(); - - this._deactivate = () => { - if (activeButton) { - activeButton.active = false; - } - }; - - // if (!isGlobalHandlerAttached) { - // document.addEventListener("mouseup", this._deactivate); - // - // isGlobalHandlerAttached = true; - // } - - // this.i18nBundle = getI18nBundle("@ui5/webcomponents"); - } - - onEnterDOM() { - this._isTouch = isPhone() || isTablet(); - } - - onBeforeRendering() { - const FormSupport = getFeature("FormSupport"); - if (this.submits && !FormSupport) { - console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line - } - - this.iconOnly = this.isIconOnly; - this.hasIcon = !!this.icon; + return [Button.styles, toggleBtnCss, isLegacyBrowser() && toggleBtnIECss]; } - _onclick(event) { - if (this.nonInteractive) { - return; - } - event.isMarked = "button"; - const FormSupport = getFeature("FormSupport"); - if (FormSupport) { - FormSupport.triggerFormSubmit(this); - } - + _onclick() { this.pressed = !this.pressed; } - - _onmousedown(event) { - if (this.nonInteractive || this._isTouch) { - return; - } - - event.isMarked = "button"; - this.active = true; - activeButton = this; // eslint-disable-line - } - - _ontouchstart(event) { - event.isMarked = "button"; - if (this.nonInteractive) { - return; - } - - this.active = true; - } - - _ontouchend(event) { - this.active = false; - - if (activeButton) { - activeButton.active = false; - } - } - - _onmouseup(event) { - event.isMarked = "button"; - } - - _onkeydown(event) { - event.isMarked = "button"; - - if (isSpace(event) || isEnter(event)) { - this.active = true; - } - } - - _onkeyup(event) { - if (isSpace(event) || isEnter(event)) { - this.active = false; - } - } - - _onfocusout(_event) { - if (this.nonInteractive) { - return; - } - this.active = false; - this.focused = false; - } - - _onfocusin(event) { - if (this.nonInteractive) { - return; - } - - event.isMarked = "button"; - this.focused = true; - } - - get isIconOnly() { - return !Array.from(this.childNodes).filter(node => { - return node.nodeType !== Node.COMMENT_NODE - && (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0); - }).length; - } - - get accInfo() { - return { - "ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded), - "ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls, - "ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup, - "title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title), - }; - } - - get ariaLabelText() { - return getEffectiveAriaLabelText(this); - } - - get tabIndexValue() { - const tabindex = this.getAttribute("tabindex"); - - if (tabindex) { - return tabindex; - } - - return this.nonInteractive ? "-1" : this._tabIndex; - } - - get showIconTooltip() { - return this.iconOnly && !this.title; - } - - get styles() { - return { - icon: { - width: this.iconSize, - height: this.iconSize, - }, - }; - } - - static async onDefine() { - // await fetchI18nBundle("@ui5/webcomponents"); - } } SegmentedButtonItem.define(); diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index bb9a0cfde54b..85ae6757f891 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -4,6 +4,8 @@ .ui5-segmentedbutton-root { display: flex; + margin: 0; + padding: 0; } ::slotted([ui5-segmentedbutton-item]) { From 13770f4a720f7a8b09fd9af0fa6093eb9208e56c Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Thu, 13 May 2021 22:52:27 +0300 Subject: [PATCH 03/24] DOM structure corrected --- packages/main/src/Button.js | 4 ++ packages/main/src/SegmentedButton.hbs | 5 +- packages/main/src/SegmentedButton.js | 18 +++---- packages/main/src/SegmentedButtonItem.hbs | 12 ++--- packages/main/src/SegmentedButtonItem.js | 36 +++++++++---- packages/main/test/pages/SegmentedButton.html | 50 +++++++++---------- .../test/samples/SegmentedButton.sample.html | 46 ++++++++--------- 7 files changed, 98 insertions(+), 73 deletions(-) diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index ec4a5291e335..e6c0f3f54ec0 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -460,6 +460,10 @@ class Button extends UI5Element { return getEffectiveAriaLabelText(this); } + get ariaLabelText() { + return this.i18nBundle.getText(Button.typeTextMappings()[this.design]); + } + static typeTextMappings() { return { "Positive": BUTTON_ARIA_TYPE_ACCEPT, diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 4c402c47ce32..a3d1a3044c4b 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -2,7 +2,10 @@ @click="{{_onclick}}" @focusin="{{_onfocusin}}" class="ui5-segmentedbutton-root" - role="group" + role="listbox" + aria-multiselectable="true" + aria-describedby="__text16" + tabindex="-1" dir="{{effectiveDir}}" aria-roledescription="{{ariaDescription}}" > diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 85cbce8c12c3..ec763815d8bb 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -128,17 +128,17 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { - // let length = 0; + let length = 0; this.normalizeSelection(); - // this.getSlottedNodes("buttons").forEach((item, index) => { - // item.posinset = index + 1; - // length += 1; - // }); - // - // this.getSlottedNodes("buttons").forEach((item, index) => { - // item.setsize = length; - // }); + this.getSlottedNodes("buttons").forEach((item, index) => { + item.posinset = index + 1; + length += 1; + }); + + this.getSlottedNodes("buttons").forEach((item, index) => { + item.setsize = length; + }); } async onAfterRendering() { diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 506509a1bc65..37015a59af41 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -1,6 +1,10 @@
  • ariaPressed}} @@ -20,7 +24,6 @@ aria-haspopup="{{accInfo.ariaHaspopup}}" aria-label="{{ariaLabelText}}" title="{{accInfo.title}}" - part="button" > {{#if icon}} - {{#if hasButtonType}} - {{buttonTypeText}} - {{/if}}
    • {{#*inline "ariaPressed"}}{{/inline}} diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 4efeb9fdc4af..e3f99beeceda 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -22,6 +22,24 @@ const metadata = { pressed: { type: Boolean, }, + + /** + * Defines the index of the item inside of the SegmentedButton. + * @private + * @type {String} + */ + posinset: { + type: String, + }, + + /** + * Defines how many items are inside of the SegmentedButton. + * @private + * @type {String} + */ + setsize: { + type: String, + }, }, }; @@ -30,24 +48,24 @@ const metadata = { * *

    Overview

    * - * The ui5-togglebutton component is an enhanced ui5-button + * The ui5-segmentedbutton-item component is an enhanced ui5-button * that can be toggled between pressed and normal states. - * Users can use the ui5-togglebutton as a switch to turn a setting on or off. - * It can also be used to represent an independent choice similar to a check box. + * Users can use the ui5-segmentedbutton-item as part of a ui5-segmentedbutton. *

    - * Clicking or tapping on a ui5-togglebutton changes its state to pressed. The button returns to - * its initial state when the user clicks or taps on it again. - * By applying additional custom CSS-styling classes, apps can give a different style to any ui5-togglebutton. + * Clicking or tapping on a ui5-segmentedbutton-item changes its state to pressed. + * The button returns to its initial state when the user clicks or taps on it again. + * By applying additional custom CSS-styling classes, apps can give a different style to any + * ui5-segmentedbutton-item. * *

    ES6 Module Import

    * - * import "@ui5/webcomponents/dist/ToggleButton"; + * import "@ui5/webcomponents/dist/SegmentedButtonItem"; * * @constructor * @author SAP SE - * @alias sap.ui.webcomponents.main.ToggleButton + * @alias sap.ui.webcomponents.main.SegmentedButtonItem * @extends Button - * @tagname ui5-togglebutton + * @tagname ui5-segmentedbutton-item * @public */ class SegmentedButtonItem extends Button { diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 1bd30a2240c5..c13bf4afc3f8 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -32,7 +32,7 @@

    Segmentedbutton example

    - ToggleButton + SegmentedButtonItem Button
    @@ -41,10 +41,10 @@

    Segmentedbutton example

    Example with 4 buttons

    - Button - Button - Click - Pressed ToggleButton + Button + Button + Click + Pressed SegmentedButtonItem @@ -52,11 +52,11 @@

    Example with 4 buttons

    Example with 5 buttons

    - Word - Pressed ToggleButton With Bigger Text - Button - Pressed ToggleButton - A + Word + Pressed SegmentedButtonItem With Bigger Text + Button + Pressed SegmentedButtonItem + A @@ -64,9 +64,9 @@

    Example with 5 buttons

    Example with Icons and custom width

    - - - + + + @@ -74,9 +74,9 @@

    Example with Icons and custom width

    SegmentedButton with 100% width

    - Pressed ToggleButton - ToggleButton - ToggleButton + Pressed SegmentedButtonItem + SegmentedButtonItem + SegmentedButtonItem @@ -84,9 +84,9 @@

    SegmentedButton with 100% width

    SegmentedButton wrapped in a container with set width

    - - - + + +
    @@ -99,15 +99,15 @@

    Initial focus test

    the focus hould go to the first button

    Press - - - + + + Press - - - + + + diff --git a/packages/main/test/samples/SegmentedButton.sample.html b/packages/main/test/samples/SegmentedButton.sample.html index ac0b0c012318..ff396ddd1f57 100644 --- a/packages/main/test/samples/SegmentedButton.sample.html +++ b/packages/main/test/samples/SegmentedButton.sample.html @@ -13,16 +13,16 @@

    SegmentedButton

    Basic SegmentedButton

    - Map - Satellite - Terrain + Map + Satellite + Terrain 
    
 <ui5-segmentedbutton>
-    <ui5-togglebutton>Map</ui5-togglebutton>
-    <ui5-togglebutton pressed>Satellite</ui5-togglebutton>
-    <ui5-togglebutton>Terrain</ui5-togglebutton>
+    <ui5-segmentedbutton-item>Map</ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item pressed>Satellite</ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item>Terrain</ui5-segmentedbutton-item>
 </ui5-segmentedbutton>
    @@ -31,38 +31,38 @@

    Basic SegmentedButton

    SegmentedButton with Icons

    - - - + + + 
    
 <ui5-segmentedbutton>
-    <ui5-togglebutton icon="employee" pressed></ui5-togglebutton>
-    <ui5-togglebutton icon="menu"></ui5-togglebutton>
-    <ui5-togglebutton icon="factory"></ui5-togglebutton>
+    <ui5-segmentedbutton-item icon="employee" pressed></ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item icon="menu"></ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item icon="factory"></ui5-segmentedbutton-item>
 </ui5-segmentedbutton>
    -

    SegmentedButton with 5 ToggleButtons

    +

    SegmentedButton with 5 SegmentedButtonItems

    - Button - Pressed ToggleButton With Bigger Text - Button - Pressed ToggleButton - Press me + Button + Pressed SegmentedButtonItem With Bigger Text + Button + Pressed SegmentedButtonItem + Press me 
    
 <ui5-segmentedbutton>
-    <ui5-togglebutton>Button</ui5-togglebutton>
-    <ui5-togglebutton pressed>Pressed ToggleButton With Bigger Text</ui5-togglebutton>
-    <ui5-togglebutton>Button</ui5-togglebutton>
-    <ui5-togglebutton>ToggleButton</ui5-togglebutton>
-    <ui5-togglebutton>Press me</ui5-togglebutton>
+    <ui5-segmentedbutton-item>Button</ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item>Button</ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item>SegmentedButtonItem</ui5-segmentedbutton-item>
+    <ui5-segmentedbutton-item>Press me</ui5-segmentedbutton-item>
 </ui5-segmentedbutton>
    From fce59bb2053d9a01d056dc2ad669ef1ac57cace9 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Thu, 13 May 2021 23:02:07 +0300 Subject: [PATCH 04/24] aria description from i18n added --- packages/main/src/Button.js | 4 ---- packages/main/src/SegmentedButtonItem.hbs | 4 ++-- packages/main/src/SegmentedButtonItem.js | 5 +++++ packages/main/src/i18n/messagebundle.properties | 3 +++ 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index e6c0f3f54ec0..ec4a5291e335 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -460,10 +460,6 @@ class Button extends UI5Element { return getEffectiveAriaLabelText(this); } - get ariaLabelText() { - return this.i18nBundle.getText(Button.typeTextMappings()[this.design]); - } - static typeTextMappings() { return { "Positive": BUTTON_ARIA_TYPE_ACCEPT, diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 37015a59af41..6989a592f340 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -1,10 +1,10 @@
  • ariaPressed}} diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index e3f99beeceda..f3792bfb4ee1 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -1,6 +1,7 @@ import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js"; import Button from "./Button.js"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; +import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; // Styles import toggleBtnCss from "./generated/themes/ToggleButton.css.js"; @@ -81,6 +82,10 @@ class SegmentedButtonItem extends Button { return [Button.styles, toggleBtnCss, isLegacyBrowser() && toggleBtnIECss]; } + get ariaDescription() { + return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); + } + _onclick() { this.pressed = !this.pressed; } diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index c5c84950e4d4..94e32ed9f8d8 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -151,6 +151,9 @@ RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Decline #XACT: ARIA description for the segmented button SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button +#XACT: ARIA description for the segmented button item +SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button item + #XACT: ARIA description for slider handle SLIDER_ARIA_DESCRIPTION=Slider handle From 862e9b4c8f346c4f174e5d81da297f9757e36049 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Thu, 13 May 2021 23:10:44 +0300 Subject: [PATCH 05/24] ui5-segmentedbutton-item uses its own styles --- packages/main/src/SegmentedButtonItem.js | 6 ++-- .../main/src/themes/SegemntedButtonItem.css | 35 +------------------ .../src/themes/SegemntedButtonItem.ie11.css | 30 +++------------- 3 files changed, 9 insertions(+), 62 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index f3792bfb4ee1..a1f249ee1926 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -4,8 +4,8 @@ import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonIt import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; // Styles -import toggleBtnCss from "./generated/themes/ToggleButton.css.js"; -import toggleBtnIECss from "./generated/themes/ToggleButton.ie11.css.js"; +import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js"; +import segmentedButtonItemIECss from "./generated/themes/SegmentedButtonItem.ie11.css.js"; /** * @public @@ -79,7 +79,7 @@ class SegmentedButtonItem extends Button { } static get styles() { - return [Button.styles, toggleBtnCss, isLegacyBrowser() && toggleBtnIECss]; + return [Button.styles, segmentedButtonItemCss, isLegacyBrowser() && segmentedButtonItemIECss]; } get ariaDescription() { diff --git a/packages/main/src/themes/SegemntedButtonItem.css b/packages/main/src/themes/SegemntedButtonItem.css index d1f596d5da95..056845373486 100644 --- a/packages/main/src/themes/SegemntedButtonItem.css +++ b/packages/main/src/themes/SegemntedButtonItem.css @@ -7,42 +7,9 @@ pointer-events: none; } -:host([design="Positive"][pressed]), -:host([design="Positive"][pressed][focused]), -:host([design="Positive"][pressed]:hover) { - background: var(--sapButton_Accept_Active_Background); - border-color: var(--sapButton_Accept_Active_BorderColor); - color: var(--sapButton_Selected_TextColor); - outline-color: var(--sapContent_ContrastFocusColor); -} - -:host([design="Positive"][pressed][active]), -:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { - background: var(--sapButton_Accept_Selected_Hover_Background); -} - -:host([design="Negative"][pressed]), -:host([design="Negative"][pressed][focused]), -:host([design="Negative"][pressed]:hover) { - background: var(--sapButton_Reject_Active_Background); - border-color: var(--sapButton_Reject_Active_BorderColor); - color: var(--sapButton_Selected_TextColor); - outline-color: var(--sapContent_ContrastFocusColor); -} - -:host([design="Negative"][pressed][active]), -:host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { - background: var(--sapButton_Reject_Selected_Hover_Background); -} - - :host([pressed]), :host([pressed]:hover), -:host([pressed][focused]), -:host([design="Transparent"][pressed]), -:host([design="Transparent"][pressed]:hover), -:host([design="Emphasized"][pressed]), -:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { +:host([pressed][focused]) { background: var(--sapButton_Selected_Background); border-color: var(--sapButton_Selected_BorderColor); color: var(--sapButton_Selected_TextColor); diff --git a/packages/main/src/themes/SegemntedButtonItem.ie11.css b/packages/main/src/themes/SegemntedButtonItem.ie11.css index 8adfe5c9d819..50ffde447bf7 100644 --- a/packages/main/src/themes/SegemntedButtonItem.ie11.css +++ b/packages/main/src/themes/SegemntedButtonItem.ie11.css @@ -1,12 +1,12 @@ -[ui5-togglebutton][focused] { +[ui5-segmentedbutton-item][focused] { outline: none; } -[ui5-togglebutton][focused] .ui5-button-root { +[ui5-segmentedbutton-item][focused] .ui5-button-root { position: relative; } -[ui5-togglebutton][focused] .ui5-button-root::after { +[ui5-segmentedbutton-item][focused] .ui5-button-root::after { content: ""; position: absolute; border-width: 1px; @@ -18,31 +18,11 @@ right: var(--_ui5_button_focus_offset); } -[ui5-togglebutton][active] .ui5-button-root::after { +[ui5-segmentedbutton-item][active] .ui5-button-root::after { border-color: var(--sapContent_ContrastFocusColor); } -[ui5-togglebutton][design="Positive"][focused] .ui5-button-root::after { - border-color: var(--_ui5_button_positive_border_focus_hover_color); -} - -[ui5-togglebutton][design="Positive"][active][focused] .ui5-button-root::after { - border-color: var(--sapContent_ContrastFocusColor); -} - -[ui5-togglebutton][design="Negative"][focused] .ui5-button-root::after { - border-color: var(--_ui5_button_positive_border_focus_hover_color); -} - -[ui5-togglebutton][design="Negative"][active][focused] .ui5-button-root::after { - border-color: var(--sapContent_ContrastFocusColor); -} - -[ui5-togglebutton][design="Emphasized"][focused] .ui5-button-root::after { - border-color: var(--sapContent_ContrastFocusColor); -} - -[ui5-togglebutton] [ui5-icon].ui5-button-icon { +[ui5-segmentedbutton-item] [ui5-icon].ui5-button-icon { height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ top: 0; } From e03ff29d52b8efdf1cf5cdc4a2c3a6cf4a7c4e22 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Fri, 14 May 2021 11:25:24 +0300 Subject: [PATCH 06/24] minor adjustments: -added the SBI in the md file -css files properly named -aria-describedby added from i18n files -indentations fixed -property names in SBI adjusted --- docs/Public Module Imports.md | 1 + packages/main/src/SegmentedButton.hbs | 6 +++--- packages/main/src/SegmentedButton.js | 21 ++++++++++++------- packages/main/src/SegmentedButtonItem.hbs | 4 ++-- packages/main/src/SegmentedButtonItem.js | 4 ++-- .../main/src/i18n/messagebundle.properties | 3 +++ ...ButtonItem.css => SegmentedButtonItem.css} | 0 ....ie11.css => SegmentedButtonItem.ie11.css} | 0 8 files changed, 25 insertions(+), 14 deletions(-) rename packages/main/src/themes/{SegemntedButtonItem.css => SegmentedButtonItem.css} (100%) rename packages/main/src/themes/{SegemntedButtonItem.ie11.css => SegmentedButtonItem.ie11.css} (100%) diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md index 5123528ee10e..65e37e11387b 100644 --- a/docs/Public Module Imports.md +++ b/docs/Public Module Imports.md @@ -61,6 +61,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou | Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` | | Select Option | `ui5-option` | comes with `ui5-select ` | | Segmented Button | `ui5-segmentedbutton` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` | +| Segmented Button Item | `ui5-segmentedbutton-item`| comes with `ui5-segmentedbutton ` | | Suggestion Item | `ui5-suggestion-item` | comes with `InputSuggestions.js` feature - see below | | Slider | `ui5-slider` | `import "@ui5/webcomponents/dist/Slider.js";` | | Step Input | `ui5-step-input` | `import "@ui5/webcomponents/dist/StepInput.js";` | diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index a3d1a3044c4b..a103268c62ff 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -3,10 +3,10 @@ @focusin="{{_onfocusin}}" class="ui5-segmentedbutton-root" role="listbox" - aria-multiselectable="true" - aria-describedby="__text16" - tabindex="-1" + tabindex="-1" dir="{{effectiveDir}}" + aria-multiselectable="true" + aria-describedby="{{ariaDescribedBy}}" aria-roledescription="{{ariaDescription}}" > diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index ec763815d8bb..70c72b02adcf 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -5,7 +5,7 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; -import { SEGMENTEDBUTTON_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; +import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js"; import SegmentedButtonItem from "./SegmentedButtonItem.js"; // Template @@ -77,6 +77,7 @@ const metadata = { * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-segmentedbutton * @since 1.0.0-rc.6 + * @appenddocs SegmentedButtonItem * @public */ class SegmentedButton extends UI5Element { @@ -128,17 +129,19 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { - let length = 0; - this.normalizeSelection(); + let length = 0, + buttons = this.getSlottedNodes("buttons"); - this.getSlottedNodes("buttons").forEach((item, index) => { - item.posinset = index + 1; + buttons.forEach((item, index) => { + item.posInSet = index + 1; length += 1; }); - this.getSlottedNodes("buttons").forEach((item, index) => { - item.setsize = length; + buttons.forEach((item) => { + item.sizeOfSet = length; }); + + this.normalizeSelection(); } async onAfterRendering() { @@ -253,6 +256,10 @@ class SegmentedButton extends UI5Element { return this._selectedButton; } + get ariaDescribedBy() { + return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY); + } + get ariaDescription() { return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION); } diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 6989a592f340..e353bef2b173 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -1,8 +1,8 @@
  • Date: Fri, 14 May 2021 11:30:30 +0300 Subject: [PATCH 07/24] indentation fixes --- packages/main/src/SegmentedButtonItem.hbs | 68 +++++++++---------- .../src/themes/SegmentedButtonItem.ie11.css | 28 ++++---- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index e353bef2b173..347edd8a6aef 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -1,40 +1,40 @@
  • ariaPressed}} - dir="{{effectiveDir}}" - @focusout={{_onfocusout}} - @focusin={{_onfocusin}} - @click={{_onclick}} - @mousedown={{_onmousedown}} - @mouseup={{_onmouseup}} - @keydown={{_onkeydown}} - @keyup={{_onkeyup}} - @touchstart="{{_ontouchstart}}" - @touchend="{{_ontouchend}}" - tabindex={{tabIndexValue}} - aria-expanded="{{accInfo.ariaExpanded}}" - aria-controls="{{accInfo.ariaControls}}" - aria-haspopup="{{accInfo.ariaHaspopup}}" - aria-label="{{ariaLabelText}}" - title="{{accInfo.title}}" + role="option" + aria-roledescription="{{ariaDescription}}" + aria-posinset="{{posInSet}}" + aria-setsize="{{sizeOfSet}}" + aria-selected="{{pressed}}" + class="ui5-button-root ui5-segmentedbutton-item-root" + ?disabled="{{disabled}}" + data-sap-focus-ref + {{> ariaPressed}} + dir="{{effectiveDir}}" + @focusout={{_onfocusout}} + @focusin={{_onfocusin}} + @click={{_onclick}} + @mousedown={{_onmousedown}} + @mouseup={{_onmouseup}} + @keydown={{_onkeydown}} + @keyup={{_onkeyup}} + @touchstart="{{_ontouchstart}}" + @touchend="{{_ontouchend}}" + tabindex={{tabIndexValue}} + aria-expanded="{{accInfo.ariaExpanded}}" + aria-controls="{{accInfo.ariaControls}}" + aria-haspopup="{{accInfo.ariaHaspopup}}" + aria-label="{{ariaLabelText}}" + title="{{accInfo.title}}" > - {{#if icon}} - - {{/if}} + {{#if icon}} + + {{/if}} - + diff --git a/packages/main/src/themes/SegmentedButtonItem.ie11.css b/packages/main/src/themes/SegmentedButtonItem.ie11.css index 50ffde447bf7..acf60e13bc22 100644 --- a/packages/main/src/themes/SegmentedButtonItem.ie11.css +++ b/packages/main/src/themes/SegmentedButtonItem.ie11.css @@ -1,28 +1,28 @@ [ui5-segmentedbutton-item][focused] { - outline: none; + outline: none; } [ui5-segmentedbutton-item][focused] .ui5-button-root { - position: relative; + position: relative; } [ui5-segmentedbutton-item][focused] .ui5-button-root::after { - content: ""; - position: absolute; - border-width: 1px; - border-style: dotted; - border-color: var(--_ui5_button_focus_color); - top: var(--_ui5_button_focus_offset); - bottom: var(--_ui5_button_focus_offset); - left: var(--_ui5_button_focus_offset); - right: var(--_ui5_button_focus_offset); + content: ""; + position: absolute; + border-width: 1px; + border-style: dotted; + border-color: var(--_ui5_button_focus_color); + top: var(--_ui5_button_focus_offset); + bottom: var(--_ui5_button_focus_offset); + left: var(--_ui5_button_focus_offset); + right: var(--_ui5_button_focus_offset); } [ui5-segmentedbutton-item][active] .ui5-button-root::after { - border-color: var(--sapContent_ContrastFocusColor); + border-color: var(--sapContent_ContrastFocusColor); } [ui5-segmentedbutton-item] [ui5-icon].ui5-button-icon { - height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ - top: 0; + height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ + top: 0; } From 19759b662c67d9d08c4be51e571158a40c256039 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Mon, 17 May 2021 14:27:41 +0300 Subject: [PATCH 08/24] minor ling errors fixed --- packages/main/src/SegmentedButton.js | 6 +++--- packages/main/src/SegmentedButtonItem.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 70c72b02adcf..792a680d79d1 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -129,15 +129,15 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { - let length = 0, - buttons = this.getSlottedNodes("buttons"); + let length = 0; + const buttons = this.getSlottedNodes("buttons"); buttons.forEach((item, index) => { item.posInSet = index + 1; length += 1; }); - buttons.forEach((item) => { + buttons.forEach((item, index) => { item.sizeOfSet = length; }); diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 1ec89043c630..456cf7d6cc83 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -14,7 +14,7 @@ const metadata = { tag: "ui5-segmentedbutton-item", properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { /** - * Determines whether the ui5-togglebutton is displayed as pressed. + * Determines whether the ui5-segmentedbutton-item is displayed as pressed. * * @type {boolean} * @defaultvalue false From 224bc054d020d1bcfda247765ac9f2a6bc3f1dea Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Mon, 17 May 2021 15:19:18 +0300 Subject: [PATCH 09/24] tests adjusted to the new structure of segmented button --- packages/main/src/SegmentedButton.js | 9 +---- .../main/test/specs/SegmentedButton.spec.js | 38 +++++++++---------- 2 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 792a680d79d1..1ac2e666f7de 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -129,16 +129,11 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { - let length = 0; const buttons = this.getSlottedNodes("buttons"); - buttons.forEach((item, index) => { + buttons.forEach((item, index, arr) => { item.posInSet = index + 1; - length += 1; - }); - - buttons.forEach((item, index) => { - item.sizeOfSet = length; + item.sizeOfSet = arr.length; }); this.normalizeSelection(); diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js index b5b57a48e814..217b70cd42df 100644 --- a/packages/main/test/specs/SegmentedButton.spec.js +++ b/packages/main/test/specs/SegmentedButton.spec.js @@ -7,47 +7,47 @@ describe("SegmentedButton general interaction", () => { }); it("tests if pressed attribute is applied", () => { - const toggleButton = browser.$("#segButton1 > ui5-togglebutton:first-child"); + const segmentedButtonItem = browser.$("#segButton1 > ui5-segmentedbutton-item:first-child"); - assert.ok(toggleButton.getProperty("pressed"), "ToggleButton has property pressed"); + assert.ok(segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed"); }); it("tests if pressed attribute is switched to the newly pressed button", () => { - const firstToggleButton = browser.$("#segButton1 > ui5-togglebutton:first-child"); - const lastToggleButton = browser.$("#segButton1 > ui5-togglebutton:last-child"); + const firstSegmentedButtonItem = browser.$("#segButton1 > ui5-segmentedbutton-item:first-child"); + const lastSegmentedButtonItem = browser.$("#segButton1 > ui5-segmentedbutton-item:last-child"); - lastToggleButton.click(); + lastSegmentedButtonItem.click(); - assert.ok(lastToggleButton.getProperty("pressed"), "Last ToggleButton has property pressed"); - assert.ok(!firstToggleButton.getProperty("pressed"), "First ToggleButton should not be pressed anymore"); + assert.ok(lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem has property pressed"); + assert.ok(!firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should not be pressed anymore"); }); it("tests if pressed attribute is applied only to last child when all buttons are pressed", () => { - const toggleButton1 = browser.$("#segButton2 > ui5-togglebutton:first-child"); - const toggleButton2 = browser.$("#segButton2 > ui5-togglebutton:nth-child(2)"); - const toggleButton3 = browser.$("#segButton2 > ui5-togglebutton:nth-child(3)"); - const toggleButton4 = browser.$("#segButton2 > ui5-togglebutton:last-child"); + const segmentedButtonItem1 = browser.$("#segButton2 > ui5-segmentedbutton-item:first-child"); + const segmentedButtonItem2 = browser.$("#segButton2 > ui5-segmentedbutton-item:nth-child(2)"); + const segmentedButtonItem3 = browser.$("#segButton2 > ui5-segmentedbutton-item:nth-child(3)"); + const segmentedButtonItem4 = browser.$("#segButton2 > ui5-segmentedbutton-item:last-child"); // only last button should be pressed - assert.ok(!toggleButton1.getProperty("pressed"), "ToggleButton should not be pressed"); - assert.ok(!toggleButton2.getProperty("pressed"), "ToggleButton should not be pressed"); - assert.ok(!toggleButton3.getProperty("pressed"), "ToggleButton should not be pressed"); - assert.ok(toggleButton4.getProperty("pressed"), "ToggleButton has property pressed"); + assert.ok(!segmentedButtonItem1.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); + assert.ok(!segmentedButtonItem2.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); + assert.ok(!segmentedButtonItem3.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); + assert.ok(segmentedButtonItem4.getProperty("pressed"), "SegmentedButtonItem has property pressed"); }); it("tests initial focus", () => { const button1 = browser.$("#button1"); const button2 = browser.$("#button2"); - const toggleButton1 = browser.$("#testSB1ToggleBtn"); - const toggleButton2 = browser.$("#testSB2ToggleBtn"); + const segmentedButtonItem1 = browser.$("#testSB1ToggleBtn"); + const segmentedButtonItem2 = browser.$("#testSB2ToggleBtn"); button1.click(); button1.keys("Tab"); - assert.ok(toggleButton1.isFocused(), "The first ToggleButton should be focused."); + assert.ok(segmentedButtonItem1.isFocused(), "The first SegmentedButtonItem should be focused."); button2.click(); button2.keys("Tab"); - assert.ok(toggleButton2.isFocused(), "The selected ToggleButton should be focused."); + assert.ok(segmentedButtonItem2.isFocused(), "The selected SegmentedButtonItem should be focused."); }); }); From 5a8055863b35a400a10050086d2f8160f7f4619d Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Tue, 18 May 2021 11:31:06 +0300 Subject: [PATCH 10/24] ACC improvements added --- packages/main/src/SegmentedButton.hbs | 6 ++++-- packages/main/src/i18n/messagebundle.properties | 4 ++-- packages/main/src/themes/SegmentedButton.css | 2 ++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index a103268c62ff..8d14298cc9f2 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -3,11 +3,13 @@ @focusin="{{_onfocusin}}" class="ui5-segmentedbutton-root" role="listbox" - tabindex="-1" dir="{{effectiveDir}}" aria-multiselectable="true" aria-describedby="{{ariaDescribedBy}}" - aria-roledescription="{{ariaDescription}}" + aria-roledescription="{{_id}}-invisibleText" > + + {{ariaDescription}} + diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 554dc1764d96..53b968b5d655 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -149,13 +149,13 @@ RATING_INDICATOR_TEXT=Rating Indicator RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Decline #XACT: ARIA description for the segmented button -SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button +SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button group #XACT: ARIA described by for the segmented button SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=Press SPACE or ENTER to select an item #XACT: ARIA description for the segmented button item -SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button item +SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button #XACT: ARIA description for slider handle SLIDER_ARIA_DESCRIPTION=Slider handle diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index 85ae6757f891..c770f4456202 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -1,3 +1,5 @@ +@import "./InvisibleTextStyles.css"; + :host(:not([hidden])) { display: inline-block; } From 04c46ae33cd7f797c3aefa29565982c3a9e3c4f1 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Tue, 18 May 2021 11:49:03 +0300 Subject: [PATCH 11/24] ACC adjustments --- packages/main/src/SegmentedButton.hbs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 8d14298cc9f2..a040d7881892 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -5,11 +5,11 @@ role="listbox" dir="{{effectiveDir}}" aria-multiselectable="true" - aria-describedby="{{ariaDescribedBy}}" - aria-roledescription="{{_id}}-invisibleText" + aria-describedby="{{_id}}-invisibleText" + aria-roledescription={{ariaDescription}} > - {{ariaDescription}} + {{ariaDescribedBy}} From 81bc53c9012bf503b1e1eeb45c80b91931c39d7f Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Tue, 18 May 2021 15:51:52 +0300 Subject: [PATCH 12/24] using ui5element as point of extension instead of button --- packages/main/src/SegmentedButtonItem.hbs | 6 +- packages/main/src/SegmentedButtonItem.js | 340 +++++++++++++++++- .../main/src/themes/SegmentedButtonItem.css | 121 +++++++ .../src/themes/SegmentedButtonItem.ie11.css | 30 ++ 4 files changed, 487 insertions(+), 10 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 347edd8a6aef..e8ecda46c1f3 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -4,7 +4,7 @@ aria-posinset="{{posInSet}}" aria-setsize="{{sizeOfSet}}" aria-selected="{{pressed}}" - class="ui5-button-root ui5-segmentedbutton-item-root" + class="ui5-segmentedbutton-item-root" ?disabled="{{disabled}}" data-sap-focus-ref {{> ariaPressed}} @@ -28,13 +28,13 @@ {{#if icon}} {{/if}} - + diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 456cf7d6cc83..6b9dcab98169 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -1,12 +1,23 @@ import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js"; -import Button from "./Button.js"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import Icon from "./Icon.js"; import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; +import { isEnter, isSpace } from "@ui5/webcomponents-base/src/Keys"; +import { isPhone, isTablet } from "@ui5/webcomponents-base/src/Device"; +import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry"; +import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/src/util/AriaLabelHelper"; + // Styles import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js"; import segmentedButtonItemIECss from "./generated/themes/SegmentedButtonItem.ie11.css.js"; +let isGlobalHandlerAttached = false; +let activeButton = null; + /** * @public */ @@ -41,6 +52,179 @@ const metadata = { sizeOfSet: { type: String, }, + + /** + * Defines the icon to be displayed as graphical element within the ui5-segmentedbutton-item. + * The SAP-icons font provides numerous options. + *

    + * Example: + *
    + * 
    ui5-segmentedbutton-item icon="palette"
    + * + * See all the available icons in the Icon Explorer. + * + * @type {string} + * @defaultvalue "" + * @public + */ + icon: { + type: String, + }, + + /** + * Defines whether the ui5-segmentedbutton-item is disabled + * (default is set to false). + * A disabled ui5-segmentedbutton-item can't be pressed or + * focused, and it is not in the tab chain. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + disabled: { + type: Boolean, + }, + + /** + * Defines the tooltip of the SegmentedButtonItem. + *
    + * Important: Tooltips should only be set to icon only buttons. + * @type {string} + * @defaultvalue: "" + * @private + * @since 1.0.0-rc.11 + */ + title: { + type: String, + }, + + /** + * Used to switch the active state (pressed or not) of the ui5-segmentedbutton-item. + * @private + */ + active: { + type: Boolean, + }, + + /** + * Defines if a content has been added to the default slot + * @private + */ + iconOnly: { + type: Boolean, + }, + + /** + * Indicates if the elements is on focus + * @private + */ + focused: { + type: Boolean, + }, + + /** + * Indicates if the elements has a slotted icon + * @private + */ + hasIcon: { + type: Boolean, + }, + + /** + * Defines the aria-label attribute for the SegmentedButtonItem + * @type {String} + * @defaultvalue: "" + * @private + * @since 1.0.0-rc.7 + */ + ariaLabel: { + type: String, + defaultValue: undefined, + }, + + /** + * Receives id(or many ids) of the elements that label the SegmentedButtonItem + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.7 + */ + ariaLabelledby: { + type: String, + defaultValue: "", + }, + + /** + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.8 + */ + ariaExpanded: { + type: String, + }, + + /** + * Indicates if the element if focusable + * @private + */ + nonInteractive: { + type: Boolean, + }, + + _buttonAccInfo: { + type: Object, + }, + + /** + * Defines the tabIndex of the component. + * @private + */ + _tabIndex: { + type: String, + defaultValue: "0", + noAttribute: true, + }, + + /** + * @private + */ + _isTouch: { + type: Boolean, + }, + }, + + managedSlots: true, + + slots: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { + /** + * Defines the text of the ui5-segmentedbutton-item. + *

    + * Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + * + * @type {Node[]} + * @slot + * @public + */ + "default": { + type: Node, + }, + }, + + events: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { + + /** + * Fired when the ui5-segmentedbutton-item is activated either with a + * mouse/tap or by using the Enter or Space key. + *

    + * Note: The event will not be fired if the disabled + * property is set to true. + * + * @event + * @public + * @native + */ + click: {}, }, }; @@ -49,8 +233,6 @@ const metadata = { * *

    Overview

    * - * The ui5-segmentedbutton-item component is an enhanced ui5-button - * that can be toggled between pressed and normal states. * Users can use the ui5-segmentedbutton-item as part of a ui5-segmentedbutton. *

    * Clicking or tapping on a ui5-segmentedbutton-item changes its state to pressed. @@ -69,7 +251,7 @@ const metadata = { * @tagname ui5-segmentedbutton-item * @public */ -class SegmentedButtonItem extends Button { +class SegmentedButtonItem extends UI5Element { static get metadata() { return metadata; } @@ -79,16 +261,160 @@ class SegmentedButtonItem extends Button { } static get styles() { - return [Button.styles, segmentedButtonItemCss, isLegacyBrowser() && segmentedButtonItemIECss]; + return [segmentedButtonItemCss, isLegacyBrowser() && segmentedButtonItemIECss]; } - get ariaDescription() { - return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); + static get dependencies() { + return [Icon]; + } + + static get render() { + return litRender; + } + + constructor() { + super(); + + this._deactivate = () => { + if (activeButton) { + activeButton.active = false; + } + }; + + if (!isGlobalHandlerAttached) { + document.addEventListener("mouseup", this._deactivate); + + isGlobalHandlerAttached = true; + } + + this.i18nBundle = getI18nBundle("@ui5/webcomponents"); + } + + onBeforeRendering() { + this.iconOnly = this.isIconOnly; + this.hasIcon = !!this.icon; + } + + onEnterDOM() { + this._isTouch = isPhone() || isTablet(); + } + + _onfocusout(_event) { + if (this.nonInteractive) { + return; + } + this.active = false; + this.focused = false; + } + + _onfocusin(event) { + if (this.nonInteractive) { + return; + } + + event.isMarked = "button"; + this.focused = true; } _onclick() { + if (this.nonInteractive) { + return; + } + event.isMarked = "button"; + const FormSupport = getFeature("FormSupport"); + if (FormSupport) { + FormSupport.triggerFormSubmit(this); + } this.pressed = !this.pressed; } + + _onmousedown(event) { + if (this.nonInteractive || this._isTouch) { + return; + } + + event.isMarked = "button"; + this.active = true; + activeButton = this; // eslint-disable-line + } + + _onmouseup(event) { + event.isMarked = "button"; + } + + _onkeydown(event) { + event.isMarked = "button"; + + if (isSpace(event) || isEnter(event)) { + this.active = true; + } + } + + _onkeyup(event) { + if (isSpace(event) || isEnter(event)) { + this.active = false; + } + } + + _ontouchstart(event) { + event.isMarked = "button"; + if (this.nonInteractive) { + return; + } + + this.active = true; + } + + _ontouchend(event) { + this.active = false; + + if (activeButton) { + activeButton.active = false; + } + } + + get isIconOnly() { + return !Array.from(this.childNodes).filter(node => { + return node.nodeType !== Node.COMMENT_NODE + && (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0); + }).length; + } + + get tabIndexValue() { + const tabindex = this.getAttribute("tabindex"); + + if (tabindex) { + return tabindex; + } + + return this.nonInteractive ? "-1" : this._tabIndex; + } + + get accInfo() { + return { + "ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded), + "ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls, + "ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup, + "title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title), + }; + } + + get styles() { + return { + icon: { + width: this.iconSize, + height: this.iconSize, + }, + }; + } + + get ariaDescription() { + return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); + } + + get ariaLabelText() { + return getEffectiveAriaLabelText(this); + } } SegmentedButtonItem.define(); diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css index 056845373486..2f4ff78ad6fa 100644 --- a/packages/main/src/themes/SegmentedButtonItem.css +++ b/packages/main/src/themes/SegmentedButtonItem.css @@ -20,3 +20,124 @@ :host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { background: var(--sapButton_Selected_Hover_Background); } + + +:host(:not([hidden])) { + display: inline-block; +} + +:host { + min-width: var(--_ui5_button_base_min_width); + height: var(--_ui5_button_base_height); + font-family: "72override", var(--sapFontFamily); + font-size: var(--sapFontSize); + text-shadow: var(--_ui5_button_text_shadow); + border-radius: var(--_ui5_button_border_radius); + border-width: 0.0625rem; + cursor: pointer; + background-color: var(--sapButton_Background); + border: 1px solid var(--sapButton_BorderColor); + color: var(--sapButton_TextColor); + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +:host([disabled]) { + pointer-events: none; +} + +:host([has-icon]) button[dir="rtl"].ui5-segmentedbutton-item-root .ui5-segmentedbutton-item-text { + margin-right: var(--_ui5_button_base_icon_margin); + margin-left: 0; +} + +.ui5-segmentedbutton-item-root { + min-width: inherit; + cursor: inherit; + height: 100%; + width: 100%; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + outline: none; + padding: 0 var(--_ui5_button_base_padding); + position: relative; + background: transparent; + border: none; + color: inherit; + text-shadow: inherit; + font: inherit; + white-space: inherit; + overflow: inherit; + text-overflow: inherit; + letter-spacing: inherit; + word-spacing: inherit; + line-height: inherit; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +:host(:not([active]):not([non-interactive]):not([_is-touch]):hover), +:host(:not([hidden]).ui5_hovered) { + background: var(--sapButton_Hover_Background); +} + +.ui5-segmentedbutton-item-icon { + color: inherit; + flex-shrink: 0; +} + +:host([icon-only]) .ui5-segmentedbutton-item-root { + min-width: auto; + padding: 0; +} + +:host([icon-only]) .ui5-segmentedbutton-item-text { + display: none; +} + +.ui5-segmentedbutton-item-text { + outline: none; + position: relative; + white-space: inherit; + overflow: inherit; + text-overflow: inherit; +} + +:host([disabled]) { + opacity: 0.5; + pointer-events: none; +} + +:host([focused]) { + outline: var(--_ui5_button_outline); + outline-offset: var(--_ui5_button_outline_offset); +} + +.ui5-segmentedbutton-item-root::-moz-focus-inner { + border: 0; +} + +bdi { + display: block; + white-space: inherit; + overflow: inherit; + text-overflow: inherit; +} + +:host([ui5-segmentedbutton-item][active]:not([disabled]):not([non-interactive])) { + background-image: none; + background-color: var(--sapButton_Active_Background); + border-color: var(--_ui5_button_active_border_color); + color: var(--sapButton_Active_TextColor); + text-shadow: none; +} + +:host([active]:not([_is-touch])) { + outline-color: var(--sapContent_ContrastFocusColor); +} diff --git a/packages/main/src/themes/SegmentedButtonItem.ie11.css b/packages/main/src/themes/SegmentedButtonItem.ie11.css index acf60e13bc22..e354982bb3fd 100644 --- a/packages/main/src/themes/SegmentedButtonItem.ie11.css +++ b/packages/main/src/themes/SegmentedButtonItem.ie11.css @@ -26,3 +26,33 @@ height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ top: 0; } + +[ui5-segmentedbutton-item][focused] { + outline: none; +} + +[ui5-segmentedbutton-item][focused] .ui5-segmentedbutton-item-root { + position: relative; +} + +[ui5-segmentedbutton-item][focused] .ui5-segmentedbutton-item-root::after { + content: ""; + position: absolute; + border-width: 1px; + border-style: dotted; + border-color: var(--_ui5_button_focus_color); + top: var(--_ui5_button_focus_offset); + bottom: var(--_ui5_button_focus_offset); + left: var(--_ui5_button_focus_offset); + right: var(--_ui5_button_focus_offset); +} + +[ui5-segmentedbutton-item][active] .ui5-segmentedbutton-item-root::after { + border-color: var(--sapContent_ContrastFocusColor); +} + +[ui5-segmentedbutton-item] [ui5-icon].ui5-segmentedbutton-item-icon { + height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ + top: 0; +} + From 0ecb355e6dc37bfaee596a8482788a0f23967202 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Fri, 21 May 2021 19:27:27 +0300 Subject: [PATCH 13/24] The SegmentedButtonItem now extends the ToggleButton The unwanted properties, inherited from the Button, are marked as private. --- packages/main/src/SegmentedButtonItem.hbs | 6 +- packages/main/src/SegmentedButtonItem.js | 367 ++---------------- .../main/src/themes/SegmentedButtonItem.css | 143 ------- .../src/themes/SegmentedButtonItem.ie11.css | 58 --- 4 files changed, 42 insertions(+), 532 deletions(-) delete mode 100644 packages/main/src/themes/SegmentedButtonItem.css delete mode 100644 packages/main/src/themes/SegmentedButtonItem.ie11.css diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index e8ecda46c1f3..559ee1216aa8 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -4,7 +4,7 @@ aria-posinset="{{posInSet}}" aria-setsize="{{sizeOfSet}}" aria-selected="{{pressed}}" - class="ui5-segmentedbutton-item-root" + class="ui5-button-root" ?disabled="{{disabled}}" data-sap-focus-ref {{> ariaPressed}} @@ -28,13 +28,13 @@ {{#if icon}} {{/if}} - + diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 6b9dcab98169..1fc3a03fe44a 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -1,22 +1,7 @@ -import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import Icon from "./Icon.js"; +import ToggleButton from "./ToggleButton.js"; import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; -import { isEnter, isSpace } from "@ui5/webcomponents-base/src/Keys"; -import { isPhone, isTablet } from "@ui5/webcomponents-base/src/Device"; -import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry"; -import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/src/util/AriaLabelHelper"; - - -// Styles -import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js"; -import segmentedButtonItemIECss from "./generated/themes/SegmentedButtonItem.ie11.css.js"; - -let isGlobalHandlerAttached = false; -let activeButton = null; +import ButtonDesign from "./types/ButtonDesign"; /** * @public @@ -25,207 +10,84 @@ const metadata = { tag: "ui5-segmentedbutton-item", properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { /** - * Determines whether the ui5-segmentedbutton-item is displayed as pressed. + * Defines the ui5-button design. * - * @type {boolean} - * @defaultvalue false - * @public - */ - pressed: { - type: Boolean, - }, - - /** - * Defines the index of the item inside of the SegmentedButton. - * @private - * @type {String} - */ - posInSet: { - type: String, - }, - - /** - * Defines how many items are inside of the SegmentedButton. - * @private - * @type {String} - */ - sizeOfSet: { - type: String, - }, - - /** - * Defines the icon to be displayed as graphical element within the ui5-segmentedbutton-item. - * The SAP-icons font provides numerous options. *

    - * Example: - *
    - * 
    ui5-segmentedbutton-item icon="palette"
    + * Note: * - * See all the available icons in the Icon Explorer. + *
      + *
    • Default
      • + *
    • Emphasized
      • + *
    • Positive
      • + *
    • Negative
      • + *
    • Transparent
      • + *
    * - * @type {string} - * @defaultvalue "" - * @public + * @type {ButtonDesign} + * @defaultvalue "Default" + * @private */ - icon: { - type: String, + design: { + type: ButtonDesign, + defaultValue: ButtonDesign.Default, }, /** - * Defines whether the ui5-segmentedbutton-item is disabled - * (default is set to false). - * A disabled ui5-segmentedbutton-item can't be pressed or - * focused, and it is not in the tab chain. + * Defines whether the icon should be displayed after the ui5-button text. * * @type {boolean} * @defaultvalue false - * @public + * @private */ - disabled: { + iconEnd: { type: Boolean, }, /** - * Defines the tooltip of the SegmentedButtonItem. - *
    - * Important: Tooltips should only be set to icon only buttons. + * Defines the size of the icon inside the ui5-button. + * * @type {string} - * @defaultvalue: "" + * @defaultvalue undefined * @private - * @since 1.0.0-rc.11 */ - title: { + iconSize: { type: String, + defaultValue: undefined, }, /** - * Used to switch the active state (pressed or not) of the ui5-segmentedbutton-item. - * @private - */ - active: { - type: Boolean, - }, - - /** - * Defines if a content has been added to the default slot - * @private - */ - iconOnly: { - type: Boolean, - }, - - /** - * Indicates if the elements is on focus + * When set to true, the ui5-button will + * automatically submit the nearest form element upon press. + *

    + * Important: For the submits property to have effect, you must add the following import to your project: + * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; + * + * @type {boolean} + * @defaultvalue false * @private */ - focused: { + submits: { type: Boolean, }, /** - * Indicates if the elements has a slotted icon + * Defines the index of the item inside of the SegmentedButton. * @private - */ - hasIcon: { - type: Boolean, - }, - - /** - * Defines the aria-label attribute for the SegmentedButtonItem * @type {String} - * @defaultvalue: "" - * @private - * @since 1.0.0-rc.7 */ - ariaLabel: { + posInSet: { type: String, - defaultValue: undefined, }, /** - * Receives id(or many ids) of the elements that label the SegmentedButtonItem - * @type {String} - * @defaultvalue "" + * Defines how many items are inside of the SegmentedButton. * @private - * @since 1.0.0-rc.7 - */ - ariaLabelledby: { - type: String, - defaultValue: "", - }, - - /** * @type {String} - * @defaultvalue "" - * @private - * @since 1.0.0-rc.8 */ - ariaExpanded: { - type: String, - }, - - /** - * Indicates if the element if focusable - * @private - */ - nonInteractive: { - type: Boolean, - }, - - _buttonAccInfo: { - type: Object, - }, - - /** - * Defines the tabIndex of the component. - * @private - */ - _tabIndex: { + sizeOfSet: { type: String, - defaultValue: "0", - noAttribute: true, - }, - - /** - * @private - */ - _isTouch: { - type: Boolean, - }, - }, - - managedSlots: true, - - slots: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { - /** - * Defines the text of the ui5-segmentedbutton-item. - *

    - * Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. - * - * @type {Node[]} - * @slot - * @public - */ - "default": { - type: Node, }, }, - - events: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { - - /** - * Fired when the ui5-segmentedbutton-item is activated either with a - * mouse/tap or by using the Enter or Space key. - *

    - * Note: The event will not be fired if the disabled - * property is set to true. - * - * @event - * @public - * @native - */ - click: {}, - }, }; /** @@ -251,7 +113,7 @@ const metadata = { * @tagname ui5-segmentedbutton-item * @public */ -class SegmentedButtonItem extends UI5Element { +class SegmentedButtonItem extends ToggleButton { static get metadata() { return metadata; } @@ -260,161 +122,10 @@ class SegmentedButtonItem extends UI5Element { return SegmentedButtonItemTemplate; } - static get styles() { - return [segmentedButtonItemCss, isLegacyBrowser() && segmentedButtonItemIECss]; - } - - static get dependencies() { - return [Icon]; - } - - static get render() { - return litRender; - } - - constructor() { - super(); - - this._deactivate = () => { - if (activeButton) { - activeButton.active = false; - } - }; - - if (!isGlobalHandlerAttached) { - document.addEventListener("mouseup", this._deactivate); - - isGlobalHandlerAttached = true; - } - - this.i18nBundle = getI18nBundle("@ui5/webcomponents"); - } - - onBeforeRendering() { - this.iconOnly = this.isIconOnly; - this.hasIcon = !!this.icon; - } - - onEnterDOM() { - this._isTouch = isPhone() || isTablet(); - } - - _onfocusout(_event) { - if (this.nonInteractive) { - return; - } - this.active = false; - this.focused = false; - } - - _onfocusin(event) { - if (this.nonInteractive) { - return; - } - - event.isMarked = "button"; - this.focused = true; - } - - _onclick() { - if (this.nonInteractive) { - return; - } - event.isMarked = "button"; - const FormSupport = getFeature("FormSupport"); - if (FormSupport) { - FormSupport.triggerFormSubmit(this); - } - this.pressed = !this.pressed; - } - - _onmousedown(event) { - if (this.nonInteractive || this._isTouch) { - return; - } - - event.isMarked = "button"; - this.active = true; - activeButton = this; // eslint-disable-line - } - - _onmouseup(event) { - event.isMarked = "button"; - } - - _onkeydown(event) { - event.isMarked = "button"; - - if (isSpace(event) || isEnter(event)) { - this.active = true; - } - } - - _onkeyup(event) { - if (isSpace(event) || isEnter(event)) { - this.active = false; - } - } - - _ontouchstart(event) { - event.isMarked = "button"; - if (this.nonInteractive) { - return; - } - - this.active = true; - } - - _ontouchend(event) { - this.active = false; - - if (activeButton) { - activeButton.active = false; - } - } - - get isIconOnly() { - return !Array.from(this.childNodes).filter(node => { - return node.nodeType !== Node.COMMENT_NODE - && (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0); - }).length; - } - - get tabIndexValue() { - const tabindex = this.getAttribute("tabindex"); - - if (tabindex) { - return tabindex; - } - - return this.nonInteractive ? "-1" : this._tabIndex; - } - - get accInfo() { - return { - "ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded), - "ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls, - "ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup, - "title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title), - }; - } - - get styles() { - return { - icon: { - width: this.iconSize, - height: this.iconSize, - }, - }; - } - get ariaDescription() { return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); } - get ariaLabelText() { - return getEffectiveAriaLabelText(this); - } } SegmentedButtonItem.define(); diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css deleted file mode 100644 index 2f4ff78ad6fa..000000000000 --- a/packages/main/src/themes/SegmentedButtonItem.css +++ /dev/null @@ -1,143 +0,0 @@ -:host(:not([hidden])) { - display: inline-block; -} - -/* this line is also included from the Button.css, but keep it here in case we start using it for automatic IE11 compilation */ -:host([disabled]) { - pointer-events: none; -} - -:host([pressed]), -:host([pressed]:hover), -:host([pressed][focused]) { - background: var(--sapButton_Selected_Background); - border-color: var(--sapButton_Selected_BorderColor); - color: var(--sapButton_Selected_TextColor); - outline-color: var(--sapContent_ContrastFocusColor); -} - -:host([pressed][active]), -:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { - background: var(--sapButton_Selected_Hover_Background); -} - - -:host(:not([hidden])) { - display: inline-block; -} - -:host { - min-width: var(--_ui5_button_base_min_width); - height: var(--_ui5_button_base_height); - font-family: "72override", var(--sapFontFamily); - font-size: var(--sapFontSize); - text-shadow: var(--_ui5_button_text_shadow); - border-radius: var(--_ui5_button_border_radius); - border-width: 0.0625rem; - cursor: pointer; - background-color: var(--sapButton_Background); - border: 1px solid var(--sapButton_BorderColor); - color: var(--sapButton_TextColor); - box-sizing: border-box; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -:host([disabled]) { - pointer-events: none; -} - -:host([has-icon]) button[dir="rtl"].ui5-segmentedbutton-item-root .ui5-segmentedbutton-item-text { - margin-right: var(--_ui5_button_base_icon_margin); - margin-left: 0; -} - -.ui5-segmentedbutton-item-root { - min-width: inherit; - cursor: inherit; - height: 100%; - width: 100%; - box-sizing: border-box; - display: flex; - justify-content: center; - align-items: center; - outline: none; - padding: 0 var(--_ui5_button_base_padding); - position: relative; - background: transparent; - border: none; - color: inherit; - text-shadow: inherit; - font: inherit; - white-space: inherit; - overflow: inherit; - text-overflow: inherit; - letter-spacing: inherit; - word-spacing: inherit; - line-height: inherit; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -:host(:not([active]):not([non-interactive]):not([_is-touch]):hover), -:host(:not([hidden]).ui5_hovered) { - background: var(--sapButton_Hover_Background); -} - -.ui5-segmentedbutton-item-icon { - color: inherit; - flex-shrink: 0; -} - -:host([icon-only]) .ui5-segmentedbutton-item-root { - min-width: auto; - padding: 0; -} - -:host([icon-only]) .ui5-segmentedbutton-item-text { - display: none; -} - -.ui5-segmentedbutton-item-text { - outline: none; - position: relative; - white-space: inherit; - overflow: inherit; - text-overflow: inherit; -} - -:host([disabled]) { - opacity: 0.5; - pointer-events: none; -} - -:host([focused]) { - outline: var(--_ui5_button_outline); - outline-offset: var(--_ui5_button_outline_offset); -} - -.ui5-segmentedbutton-item-root::-moz-focus-inner { - border: 0; -} - -bdi { - display: block; - white-space: inherit; - overflow: inherit; - text-overflow: inherit; -} - -:host([ui5-segmentedbutton-item][active]:not([disabled]):not([non-interactive])) { - background-image: none; - background-color: var(--sapButton_Active_Background); - border-color: var(--_ui5_button_active_border_color); - color: var(--sapButton_Active_TextColor); - text-shadow: none; -} - -:host([active]:not([_is-touch])) { - outline-color: var(--sapContent_ContrastFocusColor); -} diff --git a/packages/main/src/themes/SegmentedButtonItem.ie11.css b/packages/main/src/themes/SegmentedButtonItem.ie11.css deleted file mode 100644 index e354982bb3fd..000000000000 --- a/packages/main/src/themes/SegmentedButtonItem.ie11.css +++ /dev/null @@ -1,58 +0,0 @@ -[ui5-segmentedbutton-item][focused] { - outline: none; -} - -[ui5-segmentedbutton-item][focused] .ui5-button-root { - position: relative; -} - -[ui5-segmentedbutton-item][focused] .ui5-button-root::after { - content: ""; - position: absolute; - border-width: 1px; - border-style: dotted; - border-color: var(--_ui5_button_focus_color); - top: var(--_ui5_button_focus_offset); - bottom: var(--_ui5_button_focus_offset); - left: var(--_ui5_button_focus_offset); - right: var(--_ui5_button_focus_offset); -} - -[ui5-segmentedbutton-item][active] .ui5-button-root::after { - border-color: var(--sapContent_ContrastFocusColor); -} - -[ui5-segmentedbutton-item] [ui5-icon].ui5-button-icon { - height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ - top: 0; -} - -[ui5-segmentedbutton-item][focused] { - outline: none; -} - -[ui5-segmentedbutton-item][focused] .ui5-segmentedbutton-item-root { - position: relative; -} - -[ui5-segmentedbutton-item][focused] .ui5-segmentedbutton-item-root::after { - content: ""; - position: absolute; - border-width: 1px; - border-style: dotted; - border-color: var(--_ui5_button_focus_color); - top: var(--_ui5_button_focus_offset); - bottom: var(--_ui5_button_focus_offset); - left: var(--_ui5_button_focus_offset); - right: var(--_ui5_button_focus_offset); -} - -[ui5-segmentedbutton-item][active] .ui5-segmentedbutton-item-root::after { - border-color: var(--sapContent_ContrastFocusColor); -} - -[ui5-segmentedbutton-item] [ui5-icon].ui5-segmentedbutton-item-icon { - height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/ - top: 0; -} - From e7dc47fc402528f6239cdddf376db8051889f11b Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Tue, 25 May 2021 11:36:28 +0300 Subject: [PATCH 14/24] minor coding style issues fixed --- packages/main/src/SegmentedButtonItem.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 1fc3a03fe44a..f139b44bbe69 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -1,7 +1,7 @@ import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; import ToggleButton from "./ToggleButton.js"; import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; -import ButtonDesign from "./types/ButtonDesign"; +import ButtonDesign from "./types/ButtonDesign.js"; /** * @public @@ -125,7 +125,6 @@ class SegmentedButtonItem extends ToggleButton { get ariaDescription() { return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); } - } SegmentedButtonItem.define(); From 47438f53229e64aed131d6e805c3f2bfd1be5fe9 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Tue, 25 May 2021 17:38:19 +0300 Subject: [PATCH 15/24] dependencies updated --- packages/main/src/SegmentedButtonItem.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index f139b44bbe69..856b729c2ceb 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -1,8 +1,9 @@ import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; import ToggleButton from "./ToggleButton.js"; -import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; import ButtonDesign from "./types/ButtonDesign.js"; +import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; + /** * @public */ From efced6fd4f6b44582638c1c6bdf299751894ef99 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Fri, 28 May 2021 15:48:51 +0300 Subject: [PATCH 16/24] renaming ui5-segmentedbutton-item to ui5-segmented-button-item --- docs/Public Module Imports.md | 2 +- packages/main/src/SegmentedButton.js | 4 +- packages/main/src/SegmentedButtonItem.js | 10 ++-- packages/main/src/themes/SegmentedButton.css | 14 ++--- packages/main/test/pages/SegmentedButton.html | 56 +++++++++---------- .../test/samples/SegmentedButton.sample.html | 44 +++++++-------- .../main/test/specs/SegmentedButton.spec.js | 14 ++--- 7 files changed, 72 insertions(+), 72 deletions(-) diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md index 65e37e11387b..a70b6b3c33b2 100644 --- a/docs/Public Module Imports.md +++ b/docs/Public Module Imports.md @@ -61,7 +61,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou | Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` | | Select Option | `ui5-option` | comes with `ui5-select ` | | Segmented Button | `ui5-segmentedbutton` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` | -| Segmented Button Item | `ui5-segmentedbutton-item`| comes with `ui5-segmentedbutton ` | +| Segmented Button Item | `ui5-segmente-button-item`| comes with `ui5-segmented-button ` | | Suggestion Item | `ui5-suggestion-item` | comes with `InputSuggestions.js` feature - see below | | Slider | `ui5-slider` | `import "@ui5/webcomponents/dist/Slider.js";` | | Step Input | `ui5-step-input` | `import "@ui5/webcomponents/dist/StepInput.js";` | diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 1ac2e666f7de..9920b3b881ef 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -29,7 +29,7 @@ const metadata = { *

    * Note: Multiple buttons are allowed. *

    - * Note: Use the ui5-segmentedbutton-item for the intended design. + * Note: Use the ui5-segmented-button-item for the intended design. * @type {sap.ui.webcomponents.main.IButton[]} * @slot buttons * @public @@ -244,7 +244,7 @@ class SegmentedButton extends UI5Element { * Currently selected button. * * @readonly - * @type { ui5-segmentedbutton-item } + * @type { ui5-segmented-button-item } * @public */ get selectedButton() { diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 856b729c2ceb..e5b211b857a9 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -8,7 +8,7 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa * @public */ const metadata = { - tag: "ui5-segmentedbutton-item", + tag: "ui5-segmented-button-item", properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { /** * Defines the ui5-button design. @@ -96,12 +96,12 @@ const metadata = { * *

    Overview

    * - * Users can use the ui5-segmentedbutton-item as part of a ui5-segmentedbutton. + * Users can use the ui5-segmented-button-item as part of a ui5-segmentedbutton. *

    - * Clicking or tapping on a ui5-segmentedbutton-item changes its state to pressed. + * Clicking or tapping on a ui5-segmented-button-item changes its state to pressed. * The button returns to its initial state when the user clicks or taps on it again. * By applying additional custom CSS-styling classes, apps can give a different style to any - * ui5-segmentedbutton-item. + * ui5-segmented-button-item. * *

    ES6 Module Import

    * @@ -111,7 +111,7 @@ const metadata = { * @author SAP SE * @alias sap.ui.webcomponents.main.SegmentedButtonItem * @extends Button - * @tagname ui5-segmentedbutton-item + * @tagname ui5-segmented-button-item * @public */ class SegmentedButtonItem extends ToggleButton { diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index c770f4456202..f2751082278b 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -10,7 +10,7 @@ padding: 0; } -::slotted([ui5-segmentedbutton-item]) { +::slotted([ui5-segmented-button-item]) { border-radius: 0; height: var(--_ui5_button_base_height); min-width: 2.5rem; @@ -19,25 +19,25 @@ text-overflow: ellipsis; } -::slotted([ui5-segmentedbutton-item]:nth-child(odd)) { +::slotted([ui5-segmented-button-item]:nth-child(odd)) { border: 1px solid var(--sapButton_Selected_BorderColor); border-right: 0; border-left: 0; } -::slotted([ui5-segmentedbutton-item]:last-child) { +::slotted([ui5-segmented-button-item]:last-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-right: 1px solid var(--sapButton_Selected_BorderColor); } -::slotted([ui5-segmentedbutton-item]:first-child) { +::slotted([ui5-segmented-button-item]:first-child) { border-top-left-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); border-left: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-segmentedbutton-item]:first-child) { +[dir="rtl"] ::slotted([ui5-segmented-button-item]:first-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: 0; @@ -45,7 +45,7 @@ border-right: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-segmentedbutton-item]:last-child) { +[dir="rtl"] ::slotted([ui5-segmented-button-item]:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--_ui5_segmented_btn_border_radius); @@ -53,7 +53,7 @@ border-left: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-segmentedbutton-item]:only-child) { +[dir="rtl"] ::slotted([ui5-segmented-button-item]:only-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: var(--_ui5_segmented_btn_border_radius); diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index c13bf4afc3f8..5f56b108548c 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -26,14 +26,14 @@

    ui5-segmentedbutton

    Segmentedbutton example

    - Button + Button
    - - SegmentedButtonItem - Button + + SegmentedButtonItem + Button
    @@ -41,10 +41,10 @@

    Segmentedbutton example

    Example with 4 buttons

    - Button - Button - Click - Pressed SegmentedButtonItem + Button + Button + Click + Pressed SegmentedButtonItem @@ -52,11 +52,11 @@

    Example with 4 buttons

    Example with 5 buttons

    - Word - Pressed SegmentedButtonItem With Bigger Text - Button - Pressed SegmentedButtonItem - A + Word + Pressed SegmentedButtonItem With Bigger Text + Button + Pressed SegmentedButtonItem + A @@ -64,9 +64,9 @@

    Example with 5 buttons

    Example with Icons and custom width

    - - - + + + @@ -74,9 +74,9 @@

    Example with Icons and custom width

    SegmentedButton with 100% width

    - Pressed SegmentedButtonItem - SegmentedButtonItem - SegmentedButtonItem + Pressed SegmentedButtonItem + SegmentedButtonItem + SegmentedButtonItem @@ -84,9 +84,9 @@

    SegmentedButton with 100% width

    SegmentedButton wrapped in a container with set width

    - - - + + +
    @@ -99,15 +99,15 @@

    Initial focus test

    the focus hould go to the first button

    Press - - - + + + Press - - - + + + diff --git a/packages/main/test/samples/SegmentedButton.sample.html b/packages/main/test/samples/SegmentedButton.sample.html index ff396ddd1f57..ecb37b48cf9c 100644 --- a/packages/main/test/samples/SegmentedButton.sample.html +++ b/packages/main/test/samples/SegmentedButton.sample.html @@ -13,16 +13,16 @@

    SegmentedButton

    Basic SegmentedButton

    - Map - Satellite - Terrain + Map + Satellite + Terrain 
    
 <ui5-segmentedbutton>
-    <ui5-segmentedbutton-item>Map</ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item pressed>Satellite</ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item>Terrain</ui5-segmentedbutton-item>
+    <ui5-segmented-button-item>Map</ui5-segmented-button-item>
+    <ui5-segmented-button-item pressed>Satellite</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
 </ui5-segmentedbutton>
    @@ -31,16 +31,16 @@

    Basic SegmentedButton

    SegmentedButton with Icons

    - - - + + + 
    
 <ui5-segmentedbutton>
-    <ui5-segmentedbutton-item icon="employee" pressed></ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item icon="menu"></ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item icon="factory"></ui5-segmentedbutton-item>
+    <ui5-segmented-button-item icon="employee" pressed></ui5-segmented-button-item>
+    <ui5-segmented-button-item icon="menu"></ui5-segmented-button-item>
+    <ui5-segmented-button-item icon="factory"></ui5-segmented-button-item>
 </ui5-segmentedbutton>
    @@ -49,20 +49,20 @@

    SegmentedButton with Icons

    SegmentedButton with 5 SegmentedButtonItems

    - Button - Pressed SegmentedButtonItem With Bigger Text - Button - Pressed SegmentedButtonItem - Press me + Button + Pressed SegmentedButtonItem With Bigger Text + Button + Pressed SegmentedButtonItem + Press me 
    
 <ui5-segmentedbutton>
-    <ui5-segmentedbutton-item>Button</ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item>Button</ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item>SegmentedButtonItem</ui5-segmentedbutton-item>
-    <ui5-segmentedbutton-item>Press me</ui5-segmentedbutton-item>
+    <ui5-segmented-button-item>Button</ui5-segmented-button-item>
+    <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Button</ui5-segmented-button-item>
+    <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Press me</ui5-segmented-button-item>
 </ui5-segmentedbutton>
    diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js index 217b70cd42df..54ddc78a3048 100644 --- a/packages/main/test/specs/SegmentedButton.spec.js +++ b/packages/main/test/specs/SegmentedButton.spec.js @@ -7,14 +7,14 @@ describe("SegmentedButton general interaction", () => { }); it("tests if pressed attribute is applied", () => { - const segmentedButtonItem = browser.$("#segButton1 > ui5-segmentedbutton-item:first-child"); + const segmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:first-child"); assert.ok(segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed"); }); it("tests if pressed attribute is switched to the newly pressed button", () => { - const firstSegmentedButtonItem = browser.$("#segButton1 > ui5-segmentedbutton-item:first-child"); - const lastSegmentedButtonItem = browser.$("#segButton1 > ui5-segmentedbutton-item:last-child"); + const firstSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:first-child"); + const lastSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:last-child"); lastSegmentedButtonItem.click(); @@ -23,10 +23,10 @@ describe("SegmentedButton general interaction", () => { }); it("tests if pressed attribute is applied only to last child when all buttons are pressed", () => { - const segmentedButtonItem1 = browser.$("#segButton2 > ui5-segmentedbutton-item:first-child"); - const segmentedButtonItem2 = browser.$("#segButton2 > ui5-segmentedbutton-item:nth-child(2)"); - const segmentedButtonItem3 = browser.$("#segButton2 > ui5-segmentedbutton-item:nth-child(3)"); - const segmentedButtonItem4 = browser.$("#segButton2 > ui5-segmentedbutton-item:last-child"); + const segmentedButtonItem1 = browser.$("#segButton2 > ui5-segmented-button-item:first-child"); + const segmentedButtonItem2 = browser.$("#segButton2 > ui5-segmented-button-item:nth-child(2)"); + const segmentedButtonItem3 = browser.$("#segButton2 > ui5-segmented-button-item:nth-child(3)"); + const segmentedButtonItem4 = browser.$("#segButton2 > ui5-segmented-button-item:last-child"); // only last button should be pressed assert.ok(!segmentedButtonItem1.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); From 10ec2c7d8c67919425661f4fcbfd5ecfb28ca4de Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Fri, 28 May 2021 15:53:22 +0300 Subject: [PATCH 17/24] fixing a typo --- docs/Public Module Imports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md index a70b6b3c33b2..509f2eb9aa13 100644 --- a/docs/Public Module Imports.md +++ b/docs/Public Module Imports.md @@ -61,7 +61,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou | Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` | | Select Option | `ui5-option` | comes with `ui5-select ` | | Segmented Button | `ui5-segmentedbutton` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` | -| Segmented Button Item | `ui5-segmente-button-item`| comes with `ui5-segmented-button ` | +| Segmented Button Item | `ui5-segmented-button-item`| comes with `ui5-segmented-button ` | | Suggestion Item | `ui5-suggestion-item` | comes with `InputSuggestions.js` feature - see below | | Slider | `ui5-slider` | `import "@ui5/webcomponents/dist/Slider.js";` | | Step Input | `ui5-step-input` | `import "@ui5/webcomponents/dist/StepInput.js";` | From b311858d65f06bafbc63a139469e7411274aefbe Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Mon, 31 May 2021 15:42:28 +0300 Subject: [PATCH 18/24] icon fixed - aligned with the new button icon rendering --- packages/main/src/SegmentedButtonItem.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 559ee1216aa8..67fa34591b6d 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -27,9 +27,9 @@ > {{#if icon}} {{/if}} From c5913aa11bb31a586c36215b9e23520609109ad1 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Mon, 31 May 2021 17:07:28 +0300 Subject: [PATCH 19/24] fixing comments from the internal review --- packages/main/src/SegmentedButton.js | 2 +- packages/main/src/SegmentedButtonItem.hbs | 8 ++++---- packages/main/src/SegmentedButtonItem.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 012c0bd28c55..585300d706b7 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -26,7 +26,7 @@ const metadata = { slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ { /** - * Defines the buttons of ui5-segmentedbutton. + * Defines the buttons of ui5-segmented-button. *

    * Note: Multiple buttons are allowed. *

    diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 67fa34591b6d..85eefadb78d7 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -27,10 +27,10 @@ > {{#if icon}} {{/if}} diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index e5b211b857a9..519ae68d3b9f 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -96,7 +96,7 @@ const metadata = { * *

    Overview

    * - * Users can use the ui5-segmented-button-item as part of a ui5-segmentedbutton. + * Users can use the ui5-segmented-button-item as part of a ui5-segmented-button. *

    * Clicking or tapping on a ui5-segmented-button-item changes its state to pressed. * The button returns to its initial state when the user clicks or taps on it again. From a0392600b4fba32f51a5041264ccf4f12a1eafa0 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Tue, 1 Jun 2021 16:54:07 +0300 Subject: [PATCH 20/24] DOM attributes updated --- packages/main/src/SegmentedButtonItem.hbs | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs index 85eefadb78d7..ba5f22fc3325 100644 --- a/packages/main/src/SegmentedButtonItem.hbs +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -5,7 +5,7 @@ aria-setsize="{{sizeOfSet}}" aria-selected="{{pressed}}" class="ui5-button-root" - ?disabled="{{disabled}}" + aria-disabled="{{disabled}}" data-sap-focus-ref {{> ariaPressed}} dir="{{effectiveDir}}" @@ -19,9 +19,6 @@ @touchstart="{{_ontouchstart}}" @touchend="{{_ontouchend}}" tabindex={{tabIndexValue}} - aria-expanded="{{accInfo.ariaExpanded}}" - aria-controls="{{accInfo.ariaControls}}" - aria-haspopup="{{accInfo.ariaHaspopup}}" aria-label="{{ariaLabelText}}" title="{{accInfo.title}}" > From 8560c9944f4607c7a0a52a9f6a230156a283d1c4 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Wed, 9 Jun 2021 10:38:10 +0300 Subject: [PATCH 21/24] fixed selection with space and enter --- package.json | 1 + packages/main/src/SegmentedButton.hbs | 2 + packages/main/src/SegmentedButton.js | 21 +++++++- packages/main/src/SegmentedButtonItem.js | 50 +++++++------------ .../main/test/specs/SegmentedButton.spec.js | 29 +++++++++-- yarn.lock | 13 +++++ 6 files changed, 81 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index e77a91282b48..c9950fe027aa 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "prerelease": "node ./.github/actions/pre-release.js" }, "devDependencies": { + "chromedriver": "^91.0.0", "command-line-args": "^5.1.1", "cross-env": "^7.0.3", "glob-promise": "^4.1.0", diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index a4208deec10e..1147858ca2eb 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -1,5 +1,7 @@
      ui5-button design. + * Note: The property is inherited and not supported. If set, it won't take any effect. * - *

      - * Note: - * - *
        - *
      • Default
        • - *
      • Emphasized
        • - *
      • Positive
        • - *
      • Negative
        • - *
      • Transparent
        • - *
      - * - * @type {ButtonDesign} - * @defaultvalue "Default" - * @private + * @public */ design: { type: ButtonDesign, @@ -34,22 +21,18 @@ const metadata = { }, /** - * Defines whether the icon should be displayed after the ui5-button text. + * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {boolean} - * @defaultvalue false - * @private + * @public */ iconEnd: { type: Boolean, }, /** - * Defines the size of the icon inside the ui5-button. + * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {string} - * @defaultvalue undefined - * @private + * @public */ iconSize: { type: String, @@ -57,22 +40,26 @@ const metadata = { }, /** - * When set to true, the ui5-button will - * automatically submit the nearest form element upon press. - *

      - * Important: For the submits property to have effect, you must add the following import to your project: - * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; + * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {boolean} - * @defaultvalue false - * @private + * @public */ submits: { type: Boolean, }, + /** + * Note: The property is inherited and not supported. If set, it won't take any effect. + * + * @public + */ + pressed: { + type: Boolean, + }, + /** * Defines the index of the item inside of the SegmentedButton. + * * @private * @type {String} */ @@ -82,6 +69,7 @@ const metadata = { /** * Defines how many items are inside of the SegmentedButton. + * * @private * @type {String} */ diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js index 54ddc78a3048..fe20de376392 100644 --- a/packages/main/test/specs/SegmentedButton.spec.js +++ b/packages/main/test/specs/SegmentedButton.spec.js @@ -12,14 +12,37 @@ describe("SegmentedButton general interaction", () => { assert.ok(segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed"); }); - it("tests if pressed attribute is switched to the newly pressed button", () => { + it("tests if pressed attribute is switched to the newly pressed button when selected with enter key", () => { const firstSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:first-child"); + const secondSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)"); + + firstSegmentedButtonItem.click(); + firstSegmentedButtonItem.keys("ArrowRight"); + browser.keys("Enter"); + + assert.ok(!firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should not be pressed anymore"); + assert.ok(secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem has property pressed"); + }); + + it("tests if pressed attribute is switched to the newly pressed button when selected with space key", () => { + const secondSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)"); const lastSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:last-child"); - lastSegmentedButtonItem.click(); + secondSegmentedButtonItem.keys("ArrowRight"); + browser.keys("Space"); + assert.ok(!secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem should not be pressed anymore"); assert.ok(lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem has property pressed"); - assert.ok(!firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should not be pressed anymore"); + }); + + it("tests if pressed attribute is switched to the newly pressed button when selected with mouse", () => { + const firstSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:first-child"); + const lastSegmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:last-child"); + + firstSegmentedButtonItem.click(); + + assert.ok(firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem has property pressed"); + assert.ok(!lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem should not be pressed anymore"); }); it("tests if pressed attribute is applied only to last child when all buttons are pressed", () => { diff --git a/yarn.lock b/yarn.lock index 475147aedb81..65c06fc18f75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2567,6 +2567,19 @@ chromedriver@90.0.1: proxy-from-env "^1.1.0" tcp-port-used "^1.0.1" +chromedriver@^91.0.0: + version "91.0.0" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-91.0.0.tgz#b8c07d715c1bde2ed5817757e923bd65565c8f94" + integrity sha512-0eQGLDWvfVd1apkqQpt4452bCATrsj50whhVzMqPiazNSfCXXwfYWRonYxx3DVFCG3+RwSCLvsk8/vpuojCyJA== + dependencies: + "@testim/chrome-version" "^1.0.7" + axios "^0.21.1" + del "^6.0.0" + extract-zip "^2.0.1" + https-proxy-agent "^5.0.0" + proxy-from-env "^1.1.0" + tcp-port-used "^1.0.1" + circular-json@^0.3.1: version "0.3.3" resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" From df5e79984705b6bcba31ed76e6b483b39bd53b9a Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Wed, 9 Jun 2021 10:42:04 +0300 Subject: [PATCH 22/24] fixed indentation --- package.json | 1 - packages/main/src/SegmentedButton.hbs | 4 ++-- yarn.lock | 13 ------------- 3 files changed, 2 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index c9950fe027aa..e77a91282b48 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,6 @@ "prerelease": "node ./.github/actions/pre-release.js" }, "devDependencies": { - "chromedriver": "^91.0.0", "command-line-args": "^5.1.1", "cross-env": "^7.0.3", "glob-promise": "^4.1.0", diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 1147858ca2eb..9ca8613abe70 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -1,7 +1,7 @@
        Date: Fri, 11 Jun 2021 14:52:15 +0300 Subject: [PATCH 23/24] Making pressed property public again --- packages/main/src/SegmentedButtonItem.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 641349d206f9..8992fe874ece 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -48,15 +48,6 @@ const metadata = { type: Boolean, }, - /** - * Note: The property is inherited and not supported. If set, it won't take any effect. - * - * @public - */ - pressed: { - type: Boolean, - }, - /** * Defines the index of the item inside of the SegmentedButton. * From 0585734a2ab49ffb4763822772ca6514b2250005 Mon Sep 17 00:00:00 2001 From: Tereza Chobanova Date: Mon, 14 Jun 2021 11:03:12 +0300 Subject: [PATCH 24/24] renaming "button"->"item" --- packages/main/src/SegmentedButton.js | 100 +++++++++--------- packages/main/src/SegmentedButtonItem.js | 4 +- packages/main/test/pages/SegmentedButton.html | 16 +-- .../test/samples/SegmentedButton.sample.html | 8 +- .../main/test/specs/SegmentedButton.spec.js | 10 +- 5 files changed, 69 insertions(+), 69 deletions(-) diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 3b55699c37de..83a9c2e53f22 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -27,32 +27,32 @@ const metadata = { slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ { /** - * Defines the buttons of ui5-segmented-button. + * Defines the items of ui5-segmented-button. *

        - * Note: Multiple buttons are allowed. + * Note: Multiple items are allowed. *

        * Note: Use the ui5-segmented-button-item for the intended design. * @type {sap.ui.webcomponents.main.IButton[]} - * @slot buttons + * @slot items * @public */ "default": { - propertyName: "buttons", + propertyName: "items", type: HTMLElement, }, }, events: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ { /** - * Fired when the selected button changes. + * Fired when the selected item changes. * * @event sap.ui.webcomponents.main.SegmentedButton#selection-change - * @param {HTMLElement} selectedButton the pressed button. + * @param {HTMLElement} selectedItem the pressed item. * @public */ "selection-change": { detail: { - selectedButton: { type: HTMLElement }, + selectedItem: { type: HTMLElement }, }, }, }, @@ -63,11 +63,11 @@ const metadata = { * *

        Overview

        * - * The ui5-segmented-button shows a group of buttons. When the user clicks or taps - * one of the buttons, it stays in a pressed state. It automatically resizes the buttons + * The ui5-segmented-button shows a group of items. When the user clicks or taps + * one of the items, it stays in a pressed state. It automatically resizes the items * to fit proportionally within the component. When no width is set, the component uses the available width. *

        - * Note: There can be just one selected button at a time. + * Note: There can be just one selected item at a time. * *

        ES6 Module Import

        * @@ -111,7 +111,7 @@ class SegmentedButton extends UI5Element { super(); this._itemNavigation = new ItemNavigation(this, { - getItemsCallback: () => this.getSlottedNodes("buttons"), + getItemsCallback: () => this.getSlottedNodes("items"), }); this.absoluteWidthSet = false; // set to true whenever we set absolute width to the component @@ -131,9 +131,9 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { - const buttons = this.getSlottedNodes("buttons"); + const items = this.getSlottedNodes("items"); - buttons.forEach((item, index, arr) => { + items.forEach((item, index, arr) => { item.posInSet = index + 1; item.sizeOfSet = arr.length; }); @@ -145,24 +145,24 @@ class SegmentedButton extends UI5Element { await this._doLayout(); } - prepareToMeasureButtons() { + prepareToMeasureItems() { this.style.width = ""; - this.buttons.forEach(button => { - button.style.width = ""; + this.items.forEach(item => { + item.style.width = ""; }); } - async measureButtonsWidth() { + async measureItemsWidth() { await renderFinished(); - this.prepareToMeasureButtons(); + this.prepareToMeasureItems(); - this.widths = this.buttons.map(button => { + this.widths = this.items.map(item => { // +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px - let width = button.offsetWidth + 1; + let width = item.offsetWidth + 1; if (isIE()) { - // in IE we are adding 1 one px beacause the width of the border on a button in the middle is not calculated and if the - // longest button is in the middle, it truncates + // in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the + // longest item is in the middle, it truncates width += 1; } @@ -171,44 +171,44 @@ class SegmentedButton extends UI5Element { } normalizeSelection() { - this._selectedButton = this.buttons.filter(button => button.pressed).pop(); + this._selectedItem = this.items.filter(item => item.pressed).pop(); - if (this._selectedButton) { - this.buttons.forEach(button => { - button.pressed = false; + if (this._selectedItem) { + this.items.forEach(item => { + item.pressed = false; }); - this._selectedButton.pressed = true; + this._selectedItem.pressed = true; } } - _selectButton(event) { + _selectItem(event) { if (event.target.disabled || event.target === this.getDomRef()) { return; } - if (event.target !== this._selectedButton) { - if (this._selectedButton) { - this._selectedButton.pressed = false; + if (event.target !== this._selectedItem) { + if (this._selectedItem) { + this._selectedItem.pressed = false; } - this._selectedButton = event.target; + this._selectedItem = event.target; this.fireEvent("selection-change", { - selectedButton: this._selectedButton, + selectedItem: this._selectedItem, }); } - this._selectedButton.pressed = true; - this._itemNavigation.setCurrentItem(this._selectedButton); + this._selectedItem.pressed = true; + this._itemNavigation.setCurrentItem(this._selectedItem); return this; } _onclick(event) { - this._selectButton(event); + this._selectItem(event); } _onkeydown(event) { if (isEnter(event)) { - this._selectButton(event); + this._selectItem(event); } else if (isSpace(event)) { event.preventDefault(); } @@ -216,7 +216,7 @@ class SegmentedButton extends UI5Element { _onkeyup(event) { if (isSpace(event)) { - this._selectButton(event); + this._selectItem(event); } } @@ -230,28 +230,28 @@ class SegmentedButton extends UI5Element { // If the component is focused for the first time // focus the selected item if such present - if (this.selectedButton) { - this.selectedButton.focus(); - this._itemNavigation.setCurrentItem(this._selectedButton); + if (this.selectedItem) { + this.selectedItem.focus(); + this._itemNavigation.setCurrentItem(this._selectedItem); this.hasPreviouslyFocusedItem = true; } } async _doLayout() { - const buttonsHaveWidth = this.widths && this.widths.some(button => button.offsetWidth > 2); // 2 are the pixel's added for rounding & IE - if (!buttonsHaveWidth) { - await this.measureButtonsWidth(); + const itemsHaveWidth = this.widths && this.widths.some(item => item.offsetWidth > 2); // 2 are the pixel's added for rounding & IE + if (!itemsHaveWidth) { + await this.measureItemsWidth(); } const parentWidth = this.parentNode.offsetWidth; if (!this.style.width || this.percentageWidthSet) { - this.style.width = `${Math.max(...this.widths) * this.buttons.length}px`; + this.style.width = `${Math.max(...this.widths) * this.items.length}px`; this.absoluteWidthSet = true; } - this.buttons.forEach(button => { - button.style.width = "100%"; + this.items.forEach(item => { + item.style.width = "100%"; }); if (parentWidth <= this.offsetWidth && this.absoluteWidthSet) { @@ -261,14 +261,14 @@ class SegmentedButton extends UI5Element { } /** - * Currently selected button. + * Currently selected item. * * @readonly * @type { ui5-segmented-button-item } * @public */ - get selectedButton() { - return this._selectedButton; + get selectedItem() { + return this._selectedItem; } get ariaDescribedBy() { diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js index 8992fe874ece..9fd97862c521 100644 --- a/packages/main/src/SegmentedButtonItem.js +++ b/packages/main/src/SegmentedButtonItem.js @@ -78,7 +78,7 @@ const metadata = { * Users can use the ui5-segmented-button-item as part of a ui5-segmented-button. *

        * Clicking or tapping on a ui5-segmented-button-item changes its state to pressed. - * The button returns to its initial state when the user clicks or taps on it again. + * The item returns to its initial state when the user clicks or taps on it again. * By applying additional custom CSS-styling classes, apps can give a different style to any * ui5-segmented-button-item. * @@ -89,7 +89,7 @@ const metadata = { * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.SegmentedButtonItem - * @extends Button + * @extends ToggleButton * @tagname ui5-segmented-button-item * @public */ diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index f37447550886..1378660771fa 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -26,35 +26,35 @@

        ui5-segmented-button

        Segmentedbutton example

        - Button + Item
        SegmentedButtonItem - Button + Item
        -

        Example with 4 buttons

        +

        Example with 4 items

        - Button - Button + Item + Item Click Pressed SegmentedButtonItem
        -

        Example with 5 buttons

        +

        Example with 5 items

        Word Pressed SegmentedButtonItem With Bigger Text - Button + Item Pressed SegmentedButtonItem A @@ -96,7 +96,7 @@

        SegmentedButton wrapped in a container with set width

        Initial focus test

        -

        the focus hould go to the first button

        +

        the focus should go to the first item

        Press diff --git a/packages/main/test/samples/SegmentedButton.sample.html b/packages/main/test/samples/SegmentedButton.sample.html index 103d4f68c133..03ab72122891 100644 --- a/packages/main/test/samples/SegmentedButton.sample.html +++ b/packages/main/test/samples/SegmentedButton.sample.html @@ -49,18 +49,18 @@

        SegmentedButton with Icons

        SegmentedButton with 5 SegmentedButtonItems

        - Button + Item Pressed SegmentedButtonItem With Bigger Text - Button + Item Pressed SegmentedButtonItem Press me 
        
 <ui5-segmented-button>
-    <ui5-segmented-button-item>Button</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Item</ui5-segmented-button-item>
     <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
-    <ui5-segmented-button-item>Button</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Item</ui5-segmented-button-item>
     <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
     <ui5-segmented-button-item>Press me</ui5-segmented-button-item>
 </ui5-segmented-button>
diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js
index fe20de376392..1bf3969130e0 100644
--- a/packages/main/test/specs/SegmentedButton.spec.js
+++ b/packages/main/test/specs/SegmentedButton.spec.js
@@ -12,7 +12,7 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed");
 	});
 
-	it("tests if pressed attribute is switched to the newly pressed button when selected with enter key", () => {
+	it("tests if pressed attribute is switched to the newly pressed item when selected with enter key", () => {
 		const firstSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:first-child");
 		const secondSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)");
 
@@ -24,7 +24,7 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem has property pressed");
 	});
 
-	it("tests if pressed attribute is switched to the newly pressed button when selected with space key", () => {
+	it("tests if pressed attribute is switched to the newly pressed item when selected with space key", () => {
 		const secondSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)");
 		const lastSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:last-child");
 
@@ -35,7 +35,7 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem has property pressed");
 	});
 
-	it("tests if pressed attribute is switched to the newly pressed button when selected with mouse", () => {
+	it("tests if pressed attribute is switched to the newly pressed item when selected with mouse", () => {
 		const firstSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:first-child");
 		const lastSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:last-child");
 
@@ -45,13 +45,13 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(!lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem should not be pressed anymore");
 	});
 
-	it("tests if pressed attribute is applied only to last child when all buttons are pressed", () => {
+	it("tests if pressed attribute is applied only to last child when all items are pressed", () => {
 		const segmentedButtonItem1 =  browser.$("#segButton2 > ui5-segmented-button-item:first-child");
 		const segmentedButtonItem2 =  browser.$("#segButton2 > ui5-segmented-button-item:nth-child(2)");
 		const segmentedButtonItem3 =  browser.$("#segButton2 > ui5-segmented-button-item:nth-child(3)");
 		const segmentedButtonItem4 =  browser.$("#segButton2 > ui5-segmented-button-item:last-child");
 
-		// only last button should be pressed
+		// only last item should be pressed
 		assert.ok(!segmentedButtonItem1.getProperty("pressed"), "SegmentedButtonItem should not be pressed");
 		assert.ok(!segmentedButtonItem2.getProperty("pressed"), "SegmentedButtonItem should not be pressed");
 		assert.ok(!segmentedButtonItem3.getProperty("pressed"), "SegmentedButtonItem should not be pressed");