Skip to content

Commit

Permalink
fix(ui5-ai-button): reset button width after animations (#9923)
Browse files Browse the repository at this point in the history
Previously, we had an issue where the AIButton's text was not fully visible when changing states while hidden. This was happening because the button's width was being set to 0px after the fade-out animation (since the button was hidden).
We addressed that issue by resetting the button's width style after the animations are complete, ensuring that the button has the correct width based on its state, regardless of whether it is hidden.
  • Loading branch information
hinzzx authored Oct 9, 2024
1 parent fe1d816 commit 2a5c7db
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion packages/ai/src/Button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ class Button extends UI5Element {
async _fadeOut(): Promise<void> {
const fadeOutDuration = 180;

const button = this.shadowRoot?.querySelector("[ui5-button]") as MainButton;
const button = this._mainButton;
const newStateObject = this._effectiveStateObject;

if (!newStateObject) {
Expand Down Expand Up @@ -204,6 +204,12 @@ class Button extends UI5Element {
this.fadeMid = false;
this.fadeIn = false;
}, fadeResetDuration);

// reset the button's width after animations
const button = this._mainButton;
if (button) {
button.style.width = "";
}
}

/**
Expand All @@ -215,6 +221,10 @@ class Button extends UI5Element {
this.fireDecoratorEvent("click");
}

get _mainButton() {
return this.shadowRoot?.querySelector("[ui5-button]") as MainButton;
}

get _effectiveState() {
return this.state || (this.states.length && this.states[0].name) || "";
}
Expand Down

0 comments on commit 2a5c7db

Please sign in to comment.