10.0.2

Release notes

Dropdown (#721)

• Fix an issue where setState was sometimes called when the component was unmounted (#720)

10.0.1

Release notes

Dropdown (#717)

• Fix an issue with multiple "active" looking items appearing in the popover list. Keyboard and mouse navigation now use the same underlying logic and state

Full changelog

v10.0.0...v10.0.1

10.0.0

Release notes

Dropdown (#696, #709, #714)

• Breaking change: Completely rewrite the component without using ReachUI dependency. Component now works with React 18
  • Remove props dropdownButtonProps and dropdownPopoverProps (these were provided by Reach)
  • Change ref type from HtmlDivElement to HtmlButtonElement
  • Add boolean prop portal which defaults to true. Controls whether the popover is rendered in a React portal
  • Add props status, statustext and hintText. These are familiar from the library's other form components
  • Add onBlur() prop
  • Add boolean prop fullWidth which makes the component fill its parent horizontally
  • Add prop wrapperProps which accepts HTML div attributes including data-attributes
  • All other props (for example data-testid) are now placed to the component's interactive <button> element instead of the outermost div
  • Adjust the component's visual appearance so that it is in line with <SingleSelect> and <MultiSelect>

SuomifiTheme (#690)

• Breaking change: Rename token categories
  • focus ---> focuses
  • radius ---> radiuses
• Visual breaking change: update blackBase color from hsl(0, 0%, 16%) to hsl(0, 0%, 13%)
• Refactor underlying implementation to use suomifi-design-tokens package for all tokens

Label (#698)

• Breaking change: Change wrapperProps prop typing to include data-attributes (e.g. data-testid)

SearchInput (#698)

• Breaking change: Change wrapperProps prop typing to include data-attributes (e.g. data-testid)

TextInput (#698)

• Breaking change: Change wrapperProps prop typing to include data-attributes (e.g. data-testid)

Modal (#708)

• Breaking change: Removed class .fi-modal_title--no-scroll from non-scrollable dialog to unify heading margin heights for scrollable and non-scrollable modal

Expander, ExpanderGroup (#704, #705)

• Visual breaking change: Remove shadows, add border, add hover styles
• Fix bug with Safari where Expander content was invisible when printing

InlineAlert (#689, #697)

• Visual breaking change: Content will now take up all available space
• Visual breaking change: Add 1px visual border

Alert (#697)

• Visual breaking change: Add 1px visual border

Tooltip (#686)

• Visual breaking change: Change close button size and appearance

MultiSelect (#671, #692, #683)

• Breaking change: Remove redundant null from possible parameters in onItemSelect() prop
• Fix NVDA aria-live reading for ariaOptionsAvailableText
• Add support for loading state

SingleSelect (#683, #692)

• Fix NVDA aria-live reading for ariaOptionsAvailableText
• Add support for loading state

DateInput (#684, #693, #707, #713)

• Introduce DateInput component

CheckboxGroup (#699)

• Fix missing margin of hintText on Safari

RadioButtonGroup (#699)

• Fix missing margin of hintText on Safari

Misc

• Bump minimist from 1.2.5 to 1.2.8 (#695)

Full changelog

Full changelog: v9.1.0...v10.0.0

10.0.0-beta.1

Release notes

SingleSelect & MultiSelect (#692)

• Add screen reader support for loading state
• Fix possible issue with NVDA and ariaOptionsAvailableText

DateInput (#693)

• Add mobile device support via smallScreen prop
• Breaking change: Change wrapperProps prop typing to include data-attributes (e.g. data-testid)

Alert & InlineAlert (#697)

• Add 1px visual border

Dropdown (#696)

• Breaking change: Completely rewrite the component without using ReachUI dependency
  • Remove props dropdownButtonProps and dropdownPopoverProps (these were provided by Reach)
  • Change ref type from HtmlDivElement to HtmlButtonElement
  • Add boolean prop portal which defaults to true. Controls whether the popover is rendered in a React portal
  • Add props status, statustext and hintText. These are familiar from the library's other form components
  • Add onBlur() prop
  • Add boolean prop fullWidth which makes the component fill its parent horizontally
  • Add prop wrapperProps which accepts HTML div attributes including data-attributes
  • All other props (for example data-testid) are now placed to the component's interactive <button> element instead of the outermost div
  • Adjust the component's visual appearance so that it is in line with <SingleSelect> and <MultiSelect>

Label, SearchInput & TextInput (#698)

• Breaking change: Change wrapperProps prop typing to include data-attributes (e.g. data-testid)

CheckboxGroup & RadioButtonGroup (#699)

• Fix missing margin of hintText on Safari

Misc

• Bump minimist from 1.2.5 to 1.2.8 (#695)

Full changelog:

v10.0.0-beta.0...release/10.0.0-beta.1

10.0.0-beta.0

Release notes

SuomifiTheme (#690)

• Breaking change: Rename a couple of token categories
  • focus ---> focuses
  • radius ---> radiuses
• Breaking change: update blackBase color from hsl(0, 0%, 16%) to hsl(0, 0%, 13%)
• Refactor underlying implementation to use suomifi-design-tokens package for all tokens

InlineAlert (#689)

• Breaking change: Content will now take up all available space

Tooltip (#686)

• Breaking change: Change close button size and appearance

MultiSelect (#671, #683)

• Breaking change: Remove redundant null from possible parameters in onItemSelect() prop
• Add support for loading state

SingleSelect (#683)

• Add support for loading state

DateInput (#684)

• Introduce DateInput component

Changelog

Full changelog: v9.1.0...v10.0.0-beta.0

9.1.0

Release notes

Pagination (#668)

• Introduce <Pagination> component

SideNavigation (#675, #676)

• Introduce <SideNavigation> component

ServiceNavigation (#658, #677)

• Introduce <ServiceNavigation> component

WizardNavigation (#656)

• Introduce <WizardNavigation> component

ExpanderGroup (#654)

• Add showToggleAllButton prop with a default value of true

SearchInput (#678)

• Fix focus issue with NVDA screenreader

SingleSelect (#679, #667)

• Connect the component's label to input
• Add ariaOptionsAvailableTextFunction prop

MultiSelect (#679)

• Connect the component's label to input

Link, ExternalLink, SkipLink (#665)

• Add underline prop with a default value of 'hover'

RouterLink (#662, #665)

• Add support for ref
• Add underline prop with a default value of 'hover'

Label (#663, #669, #670)

• Fix hidden variant semantics
• Fix passed props on hidden variant
• Add optional forceTooltipRerender boolean prop.
  • The prop toggles on behaviour which forces a Tooltip component attached to a Label to always re-render when the Label changes

Tooltip (#669)

• Add possibility to use Tooltip directly in the following components (usage via tooltipComponent prop)
  • TextInput
  • TextArea
  • SingleSelect
  • MultiSelect
  • Dropdown
  • CheckboxGroup
  • RadioButtonGroup
• Improve Tooltip arrow position calculation

Ref support to multiple components (#625)

• Add ref support to the following components
  • Block
  • StaticChip
  • Expander
  • ExpanderGroup
  • ExpanderTitleButton
  • CheckboxGroup
  • HintText
  • RadioButtonGroup
  • SearchInput
  • MultiSelect
  • SingleSelect
  • StatusText
  • Textarea
  • ToggleInput
  • LanguageMenu
  • ExternalLink
  • Link
  • SkipLink
  • Paragraph
  • Text
  • VisuallyHidden
• Components that previously had support for ref now also have forwardedRef prop visible in the API
  • Button
  • Heading
  • Tooltip
  • ToggleButton
  • LoadingSpinner
  • CheckBox
  • RadioButton
  • Chip
  • Toast
  • Dropdown

Block (#657)

• Add div and span as a possible variants. "Div" renders as a plain HTML div without suomifiTheme div reset styles. "Span" renders as an inline-block without suomifiTheme reset styles

9.1.0-beta.3

Release notes

SideNavigation (#675, #676)

• Add top and bottom padding to level 3 list
• Adjust focus style for better visibility

ServiceNavigation (#677)

• Fix color in focus style

SearchInput (#678)

• Fix focus issue with NVDA screenreader

Pagination (#668)

• Introduce <Pagination> component

SingleSelect & MultiSelect (#679)

• Connect the component's label to its input via the for attribute to allow focus on label click

Changelog

Full changelog v9.1.0-beta.2...v9.1.0-beta.3

9.1.0-beta.2

Release notes

SingleSelect (#667)

• Add ariaOptionsAvailableTextFunction prop

Link, ExternalLink, SkipLink, RouterLink (#665)

• Add underline prop with a default value of 'hover'

Label

• Fix passed props on hidden variant (#670)
• Add optional forceTooltipRerender boolean prop. The prop toggles on behaviour which forces a Tooltip component attached to a Label to always re-render when the Label changes (#669)

SideNavigation (#658)

• Introduce <SideNavigation> component

Tooltip (#669)

• Add possibility to use Tooltip directly in the following components (usage via tooltipComponent prop)
  • TextInput
  • TextArea
  • SingleSelect
  • MultiSelect
  • Dropdown
  • CheckboxGroup
  • RadioButtonGroup
• Improve Tooltip arrow position calculation

Changelog

Full changelog v9.1.0-beta.1...v9.1.0-beta.2

9.1.0-beta.1

Release notes

Label (#663)

• Fix hidden variant semantics

WizardNavigation (#656)

• Introduce WizardNavigation component

ServiceNavigation (#651)

• Introduce ServiceNavigation component

RouterLink (#662)

• Add support for ref

Changelog

Full changelog v9.1.0-beta.0...v9.1.0-beta.1

9.1.0-beta.0

Release notes

ExpanderGroup (#654)

• Add showToggleAllButton prop with a default value of true

Ref support to multiple components (#625)

• Add ref support to the following components
  • Block
  • StaticChip
  • Expander
  • ExpanderGroup
  • ExpanderTitleButton
  • CheckboxGroup
  • HintText
  • RadioButtonGroup
  • SearchInput
  • MultiSelect
  • SingleSelect
  • StatusText
  • Textarea
  • ToggleInput
  • LanguageMenu
  • ExternalLink
  • Link
  • SkipLink
  • Paragraph
  • Text
  • VisuallyHidden
• Components that previously had support for ref now also have forwardedRef prop visible in the API
  • Button
  • Heading
  • Tooltip
  • ToggleButton
  • LoadingSpinner
  • CheckBox
  • RadioButton
  • Chip
  • Toast
  • Dropdown

Block (#657)

• Add div and span as a possible variants. "Div" renders as a plain HTML div without suomifiTheme div reset styles. "Span" renders as an inline-block without suomifiTheme reset styles