Skip to content

Commit

Permalink
fix: icon button example and behaviour (#669)
Browse files Browse the repository at this point in the history 
* Adds missing background to icons docs page and fixes icon font family fallback

* Fixes span with icon in button styling issues, adds span example, adds aria label on button with class example to improve accessibility

* Fixes link as button with img visual example

* Adds icon within link example

* adds and updates icon examples. Fixes hover state on icon-only

* Solves issue where link styled as a button lose their icon. Updates icon and icon test page

* Fixes focus state outline and missing icon on hovered visisted links with an icon

* Fixes link styles, icon only text color, removes html examples from icons test page, fixes code base box-sizing behaviour

* Removes test code

* Updates button icon examples, icon styling, and button to top styling

* Updates icon docs

* Linter and build fixes

* chore: fix broken links

* fix: button-to-top squareness and padding (#683)

* Fixes focus and active state

---------

Co-authored-by: Peter-Paul van Gemerden <[email protected]>
  • Loading branch information
@HeleenSG @ppvg
HeleenSG and ppvg authored Oct 11, 2024
1 parent 8f65d93 commit 018a6ef
Show file tree
Hide file tree
Showing 16 changed files with 825 additions and 412 deletions.
102 changes: 96 additions & 6 deletions docs/src/routes/(docs)/components/button-icon-only/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</ul>
</SideMenu>

<article id="button-base">
<article id="button-base" class="visually-grouped">
<div>
<section id="introduction">
<h1>Icoonknoppen zonder achtergrond</h1>
Expand Down Expand Up @@ -50,16 +50,106 @@

<section id="examples">
<h2><code>button</code></h2>
<h3>Visuele weergave:</h3>

<button class="icon-only icon-cat">Lorem ipsum</button>
<h3>pseudo-element op button</h3>
<p class="warning" role="group" aria-label="waarschuwing">
<span>Waarschuwing:</span> 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.
</p>

<h4>Visueel voorbeeld</h4>
<button class="icon icon-only icon-search" aria-label="Zoeken">Zoeken</button>

<h3>HTML-voorbeeld:</h3>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`<button class="icon icon-only icon-search" aria-label="Zoeken">Zoeken</button>`}
/>

<h3><code>button</code> met <code>span</code></h3>
<h4>Visueel voorbeeld</h4>
<button class="icon-only">
<span class="icon icon-search" aria-hidden="true"></span>Zoeken
</button>

<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`
<button class="icon-only icon-cat">Lorem ipsum</button>
`}
<button class="icon-only">
<span class="icon icon-search" aria-hidden="true"></span>Zoeken
</button>
`}
/>

<h3><code>svg</code> binnen een <code>button</code></h3>

<p>
Voorbeeld met een svg-icoon uit de <a href="https://tabler.io/icons" rel="external"
>tabler iconen set</a
>.
</p>

<p>Aandachtspunten:</p>
<ul>
<li>
Als het icoon puur decoratief is, kan deze verborgen worden voor
screenreader-gebruikers. Dit kan doormiddel van een <code>aria-hidden="true"</code> op de
svg.
</li>
<li>
Als het icoon informatief is dient deze een kort en duidelijk label te krijgen als
alternatief voor screenreader-gebruikers. Bijvoorbeeld:
<code>aria-label="Gebruikersprofiel"</code>. Het icoon dient in dit geval ook
<code>role="img"</code> te krijgen.
</li>
</ul>
<h4>Visueel voorbeeld</h4>

<button class="icon-only">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-search"
aria-hidden="true"
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"
/><path d="M21 21l-6 -6" /></svg
>
Zoeken
</button>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`
<button class="icon-only">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-search"
aria-hidden="true">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
<path d="M21 21l-6 -6" />
</svg>
Zoeken
</button>
`}
/>

<h2><code>button</code> met <code>img</code></h2>
Expand Down
190 changes: 127 additions & 63 deletions docs/src/routes/(docs)/components/button-icon/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</ul>
</SideMenu>

<article id="button-base">
<article id="button-base" class="visually-grouped">
<div>
<section id="introduction">
<h1>Icoonknoppen</h1>
Expand Down Expand Up @@ -49,47 +49,150 @@
</section>

<section id="examples">
<h2><code>button</code></h2>
<h3>Visuele weergave:</h3>
<h2>Voorbeelden</h2>
<h3><code>button</code></h3>
<h4>Visueel voorbeeld pseudo-element op button</h4>
<p class="warning" role="group" aria-label="waarschuwing">
<span>Waarschuwing:</span> 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.
</p>
<button class="icon icon-on-off" aria-label="Aan- of uitschakelen"
>Aan- of uitschakelen</button
>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`<button class="icon icon-on-off" aria-label="Aan- of uitschakelen">Aan- of uitschakelen</button>`}
/>

<button class="icon icon-cat">Lorem ipsum</button>
<h4>Visueel voorbeeld <code>button</code> met <code>span</code></h4>
<button>
<span class="icon icon-on-off" aria-hidden="true"></span>Aan- of uitschakelen
</button>

<h3>HTML-voorbeeld:</h3>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`
<button class="icon icon-cat">Lorem ipsum</button>
`}
<button>
<span class="icon icon-on-off" aria-hidden="true"></span>Aan- of uitschakelen
</button>
`}
/>

