Bug: Checkbox nested i Table

[cskrov]

Tilbakemelding

Er det noen grunn til at <Checkbox /> har denne stylen?

.navds-table .navds-checkbox .navds-checkbox__label {
    padding: 0;
}

Den fjerner all luft i <CheckboxGroup /> med flere checkboxer i tabeller.

For å jobbe seg rundt dette må man lage spesialiserte versjoner av checkbox-komponenter, avhengig av om de skal brukes i eller utenfor tabeller.

[KenAJoh]

Hei 👋 Gjelder dette bruk av checkbox inne i en Table.ExpandableRow eller generelt i Table.DataCell? Kom gjerne med noen screenshots slik at vi kan se hvor feilen oppstår 🙌

[cskrov]

Vi bruker <Checkbox /> i denne strukturen (litt forenklet for lesbarhet):

<Table>
    <Table.Header>
        <Table.Row>
            <Table.ColumnHeader>
                <CheckboxGroup>
                    <Checkbox />
                </CheckboxGroup>
            </Table.ColumnHeader>
        </Table.Row>
    </Table.Header>
</Table>

Har ikke testet dette andre steder i tabellen, men ifølge CSSen som forårsaker det ser ikke plassering i tabellen ut til å være relevant.

[KenAJoh]

Kommer ikke så tydelig frem i skjermbildet her, men er CheckboxGroup inne i en popover (eller lignende) som bare vises ved egen interaksjon. Finnes det et testmiljø vi kunne sett dette i aksjon?

[cskrov]

<CheckboxGroup /> er i en popover i vårt tilfelle, men det har ingen betydning.

Her er kode med <CheckboxGroup /> i en superenkel tabell.

[cskrov]

Her er screenshots med og uten padding.

Stylingen som fjerner padding er aktiv:

.navds-table .navds-checkbox .navds-checkbox__label {
    padding: 0;
}

Stylingen som fjerner padding er inaktiv:

.navds-table .navds-checkbox .navds-checkbox__label {
    /* padding: 0; */
}

[KenAJoh]

Er et valg vi har tatt for at man ikke skal kunne bruke CheckboxGroup inne i Table.DataCell/Table.HeaderCell, men bruken med filter i Popover bør fortsatt kunne fungere. Skal få undersøkt hvordan vi løser dette på best mulig måte 👍

[cskrov]

Det var en litt vel subtil måte å kommunisere at det ikke er ønsket bruk av <CheckboxGroup /> for oss i hvert fall.

Foreslår å advare om at det ikke er god praksis i de fleste tilfeller i dokumentasjonen, og samtidig la de som har spesifikke behov bruke komponenten som vanlig.

[cskrov]

Det er forresten skrevet i dokumentasjonen som om <CheckboxGroup /> kan brukes i tabeller.

Skjule label visuelt
Checkbox skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der checkbox'en får ledeteksten sin fra tabellheaderen--bruk da aria-label eller aria-labelledby.