Mønster/hjelpekomponent ButtonGroup

[piofinn]

TL;DR: En komponent for en gruppe av knapper, som representerer et mønster for hvordan flere knapper skal stå sammen.

🗺️ Bakgrunn

Etter henvendelsen i supportkanalen om skviste knapper i CookieConsent-dialogen ble jeg inspirert til å ta en ny titt på konseptet "gruppe av knapper". Det er noe som har vært diskutert løst for lenge siden, men her tror jeg det kunne ha utgjort en forskjell. Konseptet er altså et mønster for hvordan flere knapper funker sammen, og en hjelpekomponent for å løse dette enkelt.

Nedenfor er mønsteret implisitt ut fra oppførselen til komponenten. Som skissert går knapper over til å vises under hverandre, i full bredde, når beholderen de er inne i er under en gitt bredde (350px i eksempelkoden).

💡 Løsningsforslag

Forslaget består av to tilskudd til kodebasen:

• En ny komponent, ButtonGroup
• En liten endring i stilene til Button

ButtonGroup

En ny komponent som kun er en helt enkel wrapper man putter knappene som skal stå sammen inn i. Denne komponenten har følgende egenskaper:

• Flex-layout med passende gap både horisontalt og vertikalt
• Flex-wrap, for å unngå situasjonen fra CookieConsent
• Har container-type: inline-size for å kunne styre knappeoppførsel basert på egen størrelse

Endringer i Button

Knappene får lagt inn en container query som setter bredden deres til 100% når de er inne i en ButtonGroup under en viss bredde.

✨ Eksempel

Se en tenkt implementasjon av dette i draft-PR #4504

<ButtonGroup>
    <Button variant="secondary">Godta alle</Button>
    <Button variant="secondary">Godta mine valg</Button>
</ButtonGroup>

Koden over resulterer i følgende oppførsel i kontekst av CookieConsent-dialogen (merk at knappene bryter basert på bredden til dialogen, ikke skjermen):

Skjermopptak.2025-01-27.kl.21.11.07.mov

[zenabii]

Er ikke dette noe som egentlig kan løses out of the box med Flex component? :) Så dokumenterer man det som et konkret mønster istedenfor enda én komponent med samme logikk til en eksisterende komponent(altså flex) pluss mønster.

[piofinn]

@zenabii det eneste man ikke får direkte med Flex er container query-en som sørger for at knappene tar full bredde under en gitt bredde for containeren. Men det er jo et veldig godt poeng at vi nå har en Flex-komponent som fint kunne vært brukt som base for dette.

Hvis man skulle løst dette med Flex-komponenten ville det blitt noe á la dette (med unit-verdier for gap):

<Flex rowGap={15} colGap={20} style={{ container: "--button-group / inline-size" }}>
    <Button variant="secondary">Godta alle</Button>
    <Button variant="secondary">Godta mine valg</Button>
</Flex>

Hadde det bare vært selve gap-verdiene (og flex-direction) som utgjorde mønsteret hadde jeg vært veldig enig i at det kunne løses på en per bruk-basis. Men jeg er litt mer skeptisk når det kommer til container-aspektet: Det føles litt for spesifikt og obskurt å be utviklerne om å sette det selv, og jeg har heller ikke så lyst til å lage props for så spesifikk bruk av Flex-komponenten. Da vil jeg heller lage en hjelpekomponent som en tynn wrapper rundt Flex.

Edit: Oppdaterte forslaget mitt til å bruke Flex-komponenten internt. Er i alle fall ingen grunn til å skrive egen CSS for funksjonaliteten som allerede dekkes av Flex 😊