v6.1.0

Components

New components added.

• Add SingleSelect component. (#503, #536)
• Add Alert and InlineAlert component. (#528, #531)

Dropdown (#523)

• Add scrolling support
• Add max-height of 265px to options list

MultiSelect (#537)

• Improve accessibility of MultiSelect.

General changes (#515, #519, #528, #534, #527)

• Fix documentation related to use of statics and components level.
• Add visible icon names to list view in documentation.
• Add whiteBaseToDepthLight1 gradient.
• Fix design token types exports
• Add table of supported OS, browser and screen reader combinations to README.

Dependencies (#522, #525, #533)

• Update vulnerable dependencies
• Revert node-sass and react-styleguidist move to dependencies
• Change node-sass to sass (Dart Sass).

Full Changelog: v6.0.0...v6.1.0

v6.1.0-beta.3

General

• Fix design token types exports, #534

Dependencies

• Change node-sass to sass (Dart Sass), #533

Documentation

• Add table of supported OS, browser and screen reader combinations to README, #527

v6.1.0-beta.2

Alert (#531)

• Replace aria-live with role="alert" in Alert
• Fix resize, icon positioning and colors

v6.1.0-beta.1

Dropdown (#523)

• Add scrolling support
• Add max-height of 265px to options list

Icon (#519)

• Add visible icon names to list view in documentation, styleguidist.

Dependencies

• Upgrade vulnereable dependencies (#522)
• Revert node-sass and react-styleguidist move to dependencies (#525)

v6.1.0-beta.0

General updates

Documentation updates

• Fix documentation related to use of statics and components level.

Components

SingleSelect (#503, #518)

• Add SingleSelect component

v6.0.0

General changes

Dependencies (#497, #504, #508)

• Update vulnerable dependencies.

Fonts (#494)

• Breaking change: Remove font imports from library provided css. Font's have to be imported separately from now on.

Theme and styles (#491):

• Add export for suomifiTheme and related interfaces
• Add and export SuomifiThemeProvider and related documentation
• Remove css.in-to-js dependency and replace it with static object
• Refactor theme generation and remove redundant focus utils. Include derived tokens to theme.
• Directory structure:
  • Remove unused login icon and directory
  • Move styleguidist components to docs directory
  • Cleanup utils directory structure
• Types:
  • Remove all custom Reach-UI types and replace with the ones exported by Reach-UI

Components

MultiSelect (#438, #479, #483, #496, #503)

• Add MultiSelect component

SearchInput (#503, #509)

• Add abstractions and share functionality with upcoming SingleSelect

StaticIcon (#486)

• Fix: Destructure baseColor from props in the StaticIcon

ToggleInput (#487)

• Fix example onClick handler.

Link (#488)

• Breaking change: Remove static variants. Use SkipLink and ExternalLink components instead.
• Breaking change: Rename LinkSkip to SkipLink.
• Breaking change: Rename LinkExternal to ExternalLink.

Text #488

• Breaking change: Remove static variants. Use the variant prop instead.

Block (#488)

• Breaking change: Remove static variants. Use the variant prop instead.

Breadcrumb (#488, #495)

• Breaking change: static variants no longer in use. Use the BreadcrumbLink component instead.
• Breaking changes: Remove variant prop. Use BreadcrumbLink instead of variant="link". Internal classnames have changed which may affect custom styles.
• Remove background color

LanguageMenu (#490, #491)

• Breaking changes: Remove LanguageMenuItemLanguage, LanguageMenuItemLanguageProps, LanguageMenuLinkLanguage, LanguageMenuLinkLanguageProps. Use LanguageMenuItem, LanguageMenuItemProps, LanguageMenuLink, LanguageMenuLinkProps instead.
• Breaking changes: Remove statics languageItem and LinkLanguage. Use LanguageMenuItem and LanguageMenuLink instead.
• Breaking changes: Remove languageMenuPopoverProps and languageMenuPopoverComponent from LanguageMenuProps, remove related interfaces, remove popover and popoverLang classNames from internal styles.

Update suomifi-icons to 5.0.0

Dependencies

• Breaking change: Update suomifi-icons dependency to 5.0.0 (#499). Change styling logic for all components using baseIcons. CSS-based styling relying on class names might no longer work. Further information can be found here https://github.com/vrk-kpa/suomifi-icons/releases/tag/v5.0.0
• Update vulnerable dependencies(#497)

Icon

• Breaking change: see update suomifi-icons description above
• Add multiple new icons

MultiSelect accessibility improvements

MultiSelect

• Add hintText prop for MultiSelect
• Add ariaOptionsAvailableText prop for MultiSelect
• Add ariaOptionChipRemovedText prop for MultiSelect

v4.0.0

General changes

Dependency updates and upgrades (#443, #449, #453, #458,#464, #468, #470, #475, #482)

• Breaking change: Reach-ui peer dependency versions upgraded.
• Update for vulnerable dependencies
• Suomifi-design-tokens updated to 3.1.1
• Remove uuid dependency

AutoId (#445)

• Fix AutoId SSR issue and return children always, also on server but with empty string as id.

Tokens (#439)

• Breaking Change: Tokens prop is now removed from all components

Documentation updates (#455)

Component changes and additions

Button (#446, #441, #448)

• Breaking change: Replace Button tertiary variant with link button variant
• Breaking change: Rename Button secondary-noborder variant to secondaryNoBorder
• Breaking change: Change depthSecondaryDark1 color token value
• Update suomifi-design-tokens
• Change Button secondaryNoBorder variant hover styles
• Remove static variants. Use variant prop instead.
• Fix link button background gradient direction

Checkbox (#441, #461, #465)

• Breaking change: Remove static variants. Use variant prop instead.
• Add ref prop
• Add aria-live="assertive" as default for Status text. This can be changed via statusTextAriaLiveMode prop.
• Add  aria-atomic true for Status texts

Chip (#441, #447, #476)

• Breaking change: Remove as prop
• Breaking change: Split component into Chip and StaticChip. Remove static variants.
• Fix Remove icon alignment in Safari
• Add Soft disable support for Chip

Dropdown (#473, #441)

• Fix Dropdown focus issue when focus escapes if tab is pressed while Dropdown is open. Now focus returns to Dropdown instead of browser default.
• Add ref prop

Expander (#452, #459)

• ExpanderGroup
  • Improve performance
• Expander
  • Breaking change: Remove undocumented consumer prop from public API
  • Fix font styles
• ExpanderGroup
  • Breaking change: Rename props OpenAllText, AriaOpenAllText, CloseAllText, AriaCloseAllText => openAllText, ariaOpenAllText, closeAllText, ariaCloseAllText,
  • Add aria-expanded prop for Open/Close all button
• ExpanderTitleButton
  • Breaking change: Remove ariaOpenText and ariaCloseText props
• ExpanderTitle:
  • Breaking change: Add required toggleButtonAriaDescribedBy prop
• ExpanderContent:
  • Fix expander content height and overflow styles

Heading (#454)

• Breaking change: Remove Static variants removed. Use variant prop instead.
• Breaking change: Remove ‘asProp' prop. Use 'as' instead.
• Fix API descriptions order

Icon (#473)

• Add new icons
• Fix colors.

Modal (#444, #450, #457, #460, #467, #477)

• Add Modal dialog component

RadioButton (#441, #437)

• Breaking change: Change ComponentIcon class names
• Add ref prop
• Fix RadioButton icons

SearchInput (#432, #451, #461, #465)

• Breaking change: Rename inputContainerProps to wrapperProps
• Add better support for SSR by replacing uuid with AutoId
• Add support for styling SearchInput directly without breaking the component's internal layout
• Fix debounce prop destructuring and prevent passing to the input element
• Add aria-live="assertive" as default for Status text. This can be changed via statusTextAriaLiveMode prop.
• Add  aria-atomic true for Status texts

StaticIcon (#473, #480, #486 )

• Breaking change: Change StaticIcon class names
• Add highlightColor prop
• Add baseColor prop

Text (#456)

• Fix broken color prop

Textarea (#441, #461, #465)

• Add ref prop
• Add aria-live="assertive" as default for Status text. This can be changed via statusTextAriaLiveMode prop.
• Add  aria-atomic true for Status texts

TextInput (#435, #436, #441, #451, #461, #465)

• Breaking change: rename inputContainerProps to wrapperProps
• Add ref prop
• Add aria-live="assertive" as default for Status text. This can be changed via statusTextAriaLiveMode prop.
• Add  aria-atomic true for Status texts
• Fix debounce prop and prevent passing to the input element
• Fix Error and success status border width to 2px
• Fix icon props

Toggle (#434, #437, #441, #487)

• Breaking Change: Change ToggleButton onClick parameter type is now boolean instead of { toggleState: boolean }
• Breaking Change: Remove variant support. <Toggle.withInput> will no longer work. Use ToggleButton and ToggleInput components instead.
• Breaking Change: Remove toggleInputProps
• Breaking Change: Remove toggleInputComponent
• Breaking Change: Remove onClick from ToggleInput, use onChange instead
• Breaking Change: Change additional props to be passed for button and input elements.
• Breaking change: ComponentIcon class name changes
• Add better styling support for wrapperProps
• Add ref prop
• Fix AutoId to Server Side Rendering support
• Fix Toggle icon

VisuallyHidden (#478)

• Add export for VisuallyHiddenProps

VisuallyHidden props exported

VisuallyHidden

• VisuallyHiddenProps are now exported from the library.