refactor(ui5-ai-button): change api names

SAP · Jan 15, 2025 · ea859e0 · ea859e0
1 parent 5493f68
commit ea859e0
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git 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<ButtonState> = 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
@@ -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
@@ -33,7 +33,7 @@
 	<ui5-ai-button id="myAiButtonSplit" state="generate">
 		<ui5-ai-button-state name="generate" text="Regenerate" icon="ai"></ui5-ai-button-state>
 		<ui5-ai-button-state name="generating" text="Stop Generating" icon="stop"></ui5-ai-button-state>
-		<ui5-ai-button-state name="revise" text="Regenerate" icon="ai" split-mode></ui5-ai-button-state>
+		<ui5-ai-button-state name="revise" text="Regenerate" icon="ai" show-arrow-button></ui5-ai-button-state>
 	</ui5-ai-button>
 	<br/>
 	<br/>
@@ -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
@@ -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
@@ -14,7 +14,7 @@
 		<ui5-ai-button id="myAiButton" state="generate">
 			<ui5-ai-button-state name="generate" text="Generate" icon="ai"></ui5-ai-button-state>
 			<ui5-ai-button-state name="generating" text="Stop Generating" icon="stop"></ui5-ai-button-state>
-			<ui5-ai-button-state name="revise" text="Revise" icon="ai" split-mode></ui5-ai-button-state>
+			<ui5-ai-button-state name="revise" text="Revise" icon="ai" show-arrow-button></ui5-ai-button-state>
 		</ui5-ai-button>
 
 		<ui5-menu id="menu">