Mulig forenkling av styling til Accordion

[macbruker]

I forbindelse med oppdatering av Aksel fra v2 til v5 i et prosjekt har jeg dykket ned i stylingen av Accordion. Der oppdaget jeg at strekene er lagt på .navds-accordion__header med box-shadow. Kompleksiteten forsterkes ekstra av komposisjonen med scoping av custom properties, defaults og fallbacks, men det er ikke så viktig i denne diskusjonen.

Jeg er nysgjerrig på hvorfor strekene er løst med box-shadow 🤓

.navds-accordion {
  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border,var(--a-border-divider));
}
.navds-accordion__header {
 --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
  box-shadow: var(--__ac-accordion-header-shadow);

}
.navds-accordion__item:last-child>:where(.navds-accordion__header) {
    box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
}

Om det er aktuelt å forenkle, har jeg utforsket et forslag til løsning.

.navds-accordion {
  --__ac-accordion-border-color: var(--a-border-divider);
  border-top: 2px solid var(--__ac-accordion-border-color);
  border-bottom: 2px solid var(--__ac-accordion-border-color);
}
.navds-accordion__item:not(:last-child) {
  border-bottom: 2px solid var(--__ac-accordion-border-color);
}

[KenAJoh]

Mener å huske vi faktisk så på dette sammen når vi gikk for box shadow 🤔
Den varianten vi så på da hadde border på sidene også (tror jeg) som førte til dette problemet (demo)

For å unngå det problemet ble box-shadow brukt. Men varianten som endte i prod har ikke dette problemet lengre, så skal ikke være noe i veien for oppdatere til forslaget ditt 👏

Endringen kan skape problemer for apper som har overskrevet Accordion (f.eks https://www.nav.no/soknader), så kan legge det på listen over oppdateringen for neste major-versjon.