mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

use data attributes (#1928)

current^2
Konnor Rogers 2024-03-25 13:14:50 -04:00 zatwierdzone przez GitHub
rodzic 4aa5e9c1f2
commit ff2e0486b4
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
2 zmienionych plików z 19 dodań i 19 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

18
src/components/button-group/button-group.component.ts
Wyświetl plik

@ -30,22 +30,22 @@ export default class SlButtonGroup extends ShoelaceElement {
private handleFocus(event: Event) { private handleFocus(event: Event) {
const button = findButton(event.target as HTMLElement); const button = findButton(event.target as HTMLElement);
button?.classList.add('sl-button-group__button--focus'); button?.toggleAttribute('data-sl-button-group__button--focus', true);
} }
private handleBlur(event: Event) { private handleBlur(event: Event) {
const button = findButton(event.target as HTMLElement); const button = findButton(event.target as HTMLElement);
button?.classList.remove('sl-button-group__button--focus'); button?.toggleAttribute('data-sl-button-group__button--focus', false);
} }
private handleMouseOver(event: Event) { private handleMouseOver(event: Event) {
const button = findButton(event.target as HTMLElement); const button = findButton(event.target as HTMLElement);
button?.classList.add('sl-button-group__button--hover'); button?.toggleAttribute('data-sl-button-group__button--hover', true);
} }
private handleMouseOut(event: Event) { private handleMouseOut(event: Event) {
const button = findButton(event.target as HTMLElement); const button = findButton(event.target as HTMLElement);
button?.classList.remove('sl-button-group__button--hover'); button?.toggleAttribute('data-sl-button-group__button--hover', true);
} }
private handleSlotChange() { private handleSlotChange() {
@ -56,11 +56,11 @@ export default class SlButtonGroup extends ShoelaceElement {
const button = findButton(el); const button = findButton(el);
if (button) { if (button) {
button.classList.add('sl-button-group__button'); button.toggleAttribute('data-sl-button-group__button', true);
button.classList.toggle('sl-button-group__button--first', index === 0); button.toggleAttribute('data-sl-button-group__button--first', index === 0);
button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1); button.toggleAttribute('data-sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
button.classList.toggle('sl-button-group__button--last', index === slottedElements.length - 1); button.toggleAttribute('data-sl-button-group__button--last', index === slottedElements.length - 1);
button.classList.toggle('sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button'); button.toggleAttribute('data-sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button');
} }
}); });
} }

20
src/components/button/button.styles.ts
Wyświetl plik

@ -546,30 +546,30 @@ export default css`
* buttons and we style them here instead. * buttons and we style them here instead.
*/ */
:host(.sl-button-group__button--first:not(.sl-button-group__button--last)) .button { :host([data-sl-button-group__button--first]:not([data-sl-button-group__button--last])) .button {
border-start-end-radius: 0; border-start-end-radius: 0;
border-end-end-radius: 0; border-end-end-radius: 0;
} }
:host(.sl-button-group__button--inner) .button { :host([data-sl-button-group__button--inner]) .button {
border-radius: 0; border-radius: 0;
} }
:host(.sl-button-group__button--last:not(.sl-button-group__button--first)) .button { :host([data-sl-button-group__button--last]:not([data-sl-button-group__button--first])) .button {
border-start-start-radius: 0; border-start-start-radius: 0;
border-end-start-radius: 0; border-end-start-radius: 0;
} }
/* All except the first */ /* All except the first */
:host(.sl-button-group__button:not(.sl-button-group__button--first)) { :host([data-sl-button-group__button]:not([data-sl-button-group__button--first])) {
margin-inline-start: calc(-1 * var(--sl-input-border-width)); margin-inline-start: calc(-1 * var(--sl-input-border-width));
} }
/* Add a visual separator between solid buttons */ /* Add a visual separator between solid buttons */
:host( :host(
.sl-button-group__button:not( [data-sl-button-group__button]:not(
.sl-button-group__button--first, [data-sl-button-group__button--first],
.sl-button-group__button--radio, [data-sl-button-group__button--radio],
[variant='default'] [variant='default']
):not(:hover) ):not(:hover)
) )
@ -584,13 +584,13 @@ export default css`
} }
/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */ /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
:host(.sl-button-group__button--hover) { :host([data-sl-button-group__button--hover]) {
z-index: 1; z-index: 1;
} }
/* Focus and checked are always on top */ /* Focus and checked are always on top */
:host(.sl-button-group__button--focus), :host([data-sl-button-group__button--focus]),
:host(.sl-button-group__button[checked]) { :host([data-sl-button-group__button[checked]]) {
z-index: 2; z-index: 2;
} }
`; `;