Design

Design library contains the coded Skapa Components.

Version 2.13.0

Nov 11, 2024

Latest Updates

net.ikea.skapa:design:2.13.0

  • Badge

    • A11y Fixed a minor bug for Talkback users where an unnecessary semantics node was added.

  • Segmented Control

    • Experimental Feature Added option to allow either fluid or auto-width for icon variant.

  • Select, ListBox

    • Improvement Added a workaround for a corner case where the ListBox rendered slightly off-screen.

  • Compact Card

    • Experimental Feature Added CompactCard component to the design package.

  • Listview Item

    • A11y Hover improvement.

net.ikea.skapa:design:2.12.0

  • Card 2.0

    • Breaking Changes Refactored CardFooterContent to add content description, and updated VideoPlayer with detailed parameters.

    • Experimental Feature Added footer button variants Primary, PrimaryInverse, PrimaryInverseStatic and PrimaryStatic. Same footer button variant changes apply on Secondary button variants.

    • Experimental feature Added SimpleVideoPlayer to the add-on variants of the Card.

  • Hyperlink

    • Change Updated underlying logic, samples due the deprecation of ClickableText from Material.

  • Text area

    • A11y KeyboardManager now moves focus to next on Key.Tab and previous on Shift+Key.Tab.

  • Shoppable Image

    • A11y Provided better support for Keyboard navigation, Talkback and pointer input (mouse hover support). Note! There are still some improvements to be made so expect some changes on this.

    • Experimental feature Remove chevron section from the tag when onClick = null is provided.

    • Improvement Performance improvements.

  • Input field

    • Improvement Added Password sample.

  • Segmented Control

    • Experimental Feature Added SegmentedControl component to the design package.

  • Toast

    • Bug Fix Fixed issue where the background of the Toast would not collect click actions, and would trigger a component behind it.

net.ikea.skapa:design:2.11.0

  • Toast

    • A11y Updated border colour for improved readability.

  • Aspect Ratio Box

    • Deprecation Added 2 new aspect ratios, 4:5 and 9:16. Also introduced new enum names for clarity and deprecated the old names.

  • Button

    • Bugfix Reduced maximum corner radius when component grow wet several lines. Improved rendering for keyboard focus.

  • Choice

    • Bugfix Fixed bug where leading and trailing content would not top align correctly to the center content.

    • Improvement Slight design change to mitigate the unwanted upwards shift of the content when introducing expanding text.

    • Improvement Updated bottom padding for expandable text.

  • QuantityStepper

    • A11y Increased click area to enter the input field when the component is fluid.

  • Shoppable image

    • A11y RTL support. Mirrors the UI except for background image and dot coordinates.

    • Experimental Feature Added callbacks for products that failed to render due to invalid coords etc.

    • A11y Talkback improvements.

  • Card 2.0

    • Experimental feature Added media container on the top of default and simple variant of card. The media container represents choice between Image, Video, or ShoppableImage. For now, section Video is open component, but in the future will be replaced with SimpleVideoPlayer.

  • ListViewItem

    • Bugfix Added missing pressed & hover state to navigational ListViewItems.

  • Carousel

    • Stable @ExperimentalSkapaApi annotation has been removed and the components is now considered stable.

    • A11y Some Talkback fixes/improvements that works on some devices. Please report unusual behaviours.

  • BottomSheetM3

    • Experimental change Function api change due to change in Material component. windowInsets change to contentWindowInsets and wrapped by lambda function.

net.ikea.skapa:design:2.10.0

  • SheetM3

    • Bugfix Fixed contentHorizontalPadding not to affect the footer and header padding.

  • Card 2.0

    • Experimental feature The first release of the Card 2.0 component. This is alpha version since it is not feature completed. Missing accessibility features.

  • Choice

    • Experimental Feature Removed exclusive choice between regular and custom content, the custom content slot can now be used in combination with the regular content as addons, or as a stand alone.

    • Experimental Feature Added expanding text feature to the choice component.

    • Breaking Change Since ChoiceContent now contains all content, any usage of ChoiceContent.Custom needs to be revised and wrapped in the ChoiceContent(addon = ) parameter.

  • Button, IconButton

    • A11y ImageOverlay variant now uses an inverse FocusBorder type for Keyboard navigation that flips the White/Black borde

  • Shoppable image

    • Experimental change Moved from Product Range to Design package

    • Improvement Validation of dots being drawn within screen borders. Handle overlapping dots, Accessibility additions. Restructure to make the component stateless.

    • Breaking Change ImageParams has been renamed to ShoppableImageBackgroundParams and TagPosition has been removed and is being handled internally.