<h2><code>button</code> met <code>img</code></h2>
<h3>Visuele weergave:</h3>

<button class="icon">
Lorem ipsum <img src="$img/cat-white.svg" alt="Kat" />
<h4>Visueel voorbeeld <code>svg</code> binnen een <code>button</code></h4>
<p>
Voorbeeld met een svg-icoon uit de <a href="https://tabler.io/icons" rel="external"
>tabler iconen set</a
>.
</p>
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-power"
aria-hidden="true"
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
d="M7 6a7.75 7.75 0 1 0 10 0"
/><path d="M12 4l0 8" /></svg
>
Aan- of uitschakelen
</button>

<h3>HTML-voorbeeld:</h3>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`
<button href="{base}/components/button-icon" class="icon">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></button>
`}
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-power"
aria-hidden="true">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 6a7.75 7.75 0 1 0 10 0"/>
<path d="M12 4l0 8" />
</svg>
Aan- of uitschakelen
</button>
`}
/>

<h2>Link als knop met <code>img</code></h2>
<h3>Visuele weergave:</h3>

<a href="{base}/components/button-icon" class="button icon"
>Lorem ipsum <img src="$img/cat-white.svg" alt="Kat" /></a
<h3>Icoon binnen link<code>a</code> visueel weergegeven als knop</h3>
<h4>Visueel voorbeeld</h4>
<a href="./button-icon" class="button"
><span class="icon icon-user" aria-hidden="true"></span>Inloggen</a
>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`<a href="./button-icon" class="button"><span class="icon icon-user" aria-hidden="true"></span>Inloggen</a>`}
/>

<h4>Visueel voorbeeld, <code>svg</code> binnen een link, visueel weergegeven als knop</h4>
<p>
Voorbeeld met een svg-icoon uit de <a href="https://tabler.io/icons" rel="external"
>tabler iconen set</a
>.
</p>
<a href="./button-icon" class="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-user"
aria-hidden="true"
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"
/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg
>
Inloggen
</a>

<h3>HTML-voorbeeld:</h3>
<h4>HTML-voorbeeld</h4>
<Code
language="html"
code={`
<a href="{base}/components/button-icon" class="button icon">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></a>
`}
<a href="./button-icon" class="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-user"
aria-hidden="true">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
Inloggen
</a>
`}
/>
</section>

Expand All @@ -113,45 +216,6 @@
`}
/>
</section>

<section id="variables">
<h2>Instelbare variabelen</h2>
<ul>
<li>
Knop, hover, active, focus.
<ul>
<li>
<a href="{base}/documentation/variables#background-color">background-color</a>
</li>
<li><a href="{base}/documentation/variables#text-color">text-color</a></li>
<li>
<a href="{base}/documentation/variables#border-width">border-width</a>
</li>
<li>
<a href="{base}/documentation/variables#border-style">border-style</a>
</li>
<li>
<a href="{base}/documentation/variables#border-color">border-color</a>
</li>
<li>
<a href="{base}/documentation/variables#border-radius">border-radius</a>
</li>
<li>
<a href="{base}/documentation/variables#outline-style">outline-style</a>
</li>
<li>
<a href="{base}/documentation/variables#outline-color">outline-color</a>
</li>
<li>
<a href="{base}/documentation/variables#outline-width">outline-width</a>
</li>
<li>
<a href="{base}/documentation/variables#outline-offset">outline-offset</a>
</li>
</ul>
</li>
</ul>
</section>
</div>
</article>
</main>
Loading

0 comments on commit 018a6ef

Please sign in to comment.