From d913e50cde04f0d0840b86d0bd47e3b46192207e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20R=C3=B8stg=C3=A5rd=20Flatner?= <42931448+adrianflatner@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:24:50 +0100 Subject: [PATCH] Komp-350-button (#629) * Ny mal button * Dokumentasjon * Fjerner linje * Legger til changeset * Typo --- .changeset/shaggy-penguins-punch.md | 5 + .../stories/components/button/Button.mdx | 155 +++++++++++++----- .../components/button/Button.stories.tsx | 30 +++- packages/react/src/theme/components/button.ts | 2 +- 4 files changed, 144 insertions(+), 48 deletions(-) create mode 100644 .changeset/shaggy-penguins-punch.md diff --git a/.changeset/shaggy-penguins-punch.md b/.changeset/shaggy-penguins-punch.md new file mode 100644 index 0000000000..365a56bfa0 --- /dev/null +++ b/.changeset/shaggy-penguins-punch.md @@ -0,0 +1,5 @@ +--- +"@kvib/react": patch +--- + +Fikser bug hvor secondary Button endret størrelse på "focus". diff --git a/apps/storybook/stories/components/button/Button.mdx b/apps/storybook/stories/components/button/Button.mdx index 0e05f1bd23..4d18586aa2 100644 --- a/apps/storybook/stories/components/button/Button.mdx +++ b/apps/storybook/stories/components/button/Button.mdx @@ -1,59 +1,126 @@ import { Title, Canvas, Meta, Story, Controls } from "@storybook/blocks"; import * as ButtonStories from "./Button.stories"; +import { DocsHeading, DocsAnatomy, DocsContainer, DocsStory, Feedback } from "../../templates"; +import { Text, Code, Box } from "@kvib/react/src/"; # Button -Her er en oversikt over utvalget av Knapper i KVIB. Disse er blant annet bygget opp ved bruk av desing tokens fra KVIB, eksempelvis farger og typografi. I dokumentasjonen følger beskrivelse av komponenten og bruksområde, sammen med kodeeksempler. - -I Kartverket har vi to sett med knappestiler.\ -Et nettsidesett og et forvaltningsett. For løsninger som skal gå inn under eller oppfattes som kartverket.no, skal man bruke det grønne nettsidesettet.\ -For karttjenester, forvaltningstjenester og lignende benytter vi oss av det blå settet. Dette er for å få en tydelig kontrast mot kartet. - -I tillegg til knappestiler har vi også knappetyper. Dette er for å få et tydelig knappehierarki som med visuelle grep illustrerer hva som er viktigst og hva knappen gjør. - -**Solid button (primary)** Brukes for den viktigste, ønsket eller avsluttende handling. Hovedregel er at det kun skal være en solid/primary Button per side. \ -**Outline button (secondary)** Viktig, men ikke viktigste eller fullført handling.\ -**Link button (tertiary)** Den mindre “viktige handlingen” Fin å bruke mot Primary for å illustrere tydelig handling. - -## Ta i bruk +Button brukes til å utføre en handling. Det kan for eksempel være å sende inn et skjema, beregne resultater eller åpne en modal. ```jsx import { Button } from "@kvib/react"; ``` -## Props + + +**Egnet til:** + +- Innsending av skjema +- Beregning av resultater +- Trigger for åpning av modal + +**Uegnet til:** + +- Trigger for vis/skjul av innhold (bruk heller Accordion) +- Navigasjon (bruk heller Link) +- Knapp med kun ikon (bruk heller IconButton) + + + + + +Alternativer + + + + I Kartverket har vi to sett med knappestiler. Et nettsidesett og et forvaltningsett. For løsninger som skal gå inn + under eller oppfattes som kartverket.no, skal man bruke det grønne nettsidesettet. For karttjenester, + forvaltningstjenester og lignende benytter vi oss av det blå settet. Dette er for å få en tydelig kontrast mot + kartet. + + } + story={} +/> + + + Primary + + Denne varianten skal brukes der løsningen har en tydelig primærfunksjon. Det kan være "Lagre" eller "Send + søknad". Som en hovedregel burde det bare være én hovedknapp på hver side. + + Secondary + + Secondary-varianten brukes som regel alle andre steder som ikke er primærfunksjon. Det betyr at de fleste + knappene i løsningene til Kartverket vil se slik ut. + + Tertiary + Tertiary kan brukes som et ustylet alternativ for handlinger som ikke trenger like mye oppmerksomhet. + Ghost + Ghost-varianten kan brukes som et alternativ til Secondary-varianten ved behov. + + } + story={} +/> + + + Ikoner kan legges til ved bruk av leftIcon og rightIcon. Teksten burde likevel være + deskriptiv nok til at knappen gir mening uten ikon. Det vil si at ikonet i utgangspunktet er illustrativt + tilskudd, men det kan ofte understøtte handlingen til knappen. Dersom du trenger en knapp med kun ikon, kan du ta + en titt på IconButton. + + } + story={} +/> + + + Dersom flere Button-komponenter skal stå samlet og grupperes, kan en bruke Stack eller ButtonGroup. Sistnevnte er + spesialisert for knapper og inneholder relevante props: + size,colorScheme,variant,isDisabled,isAttached, + orientation + ,spacing. + + } + story={} +/> + + + +Retningslinjer + + + +### Tekst på Button + +Den gjeldene anbefalingen for å gjøre en knapp godt lesbar er å bruke stor forbokstav og små bokstaver på resten av ordene (sentence case). + +### Antall handlinger + +En knapp bør ha en tydelig handlingsbeskrivelse. Hvis en knapp inneholder flere handlinger eller en lang beskrivelse, er det best å oppdele dette i flere separate knapper for å skape klarhet og forbedre brukeropplevelsen. +Det vil si at det bør være én handling per knapp og heller flere klikk for brukeren. + +### Varianter i gruppe + +Bruk samme farge på knappene i en gruppe. Det er også viktig å være konsekvent med bruk av ikoner i en gruppe. Det vil si at alle knappene i en gruppe bør ha ikon eller ingen av dem. + +Bruk forskjellige varianter på knappene dersom handlingene har motsatt hensikt. For eksempel kan "Lagre" være primary, mens "Slett" er secondary. + + + +Props - -## Størrelser - - - -## Varianter - - - -## States - - - -## Button med tekst og ikon - - - -## Gruppering av Buttons (ButtonGroup) - -Dersom flere Button-komponenter skal stå samlet og grupperes, kan en bruke _Stack_ eller _ButtonGroup_. -ButtonGroup har noen flere props som er tilpasset til å gruppere Buttons fremfor hva Stack har. - -Følgende props er gjeldende for ButtonGroup: - -- **size**, **colorScheme**, **variant** og **isDisabled**: Samme description som for _Button_-props. Ved å sette disse vil de bli gjeldene for alle knappene som er inni. -- **isAttached**. _Type: Boolean (default false)_: smelter knappene sammen ved at border-radius fjernes i mellom Buttons (se eksempelet). -- **orientation** _Type: String [horizontal(default), vertical]_: velge hvilken retning knappene skal plasseres -- **spacing** _Type: Number (default '0.5rem')_: legger til space mellom knappene. - - diff --git a/apps/storybook/stories/components/button/Button.stories.tsx b/apps/storybook/stories/components/button/Button.stories.tsx index 943e94c370..6460980e37 100644 --- a/apps/storybook/stories/components/button/Button.stories.tsx +++ b/apps/storybook/stories/components/button/Button.stories.tsx @@ -7,7 +7,7 @@ const meta: Meta = { parameters: { docs: { story: { inline: true }, - canvas: { sourceState: "shown" }, + canvas: { sourceState: "hidden" }, }, }, argTypes: { @@ -59,13 +59,37 @@ type Story = StoryObj; export const Button: Story = { args: { children: "Klikk her" }, + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, render: (args) => {args.children}, }; +export const ButtonColors: Story = { + args: {}, + render: (args) => ( + + Nettside + + Forvaltning + + + ), +}; + export const ButtonVariants: Story = { args: { children: "Klikk her" }, render: (args) => ( - + {args.children} @@ -96,7 +120,7 @@ export const ButtonStates: Story = { ), }; -export const ButtonWithIcon: Story = { +export const ButtonIcons: Story = { args: { children: "Klikk her" }, render: (args) => ( diff --git a/packages/react/src/theme/components/button.ts b/packages/react/src/theme/components/button.ts index 92f01e50eb..8f4d7607ea 100644 --- a/packages/react/src/theme/components/button.ts +++ b/packages/react/src/theme/components/button.ts @@ -95,7 +95,7 @@ const variantOutline = defineStyle((props) => { }, _active: { bg: `${c}.600`, - border: "0px", + borderColor: `${c}.600`, color: colors.white, _disabled: { bg: colors.white,