net.ikea.skapa:design:2.9.0

  • Choice

    • Breaking Change Move to design package from experimental. It will retain its @ExperimentalSkapaApi annotation.

  • SheetM3

    • Experimental Change Added Window.Insets to public constructor with default value.

  • Button, IconButton

    • Experimental change Added new experimental button and icon button variants. Primary.Inverse becoming Primary.InverseStatic, Secondary.Inverse becoming Secondary.InverseStatic, Tertiary.Inverse becoming Tertiary.InverseStatic

    • Deprecated Deprecated button variants PrimaryInverse, SecondaryInverse, TertiaryInverse

  • Quantity stepper

    • Bug fix Fixed to trigger callback for more than maxValue if user manually enter a larger value

net.ikea.skapa:design:2.8.0

  • Carousel, Checkbox, Dropdown and all components using HelperText

    • A11y Updated components to work better with the new Android 14 support for font scaling (200%)

  • Avatar, Checkbox/Tristate checkbox, Dual button, Listview item, Radio button, Helper text, Text area, Input field

    • Stable Removed several ExperimentalSkapaApi annotation making the functions/classes/objects stable.

  • Text area

    • Deprecation The old function has been deprecated in favor of the new one using enabledState, helperTextParams and characterCounterParams.

  • Input field

    • Deprecation The older functions has been deprecated in favor of the new one using enabledState, iconParams, helperTextParams and characterCounterParams.

  • Pill, Icon pill

    • Improvement Borders used on pill components are now 2.dp instead of 1.dp when selected.

  • Sheet

    • Experimental Feature New Implementation of BottomSheet (BottomSheetM3) wrapping Material ModalBottomSheet component, this component is annotated as @ExperimentalMaterial3Api, so we will keep it as @ExperimentalSkapaApi until Material consider it Stable.

  • Carousel

    • Experimental Feature CarouselVariant now supports an optional indicator bar with the new experimental OverflowWithoutIndicator object. Note this is only available for the Overflow variant.

    • Bug Fix Fixed a bug where hover navigation would show if the carousel item was clicked in a specific place.

  • Quantity stepper

    • Improvement Removed callback for minValue when making the input field empty. Field now updates to a valid value when leaving field, not during input. Increased clickable area to when in fluid mode.

  • Tabs

    • Improvement Added new variant feature TabVariant to support emphasised and subtle styling.

  • Switch

    • A11y Hover support added.

net.ikea.skapa:design:2.7.1

  • MemberCard

    • Removed Removed MemberCard from design package.

net.ikea.skapa:design:2.7.0

  • Switch

    • Migrated away from swipeable modifier leaving only toggleable as a switch system, may result in slightly different swipe behavior and animations.

  • Sheet, Menu Item

    • Improvement Add contentHorizontalPadding parameter to adjust component padding in case is needed

  • Tabs

    • Stable The component is now considered stable and has been moved from experimental to the design package.

  • Dropdown, ListBox, Menu Item

    • Stable These components used to implement selection patterns are now considered stable and the ExperimentalSkapaApi have been moved from their implementation.

  • Select

    • Stable Preselect functionality is now consider stable and the ExperimentalSkapaApi annotation has been removed from the enum class.

  • Pill

    • Stable The Extra Small component size is now consider stable and the ExperimentalSkapaApi annotation has been removed from the enum class.

    • Experimental Feature Pill with badge has been added as Experimental to be used on Selection patterns and display the amount of selected items

  • Button

    • New Feature Added size XSmall to button sizes. This button will have a height of 32dp but retain its 48dp minimum touch target size.

  • Carousel

    • A11y Added hover support with navigation buttons for carousel items

  • Divider

    • Deprecation Updated component to use Material3 implementation which now will use a orientation function.

  • Dual button

    • Stable Updated orientation parameter and remove the ExperimentalSkapaApi annotation to make it stable.

  • Accordion, Card, Dual button, Sheet, Tabs

    • Updated to use the new Divider implementation.

  • MemberCard

    • Improvement Moved to design module, it will stay experimental for the near future.

    • New Feature Added barcode functionality in both vertical and horizontal layouts.

    • Experimental Feature Collected styling parameters into single data class MemberCardStyleParams().

