Skip to main content

3 posts tagged with "button"

Show all Tags

Aria-Attributen bei Button- und Link

· 2 minutes of reading time
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Bei der Entwicklung von KoliBri ist die Frage aufgekommen, welche Aria-Attributen bei den Button- und Link-Komponenten unterstützen werden sollen.

In der folgenden Tabelle wir eine Übersicht über die Unterschiede dargestellt:

MerkmalLinkLinkButtonButtonButtonLinkToogleButton1
DesignLinkButtonButtonLinkButton
Semantikaabuttonbuttoninput
_ariaControls
_ariaCurrent2
_ariaExpanded
_ariaSelected
_disabled
_href
_on
_valueboolean
focus()

1 Der Toogle-Button wurde als Variante der Checkbox umgesetzt, weil es ein Schalter mit maximal zwei Zuständen (entweder "an" oder "aus") ist.


2 Das _ariaCurrent-Attribut wird zukünftig über ein Event statt ein Property gesetzt.

How can I add a custom button type?

· 2 minutes of reading time
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Basically, each component can be freely styled within its HTML structure.

With the help of our designer or the SCSS script, existing themes can be adapted or your own themes can be created.

Button and custom class

The button/switch has 5 types derived from the design language of the design systems:

  • primary: switch for main action (e.g. save)
  • secondary: switch for secondary action (e.g. cancel)
  • normal/tertiary: switch for tertiary action (e.g. back)
  • danger: switch for "dangerous" actions (e.g. delete)
  • ghost: switch for "inconspicuous" actions (e.g. help)

In addition to these basic types, other types can be added using a custom class. To do this, however, all custom classes must be stored in the CSS of the theme.

In the implementation, a coordinated design system /design language should not be arbitrarily changed or expanded. All defined custom buttons will be already provided when the theme was created and their use is described in the documentation of your own design system.

Store custom class in the theme

  1. Open Theme Designer
  2. Select theme
  3. Select Button component
  4. Switch to component styling
  5. Enter and save CSS for the custom button (look at primary)
  6. Theme in project übernehmen

Example of custom class loading:

.loading :is(a, button) > kol-span-wc kol-icon {
animation: spin 2.5s infinite linear;
display: block;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
.loading :is(a, button) > kol-span-wc kol-icon {
animation-duration: 5s;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Use custom class

To switch to custom mode, the property _variant must be set to custom. Thereafter any predefined custom classes can be passed via the property _custom-class.

<kol-button _custom-class="loading" _label="Save" variant="custom"></kol-button>

Style the icon in the button from the outside

It is possible to transfer an icon style to the button. To do this, the desired style must be passed to the property _icon.

<KolButton
_icons={{
left: {
icon: 'codicon codicon-home',
style: {
color: 'red',
'font-size': '300%',
},
},
}}
_label="Switch with big red icon"
></KolButton>

Button and link components

· 4 minutes of reading time
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Today we offer the variants of Button, ButtonLink, Link and LinkButton. In the future we will also offer the ButtonToggle (Toogle button). All semantic links only support _href and all buttons only _on as a semantic "click". Visually, there are buttons that look exactly like links and links that look exactly like buttons.

The following table provides an overview of the differences:

MerkmalLinkLinkButtonButtonButtonLinkToggleButton*
DesignLinkButtonButtonLinkButton
Semanticsaabuttonbuttoninput
_href
_on
focus()
Valueboolean

* The toggle button was implemented as a variant of the checkbox because it is a switch with a maximum of two states (either "on" or "off").

Motivation

In addition to a high level of standard conformity, KoliBri also strives for very good reusability (Developer Experience DX). This is addressed by the uniformity of the HTML attributes and the economical use of additional properties.

Rationale: Given a link component intended for navigation, if we consider the two behaviors Navigate and Click without navigating would offer, then we would have a contradiction in behavior. Also when used in development we would need the properties _href and _on make it optional and we could no longer warn against misuse (static code checking).

Challenges

This strict interpretation can cause problems when developing with other libraries and frameworks. Especially when they expect a click on a link.

React-Router

The React router maps navigation via clicks. When used with the link component, there are different implementation options.

Wrapping:

<Link to="/">
<KolLink _href="">Home</KolLink>
</Link>
<Link to="/test">
<KolLink _href="">Test</KolLink>
</Link>

With a click:

<KolButtonLink
_label="Home"
_on={{
onClick: () => navigate("/")
}}
>
Home
</KolButtonLink>
<KolButtonLink
_label="Test"
_on={{
onClick: () => navigate("/test")
}}
>
Test
</KolButtonLink>

React-Link:

<KolLink
_href=""
_label="Home"
onClick={() => navigate("/")}
>
Home
</KolLink>
<KolLink
_href=""
_label="Test"
onClick={() => navigate("/test")}
>
Test
</KolLink>

Notice: _href="" is actually not allowed.

HThere is also a small code example here Navigate with React router.

The provided examples show that the Link and ButtonLink components are suitable for direct use with React-Router. However, the link component is also used within other KoliBri components. Where that wouldn't work!

Server side rendering

The server-side rendering is very similar to the React router because it is technically very strongly driven by the Remix framework. Remix is ​​a framework for building hybrid client and server side web applications. This means that the implementation does not differ whether I want to build the application later as a client or server-side application. For server-side applications, the one-click navigating links must work because these applications run on the server and not in the browser.

In order to ensure that KoliBri can also be used for server-side web applications, it must also be possible to change pages by clicking without navigating.

Solution

To solve the challenges, all components that are passed link definitions are expanded. If ButtonLink definitions can also be transferred to these components, then they can also display clicks without navigating, but they still look like links. The following components must also be expanded:

  • Breadcrumb
  • LinkGroup
  • Nav
  • SkipNav