[Feature] Utforsker `Stack` og `Inline`

[KenAJoh]

Utforsker litt Primitive layout-komponenter.

Note: Har "05" | "0" tilgjengelig som spacing, men er ikke lagt til i spacing-systemet vårt enda (TODO).

Primitive layout-komponenter

Dette er et konsept som vi ikke har utforsket så mye tidligere, men som flere systemer har valgt å adoptere. SanityUI var et de første jeg husker å ha sett, men flere systemer har nå valgt å adoptere dette. Det varierer fra system til system hvor abstrakt de ønsker å være med de forskjellige komponentene, men det finnes flere gjengangere i de fleste: Stack, Inline, Box, Container, Card og Grid. Når man etterhvert har en "komplett" kolleksjon av disse skal man i teorien kunne sette opp layout for de aller fleste løsningene med disse.

Inline og Stack

Noe av den mest vanlige css-koden man skriver er en enkel horisontal/vertikal flex-wrapper. Disse komponentene vil være en implementasjon av flex + spacingen vår.

Css/style

For å ikke skrive 60+ utility-klasser for bare disse to komponentene har jeg prøvd å gjøre mye i style med css-variabler. Hva tenker vi om å skrive en del styling slikt? Hva er ulempene med det? Polaris har begynt å løse mye av den nye stylingen slik, da for å optimalisere hvor mye css de leverer ut.

Inspirasjon:

• https://www.sanity.io/ui/docs/primitive/stack
• https://www.sanity.io/ui/docs/primitive/inline
• https://polaris.shopify.com/components/alpha-stack
• https://polaris.shopify.com/components/inline
• https://seek-oss.github.io/braid-design-system/components/Stack
• https://paste.twilio.design/components/stack/#vertical-stack

Resolves navikt/team-aksel#8

[github-actions[bot]]

Chromatic build-output:

• :clipboard: Review
• :tada: Storybook preview
• :no_entry_sign: Changes detected :no_entry_sign:, review endringer.

commit: 5c024a29f

[KenAJoh]

Forstår jeg det riktig at rowgap og colgap bare er klasser som brukes i eksempler/dokumentasjon?

Stemmer det, ironisk nok gjør de nå jobben som Stack og Inline løser.

[KenAJoh]

Ulempen er at dom-en blir rotete

Dette blir endre værre på eks grid der man kanskje har 8+ variabler.

En annen bekymring kan være at brukere utenfor React (de som bare kopierer css) får det vanskeligere. Men tror egentlig det er like lett å forholde seg til å sette style inline som dette oppsettet hvis man vil lage den selv:

className={cl(
          className,
          "navds-form-field",
          `navds-form-field--${size}`,
          "navds-search",
          {
            "navds-search--error": hasError,
            "navds-search--disabled": !!inputProps.disabled,
          }
)}

(Litt på siden, men har vært nice å endret prefix navds til bare eks a i v2)

[olejorgenbakken]

Skal vi innføre flere "stop" i grid-systemet? 👁️ 👃 👁️

 spacing?:
    | "32"
    | "24"
    | "20"
    | "18"
    | "16"
    | "14"
    | "12"
    | "11"
    | "10"
    | "9"
    | "8"
    | "7"
    | "6"
    | "5"
    | "4"
    | "3"
    | "2"
    | "1"
    | "05"
    | "0";

[KenAJoh]

Skal vi innføre flere "stop" i grid-systemet? 👁️ 👃 👁️

Er bare en kopi av spacing-systemet vårt, men kan være en ide å ha litt predefinerte verdier

[macbruker]

Jeg deler frykten til @andnorda og synes selv at layout med (moderne) CSS er ganske enkelt. Særlig når jeg jobber med utility-first CSS. Samtidig tror jeg det er mange som ikke deler entusiasmen eller interessen for området. De som har fått jobben med å bygge ting, uten å ha kompetansen. 🤷

Jeg er litt positiv til å teste denne typen komponenter og vil at vi lufter idéen med frontendmiljet vårt tidlig. En god effekt kan være at vi får mer gjenbruk av kode. Vi bør uansett forsøke å heve kompetansen gjennom fagstoff og læringsressurser.

[olejorgenbakken]

Jeg syns kanskje spesielt det er interessant for teamene uten frontend-utviklere.

Vi vet jo som @macbruker nevner at noen bare blir satt til oppgaven med å lage frontenden fordi ingen andre kan 😭

[andnorda]

Gjenbruk av kode kan være bra, men det har også en kostnad. Å finne riktig balanse her er vanskelig, og jeg er ingen ekspert, men hør gjerne på ~1 minutt med visdomsord fra en guru her: https://www.youtube.com/watch?v=PAAkCSZUG1c&t=568s

[andnorda]

Jeg snakket med en gjeng i Pensjon som spurte etter dette i dag, så det er definitivt et behov for støtte til layout der ute. Men om komponenter eller CSS er riktig vei å gå er for meg et åpent spørsmål. Kjør på med det dere har mest tro på!