3 posts tagged with "button"

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:

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.

• Designer
• SCSS-Script

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.

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>

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:

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