net.ikea.skapa:design:2.6.0

  • Support for multi-coloured icons in components

    • Since Skapa Icons 2.3.0 version support dark mode Icons we remove tint property in the Icon element from the following components Accordion, Dropdown, IconPill, ListViewItem, Pill, Toggle

  • List View Item

    • New Feature A new Composable constructor has been added to support Price in ListViewItem, the quantityLabel parameter now can receive a String or a Composable

    • Improvement Update hover states, title underline will only show with navigational controls, and actions controls will reflect control hover state

  • Menu Item

    • Experimental Feature Move component to design package, it will remain as experimental for at least one more iteration.

  • Card

    • Migrated from material shadow modifier to skapaShadow modifier, slight changes in the shadow appearance may appear in testing.

  • Input Field, Text Area

    • Improve recomposition rate of component border change bonding the border width and color in a single recomposition.

  • Badge

    • New Feature Yellow color variant added.

    • Stable Badge is now considered stable.

  • Tag

    • Stable Tag is now considered stable.

net.ikea.skapa:design:2.5.0

  • Badge

    • Improvement Multiline corner radius and text alignment.

  • Carousel

    • Experimental Feature Add ´CarouselItemSpacing´ a new constructors to allow more flexible item spacing

  • Inline message

    • Improvement Talkback traversal order

  • Hyperlink

    • Bug Fix Talkback click action was not working

  • Tag

    • Experimental Component New component added.

  • Avatar

    • Improvement disabled state added.

  • Select

    • New Feature Preselected functionality added. To assign a pre-selected item set ´selectedItem´on SelectItemsParams.

    • Experimental Feature New constructor separating the responsibility of hint and display value, and merging different parameters into a data class.

  • Button

    • Bug Fix Text didn't appear when initial state was loading

