Kirby 7.0.0 Release Notes

[jkaltoft]

Release Notes

Version 7 is mostly about improving the user experience for other devices than mobile/touch-based devices. In other words, making Kirby components more desktop ready.

Release is scheduled for August 2022.

What's new?

• Button attention level 4 has been deprecated
• Interaction States
• Charts
  • New Stock Chart component
  • Highcharts dependency removed
  • General refactoring
• Refactor moving of modal elements to solve multiple issues (see Refactor moving of modal elements to solve multiple issues #2238 for details) Was released with Kirby 6.2.1
• Various bugfixes

Button attention level 4 has been deprecated

In order to clarify and simplify the design of the <kirby-button> attention levels it has been revised. Attention level 4 has been deprecated and the continued usage of this level will result in a console deprecation warning message and the button will be rendered as attention level 3.

Up until now attention level 4 has primarily been used for transparent icon-only buttons. The continued need for this specific kind of buttons has been recognized and is now available through a new noDecoration parameter of <kirby-button> .

Furthermore the design of <kirby-button> on all light backgrounds is now identical to the their former presence on a white kirby-card background. The biggest visual change will be on <kirby-button> s with attention level 2 on a light <kirby-card> which will have their background color change from white to black.

Migration

• When migrating change attention level 2 to attention level 3 on all <kirby-button> s which aren't black by design
• Also replace all attention level 4 usage on icon-only <kirby-button> s with the new no decoration parameter

Interaction States

Most Kirby components have had an overhaul of how they look and behave when you interact with them using a keyboard or a pointing device such as a mouse. Interaction includes clicking with a mouse, navigating using the TAB key and activating interactive elements using ENTER or SPACE keys.

Hover

When you move the mouse cursor over an element. Does not apply to touch devices.

Active

While you click or press (activate) an element it becomes active. When you release, the element is no longer active.

Focus

When an element receives focus you can interact with it using a keyboard. Types of interaction could be e.g. activating a button, following a link, checking/unchecking checkboxes or selecting an option. Elements receive focus by using TAB on a keyboard to navigate to it. Not all elements will (or should) receive focus.

What needs to be done?

On a high level: Not much. You should check that the Kirby components you use look and behave as described in this section. You do not have to check every instance of Kirby components. A few samples should suffice.

You should test more thoroughly if you have applied your own styling and/or behavior. This could be either modifications made to existing interaction states or to make up for lacking ones. In either case you should aim for removing modifications and prefer to use the new baked-in interaction states.

How desktop ready are Kirby components?

Interaction states are not relevant for all components. The current state of desktop readiness for each relevant component after the improvements is:

Component	Hover	Active	Focus TAB	ENTER / SPACE
Accordion	✅	✅	✅	✅
Action Sheet	✅	✅	✅	✅
Alert	✅	✅	✅	✅
Button	✅	✅	✅	✅
Calendar	✅	✅
Card	✅	✅	✅	✅
Chart	✅
Checkbox	✅	✅	✅
Chip	✅	✅	✅	✅
Dropdown	✅	✅	✅	✅
Fab Sheet	✅	✅
Form Field	✅	✅	✅
Item - Picker	✅	✅		✅
Link	✅	✅	✅	✅
List	✅	✅	✅	✅
List Swipe
Modal
Radio	✅	✅	✅	✅
Range	✅	✅	✅	✅
Reorder List
Segmented Control	✅	✅	✅	✅
Slide Button	✅	✅
Slides
Tabs	✅	✅	✅	✅
Toggle	✅	✅	✅	✅
Toggle Button	✅	✅	✅	✅

[RasmusKjeldgaard]

Known followup issues identified by Kirby are tracked here: #2431
Feel free to comment in this discussion if you find any issues.

[KemalPajevic]

When you hover a top an accordion it gets highlighted, which I assume is by design. However, the highlight color remains both when the accordion is expanded and after it gets collapsed again. It goes away if I click outside of it.

[jkaltoft]

Great catch. Thank you. We'll look into it.

[SilverGull]

When showing modals on iOS the status bar colors change, resulting in white texts and icons on a grey background in the status bar, as shown in the image below. It is not a problem on Android.

[RasmusKjeldgaard]

Thank you @SilverGull, seems like this issue is tracked in #2456.

[jkaltoft]

Solved by #2453 as part of https://github.com/kirbydesign/designsystem/releases/tag/v7.0.0-rc.6

@KemalPajevic can you confirm that the issue has been fixed?