diff --git a/packages/ai/src/Button.ts b/packages/ai/src/Button.ts index dcd3b919f13a..a9fa9a3cb6ab 100644 --- a/packages/ai/src/Button.ts +++ b/packages/ai/src/Button.ts @@ -72,14 +72,14 @@ import ButtonCss from "./generated/themes/Button.css.js"; * [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys. * @public */ -@event("arrow-click", { +@event("arrow-button-click", { bubbles: true, }) class Button extends UI5Element { eventDetails!: { "click": void; - "arrow-click": void; + "arrow-button-click": void; } /** * Defines the component design. @@ -117,7 +117,7 @@ class Button extends UI5Element { * @since 2.6.0 */ @property({ type: Boolean, noAttribute: true }) - activeArrowButton = false; + arrowButtonPressed = false; /** * Keeps the current state object of the component. @@ -151,7 +151,7 @@ class Button extends UI5Element { _hiddenSplitButton?: SplitButton; get _hideArrowButton() { - return !this._effectiveStateObject?.splitMode; + return !this._effectiveStateObject?.showArrowButton; } get _effectiveState() { @@ -175,7 +175,7 @@ class Button extends UI5Element { } get _stateEndIcon() { - const endIcon = this._effectiveStateObject?.splitMode ? "" : this._effectiveStateObject?.endIcon; + const endIcon = this._effectiveStateObject?.showArrowButton ? "" : this._effectiveStateObject?.endIcon; return endIcon; } @@ -187,7 +187,7 @@ class Button extends UI5Element { const splitButton = this._splitButton; if (splitButton) { - splitButton.activeArrowButton = this.activeArrowButton; + splitButton.activeArrowButton = this.arrowButtonPressed; } if (!this._currentStateObject?.name) { @@ -225,10 +225,10 @@ class Button extends UI5Element { const buttonWidth = button.offsetWidth; const currentState: Partial = this._currentStateObject || {}; - if ((!currentState.splitMode && newStateObject.splitMode) || (!currentState.endIcon && !!newStateObject.endIcon)) { + if ((!currentState.showArrowButton && newStateObject.showArrowButton) || (!currentState.endIcon && !!newStateObject.endIcon)) { this.classList.add("ui5-ai-button-button-to-menu"); } - if ((currentState.splitMode && !newStateObject.splitMode) || (!!currentState.endIcon && !newStateObject.endIcon)) { + if ((currentState.showArrowButton && !newStateObject.showArrowButton) || (!!currentState.endIcon && !newStateObject.endIcon)) { this.classList.add("ui5-ai-button-menu-to-button"); } @@ -298,12 +298,12 @@ class Button extends UI5Element { } /** - * Handles the arrow-click event when `ui5-ai-button` is in split mode. + * Handles the arrow-button-click event when `ui5-ai-button` is in split mode. * @private */ _onArrowClick(e: CustomEvent): void { e.stopImmediatePropagation(); - this.fireDecoratorEvent("arrow-click"); + this.fireDecoratorEvent("arrow-button-click"); } } diff --git a/packages/ai/src/ButtonState.ts b/packages/ai/src/ButtonState.ts index 81b793d568d4..5b8dd9c4b363 100644 --- a/packages/ai/src/ButtonState.ts +++ b/packages/ai/src/ButtonState.ts @@ -75,7 +75,7 @@ class ButtonState extends UI5Element { * @public */ @property({ type: Boolean }) - splitMode = false; + showArrowButton = false; } ButtonState.define(); diff --git a/packages/ai/test/pages/Button.html b/packages/ai/test/pages/Button.html index fc44232ed499..37237010b85c 100644 --- a/packages/ai/test/pages/Button.html +++ b/packages/ai/test/pages/Button.html @@ -33,7 +33,7 @@ - +

@@ -227,18 +227,18 @@ menuReg.addEventListener("open", function(evt) { var button = menuReg.opener; - button.activeArrowButton = true; + button.arrowButtonPressed = true; }); menuReg.addEventListener("close", function(evt) { var button = menuReg.opener; - button.activeArrowButton = false; + button.arrowButtonPressed = false; }); myAiButton.addEventListener("click", aiButtonClickHandler); myAiButtonSplit.addEventListener("click", aiButtonSplitClickHandler); - myAiButtonSplit.addEventListener("arrow-click", aiButtonSplitArrowClickHandler); + myAiButtonSplit.addEventListener("arrow-button-click", aiButtonSplitArrowClickHandler); myAiButtonIconOnly.addEventListener("click", aiButtonClickHandler); function aiQuickPromptButtonClickHandler(e) { diff --git a/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/main.js b/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/main.js index 174386af8783..0a45812c4d11 100644 --- a/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/main.js +++ b/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/main.js @@ -61,17 +61,17 @@ function menuItemClickHandler(evt) { function menuOpenHandler() { var button = menu.opener; - button.activeArrowButton = true; + button.arrowButtonPressed = true; } function menuCloseHandler() { var button = menu.opener; - button.activeArrowButton = false; + button.arrowButtonPressed = false; } myAiButton.addEventListener("click", aiButtonClickHandler); -myAiButton.addEventListener("arrow-click", aiButtonArrowClickHandler); +myAiButton.addEventListener("arrow-button-click", aiButtonArrowClickHandler); menu.addEventListener("item-click", menuItemClickHandler); menu.addEventListener("open", menuOpenHandler); menu.addEventListener("close", menuCloseHandler); diff --git a/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/sample.html b/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/sample.html index 40cc943b65ba..4bf73e8adf4f 100644 --- a/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/sample.html +++ b/packages/website/docs/_samples/ai/Button/ButtonSplitMenu/sample.html @@ -14,7 +14,7 @@ - +