net.ikea.skapa:design:2.4.0

  • Checkbox, Radio button, Switch, Select, Dropdown

    • Bug Fix Fixed issue where these components had multiple focus layers, requiring multiple tab presses to navigate out.

  • Checkbox, Radio button

    • Improvement Added 'pressed' states for A11y.

  • ListViewItem

    • Experimental feature Add Avatar component as a ListViewItemImage options, to be use as leading content

  • DualButton, Toggle

    • Improvement Now interaction source can be provided to each interactive button

    • Bug Fix Hover state border change fixed for dual button variants

  • Badge

    • Experimental Feature New component.

  • Status

    • Bug Fix Crashed caused by LocalTextStyle.current.fontSize returned TextUnit.Unspecified.

  • Quantity Stepper

    • Bug Fix Value was able be "scrolled" beyond visible width, now text is set to monospace and a small extra width is added to the Input to avoid this problem (The described behaviour can still be forced, but won't happen by default).

  • Card

    • Experimental change/Feature Aspect ratio support for image.

  • Text area, Input field

    • Bugfix Character limit reached announcement with Talkback when traversing the UI.

net.ikea.skapa:design:2.3.0

Helper text, Input field, Text area, Select, Dropdown

  • New Feature Support for Warning state on Helper text.

  • Button, Icon button, Jumbo button, Quantity stepper, Pill, Icon pill, Dual button, Avatar, Rating, Hyperlink, Radio button, Toggle, Toast, Card, Accordion, List view item

    • New Feature Added 'hover' support for cursor input devices, eg. mice.

  • Toast

    • Improvement Toast border implemented.

  • ListViewItem, Accordion

    • Improvement Improve keyboard focus, depending on the content paddings

  • Toggle

    • Improvement Update border color when not selected.

  • Dual button

    • Improvement Focus border looks better.

  • Checkbox/Tri-state checkbox

    • New Feature Support for Error message and caption simultaneously.

    • Improvement Removed bottom, top and end paddings

  • Radio button

    • New Feature Added caption support.

    • Improvement Removed bottom, top and end paddings

  • Switch

    • Improvement Removed bottom, top and end paddings

  • ListViewItem

    • New Feature New trailing Icon control for Copy action

  • Text area

    • New Feature Added Read-only state

  • QuantityStepper

    • Bug fix Increase/Decrease value with Up/Down keys when focused on Input field

  • Accordion, Button, Dropdown, Icon Button, Icon Pill, Jumbo Button, Select, Pill

    • Improvement Reduce the numbers of recompositions, applying performance best practices, some components reduce recomposition up to 89%. (https://developer.android.com/jetpack/compose/performance/bestpractices)

  • Button, Icon button, Jumbo button, Quantity stepper, Avatar

    • Bug Fix Update resize effect to use clickable Indication instead of .scale and .background modifiers

net.ikea.skapa:design:2.2.0

  • Experimental Feature Migrated from Material 2 to Material 3.

  • ListBox

    • Improvement Improve keyboard navigation visibility, to match Skapa keyboard focus pattern

    • Bug Fix (Also affects select) Automatic first element focus. This functionality was remove altogether, talkback will still focus on the first item when opened thanks to Compose DropdownMenu interface, but for keyboard navigation, an extra interaction is needed.

    • A11y Semantic heading now fixed when using TalkBack.

net.ikea.skapa:design:2.1.0

  • Deprecated code and code used for migration to v2.0.0 has been removed

  • Dropdown

    • Bug Fix Dropdown should not allow trailing icon

  • ListBox

    • Bug Fix ListBox headers were clickable and they shouldn't

  • Input field

    • Bug Fix Click action on Leading icons should not be allowed.

    • Experimental Feature Added ReadOnly state that can be used to display non editable information using an input field.

  • Quantity Stepper

    • Bug Fix The borders of the Component were being drawn outside its boundaries. This has now been corrected.

net.ikea.skapa:design:2.0.0

  • Breaking Change Changed deprecation level from WARNING to ERROR in various deprecated functions, QuantityStepper, DualButton, Select, CheckboxGroup, Status.

  • Breaking Change Multiple enum class entries has been renamed to use PascalCase instead of CAPITALIZED_CASE. Use 'find-replace' to perform name change.

  • Improvement Component code samples have been moved to the samples package within the Design module.

  • Accordion

    • Breaking Change Removed subtle boolean parameter and replaced with AccordionTextStyle enum. Old Accordion constructors are deprecated.

  • Avatar

    • Experimental Feature Component added to Design module.

    • Experimental Feature Static boolean feature added.

    • Breaking Change Color parameter (enum AvatarColor). Replaced by style (enum AvatarStyle).

  • Carousel

    • Stable Removed SkapaExperimentalApi annotation.

  • Inline Message

    • Breaking Change Removed subtle boolean parameter and replaced with InlineMessageStyle enum. Old InlineMessage constructors are deprecated.

    • Breaking Change Deprecated DismissParams data class constructor that use boolean parameter visible, use new InlineMessageVisibility enum instead, also renamed parameter name onDismissClicked to onDismissRequest.

  • Jumbo button

    • Breaking change, Bug fix, A11y No longer limited to 2 rows. The component now grows vertically to show the whole label. This change has been done as an accessibility improvement.

    • Breaking Change Parameter isFooter har been replaced by JumboButtonVariant.Regular and JumboButtonVariant.Footer.

  • ListBox

    • Experimental change Parameter name onItemSelected changed to onClickItem.

    • Experimental Feature New composable function that allows the use of group headers.

    • Bug Fix Fix background color and shadow, so disabled elements are visible in dark mode.

  • ListViewItem

    • Breaking Change Removed emphasised boolean parameter and replaced with ListViewItemTextStyle enum. Old ListViewItem constructors are deprecated.

  • Loading

    • Breaking Change LoadingBallColor enum replaced with LoadingBallVariant. Parameter color replaced with variant. Old LoadingBall constructors are removed.

  • PillGroup

    • New Feature New states composable function for PillGroup, that allows you to control Pill group Collapsed/Expanded state, and add a localized label to the expand pill.

    • Breaking Change Old PillGroup composable function deprecated.

  • Prompt

    • Stable Component is now considered stable and ExperimentalSkapaApi annotation is removed.

  • Quantity Stepper

    • New Feature The QuantityStepperActions class allows developers to specify actions that will be triggered in response to users triggering specific action inputs on the components.

    • Deprecated Composable function that use onInputValueChangeparameter, you should use composable function with QuantityStepperActions parameters.

  • Radio Button

    • Bug Fix Moved minimumTouchTargetSize modifier from default parameter to inside of RadioButton function.

  • Rating

    • Stable Component is now considered stable and ExperimentalSkapaApi annotation is removed.

  • Sheet

    • Stable Component is now considered stable and ExperimentalSkapaApi annotation is removed.

  • Status

    • Breaking Change Removed small boolean and replace by size enum StatusSize.Small&StatusSize.Proportional. The old Status is deprecated.

net.ikea.skapa:design:1.8.0

  • Select

    • Bug Fix Wrong padding between text and chevron Icon fixed.

    • Bug Fix Chevron icon feedback interaction, ripple effect removed and chevron animation rotation was added instead to match web implementation.

  • Dropdown

    • Experimental change Experimental stand alone Select component released in 1.7.0 was renamed to Dropdown.

  • Checkbox

    • A11y Focusable was set to the wrong layout which led to having 2 focusable nodes. Ie. traversing with keyboards needed 2 taps.

    • A11y HelperText in Checkbox was read out twice when error.

  • Pill

    • Experimental Feature Introducing extra small size.

net.ikea.skapa:design:1.7.0

  • Checkbox

    • Bug Fix Fixed issue checkbox Modifier ending up on wrong layout. Eg. padding will end up inside the checkbox instead of outside. Affects Tri-/Checkbox without labels.

  • ListBox

    • Experimental Feature Wrapped Material DropdownMenu with Skapa features, used to display select options.

  • ModalsActionFooter

    • Bug Fix Remove background modifier from ModalsActionFooter, before use have neutral1 background color token which is not specify in Figma.

  • Select

    • New Feature New composable without ListBox and work only as a trigger for Select options.

  • Sheet

    • New Feature Move component to design package, it will keep ExperimentalSkapaApi annotation for a little more time.

  • Toast

    • New Feature Move component to design package, it will keep ExperimentalSkapaApi annotation for a little more time.

    • Bug Fix Keyboard focus for Toast action update to sharp borders to match Figma specs.

net.ikea.skapa:design:1.6.0

  • A11y Pill group Fixed issue with keyboard focus after selecting items.

  • A11y List View Item State of the trailing control (Radio Button, Checkbox, Switch) in now announce in voice over.

  • Improvement Quantity Stepper Create a new composable function with three new parameters onInputValueChange callback to monitor changes from Input Field, and keyboardActions and imeAction, to add callback to specific IME actions

  • Stable Aspect Ratio , Image, List View Item are no longer Work in progress

  • New feature Accordion New experimental composable that allow the use of leading image, and make divider option, is now available

net.ikea.skapa:design:1.5.0

  • New feature SkapaImage Image Object and example of how to use it with Coil. (@ExperimentalSkapaApi)

  • New feature AspectRatioBox component. (@ExperimentalSkapaApi)

  • New feature Rating component move from alpha package to design package. (@ExperimentalSkapaApi)

  • InlineMessage

    • Stable button variant promoted to Stable, together with some bug fixes and improvements.

    • Bugfix remove vertical padding in subtle version, align icon and first line of text, fix component shadow in Default variant.

    • Experimental change *composable with Hyperlink was removed.

    • Improvement with buttons API was updated to match Web and iOS and other component naming patterns. Parameters firstAction and secondAction where grouped in a single class parameter called actions

  • Experimental change DualButton Replaced DualButtonItem with DualButtonParams to match other component patterns. Deprecated the old function and data class. Use replaceWith for a quick transition to the new data class. Also removed ExperimentalSkapaApi from the Component.

  • Experimental change Accordion Change parameter name contentHorizontalPadding to horizontalPadding since the padding is not only applied to the content but also to the title and caption.

  • Improvement With the purpose of having a more generic API, we add a new constructor of DismissParams for a more generic use one without visible parameter than now is a class property variable null by default. Affected components Inline Message, Carousel, Toast

  • Improvement Samples for button components added to samples directory and published to android.skapa.ikea.net

  • Improvement Added dependency to net.ikea.skapa:design package for all Alpha packages in order to reuse Skapa internal functions. Also added @InternalSkapaApi annotation to those functions.

Packages

Link copied to clipboard

Main package of the design library.

Link copied to clipboard

Skapa Components available for Android.

Link copied to clipboard
Link copied to clipboard

Shared helper functions.