From 58d14ed1d2f3bde1453ad0bd12bbb0ba5ff1e077 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 21 Mar 2024 13:55:40 -0400 Subject: [PATCH] remove slot detection from buttons --- src/components/button/button.component.ts | 7 +- src/components/button/button.styles.ts | 111 ++++++++++------------ 2 files changed, 52 insertions(+), 66 deletions(-) diff --git a/src/components/button/button.component.ts b/src/components/button/button.component.ts index 5d43ada2b..0509be174 100644 --- a/src/components/button/button.component.ts +++ b/src/components/button/button.component.ts @@ -1,6 +1,5 @@ import { classMap } from 'lit/directives/class-map.js'; import { FormControlController, validValidityState } from '../../internal/form.js'; -import { HasSlotController } from '../../internal/slot.js'; import { html, literal } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; @@ -63,7 +62,6 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor private readonly formControlController = new FormControlController(this, { assumeInteractionOn: ['click'] }); - private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix'); private readonly localize = new LocalizeController(this); @query('.button') button: HTMLButtonElement | HTMLLinkElement; @@ -288,10 +286,7 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor 'button--standard': !this.outline, 'button--outline': this.outline, 'button--pill': this.pill, - 'button--rtl': this.localize.dir() === 'rtl', - 'button--has-label': this.hasSlotController.test('[default]'), - 'button--has-prefix': this.hasSlotController.test('prefix'), - 'button--has-suffix': this.hasSlotController.test('suffix') + 'button--rtl': this.localize.dir() === 'rtl' })} ?disabled=${ifDefined(isLink ? undefined : this.disabled)} type=${ifDefined(isLink ? undefined : this.type)} diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 303fb1a9d..932436288 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -213,13 +213,13 @@ export default css` pointer-events: none; } - .button:hover:not(.button--disabled) { + .button:hover:not(.button--disabled, .button--loading) { background: var(--background-hover, var(--background, none)); border-color: var(--border-color-hover, var(--border-color, transparent)); color: var(--label-color-hover, var(--label-color)); } - .button:active:not(.button--disabled) { + .button:active:not(.button--disabled, .button--loading) { background: var(--background-active, var(--background, none)); border-color: var(--border-color-active, var(--border-color, transparent)); color: var(--label-color-active, var(--label-color)); @@ -300,6 +300,21 @@ export default css` align-items: center; } + .button--small .button__caret { + margin-inline-start: calc(-0.5 * var(--wa-space-xs)); + margin-inline-end: var(--wa-space-xs); + } + + .button--medium .button__caret { + margin-inline-start: calc(-0.5 * var(--wa-space-s)); + margin-inline-end: var(--wa-space-s); + } + + .button--large .button__caret { + margin-inline-start: calc(-0.5 * var(--wa-space-m)); + margin-inline-end: var(--wa-space-m); + } + .button--caret .button__caret::part(svg) { width: 0.875em; height: 0.875em; @@ -354,70 +369,46 @@ export default css` * Button spacing */ - .button--has-label.button--small .button__label { - padding: 0 var(--wa-space-s); + .button--small { + ::slotted([slot='prefix']) { + margin-inline-start: var(--wa-space-xs) !important; + } + + ::slotted([slot='suffix']) { + margin-inline-end: var(--wa-space-xs) !important; + } + + .button__label { + padding: 0 var(--wa-space-s); + } } - .button--has-label.button--medium .button__label { - padding: 0 var(--wa-space-m); + .button--medium { + ::slotted([slot='prefix']) { + margin-inline-start: var(--wa-space-s) !important; + } + + ::slotted([slot='suffix']) { + margin-inline-end: var(--wa-space-s) !important; + } + + .button__label { + padding: 0 var(--wa-space-m); + } } - .button--has-label.button--large .button__label { - padding: 0 var(--wa-space-l); - } + .button--large { + ::slotted([slot='prefix']) { + margin-inline-start: var(--wa-space-m) !important; + } - .button--has-prefix.button--small { - padding-inline-start: var(--wa-space-xs); - } + ::slotted([slot='suffix']) { + margin-inline-end: var(--wa-space-m) !important; + } - .button--has-prefix.button--small .button__label { - padding-inline-start: var(--wa-space-xs); - } - - .button--has-prefix.button--medium { - padding-inline-start: var(--wa-space-s); - } - - .button--has-prefix.button--medium .button__label { - padding-inline-start: var(--wa-space-s); - } - - .button--has-prefix.button--large { - padding-inline-start: var(--wa-space-m); - } - - .button--has-prefix.button--large .button__label { - padding-inline-start: var(--wa-space-m); - } - - .button--has-suffix.button--small, - .button--caret.button--small { - padding-inline-end: var(--wa-space-xs); - } - - .button--has-suffix.button--small .button__label, - .button--caret.button--small .button__label { - padding-inline-end: var(--wa-space-xs); - } - - .button--has-suffix.button--medium, - .button--caret.button--medium { - padding-inline-end: var(--wa-space-s); - } - - .button--has-suffix.button--medium .button__label, - .button--caret.button--medium .button__label { - padding-inline-end: var(--wa-space-s); - } - - .button--has-suffix.button--large, - .button--caret.button--large { - padding-inline-end: var(--wa-space-m); - } - - .button--has-suffix.button--large .button__label, - .button--caret.button--large .button__label { - padding-inline-end: var(--wa-space-m); + .button__label { + padding: 0 var(--wa-space-l); + } } /*