From 9aa9ba06fbb7fb765100dc84fe0380b25d8e9d7e Mon Sep 17 00:00:00 2001 From: Peter-Paul van Gemerden Date: Wed, 5 Feb 2025 10:31:32 +0100 Subject: [PATCH] fix(button-icon): without text (#766) * fix(button-icon): default --button-icon-font-size to 0 * fix(button-icon): default --buton-icon-gap to 0 * docs(button-icon): improve docs about icon buttons with and without text * chore: remove button-icon styles for input * docs: fix links --- .../components/button-icon-only/+page.svelte | 13 +- .../components/button-icon/+page.svelte | 221 ----------- docs/src/routes/components/button/+page.md | 4 +- .../routes/components/button/icon/+page.md | 363 ++++++++++++++++++ .../components/button/icon/test/+page.md | 202 ++++++++++ .../form-combined-fields/+page.svelte | 2 +- manon/button-icon-only.scss | 5 +- manon/button-icon-variables.scss | 2 + manon/button-icon.scss | 5 +- 9 files changed, 578 insertions(+), 239 deletions(-) delete mode 100644 docs/src/routes/components/button-icon/+page.svelte create mode 100644 docs/src/routes/components/button/icon/+page.md create mode 100644 docs/src/routes/components/button/icon/test/+page.md diff --git a/docs/src/routes/components/button-icon-only/+page.svelte b/docs/src/routes/components/button-icon-only/+page.svelte index 6014cefb..ac2af1ff 100644 --- a/docs/src/routes/components/button-icon-only/+page.svelte +++ b/docs/src/routes/components/button-icon-only/+page.svelte @@ -30,12 +30,11 @@

Benodigde stappen:

  1. - Voeg de class icon toe aan de knop om gebruik te maken van de visuele weergave - van een icoonknop. + Voeg de class icon-only toe aan de knop om gebruik te maken van de visuele weergave + van een icoonknop zonder achtergrond.
  2. - Voeg de class van het gewenste icoon toe op de knop. Voor meer informatie zie: - Iconen. + Voeg een icoon toe aan de knop. Zie voor meer informatie: Icoonknop.
@@ -163,14 +162,14 @@ Lorem ipsum Kat + `} />

Link als knop met img

Visuele weergave:

- Lorem ipsum Kat @@ -178,7 +177,7 @@ Lorem ipsum Kat +Lorem ipsum Kat `} /> diff --git a/docs/src/routes/components/button-icon/+page.svelte b/docs/src/routes/components/button-icon/+page.svelte deleted file mode 100644 index c5a3098d..00000000 --- a/docs/src/routes/components/button-icon/+page.svelte +++ /dev/null @@ -1,221 +0,0 @@ - - - - - - Icoonknoppen - - -
- - - - -
-
-
-

Icoonknoppen

-

Subtiele knopweergave.

- -

Benodigde stappen:

-
    -
  1. - Voeg de class icon toe aan de knop om gebruik te maken van de visuele weergave - van een icoonknop. -
    2. -
  2. - Voeg de class van het gewenste icoon toe op de knop. Voor meer informatie zie: - Iconen. -
    3. -
- -

Aandachtspunten:

-
    -
  • - Icoonknoppen geven geen tekst weer. Voeg wel altijd de knoptekst toe voor gebruikers die - gebruik maken van hulptechnologiën. -
    • -
-
- -
-

Voorbeelden

-

button

-

Visueel voorbeeld pseudo-element op button

-

- Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd - omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een - van de overige voorbeelden. -

- -

HTML-voorbeeld

- Aan- of uitschakelen`} - /> - -

Visueel voorbeeld button met span

- - -

HTML-voorbeeld

- - Aan- of uitschakelen - - `} - /> - -

Visueel voorbeeld svg binnen een button

-

- Voorbeeld met een svg-icoon uit de tabler iconen set. -

- -

HTML-voorbeeld

- - - Aan- of uitschakelen - - `} - /> - -

Icoon binnen linka visueel weergegeven als knop

-

Visueel voorbeeld

- Inloggen -

HTML-voorbeeld

- Inloggen`} - /> - -

Visueel voorbeeld, svg binnen een link, visueel weergegeven als knop

-

- Voorbeeld met een svg-icoon uit de tabler iconen set. -

- - - Inloggen - - -

HTML-voorbeeld

