Skip to content

Commit

Permalink
fix(animation): fix hide/show text animation on rounded button
Browse files Browse the repository at this point in the history
  • Loading branch information
jordanjones243 committed Jul 6, 2023
1 parent eec6a4b commit 4a6a709
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 6 deletions.
12 changes: 8 additions & 4 deletions src/auro-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,10 +188,14 @@ export class AuroButton extends LitElement {
.value="${ifDefined(this.value ? this.value : undefined)}"
@click="${() => {}}"
>
${ifDefined(this.loading ? html`<auro-loader pulse></auro-loader>` : undefined)}
${this.iconOnly ? undefined : html`<slot></slot>`}
<slot name="icon"></slot>
<span>
${ifDefined(this.loading ? html`<auro-loader pulse></auro-loader>` : undefined)}
<span class="textSlot">
${this.iconOnly ? undefined : html`<slot></slot>`}
</span>
<slot name="icon"></slot>
</span>
</button>
`;
}
Expand Down
15 changes: 13 additions & 2 deletions src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,6 @@ slot {
min-width: unset;

transition: all 300ms ease-out;
opacity: 1;

::slotted(auro-icon) {
width: var(--auro-size-300);
Expand All @@ -447,11 +446,23 @@ slot {
}
}


:host([rounded]) {
.textSlot {
transition: opacity 300ms ease-in;
opacity: 1;
}
}

:host([rounded][iconOnly]) {
::slotted(*):not(auro-icon) {
.textSlot {
opacity: 0;
}

.textWrapper {
display: none;
}

.auro-button {
min-width: unset;
padding: unset;
Expand Down

0 comments on commit 4a6a709

Please sign in to comment.