js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove slot detection from buttons

Browse Source
This commit is contained in:
Cory LaViska
2024-03-21 13:55:40 -04:00
parent 879e912a5c
commit 58d14ed1d2
2 changed files with 52 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/button/button.component.ts
View File

@@ -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)}

111
src/components/button/button.styles.ts
View File

@@ -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);
}
}
/*