- - - Inloggen - - `} - /> -
- -
-

Bijbehorende bestanden

-

- Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

- -

Importeer component via npm

-

CSS-voorbeeld:

- -
-
-
-
diff --git a/docs/src/routes/components/button/+page.md b/docs/src/routes/components/button/+page.md index 10b5d636..fd32dfaf 100644 --- a/docs/src/routes/components/button/+page.md +++ b/docs/src/routes/components/button/+page.md @@ -76,12 +76,12 @@ onderstaande tabel staan enkele veelvoorkomende voorbeelden. - [Basisweergave](/components/button/button-base) - [Knoppen groeperen](/components/button/button-container) - [Call to action button](/components/button/call-to-action) +- [Icoonknoppen](/components/button/icon) +- [Icoonknoppen zonder achtergrond](/components/button-icon-only) ### Overige soorten knoppen: - [Dropdown button](/components/button-dropdown) - [Ghost button](/components/button-ghost) - [Destructieve knop](/components/button-destructive) -- [Icoonknoppen](/components/button-icon) -- [Icoonknoppen zonder achtergrond](/components/button-icon-only) - [Terug naar hoofdmenu](/components/button-to-top) diff --git a/docs/src/routes/components/button/icon/+page.md b/docs/src/routes/components/button/icon/+page.md new file mode 100644 index 00000000..5f725f98 --- /dev/null +++ b/docs/src/routes/components/button/icon/+page.md @@ -0,0 +1,363 @@ +--- +title: Icoonknoppen +nav: + - Introductie: "#introduction" + - Met tekst: "#with-text" + - Zonder tekst: "#without-text" + - Bijbehorende bestanden: "#requirements" + - Gerelateerde pagina's: "#related" +--- + +

Icoonknoppen

+ +## Benodigde stappen + +1. Kies het juiste element voor de knop. Zie eventueel [HTML-element kiezen](/components/button#button-html). +2. Kies het soort icoon om toe te voegen. Zie [Iconen](/components/icons). + - Zie bij het gebruik van een icoon-lettertype de "met `span`" voorbeelden. + - Zie bij het gebruik van een SVG-icoon de "met `svg`" voorbeelden. +3. Kies de juiste aanpak voor het toevoegen van een icoon aan de knop. + - Krijgt de knop zowel tekst als een icoon? Zie dan [Met tekst](#with-text). + - Krijgt de knop alleen een icoon? Zie dan [Zonder tekst](#without-text). + - Is een subtielere weergave nodig met alléén een icoon zonder het visuele uiterlijk van een knop? Zie dan [Icoonknoppen zonder achtergrond](/components/button-icon-only). + +

Met tekst

+ +### Aandachtspunten + +- Is het icoon **decoratief**? Verberg het dan voor toegankelijkheids-hulpmiddelen door `aria-hidden="true"` aan het icoon toe te voegen. + - Een icoon is decoratief wanneer het dezelfde informatie overbrengt als de tekst van de knop. Bijvoorbeeld: een "Help"-knop met een vraagteken-icoon. +- Is het icoon **informatief**? Geef het dan in plaats van `aria-hidden="true"` een `aria-label` dat dezelfde informatie overbrengt als wat het icoon visueel communiceert. + - Een icoon is informatief wanneer het visueel extra informatie overbrengt, die niet ook al door de knoptekst overgebracht wordt. Bijvoorbeeld: een knop met de tekst "Verplaats" en een pijl-icoon dat een richting aangeeft. + +De onderstaande voorbeelden gaan ervan uit dat het icoon **decoratief** is. + +### `button` met `span` + +#### Visueel voorbeeld + + + +#### HTML-voorbeeld + +```html + +``` + +### `button` met `svg` + +#### Visueel voorbeeld + + + +#### HTML-voorbeeld + +```html + +``` + +### Link-knop met `span` + +#### Visueel voorbeeld + + + + Inloggen + + +#### HTML-voorbeeld + +```html + + + Inloggen + +``` + +### Link-knop met `svg` + +#### Visueel voorbeeld + + + + Inloggen + + +#### HTML-voorbeeld + +```html + + + Inloggen + +``` + +

Zonder tekst

+ +### Aandachtspunten + +Een icoon op een knop zonder tekst is per definitie **informatief**. Zorg er daarom altijd voor dat de knop een toegankelijk naam heeft. Dit kan bijvoorbeeld middels een `aria-label` op het icoon of middels visueel verborgen tekst naast het icoon. Visueel verborgen tekst heeft de voorkeur, omdat die ook als visuele fallback kan dienen voor het icoon wanneer CSS en afbeeldingen niet geladen konden worden. + +### `button` met `span` + +#### Visueel voorbeeld + + + +#### HTML-voorbeeld + +```html + +``` + +### `button` met `svg` + +#### Visueel voorbeeld + + + +#### HTML-voorbeeld + +```html + +``` + +### Link-knop met `span` + +#### Visueel voorbeeld + + + + + + +#### HTML-voorbeeld + +```html + + + + +``` + +### Link-knop met `svg` + +#### Visueel voorbeeld + + + + + + +#### HTML-voorbeeld + +```html + + + + +``` + +### `button` met pseudo-content-icoon + +

+ Waarschuwing: Het gebruik van pseudo-content direct op de button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. +

+ +Gebruik bij voorkeur één van de andere opties. Geef anders de knop een aria-label met dezelfde inhoud als de reguliere knop-tekst om te voorkomen dat toegankelijkheids-hulpmiddelen het pseudo-content-icoon als tekst proberen aan te bieden aan de gebruiker. + +#### Visueel voorbeeld + + + +#### HTML-voorbeeld + +```html + +``` + +### Link-knop met pseudo-content-icoon + +

+ Waarschuwing: Het gebruik van pseudo-content direct op de link-knop wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. +

+ +Gebruik bij voorkeur één van de andere opties. Geef anders de link een aria-label met dezelfde inhoud als de reguliere knop-tekst om te voorkomen dat toegankelijkheids-hulpmiddelen het pseudo-content-icoon als tekst proberen aan te bieden aan de gebruiker. + +#### Visueel voorbeeld + + + Aan- of uitschakelen + + +#### HTML-voorbeeld + +```html + + Aan- of uitschakelen + +``` + +

Bijbehorende bestanden

+ +Zie voor meer informatie over importeren en instellen van componenten: [Componenten gebruiken en styling toevoegen](/documentation/import-styling). + +### Importeer component via npm + +#### CSS-voorbeeld + +```scss +@use "@minvws/manon/button-base"; +@use "@minvws/manon/icon"; +@use "@minvws/manon/visually-hidden"; +@use "@minvws/manon/button-icon"; +``` + + + +- [Test- en voorbeelden-pagina](/components/button/icon/test) diff --git a/docs/src/routes/components/button/icon/test/+page.md b/docs/src/routes/components/button/icon/test/+page.md new file mode 100644 index 00000000..8f7fd912 --- /dev/null +++ b/docs/src/routes/components/button/icon/test/+page.md @@ -0,0 +1,202 @@ +--- +title: Testpagina icoonknoppen +breadcrumb: Testpagina +--- + +# Testpagina icoonknoppen + +## Met tekst + +### `button` met `span`-icoon + + + +### `button` met `svg`-icoon + + + +### `a` met `span`-icoon + + + + Zoeken + + +### `a` met `svg`-icoon + + + + Zoeken + + +## Zonder tekst + +### `button` met pseudo-content-icoon + + + +### `button` met `span`-icoon + + + +### `button` met `svg`-icoon + + + +### `a.button` met pseudo-content-icoon + +Zoeken + +### `a.button` met `span`-icoon + + + + + + +### `a.button` met `svg`-icoon + + + + + + +## Zonder achtergrond (`icon-only`) + +### `button.icon-only` met pseudo-content-icoon + + + +### `button.icon-only` met `span`-icoon + + + +### `button.icon-only` met `svg`-icoon + + + +### `a.button.icon-only` met pseudo-content-icoon + +Zoeken + +### `a.button.icon-only` met `span`-icoon + + + + + + +### `a.button.icon-only` met `svg`-icoon + + + + + diff --git a/docs/src/routes/components/form-combined-fields/+page.svelte b/docs/src/routes/components/form-combined-fields/+page.svelte index ff4abe97..e6d4b163 100644 --- a/docs/src/routes/components/form-combined-fields/+page.svelte +++ b/docs/src/routes/components/form-combined-fields/+page.svelte @@ -43,7 +43,7 @@
  1. Gecombineerde velden worden vaak gebruikt met icoonknoppen. Voor meer informatie zie: - Icoonknoppen. + Icoonknoppen.
diff --git a/manon/button-icon-only.scss b/manon/button-icon-only.scss index 1c85ac46..7fa2d580 100644 --- a/manon/button-icon-only.scss +++ b/manon/button-icon-only.scss @@ -8,10 +8,7 @@ @use "mixins/icon-only"; button, -a.button, -input[type="button"], -input[type="submit"], -input[type="reset"] { +a.button { &.icon-only { @include icon-only.icon-only("button-icon-only-"); } diff --git a/manon/button-icon-variables.scss b/manon/button-icon-variables.scss index 41ed5d0a..18c1d90a 100644 --- a/manon/button-icon-variables.scss +++ b/manon/button-icon-variables.scss @@ -11,4 +11,6 @@ "button-base-focus-" ); @include button.link-button-styling-variables("button-icon-", "button-base-"); + --button-icon-font-size: 0; + --button-icon-gap: 0; } diff --git a/manon/button-icon.scss b/manon/button-icon.scss index efbeeba8..6c8ef7b5 100644 --- a/manon/button-icon.scss +++ b/manon/button-icon.scss @@ -7,10 +7,7 @@ @use "mixins/outline"; button, -a.button, -input[type="button"], -input[type="submit"], -input[type="reset"] { +a.button { &.icon { gap: 0; min-width: 0;