Changelog

HINT Please refer to Changelog v1 for entries before GDS v2.

We use Semantic Versioning here. Increases of the right and middle numbers are backward compatible. Increasing the left number indicates breaking changes. Only noteworthy changes are mentioned in this changelog, for a full list see the commit history.

BREAKING changes are highlighted and only happen in a major release (e.g. v1.x.x -> v2.x.x), or for components that are still marked as BETA.

DEPRECATED changes are highlighted as well, and will most likely be removed in the next major release.

v2.84.0 - 2024-11-13

General

• We wrote an article about GDS v3 on our blog, go check it out!

Components

• [Modal] Fixed Modal generating a new id on every render which was placing it as active element in the ClickOutside stack
• [Table] Added showButton prop to CollapsibleTableRow
• [Tabs] Updated Tabs wrapping behaviour in large tiers
• [Typography] Added protrude prop to Separator which makes it ignore its parent’s padding, this currently only works in Card and ModalBody components

Components BETA

• [Fixed] Fixed custom props duplication in FixedToBottom
• [Fixed] Updated FixedToBottom, FixedButton and FixedFilter to use a z-index between footer and StripeHeader
• [Input] Fixed NewDateRangeInput focus ring styling
• [Input] Fixed NewDateRangeInput clear button overlapping end date in narrow containers
• [Input] Added custom onClear event in NewDateInput and NewDateRangeInput
• [Navigation] Fixed an issue with large Pill values in collapsed DrawerNavigation
• [Transaction] Added defaultAction prop to Transaction
• [Transaction] Fixed invisible focusable toggle button being rendered when hideItemsOnExpand was false
• [Transaction] Added width property to columns.amountSecondary for panoramic Transactions
• [Transaction] Updated Transaction to render amountSecondary in the amount column in smaller tiers
• [Transaction] Updated TransactionGroup to internally use the ref set by TransactionContainerQueryProvider without the need to pass it on
• [Transaction] Fixed panoramic Transaction not rendering buttons full width in latest Chrome version

Styles

• Added .g-separator-protrude modifier which makes .g-separator ignore its parent’s padding, this currently only works in Card and ModalBody

Documentation

• Added Modal with multiple ModalBody and Separator example story

Special thanks for contributing to this release 🎉🥇👏

• Manu Kapoor

v2.83.0 - 2024-10-25

General

• Added icons bookmark, bookmark-active, rocking-chair, rocking-chair-xl, unemployment, unemployment-xl, wheelchair and wheelchair-xl

Components

• [Card] Added innerRef prop to CardGroup
• [Typography] Added variant prop to List
• [Typography] DEPRECATED checkmarks prop in List, use List.VARIANT.CHECKMARKS instead
• [Typography] DEPRECATED plain prop in List, use List.VARIANT.PLAIN instead
• [Typography] DEPRECATED unstyled prop in List, use List.VARIANT.UNSTYLED instead

Components BETA

• [Page] Fixed FullPage rendering issue with drawerNavigation when page content is scrolled
• [Page] Fixed FullPage issue with missing gap next to standalone drawerNavigation
• [Transaction] Added width property to columns.misc for panoramic Transactions
• [Transaction] Added TransactionContainerQueryProvider and useTransactionContainerQuery
• [Transaction] Added innerRef prop to TransactionGroup
• [Transaction] Updated Transaction to show a CollapsibleButton when hideItemsOnExpand is set to false
• [Transaction] Fixed rendering of color in nested Transaction

Containers BETA

• [ContainerQueryProvider] Added ContainerQueryProvider, ContainerQueryContext and useContainerQuery

Styles

• Added .g-list to List
• DEPRECATED .g-ul-checkmark, use .g-list-variant-checkmarks instead
• DEPRECATED .g-ul-plain, use .g-list-variant-plain instead
• DEPRECATED .g-ol-default, use .g-list-variant-numbers instead
• DEPRECATED .g-ul-compact, use .g-list-spacing-compact instead
• DEPRECATED .g-ul-small, use .g-small instead
• Fixed a layout issue in FullPage by ensuring proper handling of non-wrapping elements
• Fixed a spacing issue with CollapsibleHeader when used within the description of a FormField in FocusPage
• Fixed icon-only Button width

TypeScript

• Added missing GDSDate export

Documentation

• Updated Issue Tracking article to reflect Jira Cloud migration

v2.82.0 - 2024-10-17

General

• Added icons discover-active, discover-active-xl, foreign-currency-account-active, invoice-active, invoice-active-xl, sign-active and sign-active-xl

Components

• [Card] Added padding prop to CardHeader and CardFooter
• [Form] Fixed an issue where the amount and currency fields overlapped in large FormField
• [LabeledList] Added sublabel prop to LabeledListItem
• [Navigation] Updated SecondaryNavigation items object to accept crossLink property
• [Navigation] Updated spacing in SecondaryNavigation and DrawerNavigation
• [Navigation] Added iconActive to DrawerNavigation and SecondaryNavigation items objects
• [Navigation] Updated additional icon colour, position and size in SecondaryNavigation and DrawerNavigation
• [Navigation] Added accordion prop to SecondaryNavigation
• [Utilities] Updated ClickOutside to keep track of active elements so that events only fire on the most recently activated one
• [Utilities] Added isClickOutside prop to ClickOutside which when returning false will prevent events from triggering

Components BETA

• [Navigation] Updated SecondaryNavigation to support isSection in items object
• [Navigation] Updated SecondaryNavigation and DrawerNavigation collapsed collapsible items to highlight when a sub-item is selected
• [Navigation] Updated DrawerNavigation to retain state of collapsible items when the navigation itself is collapsed/expanded
• [Navigation] Fixed an issue with non-interactive items in StepNavigation
• [Navigation] Updated DrawerNavigation to remove icon offsets in nested items
• [Navigation] Updated DrawerNavigation to behave like an accordion
• [Navigation] Updated DrawerNavigation shadow

Styles

• DEPRECATED .g-card-header-small, use .g-card-header-variant-banner instead
• DEPRECATED .g-card-header-info, use .g-card-header-variant-info instead
• Added .g-card-header to CardHeader
• Added .g-avatar to SkeletonAvatar
• Updated DrawerNavigation background
• Fixed DrawerNavigation icon alignment
• Fixed DrawerNavigation scrolling
• Fixed FullPage’s footer z-index
• Fixed FileInput icon colour in dark mode
• Fixed transparent colour token dark mode value
• Fixed FullPage layout with featuredCard

Documentation

• Added semantic colour tokens table
• Updated documentation to reflect Jira Cloud migration
• Updated FullPage and Navigation stories with realistic data

TypeScript

• Fixed an issue with selectedItem type in SecondaryNavigation

v2.81.0 - 2024-10-03

General

• We wrote an article about September release highlights on our blog, go check it out!
• Updated icons pfm-cleaning and pfm-cleaning-xl

Components

• [Alert] Fixed CollapsibleAlert’s alignment inside FocusPage
• [Card] DEPRECATED scrollable prop in CardGroup
• [Collapsible] Added buttonProps prop to CollapsibleHeader
• [Input] Fixed an issue with color decoration not being visible in PseudoInput on certain browsers
• [Misc] Fixed ColorDecoration colour logic in dark mode
• [Modal] Added support for a single wrapper like form to be placed inside DrawerModal
• [Modal] Updated DrawerModal to skip rendering an empty ModalFooter if not needed
• [Utilities] Fixed an issue with truncated product numbers in Copy component

Components BETA

• [Input] Fixed NewDateInput toggle focus management
• [Input] Fixed NewDateRangeInput clear button overlapping input
• [Navigation] Updated StepNavigation to allow rendering items as buttons
• [Navigation] Updated the way custom props are passed in collapsible items in DrawerNavigation and SecondaryNavigation
• [Page] Updated FullPage to pass secondaryNavigation to FullPageContent through context
• [Page] Updated FullPage to set DrawerNavigation’s isCollapsing automatically
• [Transaction] Added support for nested TransactionGroup inside Transaction
• [Transaction] Updated panoramic Transaction XXL layout
• [Transaction] Updated panoramic Transaction to support new tiers

Styles

• Updated color-border-secondary token value in dark mode
• Fixed FormField label length when no add-on is present

Documentation

• Added page on how to use FullPage’s Summary slot
• Fixed colour token icon

v2.80.2 - 2024-09-26

Components

• [Utilities] Fixed ClickOutside triggering in open Dropdowns in a Portal

v2.80.1 - 2024-09-20

Components

• [Carousel] Fixed Carousel not scrolling to the correct item if page margins were present

v2.80.0 - 2024-09-18

General

• Added icons minus-filled, minus-filled-xl, user-add and user-add-xl

Components

• [Carousel] Updated Carousel to show Stepper in small tiers
• [Form] Fixed FormField not correctly identifying InputGroup as a viable input
• [Input] Added aria-labelledby to the props that are passed on to the input
• [Input] Fixed aria role of RadioInputGroup
• [Input] Fixed TextinputArea not resizing correctly when value is an empty string
• [Modal] Changed top padding in DrawerModal to 32px
• [Select] Fixed aria role of FilteredSelect
• [Select] Fixed ProductSelect rendering a comma after the alias if no product number was present
• [Table] Added small property to columnDefaults and columns props in Table
• [Table] Added small prop to TableCell
• [Typography] Added faded and small props to List

Components BETA

• [Modal] Updated DrawerModal to close when the background is clicked
• [Navigation] Updated DrawerNavigation to make selectedItem prop optional
• [Navigation] Updated DrawerNavigation to open heading items when a nested item is selected
• [Navigation] Updated SecondaryNavigation to open heading items when a nested item is selected
• [Skeleton] BREAKING Removed variant prop from Skeleton components
• [Skeleton] Added support for Skeleton components on colored backgrounds

Styles

• Improved List so it adapts to .g-small and .g-faded regions

TypeScript

• Fixed an issue with DrawerNavigation selectedItem type

Documentation

• Links are now underlined, as they should
• Updated FullPage examples to use DrawerNavigation
• Fixed link to Inter download page

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda GDSWEB-4835

v2.79.0 - 2024-09-05

General

• We wrote an article about August release highlights on our blog, go check it out!
• Added icons flash-active, invoice and invoice-xl

Components

• [Form] Fixed an issue with overlapping amount and currency in large FormField
• [Form] Improved add-on placement to not interfere with long label
• [Form] Improved detection of form elements that need a “fake” label
• [LabeledList] Fixed Bootstrap style no longer leaking into LabeledList
• [Navigation] Updated SecondaryNavigation items object to accept Pill component in pill property

Components BETA

• [Layout] Added tiered props to Flex
• [Navigation] Updated DrawerNavigation to render Pills in collapsed state
• [Navigation] Updated DrawerNavigation items object to accept Pill component in pill property
• [Transaction] Updated Transaction column misc to be sortable

Styles

• BREAKING Removed .g-card-checkout-small, can safely be removed from Store pages

Documentation

• Updated spacing examples
• Improved image alt text in the blog section of GDS

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda

v2.78.1 - 2024-08-26

Components BETA

• [Page] Added stepNavigation slot to FullPageContent

v2.78.0 - 2024-08-21

General

• We wrote an article about our dark mode release on our blog, go check it out!

Components

• [Form] Fixed addon styling issue in FormField
• [Select] Fixed Select multiple selection item scroll behaviour

Components BETA

• [Navigation] Added StepNavigation component
• [Overview] Updated OverviewCard hover color when inside CardGroup
• [Overview] Fixed an issue with OverviewCard styles inside DrawerModal
• [Skeleton] Updated colors in SkeletonAnimatedContainer, SkeletonAvatar, SkeletonLine, and SkeletonRectangle components
• [Skeleton] Fixed enum types not being exported

Styles

• Updated Table header line wrapping
• Updated label truncation in FormFields
• Updated FullPage header buttons to align with summary column
• Fixed Flex gap leaking through to nested Flex component
• Fixed large FormField AmountInput currency colour in dark mode
• Fixed optionalLabel display for VARIANT.NO_LAYOUT FormFields
• Removed edge-to-edge Card display on XS
• Removed Group padding inside FormField

Documentation

• Added FullPageContent story
• Updated FormField with custom PseudoInput story for tier XS

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda

v2.77.0 - 2024-08-08

General

• We wrote an article about July release highlights on our blog, go check it out!
• Added icons ropay and ropay-xl

Components

• [Form] Added addon prop to FormField
• [Modal] Updated Modal closeProps to allow data-cy
• [Navigation] Added featuredCard prop to SecondaryNavigation
• [Navigation] Added dropdownToggle prop to SecondaryNavigation

Components BETA

• [Input] Updated NewDateInput and NewDateRangeInput to set data-date attribute on calendar buttons for testing purposes
• [Navigation] Added fullWidthMenu prop to PrimaryNavigation
• [Navigation] Updated DrawerNavigation for use within PrimaryNavigation menuContent
• [Page] Added headingButtonGroup slot to FullPageContent
• [Page] BREAKING Updated FullPageContent header layout, please use headingButtonGroup prop in FullPageContent instead of buttonGroup in Heading
• [Page] Updated FullPage to render secondaryNavigation in a Dropdown with heading as a toggle in smaller tiers
• [Skeleton] Added SkeletonRectangle component

Styles

• Fixed small Alert in CardFooter size
• Fixed DrawerModal header z-index
• Fixed Tabs background when inside Modal
• Updated Dropdown dark mode box shadow colour
• Updated Hint styles

Documentation

• Added Business data import page
• Added components dark mode switch

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda

v2.76.1 - 2024-08-05

Components

• [Dropdown] Fixed Dropdown closing on scroll logic

v2.76.0 - 2024-07-25

General

• Added icons pay-save-xl, virtual-bankcard, virtual-bankcard-xl, virtual-creditcard and virtual-creditcard-xl

Components

• [Card] Added sticky and stickyOffset props to Card
• [Dropdown] Updated MenuDropdown to focus its toggle after closing
• [Form] Fixed large FormField optional label truncation
• [Hint] Fixed an issue with Hint’s arrow
• [Input] Updated AmountInput to prevent entering . and , when precision is 0 and thousandSeparator is not . or ,
• [Input] Updated InputGroup to propagate id and aria-* attributes to the input instead of the container
• [Select] Updated Select to keep focus after closing
• [Select] Added onClick event to FilteredSelect so that it opens when being clicked in closed state
• [Tooltip] Improved Tooltip’s alignment in XS tier

Components BETA

• [Skeleton] Repaired component width behavior of SkeletonLine

Styles

• Added FullPage content area bottom padding
• Fixed PseudoInput ColorDecoration position
• Removed separator lines in noline CardGroups on mobile

Documentation

• Added Figma examples to all George business page examples
• Added a guide about communication in Slack

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda

v2.75.0 - 2024-07-10

Components

• [Carousel] Added onVisibleChange prop to Carousel
• [Modal] Added onCloseButtonClick and onOutsideClick props to Modal
• [Modal] Added helpProps and closeProps props to Modal
• [Typography] Added innerRef prop to Heading
• [Typography] Improved icon customization in Lists

Components BETA

• [Input] Added onInput callback to TouchSliderInput
• [Input] Updated TouchSliderInput to react to value prop change
• [Navigation] Added isCollapsing prop to DrawerNavigation
• [Navigation] Added isSection attribute to DrawerNavigation items. A section divider will be rendered between items marked as isSection
• [Navigation] Updated SecondaryNavigation and DrawerNavigation to render Pill in UNREAD variant
• [Navigation] Updated SecondaryNavigation and DrawerNavigation to support selected attribute on any item
• [Navigation] Updated SecondaryNavigation and DrawerNavigation selected item and collapsible items styles

Styles

• Fixed media queries not working in Android 13 webviews

Documentation

• Added Business tax authority payment page example
• Added Business standing order page example
• Added Business direct debit page example
• Added Business bulk direct debit page

v2.74.0 - 2024-06-26

General

• We wrote an article about June release highlights on our blog, go check it out!

Components

• [Dropdown] DEPRECATED DropdownToggle useNewButton prop not being set to true
• [Dropdown] DEPRECATED DropdownToggle color prop. Use variant instead
• [Dropdown] DEPRECATED DropdownToggle SIZE.LARGE value. Use MEDIUM instead
• [Modal] Added restrictHeadingSize prop to ModalBody
• [Select] Added stopPropagation to SelectableItem click events inside TableRow
• [Utilities] Fixed z-index of Copy button

Components BETA

• [Navigation] Fixed an issue with DrawerNavigation being overlapped by ColorDecoration
• [Page] Fixed a FullPage issue with extra margin when there is a Card above SecondaryNavigation
• [Search] DEPRECATED ClearableButton useNewButton prop not being set to true
• [Search] DEPRECATED ClearableButton SIZE.LARGE value. Use MEDIUM instead
• [Skeleton] Added SkeletonAnimatedContainer, SkeletonAvatar and SkeletonLine components

Documentation

• Added page about inclusive personas
• Added Figma buttons to several pages
• Improved Typography examples

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda

v2.73.1 - 2024-06-24

Components BETA

• [Transaction] Fixed secondary title wrapping to a new line if it was too long

Styles

• Fixed large FormField with Select and AmountInput

v2.73.0 - 2024-06-12

General

• Added icons heart and heart-xl

Components

• [Card] Added restrictHeadingSize prop
• [Form] Fixed large FormField label truncation
• [Input] Added FileListItem component to create more customisable file lists
• [Utilities] Refactored MatchMedia to use media query range syntax
• [Transaction] Fixed Transaction not aplying hover effects when TransactionDetail was given

Components BETA

• [Input] Added TouchSliderInput component
• [Navigation] Added DrawerNavigation component, intended for George Business
• [Page] Added FullPageContent component

Styles

• Added support for High Contrast Mode to Switch
• Added support for High Contrast Mode to Typography components
• Improved large FormField with multiple Input addons styles
• Refactored grid breakpoints to use media query range syntax

Documentation

• Added Plus/Minus Input component recipe
• Added George Business single transfer page example
• Added George Business bulk transfer page example
• Added detailed documentation and examples for DrawerModal
• Updated CSAS Product Page example
• Fixed broken links in promotions

Special thanks for contributing to this release 🎉🥇👏

• Michal Hotovec
• Octavio Cruz Garcia

v2.72.1 - 2024-06-03

Components BETA

• [Page] Reverted FullPage stripeHeader removal

v2.72.0 - 2024-05-29

General

• We wish you a Happy Pride Month!
• We wrote an article about May release highlights on our blog, go check it out!
• Added icons ai, ai-xl and warning-active

Components

• [Input] Fixed an issue with CountedTextInput initial value
• [Stripe] Fixed StripeProductInfo separator logic
• [Table] Added hyphenation to column headers

Components BETA

• [Fixed] Added reserveSpaceInLayout prop to FixedToBottom
• [Fixed] Updated FixedFilter to lay out based on the width of FixedToBottom
• [Fixed] Updated FixedToBottom to stretch to the width of parent container
• [Fixed] Updated FixedToBottom’s leftOffset to default to 0
• [Page] Updated FullPage layout to adhere to grid 8
• [Page] Added fixedToBottom slot to FocusPage
• [Page] Added fixedToBottom slot to FullPage

Styles

• Added PromoCard hover state box shadow
• Fixed ListItem icon colour in coloured Card
• Fixed an issue with dropdown and select caret color in High Contrast Mode

Documentation

• Added George Business overview page example

v2.71.0 - 2024-05-15

General

• Added icons arrow-reverse, bars-chart-increase, bars-chart-increase-xl, bars-chart-vertical, bars-chart-vertical-xl, student and student-xl

Components

• [Form] Fixed FormField label padding inconsistencies when used with CheckboxInput, ClearableTextInput, FileInput, NewDateRangeInput, RadioInputGroup or VerificationInput
• [Input] Fixed TextareaInput autoGrow prop to trigger on load
• [Table] Fixed sticky column header border in Table with a caption
• [Tooltip] Added support for High Contrast Mode to Tooltip

Components BETA

• [Hint] Fixed Hint arrow color not matching Hint body
• [Hint] Added support for High Contrast Mode to Hint

Styles

• Fixed closeable Alert padding
• Updated Transaction’s list hover behaviour

Documentation

• Added custom PseudoInput FormField example
• Added Stepper with side buttons example
• Added StructuredInfo examples page

v2.70.0 - 2024-05-02

General

• We wrote an article about release highlights № 2 in April (https://designsystem.george-labs.com/main/blog/2024-04-release-highlights-2/) on our blog, go check it out!
• Added icons addressbook-active, arrow-up-down-active, bank-guarantee-active, card-additional-active, cart-active, comment-active, cross-link, cross-link-xl, file-active, file-download-active, hand-coins-active, helpdesk-xl, home-active, money-active, pfm-education-active, pfm-other-outgoing-active, portfolio-active, sweep-order-active and updated icon helpdesk

Components

• [Table] Added headersAbove prop to Table
• [Utilities] Added Copy component
• [Utilities] Fixed InfiniteScroll not triggering in certain cases

Components BETA

• [Info] Improved StructuredInfo’s layout
• [Legend] Improved Legend overflow handling
• [Navigation] Fixed DropdownFooter action target when used inside PrimaryNavigation
• [Page] Updated FullPage to remove top margin of first components in its slots
• [Page] Updated FullPage to remove border radius of Cards in its slots on XS

Styles

• Fixed CardFooter padding inside FocusPage

v2.69.1 - 2024-04-25

Components BETA

• [Overview] Fixed OverviewCard padding prop logic

v2.69.0 - 2024-04-17

General

• Updated icon hospital-xl

Components

• [Button] Disabled double-tap to zoom gesture for Button
• [Card] DEPRECATED use padding={Card.PADDING.NONE} instead of padded={false}
• [Card] Added padding prop to Card
• [Meter] Improved support for High Contrast Mode in Meter
• [Overview] Fixed OverviewCard HTML nesting
• [Timeline] Added support for custom icon for SUCCESS, WARNING and ERROR variants
• [Timeline] Fixed TimelineItem indicator not having a border when useIcons was enabled

Components BETA

• [Fixed] Updated FixedFilter to have a maximum width
• [Layout] Added Flex component
• [Meter] Added support for High Contrast Mode to Legend
• [Page] BREAKING Removed automated padding overrides from FullPage
• [Page] Updated FullPage sticky behaviour
• [ProductCard] Fixed an issue with ProductCard defaultAction not being clickable in Safari

Styles

• Updated Button’s spacing in ButtonGroup

Documentation

• Added Store Guide section and replaced old Abstract previews with Figma embeds for CRM Promotions
• Added CSAS Product Page Example

Special thanks for contributing to this release 🎉🥇👏

• Michal Hotovec
• Octavio Cruz

v2.68.0 - 2024-04-04

General

• Added icons coins-savings, coins-savings-xl, line-dotted, line-filled, pension, pension-xl, pension-insurance, pension-insurance-xl, pfm-additional-incoming, pfm-additional-incoming-xl, pfm-additional-outgoing, pfm-additional-outgoing-xl, pfm-uncategorised-incoming, pfm-uncategorised-incoming-xl, pfm-uncategorised-outgoing, pfm-uncategorised-outgoing-xl,, rocket, rocket-xl, toilet, toilet-xl and water-xl
• Updated icons building-savings, building-savings-xl, leakage, pfm-sewer, pfm-sewer-xl and water

Components

• [Button] Added showTooltip prop to Button
• [StatusInfo] Updated StatusInfo to enable animations by default in success and error cards

Components BETA

• [Dropdown] Updated SplitButton toggle to not override its children
• [Fixed] Added FixedFilter component
• [Fixed] Added leftOffset prop to FixedToBottom
• [Legend] Added Legend and LegendItem components

Styles

• Added support for List inside Alert
• Updated Tabs styles

Documentation

• Added collapsible CHANGELOG entries
• Added Figma links to articles on FixedToBottom, Modal (DrawerModal) and StructuredInfo
• Updated contribution guide
• Updated installation guide regarding Inter font
• Updated Avatar variants documentation
• [App] Updated Bottom Sheet documentation
• [Storybook] Refactored Form, FormField stories to controls

Special thanks for contributing to this release 🎉🥇👏

• Katrin Rudisch

v2.67.0 - 2024-03-20

General

• Added icons payment-slip, payment-slip-xl, plus-filled and plus-filled-xl

Components

• Removed unnecessary aria-hidden="false"
• [Input] DEPRECATED ariaLabel prop in FileListButton, use children instead
• [Misc] Added truncate prop to AccountNumber
• [Modal] Fixed Modal sometimes not applying modal-open class
• [Navigation] Added sticky and stickyOffset props to SecondaryNavigation
• [ProductInfo] Fixed ProductInfo width in FilteredSelect
• [Table] Added contentClassName prop to CollapsibleTableCell
• [Table] Fixed a Chrome issue with TOGGLE TableCell

Components BETA

• [Page] Added header, summary, and footer props to FullPage
• [Page] Added increasePaddings prop to FocusPage, FullPage

Styles

• Improved animation’s alignment in StatusInfo
• Updated Avatar with initials default colours

Documentation

• Added heuristics playbook page
• Added Timeline as Stepper story
• Updated documentation on how to request access to JIRA, Github, npm, …

Honorary mentions 🎖️

• Tom Petrůšek

v2.66.0 - 2024-03-06

General

• Added icons business-account-maxi, business-account-maxi-xl, household-insurance, household-insurance-xl, micro-insurance, micro-insurance-xl, phone-insurance, phone-insurance-xl, wallet-insurance and wallet-insurance-xl

Components

• [Input] Fixed PseudoInput layout in medium FocusPage
• [Modal] Added DrawerModal component
• [Modal] Fixed Modal not closing on Escape keypress
• [Modal] Fixed Modal not respecting closeOnClick prop
• [Modal] Fixed Modal adjusting body padding too early on close
• [Navigation] Added collapsible prop to SecondaryNavigation items to enable section headers
• [Utilities] Fixed InfiniteScroll not working with inline elements
• [Table] Updated Table layout FIXED to be keyboard-accessible

Components BETA

• [Fixed] Added FixedButton component
• [Fixed] Added FixedToBottom component
• [Transaction] Added TransactionSection component
• [Transaction] Updated panoramic Transaction styles
• [Transaction] Improved Transaction dark mode colours

Containers

• [LanguageProvider] Fixed an issue preventing pluralization in TimeInput strings

Styles

• Improved PromoCard dark mode colours
• Improved Meter dark mode colours
• Updated FullPage Heading alignment
• Updated ContactInfo default Avatar colours
• Updated Pill paddings
• Removed seperator lines in noline CardGroups on mobile
• Fixed an issue with the transparent StripeHeader background
• Fixed text-overflow ellipsis randomly appearing in SplitButton

Documentation

• Updated documentation about Figma and Figma libraries

v2.65.0 - 2024-02-21

General

• Added icons digger, digger-xl, electricity-xl, factory, factory-xl, set-aside, set-aside-xl, truck, truck-xl, van and van-xl
• Updated icons property-insurance-xl and travel-insurance-xl

Components

• [Collapsible] Removed role="region" from CollapsibleContent
• [Input] Fixed CountedTextInput not firing custom onChange event in its input field
• [Input] Added onChange prop to CountedTextInput
• [Table] Fixed Table header border color on grey background
• [Table] Fixed sticky Table header box-shadow
• [Tooltip] Added enlargeTrigger prop to Tooltip
• [Utilities] Refactored InfiniteScroll to use IntersectionObserver, which enables it to trigger when the list is initially smaller when the viewport

Components BETA

• [Info] Added StructuredInfo and StructuredInfoItem components
• [Input] Updated TimeInput to enable changing values with vertical arrow keys
• [Input] Updated TimeInput to improve accessibility
• [Stripe] Added TRANSPARENT variant to StripeHeader
• [Table] Added TableSection component

Styles

• Updated Dropdown CSS to work around a Chromium rendering issue

Utilities

• [FocusTrap] Fixed onClick event in FocusTrap bubbling up into non-parent DOM elements

TypeScript

• [Button] Fixed children of Button not being mandatory

Documentation

• Added Slack channel links for page ‘typography’ and page ‘spinner’

Special thanks for contributing to this release 🎉🥇👏

• Peter Pristas

v2.64.0 - 2024-02-07

General

• Added icons budget-status-exceeded and budget-status-ok

Components

• DEPRECATED SnackbarItem message being optional, will become mandatory in an upcoming version, see Migration Guide
• [Snackbar] Fixed SnackbarItem close Button alignment
• [Table] Fixed sticky not working when inside a CardGroup

Components BETA

• [Input] Updated TimeInput to enable state with no value
• [Misc] Updated ColorDecoration to enable use of .g-bg-* via className prop
• [Stripe] Updated StripeNavigation to enable scrolling on mobile
• [Transaction] Added stickyHeaders and stickyHeadersOffset to TransactionGroup, intended for George Business

Styles

• Fixed focus ring in High Contrast Mode
• Updated Handover to adhere to prefers-reduced-motion
• Refactored Avatar colour logic
• Refactored Input components colour logic
• Improved Tooltip dark mode colours
• Improved Interactable’s support in CardGroup
• Improved PseudoInput styles when inside FormField

TypeScript

• [Form] Addes missing placeholder property to FormField

v2.63.0 - 2024-01-24

Components

• [Navigation] Refactored SecondaryNavigation icon colour logic
• [Select] Fixed emphasis Inline truncation when used in renderSelection
• [Snackbar] Added message prop to SnackbarItem
• [Snackbar] Updated SnackbarItem to prevent labels from being announced in screen readers
• [Snackbar] Refactored Snackbar to make use of LiveAnnouncer
• [Table] Added sticky and stickyOffset props to Table
• [Tooltip] Updated Tooltip trigger to turn white when inside .g-inverted

Components BETA

• [Hint] Refactored Hint arrow colour logic
• [Page] Added compactLabel prop to Stepper
• [Toggle] Added minColumns prop to ToggleGroup

Styles

• DEPRECATED em() function, use px-to-em() instead
• DEPRECATED rem() function, use px-to-rem() instead
• Added inverted Badge styles for the striped variant of LabeledList
• Updated FocusPage widths
• Updated row styles in the striped variant of LabeledList when inside Card
• Refactored PseudoInput to use container queries

v2.62.0 - 2024-01-11

General

• We wrote an article about the end of year 2023 on our blog, go check it out!

Components (BETA)

• [Input] Added TimeInput component
• [Input] Fixed extra clear button padding in NewDateInput
• [Overview] Fixed missing truncation of badges slot in OverviewCard
• [Page] Updated FullPage to be full width in flex layouts
• [Search] Updated small ClearableButton styles

Styles

• DEPRECATED $typo-p-font-weight, use $typo-font-weight-regular instead
• DEPRECATED $typo-h-font-weight, use $typo-font-weight-bold instead
• DEPRECATED $typo-[h|p|x]-font-weight-*, use $typo-font-weight-* instead
• Added support for High Contrast Mode to TextHighlighter
• Added support for High Contrast Mode to Badge and Pill
• Improved Table’s sortable button styles
• Improved styles for TableCells with type ACTION
• Removed tabular number font option from simple tables

Documentation

• Extended Table article with section on TableCell’s alignment, truncate, type and width prop

v2.61.0 - 2023-12-14

General

• Added icons bank-guarantee, bank-guarantee-xl, diamond, diamond-xl, hand-money, hand-money-xl, hospital, hospital-xl, hospital-doctor, hospital-doctor-xl, security-diamond, security-diamond-xl, security-star and security-star-xl

Components

• [Input] Added Button support in FileList’s defaultAction prop
• [Tabs] Updated label prop to allow any React node

Components BETA

• [Navigation] Removed business PrimaryNavigation custom Button styles
• [ProductCard] Updated ProductCard hover and focus states to align with OverviewCard
• [ProductCard] Updated ProductCard heading to truncate after two lines
• [Transaction] Fixed Avatar not changing background colour on hoverable rows

Styles

• Updated border radii to 8px across the board
• Updated small Button height to 32px
• Added SliderInput disabled styles

Documentation

• Extended Table article with section on layout prop

v2.60.0 - 2023-11-30

General

• Added icons app-icon, app-icon-xl, discover and discover-xl
• Added new icons for the PFM subcategories
• DEPRECATED icons sg-electronics, sg-furniture, sg-gifts-and-parties, sg-sports-equipment and sg-white-goods, they have been replaced by pfm-electronics, pension-savings, plugin-giftcard, pfm-sport and freeze, respectively

Components

• [Dropdown] Added minWidth prop to Dropdown
• [Snackbar] Fixed SnackbarItem icon colours
• [Table] Added support for Transaction force showing Table headers due to different breakpoints using container queries

Components BETA

• [Navigation] Added truncateMiddle prop to PrimaryNavigationButton
• [Navigation] Updated business PrimaryNavigation styles
• [Overview] Updated horizontal OverviewPromoCard to not truncate its text

Styles

• Updated currency position in small tiers for large FormFields with Amount

v2.59.0 - 2023-11-15

General

• GDS releases are now published to a third, company-wide available NPM registry: https://repo.eb.lan.at/
• Added Dark Mode toggle to Playroom
• Added Dark Mode toggle to Storybook
• DEPRECATED icons george, pension-template, salary-template and sweep, they have been renamed to george-logo, template-pension, template-salary and sweep-order, respectively

Components

• [LabeledList] Updated alternating background and border colours to be more visible on grey background
• [Select] Fixed Select throwing an error if emptyItemLabel was used with zero items
• [Table] Added innerRef prop to Table
• [Table] Fixed layout FIXED to work inside nested Card

Components BETA

• [Transaction] Added XXL tier to Transaction components to show badges and menu in separate columns
• [Transaction] Added support for column width customisation of date, badges and amountSecondary columns in TransactionGroup
• [Transaction] Updated Transaction components to use container queries instead of media queries
• [Transaction] Fixed Avatar incorrectly changing background colour

Styles

• Align ProductCard’s defaultAction clickability across variants
• Fixed fade-away effect in Carousel and ProductCard

Documentation

• Updated MonthDropdown and YearDropdown documentation

v2.58.0 - 2023-11-01

Components

• [Icon] Added children and extended icon prop to allow the usage of custom/external SVG icons

Components BETA

• [Stripe] Fixed StripeActionSplitButton truncation

Styles

• Added .g-icon class for icons
• DEPRECATED .tooltip, use .g-tooltip instead
• Added HTML support to Tooltip by adding classNames .g-tooltip-trigger, .g-tooltip-arrow, .g-tooltip-inner and .g-tooltip-label

v2.57.0 - 2023-10-18

General

• Added icons cat, cat-xl, dog, dog-xl, flag, flag-xl, foreign-currency-account-business, foreign-currency-account-business-xl, luck, luck-xl, pet-insurance and pet-insurance-xl

Components

• [Card] Updated INFO CardHeader to remove gaps in around ContactInfo/ProductInfo
• [ContactInfo] Updated Avatar look in ContactInfo when avatar prop is not used
• [Image] Updated Avatar initials to always render in uppercase
• [Tabs] Fixed inverted Tabs styles

Components BETA

• [Dropdown] Fixed an issue in MonthDropdown when minMonth is not set to the first day of a month
• [Dropdown] Fixed an issue in YearDropdown when minYear is not set to the first day of a year
• [OverviewCard] Updated OverviewPromoCard closeButton prop to allow any node
• [Toggle] Fixed an accessibility issue in ToggleBadge
• [Page] BREAKING Renamed FullPage.LAYOUT.TABLE to FullPage.LAYOUT.FULL
• [Page] BREAKING Renamed FullPage.LAYOUT.CONTENT to FullPage.LAYOUT.LARGE
• [Page] Added FullPage.LAYOUT.MEDIUM
• [Page] Updated Card padding inside FullPage

Documentation

• [App] Added Android rules to Onboarding, Sheet, States, Tabs, Tour and Widgets
• [Stripe] Updated Stripe examples

Special thanks for contributing to this release 🎉🥇👏

• Michael Greifeneder

v2.56.0 - 2023-10-04

General

• Added icons plugin-moneyback, plugin-moneyback-xl and plugin-multibanking icons, and updated icon plugin-multibanking-xl

Components

• [Dropdown] Fixed MenuDropdown XS tier width
• [Image] Fixed Avatar not trying to load an image again after an error state
• [Layout] Updated FullPage content alignment to the left
• [Utilities] Fixed InfiniteScroll not triggering correctly in zoomed viewports

Components BETA

• [Dropdown] Added MonthDropdown and YearDropdown components

Containers

• [LanguageProvider] Added new language key dropdown.selectYear

Styles

• Updated borderless Avatar to have a white background on hover in Dropdown
• Fixed missing colour classes

TypeScript

• [Dropdown] Fixed MenuDropdown types definition to include generics

v2.55.0 - 2023-09-20

General

• DEPRECATED icon pfm-children, it has been renamed to pfm-alimony
• Added icons card-id and card-id-xl

Components

• [Input] Fixed CheckboxInput onChange callback missing value
• [Table] DEPRECATED complex prop, set layout to COMPLEX instead
• [Table] Added layout prop to Table
• [Typography] Added buttonGroup prop to Heading
• [Typography] Added ordered and icon props to List and ListItem, respectively

Components BETA

• [Layout] Added FullPage component

Styles

• DEPRECATED .g-table-wrapper, put Table inside unpadded Card if needed, see Migration Guide
• Updated checkmarks style in List
• Updated hex values of blue-100, gray-100, and gray-400

TypeScript

• [Misc] Added COLOR enum as possible value for variant prop in Badge

v2.54.0 - 2023-09-06

General

• Added icons account-plus, account-plus-xl, insurance-plus and insurance-plus-xl

Components

• [Carousel] Added itemsToScroll, currentItemIndex, and isFluidOnXS props to Carousel
• [FocusPage] Added compact and showPercentage props to Stepper

Components BETA

• [Dropdown] Fixed MenuDropdown XS alignment
• [FunctionCard] BREAKING Updated PromoCard imageUrl prop to be required
• [FunctionCard] Fixed PromoCard with Amount in price prop

Styles

• [Input] Improved margin of inline inputs in FormField

v2.53.0 - 2023-08-24

Components

• [Amount] Updated Amount to enable line breaking in prependedText and appendedText
• [Avatar] Added imageClassName prop to Avatar
• [Button] Fixed ButtonGroup gap between mixed Buttons
• [Card] Updated INFO CardHeader variant to increase alias and Avatar size
• [Misc] Fixed inverted filled warning Badge text colour

Components BETA

• [Dropdown] Added default data-cy attribute to ColorDropdown colours

v2.52.0 - 2023-08-09

Styles

• [Button] Fixed disabled inverted primary Button text colour
• [SegmentedMenu] Fixed inverted SegmentedMenu selected text colour
• [Switch] Fixed inverted disabled Switch colours
• [Misc] Added filled styles for status Badges

Documentation

• Added example of inverted badges
• [App] Added Android links to Cell documentation

Special thanks for contributing to this release 🎉🥇👏

• Michael Greifeneder

v2.51.0 - 2023-07-26

General

• Added icons foreign-currency-account and foreign-currency-account-xl

Components

• [Amount] DEPRECATED useHeavyMinus prop, heavy minus is now used by default
• [Image] Fixed ariaLabel prop not working properly in Animation

Components BETA

• [SegmentedMenu] Fixed SegmentedMenu to use new Button on all small tiers
• [Transaction] Added innerRef prop to Transaction

Styles

• [Dropdown] Fixed DropdownFooter background colour
• [Misc] Fixed text colour of honey variant Badge

Utilities

• [Color] Added getProductColorShade utility helper

Documentation

• [App] Added link to Compose component on Github and name of Component
• [App] Added Android links for Alerts
• [App] Added Android links to Avatar, Badge and Pills
• [App] Added Android links for buttons
• [App] Added Android input fields links
• [App] Added Android links for top navigation and progress bar

Special thanks for contributing to this release 🎉🥇👏

• Michael Greifeneder

v2.50.0 - 2023-07-12

Components

• [Amount] Added minimum safe integer validation to value prop
• [Card] Fixed padding in FocusPage when noLine was used
• [LabeledList] Updated padding in FocusPage inside an unpadded Card
• [Table] Added support for increased padding in FocusPage with useFocusPagePadding
• [Table] Refactored table row separator line handling

Components BETA

• [FunctionCard] Added defaultAction to PromoCard
• [Navigation] Updated SkipLinkNavigation to adhere to prefers-reduced-motion
• [Overview] BREAKING Removed horizontal prop from OverviewCardGroup, set layout to GRID instead
• [Overview] Added layout prop to OverviewCardGroup, which includes support for arranging OverviewWidgetCards

Containers

• [PortalProvider] Added support for custom Portal attachment point through containerNode in PortalProvider

Styles

• BREAKING Removed width from OverviewCard, make sure they are used in a confined parent container

v2.49.1 - 2023-07-04

General

• Fixed invalid @charset declarations in minified file gds-components.min.css

TypeScript

• [Input] Added missing export of AmountObject type
• [Input] Fixed FileInput components not using native File type in onFileRemove
• [Input] Fixed event types of TextareInput and CheckboxInput

v2.49.0 - 2023-06-28

Components

• [Card] Added scrollable prop to CardGroup
• [Form] Fixed FormField content wrapping to the next line if it was too wide

Components BETA

• [FunctionCard] BREAKING Updated PromoCard close button to be hidden by default
• [Transaction] BREAKING Removed deprecated moment.js support for date in Transaction components
• [FunctionCard] Added closeable prop to PromoCard

Styles

• Fixed ProductCard defaultAction touch target size and focus ring cut-off
• Added support for ProductInfo inside CardHeader’s INFO variant
• Improved LEFT alignment in CardHeader’s INFO variant
• Updated text colour of .g-inverted primary buttons

TypeScript

• [Input] Refactored input components to TypeScript

Documentation

• Added migration guide for turning ContactInfo into ProductInfo when used inside CardHeader’s INFO variant
• Improved documentation about CardHeader INFO variant
• Added detailed flowchart on design alignment and processes and information about expert sessions
• Updated Figma articles to reflect changes due to Figma enterprise

v2.48.0 - 2023-06-15

General

• Added buttons to hide or show code to all examples in the documentation, responsive viewer and standalone demos
• Updated blue-300 hex to match that of ui-blue
• Updated browserslist to recommended defaults

Components

• [Card] Added innerRef prop to Card
• [Image] Added initials prop to Avatar
• [Input] Updated FileList ariaLabelDelete prop to accept nodes
• [Utilities] Added direction prop and VARIANT enum to InfiniteScroll which defaults to DOWN to prevent event triggers when scrolling up

Components BETA

• [Stripe] Updated StripeActionSplitButton to go full width on XS
• [Timeline] Added isNavigation prop to Timeline
• [Timeline] Added href, disabled and selected props to TimelineItem

Documentation

• Updated External article
• [Table] Added rule how to deal with empty tables

Special thanks for contributing to this release 🎉🥇👏

• Octavio Cruz

v2.47.1 - 2023-06-12

TypeScript

• Fixed elementOrComponent utility types

v2.47.0 - 2023-05-31

General

• We wish you a Happy Pride Month!
• BREAKING Minimum required version of Node.js to run GDS locally is now 16.14
• Upgraded Storybook, Playroom and various other dependencies to their latest possible version
• Updated dependency version requirements to be less restrictive
• Added icons broken-glass, broken-glass-xl, fire, fire-xl, freeze, freeze-xl, key, key-xl, leakage, leakage-xl, liability, liability-xl, natural-disaster, natural-disaster-xl, phone-warning, phone-warning-xl, robbery and robbery-xl

Components

• [Dropdown] DEPRECATED renderToggle prop in favour of toggle
• [FocusPage] Updated Stepper to rely on CSS media queries in its responsive behaviour
• [Input] Updated FileInput disabled styles
• [Select] Fixed Select components losing track of selected items on re-render if value didn’t change
• [Utilities] Added alwaysRender and display props to MatchMedia which switches the component to always render its contents and hide it via CSS media queries

Components BETA

• [Dropdown] Updated SplitButton to go full width on XS
• [Misc] BREAKING Removed rounded prop from ColorDecoration component, can safely be removed
• [OverviewCard] Fixed an issue with extraAmounts slot truncation in horizontal OverviewCard

Styles

• Added support for High Contrast Mode to Card and CardGroup
• Added support for High Contrast Mode to ColorDecoration
• Added support for High Contrast Mode to FunctionCard and PromoCard
• Added support for High Contrast Mode to Modal, ConfirmationModal, SmallModal and TeaserModal
• Added support for High Contrast Mode to OverviewCard, OverviewPromoCard and OverviewWidgetCard
• Added support for High Contrast Mode to ProductCard
• Fixed CardHeader’s left alignment in FocusPage
• Fixed broken layout in StripeProductInfo with MenuDropdown on touch devices

TypeScript

• Updated types to be fully compatible with TypeScript 5

Documentation

• Added support for Windows High Contrast Mode
• Added document upload table example
• Fixed OverviewCard Shadow promotion documentation. Please put the text in extraAmounts slot instead of children.
• [App] Temporarily removed example pages with broken Abstract links

v2.46.0 - 2023-05-16

General

• George Design System mourns the victims of the horrific acts of terror in Serbia
• Updated gray-400 colour

Components

• [Button] Fixed link Button active text colour
• [Input] Added fileClassName prop to FileList
• [Misc] Added filled prop to Badge

Components BETA

• [Hint] Added footer and closeOnClick props to Hint
• [Hint] Fixed z-index of Hint
• [Overview] Added OverviewCardGroup component

Styles

• Added support for High Contrast Mode to Meter
• Added .g-card-group to CardGroup
• Refactored vertical CardGroup to flexbox
• Updated Alert variants to use weak UI colours
• Updated horizontal padding in CardHeader’s INFO variant to be context aware

Documentation

• Added documentation of the Hint component

Special thanks for contributing to this release 🎉🥇👏

• Lukas Pospisil

v2.45.1 - 2023-05-10

Components

• [Stripe] Fixed possible reference to undefined window in SSR scenarios

Utilities

• [useWindowScroll] Fixed possible reference to undefined window in SSR scenarios

v2.45.0 - 2023-05-03

General

• Updated strong and weak product colours values

Components

• [Alert] Removed deprecation of CollapsibleAlert
• [Avatar] Added BORDERLESS variant
• [Avatar] DEPRECATED TRANSLUCENT variant
• [Collapsible] DEPRECATED renderButton prop in favour of button
• [Data] Added htmlDateTimeAttribute prop to DateTime component
• [Data] Updated DateTime component to set datetime HTML attribute to full timestamp when format includes hours
• [Modal] Added inverted prop to TeaserModal

Components BETA

• [FocusPage] Fixed FocusPage navigation buttons not reacting to viewport changes
• [Navigation] Fixed PaginationNavigation not reacting to viewport changes
• [Stripe] Improved support of Amount’s fallback text in StripeHeader

Styles

• DEPRECATED .card-body, use .g-card-body instead
• Fixed vertical alignment of small buttons in CardFooter

Documentation

• Expanded article on Carousel to include sections on controls and stepper
• Improved documentation about alignment and lifecycle of a component
• Updated the devices in the responsive viewer

v2.44.1 - 2023-04-27

Components

• [Carousel] Fixed Carousel stepper being visible on XS/SM tiers
• [Toggle] Fixed ToggleImage image alignment

Components BETA

• [Dropdown] Fixed ColorDropdown default colors
• [Overview] Fixed an issue with avatar being visible in XS OverviewCard

v2.44.0 - 2023-04-19

General

• Added product colour -weak and -strong variants
• Added blue-bright external colour
• Updated icon kids-outline and added icons card-payment-acceptance, card-payment-acceptance-xl, car-insurance-xl, creditcard-additional, creditcard-additional-xl, gold-bars, gold-bars-xl, hand-wallet, hand-wallet-xl, kids-outline-xl, liability-insurance, liability-insurance-xl, loan-reconstruction, loan-reconstruction-xl, pension-savings, pension-savings-xl, salary-template-xl, wallet and wallet-xl

Components

• [Card] DEPRECATED HorizontalFunctionCardGroup, use CardGroup or Group instead
• [Card] DEPRECATED HorizontalFunctionCard, use FunctionCard with horizontal instead
• [Card] DEPRECATED VerticalFunctionCard, use FunctionCard instead
• [Card] Added FunctionCard component
• [Form] Fixed an issue with the layout of ProductInfo as PseudoInput in large tiers
• [Misc] Added Badge variants based on product colours
• [Switch] DEPRECATED label prop, use aria-label instead if you need an a11y label
• [Utilities] Added active and noClipboard props to VisuallyHidden

Components BETA

• [Overview] Added backgroundColor prop to OverviewCard
• [Overview] Updated OverviewCard’s avatar slot to accept Animation as well

Containers

• [ThemeProvider] Added event listener to temporarily hide elements using .no-clipboard while copying to prevent duplicated content when pasting into HTML compatible editors

Documentation

• Added documentation on accessing GDS Github and JIRA
• Added Horizontal-/VerticalFunctionCard migration guide
• Added rules for designers when to use a static addon and when to use a primary button addon in context of a SearchBar InputGroup
• Updated Figma libraries and Figma file for web
• Updated FunctionCard documentation
• Updated OverviewCard article with documentation of shadow promotion configuration
• Updated Switch article with an example on how to add a label

v2.43.1 - 2023-04-13

Components

• [Image] Fixed an issue with Animation size prop

Styles

• Fixed usage of .g-image-* modifiers on non-SVG elements

v2.43.0 - 2023-04-05

General

• We wrote an article about less than 900 pixels on our blog, go check it out!

Components

• [Card] DEPRECATED small prop in HorizontalFunctionCard, can safely be removed
• [Dropdown] Added horizontal positioning option
• [Form] Added contentClassName and descriptionClassName props to FormField
• [Form] Added support for labelColumnWidth using “auto” in FormField
• [Form] Updated FormField to render the input in a column taking up the rest of the available space
• [Meter] Added screenreaderText prop to Meter

Components BETA

• [Dropdown] DEPRECATED highlightWithArrow prop in MenuDropdown
• [Dropdown] Fixed an issue with keyboard navigation through links in MenuDropdown items
• [Hint] Added Hint component
• [Input] Added calendarDefaultDate prop to NewDateInput and NewDateRangeInput
• [Input] Updated NewDateInput to accept and utilize invalidString property in date prop
• [Input] Updated NewDateRangeInput to accept and utilize invalidString property in startDate and endDate props
• [ProductCard] BREAKING removed size prop, use variant instead
• [Search] Updated ClearableButton colour
• [Transaction] Updated Transaction to visually hide columns using the sr-only class

Styles

• DEPRECATED .g-ul-minor and .g-p-minor in FunctionCard, use .g-small instead
• DEPRECATED .g-p-regular in FunctionCard, should be removed
• Added truncation to ProductCard heading
• Updated tooltip’s icon colour
• Fixed Stripe’s toolbar appearing slightly cut off on top

TypeScript

• [Layout] Updated Col tier props to use literal types instead of primitives

Documentation

• Added ProductCard size migration guide

Special thanks for contributing to this release 🎉🥇👏

• Matej Mihalik
• Nik Sumeiko
• Oliver Surina

v2.42.2 - 2023-03-30

Styles

• Fixed text color on elements using the .g-inverted modifier

v2.42.1 - 2023-03-29

Styles

• Fixed text color in .g-inverted buttons

Honorary mentions 🎖️

• Vlad Slavin

v2.42.0 - 2023-03-22

General

• Added icons calendar-incoming, calendar-incoming-xl, calendar-outgoing, calendar-outgoing-xl, calendar-reload, calendar-reload-xl, helpdesk, plus-circle, plus-circle-xl and sparkasse-xl
• Updated icons copy, copy-xl and sparkasse

Styles

• DEPRECATED .badge in Badge, use .g-badge instead
• DEPRECATED .badge-pill in Pill, use .g-pill instead
• DEPRECATED .g-badge-label in Badge, use .g-badge instead
• Added modifier .g-avatar-image-contain to Avatar Image
• Added ProductCard to Store theme
• Fixed vertical alignment of icon in Badge inside Paragraph
• Fixed size of Badge inside .g-inverted container
• Removed custom text selection colour
• Updated Button styles to use CSS variables
• Updated Toggle styles to align secondary Buttons

TypeScript

• [Button] Fixed TransparentButton types
• [Icon] Added ICON enum export

v2.41.1 - 2023-03-16

Components BETA

• [Toggle] Updated ToggleGroup items to stretch vertically
• [Toggle] Updated ToggleX components to use GDS checkbox/radio
• [Toggle] Fixed ToggleImage vertical overflow limit
• [Toggle] Fixed ToggleButton text overlapping checkbox/radio

Containers

• [LanguageProvider] Fixed an issue with language string overrides other than type string
• [MatchMediaProvider] Fixed MatchMediaProvider matching for XXL grid when it wasn’t activated
• [ThemeProvider] Fixed ThemeProvider not applying useExtendedGrid if useFluidGrid option was used

TypeScript

• [Input] Fixed NewDateInput and NewDateRangeInput event types to include null

v2.41.0 - 2023-03-08

Components

• [Dropdown] Fixed Dropdown alignment always changing be left aligned above the toggle when there was not enough space underneath
• [Input] Updated FileDropzone browseText, infoText, draggingText, uploadingText and browseButtonText props to accept nodes
• [Input] Fixed an issue in FileList with file size showing incorrectly when the file is empty
• [Table] Updated visual style of Table headers to use border instead of a colored background
• [Table] Fixed an issue with multiple borders around Table in nested Cards or inside a Modal
• [Table] Fixed expanded CollapsibleTableRow scrolling the viewport when content was hovered in some cases
• [Typography] Added micro prop to Paragraph

Components BETA

• [Transaction] BREAKING Removed deprecated components AccountTransaction and OrderTransaction
• [Transaction] BREAKING Removed deprecated TransactionGroup columns keys actions, description, details, overlay and type
• [Transaction] BREAKING Removed deprecated TransactionGroup props selectable, showDate, showType, amountLabel, amountWidth, badgesLabel, dateLabel, descriptionLabel, detailsLabel, indicatorsLabel, miscLabel, selectableLabel and titleLabel
• [Transaction] BREAKING Removed deprecated Transaction props icon, imageUrl and renderType
• [Transaction] BREAKING Removed deprecated ICON enum from Transaction component
• [ProductCard] Updated ProductCard according to design requirements
• [Transaction] Updated visual style of TransactionGroup headers to use border instead of a colored background
• [Transaction] Added deprecation warnings for already deprecated overlay TransactionGroup column key and Transaction prop, please use columns.menu, menu and/or buttons props instead
• [Transaction] Fixed expanded TransactionDetail scrolling the viewport when content was hovered in some cases
• [Transaction] Fixed TransactionDetail rendering double borders

Styles

• [Modal] Updated all modals to be vertically centred

Documentation

• Added extended grid documentation
• Fixed “Open in Playroom” for demos that contained image assets

Special thanks for contributing to this release 🎉🥇👏

• Andrej Kumor

v2.40.1 - 2023-02-28

Components BETA

• [ProductCard] Fixed indicatorBadge not rendering correctly

Styles

• [FunctionCard] Fixed PromoCard box shadow

TypeScript

• [Form] Added name prop to FormField
• [Input] Fixed renderExtraButtons type in FileList to only have a single file argument

v2.40.0 - 2023-02-23

Components

• [Badge] DEPRECATED text prop, use children with rich content instead
• [Carousel] Added visibleItems and showStepper props
• [FunctionCard] DEPRECATED ActivatedPluginCard, please use ProductCard instead, see Migration Guide
• [Select] Fixed ProductSelect and RecipientSelect not rendering items at full width
• [Select] Fixed Select components not updating state when items were changed

Components BETA

• [Stripe] BREAKING Removed pluginColor prop, use colorValue instead, see Migration Guide
• [FunctionCard] Added PromoCard component
• [ProductCard] Added ProductCard component
• [Overview] Updated PropTypes restrictions on extraAmounts
• [Overview] Updated OverviewCard to support Button component in defaultAction prop
• [Overview] Updated OverviewPromoCard to support Button component in defaultAction prop
• [Overview] Updated horizontal OverviewCard to render a maximum of two Amounts (plus their conversions in case of dual currency amounts)
• [Transaction] Added support for disabling column sorting via columns.[key].sortable in TansactionGroup component, currently only supported by date, title, titleSecondary, amount, valuta and statement

Documentation

• [App] Updated or added the following App Component Documentation Pages: Alert, Avatar, Badge & Pill, Button, Cell, Chip, Input, Keyboard, Navigation Bottom, Navigation Top, Onboarding, Picker, Product Info, Progress, Sheet, States, Tabs, Toolbar, Tour, Widget
• [App] Rearranged ‘Basic’ pages and removed some outdated content

Special thanks for contributing to this release 🎉🥇👏

• Johannes Ecker
• Matej Mihalik

v2.39.1 - 2023-02-14

Components

• [Table] Fixed expanded CollapsibleTableRow scrolling the viewport when row decoration was hovered

Components BETA

• [Input] Fixed an issue with NewDateInput calling onDateChange with an incorrect value when the input was cleared and the same value was picked again
• [Input] Fixed an issue with NewDateRangeInput shifting value’s time zone on prop updates
• [Input] Fixed an issue with NewDateRangeInput returning endDate in without time zone offset
• [Transaction] Fixed menu and buttons not rendering in SM tier

TypeScript

• [Input] Fixed CheckboxInput event handlers return types

v2.39.0 - 2023-02-08

General

• Updated colour palette to match new corporate identity

Components

• [ContactInfo] Fixed Amount’s color being ignored
• [Dropdown] Fixed highlighted items not scrolling into view
• [FocusPage] Added previousButton and nextButton props to FocusPage
• [FocusPage] Updated minimal Stepper active colour to blue-400
• [Select] Fixed highlighted items not scrolling into view
• [Toggle] Updated design of Toggle components
• [Utilities] Fixed ClickOutside not registering Esc keypress when focus was on an element that prevents event bubbling
• [Utilities] Fixed KeyboardDetector not registering keyboard events when focus was on an element that prevents event bubbling

Components BETA

• [Dropdown] Added support for Switch control in MenuDropdown items via items.control, please be aware that the MenuDropdown won’t close automatically, but will still fire all other events normally
• [Dropdown] Fixed items.onClick event in MenuDropdown not firing when items are selected via keyboard navigation
• [Dropdown] Fixed onSelect event in MenuDropdown not using the correct item index when selected via keyboard navigation
• [Dropdown] Fixed MenuDropdown losing track of highlighted item on rerender
• [Stripe] Fixed aria-label usage in StripeNavigation
• [Stripe] Added toggleAriaLabel prop to StripeNavigation to support toggle label override
• [Transaction] Fixed alignment of wrapping content in titleSecondary

Styles

• Aligned cursor on disabled buttons with other disabled interactive elements
• Added disabled state to buttons that contain an Avatar
• Fixed color of dropdown caret in disabled PrimaryNavigationButton
• Removed unwanted box-shadow inside CardGroup
• Added CSS variable --size to icon

TypeScript

• [Input] Added onChange to CheckboxInput types

Documentation

• Updated Figma libraries and Figma file for web

v2.38.0 - 2023-01-27

Components

• [Navigation] Added support for icons and multiple tiers in SecondaryNavigation (see docs)
• [Navigation] Added badge prop to SecondaryNavigation

Components BETA

• [Dropdown] Improved accessibility of MenuDropdown component by updating its structure and behaviour
• [Overview] Updated vertical OverviewCard body slot to align to the top
• [Overview] Updated height of OverviewCard and OverviewPromoCard to 280px
• [Stripe] Fixed accessibility issues of navigation toggle on mobile
• [Utilities] Added LiveAnnouncer component

Containers

• [LanguageProvider] Added new language key common.menu for navigation toggle in Stripe on mobile

TypeScript

• [Overview] Enhanced type of extraAmounts prop in OverviewCard

Special thanks for contributing to this release 🎉🥇👏

• Ivan Burda

v2.37.0 - 2023-01-11

General

• We wrote an article about Hack-in-style 2022 on our blog, go check it out!

Components

• [Data] Fixed issue in DateTime with dynamic imports performing state updates after component has been unmounted
• [Image] Fixed Avatar’s badge icon alignment
• [Input] Fixed an issue in FileInput that prevented uploading a file after deleting it
• [FocusPage] Added minimal prop to Stepper #GDWEB-3853
• [Misc] Added masked and maskText props to AccountNumber to indicate obfuscated account numbers
• [Misc] Added ariaLabel prop to AccountNumber to support custom screen reader text
• [Misc] Added support for AccountNumber to be used inline
• [Modal] Added color prop to TeaserModal

Containers

• [LanguageProvider] Added new language key accountNumber.mask for screen-reader friendly obfuscated account numbers

Styles

• [Modal] Updated TeaserModal visual

Utilities

• Fixed getColorClassName not resolving deprecated Group colour classes correctly

TypeScript

• [Select] Added missing null type to Select props

Documentation

• [Input] Updated PseudoInput documentation and stories
• [Misc] Updated AccountNumber article
• [Dropdown] Added maxHeight prop documentation
• [FormField] Added multiple CheckboxInputs to the story

Special thanks for contributing to this release 🎉🥇👏

• Jakub Tucek

v2.36.1 - 2023-01-04

Components BETA

• [Input] Added timeZone support to NewDateInput and NewDateRangeInput

Special thanks for contributing to this release 🎉🥇👏

• Jakub Tucek

v2.36.0 - 2022-12-14

Components

• [FunctionCard] DEPRECATED usage of HTML img elements as indicator, use Image or .g-image instead
• [Input] Improved support for ProductInfo as PseudoInput
• [Modal] DEPRECATED ModalImage imageUrl prop, use src instead

Components BETA

• [Transaction] DEPRECATED usage of HTML img element in TransactionDetail, use Image or .g-image instead
• [Transaction] Fixed misc column not using faded colour in XL tier
• [Transaction] Fixed a styling issue with TransactionMenu button when additional buttons were present

TypeScript

• [Form] Improved FormField type safety
• [FunctionCard] Fixed HorizontalFunctionCardGroup types
• [Select] Improved Select components type safety

Documentation

• [App] Updated colour and token documentation
• Added panoramic Transaction example

Special thanks for contributing to this release 🎉🥇👏

• Jakub Tucek
• Johannes Ecker

v2.35.0 - 2022-11-30

Components

• [Image] Added Image component
• [Modal] Added backdropClassName prop to all Modal components
• [ProductInfo] Fixed Avatar’s margin when inside a button
• [Utilities] Fixed MatchMedia and useMatchMediaTierProp not updating correctly when viewport was initially in large tier

Containers

• [ThemeProvider] DEPRECATED keyboard detection .g-uses-keyboard

Styles

• DEPRECATED helper class .g-uses-keyboard, replace with :focus-visible
• DEPRECATED mixin uses-keyboard(), refactor to :focus-visible
• DEPRECATED mixin btn-custom-focus(color), refactor to element-focus-ring()
• DEPRECATED .g-sanity and .g-no-sanity
• DEPRECATED generation of gds-sanity.min.css, will be dropped in next major release
• Fixed breakpoint mixins off-by-one pixel on displays with non-integer DPI scaling
• Fixed display of Avatar hoverIcon which is derived from Button

TypeScript

• [Form] Fixed type of FormField input to include ComponentType

v2.34.0 - 2022-11-16

General

• Updated icons sum and sum-xl

Components

• [Modal] Updated ConfirmationModal’s icon colour to gray-300 in info and custom types
• [Misc] Removed dots from visually hidden part of AccountNumber

Styles

• Fixed Modal to respect container size in medium tier

TypeScript

• [Signing] Refactored Signing components to TypeScript

v2.33.0 - 2022-11-07

Components

• [Collapsible] Fixed Tooltip not reacting to mouse movement in CollapsibleHeader
• [Form] Fixed positioning of large FormFields with label inside when next to a Heading
• [Tabs] Updated Tabs component styling

Components BETA

• [Overview] Updated OverviewCard to align body slot to the top
• [Overview] Fixed an issue with OverviewCard defaulting to incorrect footer variant
• [Overview] Fixed Tooltip not reacting to mouse movement in OverviewCard
• [Transaction] Fixed Tooltip not reacting to mouse movement in Transaction if it was collapsible
• [Utilities] Improved Interactable’s transition animation

Containers

• [ThemeProvider] Fixed ThemeProvider not propagating props to Portal

Styles

• Added standard Inter font as a fallback font if “Inter var” isn’t available
• Updated small sized FocusPage to take up 10 columns in size in small tier, instead of 8
• Fixed multiline labels having too little spacing underneath
• Fixed missing FocusPage in store theme

TypeScript

• [Select] Updated ProductSelect color type

Documentation

• Extended Switch article with section on when to use it
• Updated MatchMedia documentation
• Updated Figma libraries and Figma file for web

Special thanks for contributing to this release 🎉🥇👏

• Matej Mihalik

v2.32.0 - 2022-10-19

General

• Added icons user-check and user-check-xl
• Fixed GDS debug info failing to highlight elements created with React 18

Components

• [Badge] Updated colour styles
• [Navigation] Updated BreadcrumbNavigation to show all tiers
• [OverviewPromoCard] Updated title prop to allow any React node

Componenta BETA

• [Input] Updated NewDateInput and NewDateRangeInput to parse dates entered in yyyy.MM.dd. and yyyy.M.d. formats
• [Transaction] Updated Transaction date column to be slightly wider to fit in longer words in the header
• [Transaction] Added support for customising column width via columns.date.width in TransactionGroup component

Styles

• Updated ui-blue, ui-green, ui-red, ui-yellow colour values
• Added ui-blue-100, ui-green-100, ui-red-100, ui-yellow-100, ui-yellow-300, ui-gray-100, and ui-gray-300 colours

Documentation

• Added a Search Bar example

Special thanks for contributing to this release 🎉🥇👏

• Matej Mihalik

v2.31.2 - 2022-10-19

Components BETA

• [Transaction] Fixed title and info in TransactionDetail not taking up all available space in XL+ tiers

v2.31.1 - 2022-10-07

Components BETA

• [Transaction] Fixed titleSecondaryIcon not rendering correctly in large tier

v2.31.0 - 2022-10-06

General

• We are pleased to announce that GDS documentation is now public on the web!
• Added icons rainbow and rainbow-xl

Components

• [Form] Fixed a cosmetic issue with FormField’s optional labels

Components BETA

• [Button] Fixed partly disabled SplitButton
• [FocusPage] Added className prop
• [Overview] Added VARIANT enum to OverviewCardButton and enabled setting footer variant in both OverviewCard orientations
• [Stripe] Updated StripeProductInfo’s avatar visibility in large tiers even when a back button is shown
• [Transaction] Added TransactionDate subcomponent to render formatted dates in other columns like valuta
• [Transaction] Added titleSecondaryIcon prop to Transaction to customise the icon that is displayed near the secondary information, it accepts either an icon name or element
• [Transaction] Fixed buttons in Transaction with detail being obstructed by another element
• [Transaction] Fixed Transaction not rendering misc in its own column in extended XL tier
• [Transaction] Updated Transaction to use default text color if misc, valuta or statement are rendered in columns
• [Transaction] Updated Transaction to display secondary information stacked in large tier
• [Transaction] Updated Transaction to display badges and alert in misc column

Containers

• [MatchMedia] Added useMatchMediaTierProp hook to provide property selection based on current tier

Documentation

• Added SplitButton component to Dropdown article
• Updated FocusPage article with XXL sizes

v2.30.0 - 2022-09-20

General

• Added option to enable extended XL & XXL grid in Storybook, Playroom and Responsive Viewer

Components

• [Amount] Added useHeavyMinus to show updated minus and space Unicode characters
• [ProductInfo] Added alignment prop to display Avatar in various positions

Components BETA

• [OverviewCard] Added SIZE enum to OverviewCardButton and enabled setting size prop
• [Stripe] Added StripeActionSplitButton
• [Transaction] BREAKING Updated misc column to be rendered by default
• [Transaction] BREAKING Updated indicators to be rendered in misc column instead of underneath the amount
• [Transaction] DEPRECATED amountWidth prop in TransactionGroup, please use columns.amount.width instead
• [Transaction] Added statement and valuta props to Transaction component
• [Transaction] Added statement and valuta columns to TransactionGroup component
• [Transaction] Added support for customising column width via columns.[key].width in TansactionGroup component, currently only supported by amount, valuta and statement
• [Transaction] Updated Transaction layout to use XXL grid in XL tier if extended grid option is active
• [Transaction] Updated TransactionGroup header alignment when amountSecondary column is used
• [Transaction] Updated TransactionGroup misc column to be sortable when amountSecondary is used
• [Transaction] Fixed Transaction menu column truncation when used outside of amount column

Containers

• [ThemeProvider] Added useExtendedGrid to ThemeProvider
• [LanguageProvider] Added transaction.header.statement and transaction.header.valuta keys

Styles

• Added @media-breakpoint-extended-X Sass mixins to be used in extended grid environment

v2.29.0 - 2022-09-07

Components BETA

• [Dropdown] Fixed SplitButton danger variant border overlap
• [Dropdown] Added SplitButton primary and tertiary variant button separator
• [Dropdown] Added support for SplitButton on colour
• [Transaction] Added amountSecondary prop to Transaction
• [Transaction] Added amountSecondary column to TransactionGroup

Containers

• [LanguageProvider] Added transaction.header.amountSecondary key

TypeScript

• Fixed some issues with manually written type declarations for NativeSelect and ProductSelect
• Fixed an issue with missing type declarations for third party dependencies

v2.28.0 - 2022-08-24

Components BETA

• [Dropdown] Refactored SplitButton to be composable
• [Overview] Fixed OverviewCard ignoring incomplete dual currency structured objects
• [Transaction] Added XXL breakpoint for Transaction layout, which will only take effect if ThemeProvider.useBs5Grid is activated
• [Transaction] Updated general layout of Transaction component, most notably the placement of TransactionMenu and top-alignment of date and selectable item when no avatar is used
• [Transaction] Added buttons prop to Transaction component to be shown left of or instead of a TransactionMenu
• [Transaction] Added titleSecondary, infoSecondary and renderInfoSecondary props to Transaction component, commonly used to show information about a receiver
• [Transaction] Removed previously deprecated props actionLabel and column.actions

Containers

• [LanguageProvider] Added keys for transaction.header.titleSecondary and transaction.header.infoSecondary
• [LanguageProvider] Removed previously deprecated language key transaction.header.actions

Styles

• Updated b tag font-weight to semi-bold

Documentation

• Updated Stripe’s right slot documentation
• Updated Transaction documentation with content about secondary title and info (sender/receiver)

v2.27.0 - 2022-08-10

General

• Added icons new and new-xl

Components

• [Tooltip] Added triggerClassName prop to Tooltip
• [Tooltip] Fixed className being applied to both container and trigger element

Components BETA

• [Overview] Fixed an issue with OverviewCard incorrectly rendering some amounts in superscript

Styles

• [Dropdown] Fixed SplitButton negative margins

v2.26.0 - 2022-07-28

General

• Added option to enable fluid grid in Storybook, Playroom and Responsive Viewer
• Added icons sum and sum-xl

Components

• [Card] Added export for CardBody component
• [Grid] Updated Grid to use fluid grid depending on the context of ThemeProvider if it’s not defined
• [Navigation] Updated PrimaryNavigation to use fluid grid depending on the context of ThemeProvider
• [Stripe] Updated StripeHeader to use fluid grid depending on the context of ThemeProvider

Components BETA

• [Navigation] Fixed an issue with BreadcrumbNavigation disabled items
• [Navigation] Fixed an issue with BreadcrumbNavigation with singular item
• [Overview] Fixed an issue that required explicitly setting the main amount to SUPERSCRIPT.FORCED

Containers

• [ThemeProvider] Added useFluidGrid to ThemeProvider

TypeScript

• Fixed an issue with RefCallback not being imported correctly which caused a problem while installing the package
• Fixed an issue with incompatible onChange and onClick types in SelectableItemProps
• Fixed missing disabled and isLoading prop type definitions for SplitButton

Documentation

• Updated Figma libraries and Figma file for web

Special thanks for contributing to this release 🎉🥇👏

• Nik Sumeiko

v2.25.1 - 2022-07-22

Components

• [Navigation] Fixed item specific linkClassName being ignored in SecondaryNavigation

Components BETA

• [Input] Removed default inputmode from NewDateInput and NewDateRangeInput

TypeScript

• Fixed useRefs types export

v2.25.0 - 2022-07-13

Components

• [Amount] Added fallbackIcon prop

Components BETA

• [Button] Added SplitButton component
• [Overview] Added shouldOffsetForFooter prop to OverviewCard
• [Stripe] Added productNumber support in StripeHeader small variant

Documentation

• Extended article on Amounts in dual currencies

v2.24.0 - 2022-06-29

Components

• [Carousel] Fixed number of slides logic
• [Select] Fixed ProductSelect ignoring arrays in amount prop
• [Table] Fixed screen readers skipping over expanded content in CollapsibleTable

Components BETA

• [Overview] BREAKING Removed extraAmountsConverted prop in OverviewCard, use extraAmounts with structured objects
• [Input] Fixed inputmode in NewDateInput and NewDateRangeInput
• [Input] Improved uploading state in small viewports in FileUpload
• [Overview] Extended OverviewCard to accept structured objects for dual currencies in extraAmounts
• [Stripe] Fixed StripeToolbar rendering above expanded StripeNavigation
• [Transaction] Fixed Transaction expand button not spanning the whole container on Safari browsers older than version 14

TypeScript

• Fixed types exports for ClearableTextInput, IconProvider, MatchMediaContext

Special thanks for contributing to this release 🎉🥇👏

• Petro Salema

v2.23.0 - 2022-06-15

General

• Added icons airplane and airplane-xl

Components

• [Form] Updated styles for large FormField making XS and SM tiers consistent
• [MenuDropdown] Fixed selected item highlight on subsequent opening

Special thanks for contributing to this release 🎉🥇👏

• Vlad Slavin

v2.22.0 - 2022-06-02

General

• We wish you a Happy Pride Month!
• Added icons emoji-angry, emoji-angry-xl, emoji-happy, emoji-happy-xl, emoji-joy, emoji-joy-xl, emoji-okay, emoji-okay-xl, emoji-sad, emoji-sad-xl, lightbulb and lightbulb-xl

Components

• [Carousel] Fixed Carousel items width sizing
• [Carousel] Fixed Carousel buttons not hiding when scrolling not needed
• [Data] Added timeZone prop to DateTime component
• [Dropdown] Updated DropdownFooter styles
• [Table] Fixed CollapsibleTableRow not properly calling renderButton prop to modify the button that opens the Collapsible

Components BETA

• [Overview] Added mainAmountConverted, extraAmountsConverted, shouldOffsetForDualCurrency props to OverviewCard
• [Overview] Fixed an issue with horizontal OverviewCard displaying only the first of extraAmounts when mainAmount is not set
• [Overview] Fixed OverviewCard footer alignment when menu is missing
• [Transaction] Fixed misc column in Transaction not wrapping text into multiple lines

Containers

• [LanguageProvider] Added timeZone prop to LanguageProvider component

Styles

• [Carousel] Updated Carousel buttons active and hover styles

Documentation

• Added second batch of buttons linking to Figma to component articles
• Added documentation of SliderInput’s step prop
• Updated Figma libraries and Figma file for web

v2.21.0 - 2022-05-18

Components

• [Card] Added wrap prop to CardFooter
• [LabeledList] Fixed LabeledListItem converting label to string in compact mode

Documentation

• Added FigmaButton
• Added first batch of buttons linking to Figma to component articles
• Updated Content header design
• Updated footer information and privacy policy
• Updated Form Captions to use FormField’s description

v2.20.1 - 2022-05-12

General

• DEPRECATED icon emptystate, it has been renamed to empty-state-generic
• DEPRECATED icon mobile-payment, it has been renamed to mobile-nfc-payment

Components

• [Collapsible] Fixed CollapsibleHeader’s collapseOnClick behaviour
• [Collapsible] Fixed an issue with uninteractable CollapsibleHeader children by adding coverParent prop to CollapsibleButton to opt out from covering the entire header

v2.20.0 - 2022-05-04

General

• We wrote an article about our transition to Figma on our blog. Check it out if you are interested!
• Added icons card-healthinsurance, card-healthinsurance-xl, pension-template and salary-template
• Fixed date-fns locale imports not being declared as external

Components

• [Input] DEPRECATED DateInput component, please use NewDateInput instead
• [LabeledList] Updated LabeledList to use context instead of element cloning
• [Select] Updated Select components to highlight “Select all” item on open instead of the last selected item in case all valid items are selected
• [Utilities] Fixed FocusTrap trying to restore focus on unmount, even if it wasn’t active

Components BETA

• [Input] DEPRECATED DateRangeInput component, please use NewDateRangeInput instead
• [Stripe] Updated styles for dual currency Amount in StripeProductInfo
• [Transaction] Fixed TransactionDetail ignoring column definitions

TypeScript

• Fixed missing clearItemLabel type definition in Selects

Documentation

• Updated the rules on when to use error Alert
• Added Figma libraries and files for web and sunsetted documentation of Sketch
• Updated all bookmarklets to use the latest cross-browser ECMAScript syntax
• Added shared code to bookmarklets that makes them work in browser’s main window and all iframes

v2.19.0 - 2022-04-20

General

• Added icons euro-convert, euro-convert-xl, card-topup and card-topup-xl

Components

• [Button] DEPRECATED the need to set unstyled and .g-button-avatar when Button contains an Avatar, see Migration Guide
• [Dropdown] Fixed scroll and resize events being active for closed Dropdown components
• [Input] Added possibility to change Button variant in InputGroup addons
• [Navigation] BREAKING Fixed AnchorNavigationItem href link targets
• [Select] Fixed Select to receive null on clearing

Components BETA

• [Navigation] Added SkipLinkNavigation component

Documentation

• Rewrote the Alert article
• Added short articles on AccountNumber, ClearableTextInput, ColorDecoration, ContactInfo, DateTime, Flag, Handover, HashtagInput, HiddenInput, Interactable, Layout, OverviewCard, OverviewWidgetCard, PasswordInput, SegmentedMenu, Signing, Switch, TextHighlighter, Timeline, Transition, Typography, Utilities and VisuallyHidden components
• Extended existing articles with documentation of ClearableButton, BreadcrumbNavigation, PaginationNavigation, RecipientSelect and CollapsibleTable
• Fixed multiple labelled Amounts example in CardFooter, needs CardFooterTotal[] instead of Fragment
• [App] Replaced Abstract embeds with Figma images in Button, Bottom Sheet, Card, Header, Onboarding, Section Header, Selection Control, Skeleton Loader, and Toolbar documentation

Utilities

• Added support to recursively search children with isElementInChildren

Special thanks for contributing to this release 🎉🥇👏

• Johannes Ecker

v2.18.0 - 2022-04-14

Components

• [Data] Added support for directly using date-fns locale data in DateTime’s locale prop
• [Dropdown] Fixed section headers padding when Selectable is used in a MenuDropdown
• [Input] Fixed NewDateInput and NewDateRangeInput ignoring first calendar click when value is set
• [Select] Fixed missing onSelect value on selection of clearing item

Components BETA

• [Overview] Fixed OverviewCard menu alignment when no footer is present
• [Overview] Fixed OverviewPromoCard rendering with vignette when imageUrl is null

Containers

• [LanguageProvider] Added support for directly using date-fns locale data in LanguageProviders’s locale prop

v2.17.0 - 2022-04-06

Components

• [Transaction] DEPRECATED usage of Moment.js in Transaction, please use a JS Date object instead, see Migration Guide for details
• [Transaction] DEPRECATED usage of Moment.js format strings in dateFormat largeDateFormat and largeDateFormatYear, please use Unicode Tokens instead, see Migration Guide for details
• [Collapsible] Fixed missing parent overlay styles when using renderButton
• [Data] Updated DateTime component to dynamically load the requested locale from the installed date-fns dependency
• [Data] Updated DateTime to print an error to the console instead of throwing an exception when using an invalid format
• [Form] Fixed announcement of FormField error message
• [Image] Added variant, color, and backgroundColor props to Avatar
• [Input] Added support for legend in RadioInputGroup via label

Components BETA

• [Overview] Updated OverviewPromoCard layout to better align to horizontal OverviewCard
• [Stripe] Improved double Amount support in StripeProductInfo

Containers

• [LanguageProvider] DEPRECATED usage of Moment.js format strings in all date format strings, please use Unicode Tokens instead

Utilities

• Fixed argument option showMinusSign to default to true in formatAmount

Documentation

• [Card] Updated Card stories to use Storybook controls
• Added Transaction date migration guide
• Added “Open in Figma” button in FigmaImage
• Extended FocusPage article with information regarding BreadcrumbNavigation
• Improved labelling of headings, icons, and interactive elements
• Updated FigmaImage to use same background as component demos

v2.16.1 - 2022-03-31

Components

• [Table] Fixed close button covering the content area in CollapsibleTable

v2.16.0 - 2022-03-24

General

• Added Umami, a privacy-conscious analytics tool to GDS website
• Added icons charity and charity-xl
• GDS releases are now published to a second, company-wide available NPM registry: https://jfrog.g-labs.io/artifactory/designsystem/

Components

• [Image] DEPRECATED path in Animation, please use src instead
• [Table] Fixed content TableCells of type ACTION in CollapsibleTable not being clickable

Components BETA

• [Navigation] Updated BreadcrumbNavigation items[] prop to extend LinkProps
• [Transaction] Updated Transaction to exclude SelectableItem and TransactionMenu columns from the clickable area

Styles

• Aligned HorizontalFunctionCard body content, even when there is no heading
• Ensured 55px header height for headings in Collapsible and TransactionGroup
• Ensured height in ToggleImage independent of given image
• Fixed top padding for heading level 3 in Typography

Documentation

• Added bookmarklet to show/hide enlarged touch targets
• Added own placeholder image solution
• Added own flag placeholder solution
• Added privacy policy and an imprint link
• Added Token MDX component
• Updated Toggle rules for designers
• Fixed Appearance setting not representing the previously saved value on page load

v2.15.1 - 2022-03-16

Components

• [Input] Fixed processValue prop leaking in RadioInput
• [Table] Fixed CollapsibleTable button not triggering any action

Components BETA

• [Input] Fixed an issue with NewDateInput and NewDateRangeInput not updating values on prop removal
• [Input] Fixed a cosmetic issue in NewDateInput

v2.15.0 - 2022-03-10

General

• #StandWithUkraine

Components

• [Amount] Added prependedText prop
• [Card] Improved DOM nesting when CardFooterTotal is used
• [Collapsible] Updated CollapsibleHeader to fully rely on CollapsibleButton for toggling
• [Select] Fixed Amount formatting of the selected item in RecipientSelect
• [Switch] Fixed aria-checked when active is not present

Components BETA

• [Navigation] BREAKING added hideLogo with default false to PrimaryNavigation, set true if logo should not be shown on larger tiers
• [Navigation] BREAKING updated PrimaryNavigation’s left column to take up 25% of available space on larger tiers when center is specified
• [Overview] Updated horizontal OverviewCard to align layout with other OverviewCards when some of them miss menu
• [Overview] Fixed closeButton positioning in horizontal OverviewPromoCard
• [Overview] Fixed closeButton focus styles in OverviewPromoCard
• [Stripe] Added overline prop to StripeTitle

Styles

• Improved vertical alignment for 24px icons in paragraphs and list items

Utilities

• Fixed formatAmount default values differing from Amount component

TypeScript

• [Transaction] Refactored Transaction components to TypeScript

Documentation

• [App] Updated Action Sheet article
• [App] Updated Colours article
• [App] Updated Bottom Sheet (Android) article to Figma images
• [App] Updated Cells article to Figma images
• [App] Updated EmptyState article to Figma embeds
• [App] Removed obsolete sections from EmptyState article
• [Storybook] Added CardFooter example with Badge

Special thanks for contributing to this release 🎉🥇👏

• Johannes Ecker

v2.14.0 - 2022-02-24

General

• Added NativePreview component to GDS docs, which can be used to consolidate preview and multiple code snippets
• Added code language label to code snippets
• Added option to enable XXL Grid in Storybook and Responsive Viewer
• Added option to switch source per demo (HTML/React, Android/iOS)
• Changed default position of Storybook’s addons panel to bottom

Components

• [Alert] Updated default error icon
• [Button] Reduced margin for small buttons in ButtonGroup
• [Amount] Added showMinusSign and showPlusSign props
• [FunctionCard] Added custom indicator
• [Misc] Fixed TextHighlighter throwing an error when highlight contained special characters
• [Typography] DEPRECATED noLine in Heading
• [Select] Added clearItemLabel prop to Select, which when set will add an additional item for clearing itself
• [Select] Updated RecipientSelect to also filter through and highlight more fields of contact and product

Components BETA

• [Overview] Added verbose prop to OverviewCard
• [Overview] Updated OverviewCard to make color prop optional
• [Misc] Enabled custom style attribute in ColorDecoration
• [FunctionCard] Added custom indicator
• [Utilities] Improved Interactable to support TeaserCard-like behaviour

Styles

• DEPRECATED .g-no-line for heading level 1, may safely be removed
• DEPRECATED variable $typo-hr-spacer, use actual value instead
• Removed SmallModal min-height
• Updated SmallModal footer style when empty

TypeScript

• [Search] Refactored Search components to TypeScript

Documentation

• Added possibility to fetch assets (images) from Figma files as an alternative to Figma embeds

v2.13.1 - 2022-02-16

Components

• [Modal] Fixed ConfirmationModal icon rendering
• [Modal] Fixed Modal not removing .modal-open while unmounting in some cases

Components BETA

• [Input] Fixed NewDateInput and NewDateRangeInput calling onKeyDown in duplicate
• [Input] Fixed NewDateRangeInput not calling onKeyUp
• [Input] Fixed NewDateRangeInput not passing props to underlying inputs
• [Input] Fixed NewDateRangeInput crashing on displayFormat change
• [Input] Fixed an issue with NewDateRangeInput inside InputGroup

Styles

• Fixed hover icon size in larger Avatars

Documentation

• Fixed missing Modal stories

v2.13.0 - 2022-02-09

General

• HINT Minimum required version of node.js to run GDS locally is now 14.15
• Made XXL grid entry toggleable in Playroom
• Upgraded Bootstrap dependency to 4.6.1

Components

• Added isToggled argument to all onToggle event handlers
• Added cancellation logic by returning false from onBeforeOpen and onBeforeClose handlers
• [Amount] Added fallbackText prop
• [Select] Added clearable, onClear and clearLabel props to FilteredSelect and RecipientSelect
• [Transition] Fixed missing export of TransitionCollapseHeight

Components BETA

• [Navigation] Added PaginationNavigation component
• [Navigation] Added support for Avatar in PrimaryNavigationButton
• [Transaction] Fixed order of Transaction column headers

Styles

• Updated bold typography to semi-bold in multiple components
• Aligned padding/margin of all headings inside FunctionCard
• Fixed padding/box-shadow in VerticalFunctionCardGroup when there is a shared footer
• Fixed focus/hover state for Avatar in Button without icon

TypeScript

• [Modal] Refactored Modal components to TypeScript

Documentation

• Updated Alert, Amount, and ProductInfo stories to new format
• Updated heading (h3) size
• Fixed Card border radius to 8px
• Fixed Snackbar Items example

Special thanks for contributing to this release 🎉🥇👏

• Roland Illés

v2.12.0 - 2022-01-26

General

• Removed “(BETA)” suffix in affected story names to increase compatibility with some plugins

Components

• [Card] Added alignment prop to CardHeader (only supported for INFO variant)
• [Navigation] Added support for link buttons link buttons in SecondaryNavigation

Components BETA

• [Input] BREAKING Moved isUploading prop from FileDropzone a level higher to FileInput
• [Navigation] BREAKING Removed PrimaryNavigationDropdownToggle, use PrimaryNavigationButton with/without showDropdownIndicator instead
• [Transaction] DEPRECATED overlay prop, please use menu instead
• [Transaction] DEPRECATED columns.overlay prop in TransactionGroup, please use columns.menu instead
• [Input] Added support for disabled in FileInput and its subcomponents
• [Input] Improved FileInput to prevent adding more files when either disabled or isUploading are activated
• [Input] Added forwardRef logic to FileInput
• [Input] Added onChange, onClick and onDrop events to FileInput
• [Input] Updated onFileAttach in FileInput to pass an array of files
• [Input] Added SliderInput component
• [Navigation] Added Breadcrumbs component
• [Transaction] Added TransactionMenu component, which can be used in the menu prop of a Transaction to display an overflow menu
• [Transaction] Added support for new date format strings in LanguageProvider, the local props dateFormat, largeDateFormat and largeDateFormatYear can be used to override these strings

Containers

• [LanguageProvider] Added transaction.header.menu key
• [LanguageProvider] Added format.date, format.isoDate and format.screenreaderDate, as well as transaction.format.date, transaction.format.largeDate and transaction.format.largeDateYear strings
• [ThemeProvider] Added useBs5Grid to opt into using a grid where XXL is larger than XL

Styles

• Added sixth tier named XXL to the grid, which is inactive by default
• Fixed deprecated hoverIcon styles in Avatar

TypeScript

• [Overview] Refactored Overview components to TypeScript
• [Snackbar] Refactored Snackbar to TypeScript

Documentation

• Added PrimaryNavigationDropdownToggle migration guide
• Added TransactionMenu migration guide
• Updated Transaction documentation with recent changes
• Added documentation of SliderInput
• Added an example of how to use Select as a filter in a form
• Added page about Figma
• Added Figma badge

Sketch

• Reduced XL grid in documentation from 1170px to 1140px, to be in sync with the move from Bootstrap 3 to 4

v2.11.1 - 2022-01-13

Components

• [FocusPage] Fixed VoiceOver step announcement for Safari in Stepper
• [Select] Fixed RecipientSelect not quite supporting an element in items.product.amount

TypeScript

• [Input] Fixed FileInput to extend InputHTMLAttributes

Documentation

• Added Avatar hoverIcon* migration guide
• Added ProductSelect Amount migration guide

v2.11.0 - 2022-01-12

Components

• [Image] DEPRECATED hoverIcon in Avatar, wrap in a Button with an icon instead
• [Image] DEPRECATED hoverIconLabel in Avatar, wrap in a Button with aria-label instead
• [Image] DEPRECATED hoverIconProps in Avatar, wrap in a Button with custom props instead
• [Select] DEPRECATED usage of amount data in items.product.amount in ProductSelect and RecipientSelect
• [Select] Added support for Amount element in items.product.amount in ProductSelect and RecipientSelect
• [Select] Fixed FilteredSelect passing a search value without whitespace to filterItems

Components BETA

• [Overview] Updated OverviewPromoCard typography

Documentation

• Fixed wrong name of compiled bootstrap.min.css file
• Fixed wrong text- and border-color of disabled input file
• Improved OverviewPromoCard docs and stories to use assets based on horizontal prop

v2.10.0 - 2021-12-15

General

• We wrote two articles about Hack-in-style 2021 and the future of GDS 🔮 on our blog, go check them out!
• Added icons leaf, leaf-xl, reward-badge and reward-badge-xl
• Fixed light theme not looking ideal when OS is set to dark mode
• Fixed GDS user settings not being applied correctly on page load

Components

• [ContactInfo] Extended type slot with preType and postType props
• [Input] Fixed NewDateInput and NewDateRangeInput not reformatting values when displayFormat changed
• [Misc] Changed TextHighlighter to ignore all whitespace
• [Select] Changed FilteredSelect to ignore all whitespace while filtering
• [Select] Changed FilteredSelect to delete the search value on selection
• [Select] Fixed Select components not highlighting selected items after rerender
• [Select] Fixed Select components to highlight selected item on open

Components BETA

• [Navigation] Updated PrimaryNavigation center layout to stretch all available space
• [Stripe] Updated sticky StripeActionButton to full width in smaller tiers
• [Transaction] Increased label column width of TransactionDetail to fit some longer words without breaking

TypeScript

• Removed duplicated type declarations in types/types, please adjust your paths in case you import from there
• [LanguageProvider] Fixed missing language key transaction.header.avatar
• [Select] Fixed missing search argument in filterItems
• [Transaction] Added deprecated column definitions column.type, column.descriptions, column.actions and column.details back to TransactionGroup types

Documentation

• Added example for adding multiple forms in a CardGroup

v2.9.0 - 2021-12-01

General

• Hello Dark Mode! 🦉 Decrease eye strain while enjoying the GDS documentation #HackInStyle2021
• Added multibanking-sync-xl and plugin-multibanking-xl icons
• Added global state helper functions to Playroom to make prototyping easier: setState(key, value), getState(key[, defaultValue]), resetState(key), handleStateEvent(key)

Components

• [Dropdown] Fixed caret colour for some DropdownToggle variants
• [Input] Fixed a layout issue with NewDateInput and NewDateRangeInput in mobile Safari

Components BETA

• [FocusPage] Improved Stepper accessibility on XS tier
• [Navigation] Added center prop to PrimaryNavigation
• [Navigation] Added custom Overview and Logout to PrimaryNavigation
• [Overview] Added titleOverline and amountOverline props to OverviewCard
• [Table] Added hairline separator between head and body
• [Table] Added hover colour also to :focus-within
• [Table] Removed alternating row colour
• [Transaction] BREAKING Removed bigDateFormatUpper, bigDateFormatLower and bigDateFormatYear props from Transaction components, please use largeDateFormat and largeDateFormatYear instead
• [Transaction] DEPRECATED AccountTransaction and OrderTransaction components, please use Transaction instead
• [Transaction] DEPRECATED icon, imageUrl and renderType props, please use avatar and renderAvatar instead
• [Transaction] DEPRECATED showDate, showType and selectable props in TransactionGroup, please use columns.date.show, columns.avatar.show or columns.selectable.show instead
• [Transaction] Updated design and layout of Transaction component
• [Transaction] Added visibility control to all Transaction Group columns via the properties show and showInDetail
• [Transaction] Added a dedicated alert column in TransactionGroup
• [Transaction] Added story examples for various Transaction configurations
• [Transaction] Updated Transaction stories with info on multiple lines, which now use the misc prop and column

Containers

• [LanguageProvider] BREAKING Renamed transaction.header.description key to transaction.header.info
• [LanguageProvider] BREAKING Renamed transaction.header.actions key to transaction.header.overlay
• [LanguageProvider] BREAKING Renamed transaction.header.details key to transaction.header.detail
• [LanguageProvider] BREAKING Renamed transaction.header.type key to transaction.header.avatar
• [LanguageProvider] Added transaction.header.alert key

Styles

• Updated Amount font-size in CardFooter from 18px to 16px

TypeScript

• [Dropdown] Changed MenuDropdown.ItemPropTypes to accept a generic type for value
• [Select] Changed ItemPropTypes to accept a generic type for value
• [Transaction] Fixed TransactionGroup columns type

Documentation

• Added article on MatchMedia component
• Added migration guide for Transaction changes
• Updated Transaction docs and examples
• Updated UX content introduction and UI text guide pages
• Fixed iOS badge styles

Special thanks for contributing to this release 🎉🥇👏

• Jakub Sebok
• Lisa Stadler

v2.8.1 - 2021-11-10

Components

• [Select] Fixed an issue with filter not matching strings with diacritic signs
• [Table] Fixed missing COLOR static for CollapsibleTableRow
• [Table] Fixed missing mouse event handlers for CollapsibleTableRow

Components BETA

• [Stripe] Fixed StripeHeader slot props issuing a warning in case they are empty

Styles

• Fixed focus style for read-only input fields

v2.8.0 - 2021-11-03

Components

• [Alert] DEPRECATED CollapsibleAlert component
• [FunctionCard] Updated icon, heading, and indicatorText props to accept components
• [Tooltip] Fixed Tooltip trigger image announcement for screen readers

Components BETA

• [Navigation] Added programmatic control props (isOpen, onOpen, onClose, …) to PrimaryNavigation
• [Overview] Added OverviewPromoCard component
• [Overview] Updated OverviewCard to display children slot at the bottom
• [Overview] Fixed OverviewCard title truncation when a badge is present
• [Transaction] Fixed TransactionDetail layout when used within FocusPage

Typescript

• [ProductInfo] Refactored ProductInfo to TypeScript

Documentation

• [App] Added page for basic layout
• Added documentation of eventHasKey, formatAmount and parseAmount in a new Utilities article in the Basics section

v2.7.1 - 2021-10-25

Components BETA

• [Overview] Fixed an issue with unclickable OverviewCard footer buttons

Styles

• Fixed Bootstrap styles for strong leaking through in some cases

TypeScript

• [Dropdown] Fixed MenuDropdown item types to require value

v2.7.0 - 2021-10-20

General

• We wrote an article about GDS 2 documentation improvements on our blog. Check it out if you are interested!

Components

• [Carousel] Removed Carousel end padding on larger tiers
• [Input] Fixed CountedTextInput’s counter wrapping in multiple lines
• [Misc] Fixed an issue in AccountNumber when children is an empty string
• [Select] Added showSelectedCount prop to render a summary Pill for Select components with multiple

Components BETA

• [Dropdown] Added support for href in MenuDropdown.items which will result in items rendering as links instead of buttons
• [Dropdown] Fixed missing support for maxHeight prop in MenuDropdown
• [Dropdown] Fixed an issue with maxHeight not accepting strings (in addition to numbers)
• [Navigation] Added sticky prop in PrimaryNavigation
• [Overview] Fixed an issue with some non-interactive OverviewCard children covering the default action
• [Stripe] Fixed duplicated display of alias in StripeProductInfo for large tiers

TypeScript

• [Table] Refactored Table components to TypeScript

Documentation

• Added example of controlled CheckboxInput
• Expanded Alert article with a section on CollapsibleAlert
• Expanded FileInput article
• Expanded CheckboxInput article with documentation of indeterminate states
• Updated all Dropdown examples to use the new Button component
• [App] Added page for Section Header
• [Store] Published Alert and Modal examples

v2.6.0 - 2021-10-06

General

• DEPRECATED support for LibSass (node-sass) as a compiler in favor of Dart Sass

Components

• [Alert] Added warning to Alert components when closeable was used without heading
• [Alert] Updated Alert components to not render close button when it’s either in small size or no heading is given
• [ContactInfo] Improved ContactInfo structure for screen readers
• [Misc] Added icon prop to Badge
• [Misc] Fixed TextHighlighter decreasing text font-weight
• [ProductInfo] Improved ProductInfo structure for screen readers

Components BETA

• [Carousel] Fixed Carousel hiding content in small tiers
• [Navigation] Added leftPromotion and rightPromotion to PrimaryNavigation
• [Overview] Fixed an issue with OverviewWidgetCard children interactivity
• [Overview] Updated horizontal OverviewCard to display badges in place of subtitle
• [Switch] Updated Switch styles to use semi-transparent black in .g-inverted context
• [Switch] Fixed incorrect height of Switch component

TypeScript

• [Form] Refactored Form components to TypeScript
• [Tooltip] Refactored Tooltip to TypeScript

Documentation

• Added country-specific formatting examples to Amount
• Added Slack box to documentation of AmountInput, Navigation and Transaction
• [App] Improved cell documentation with information on inset dividers

Special thanks for contributing to this release 🎉🥇👏

• Johannes Ecker

v2.5.1 - 2021-09-28

Components

• [Collapsible] Fixed alignment of Button in CollapsibleContentSheet
• [Collapsible] Fixed Button having too much margin in CollapsibleContentSheet
• [Dropdown] Fixed caret being shown in all toggle elements

Components BETA

• [Navigation] Fixed PrimaryNavigation rest props spreading to the wrong container

v2.5.0 - 2021-09-22

General

• Added icons web-cards-new, web-cards-new-xl, web-cards-new-active, web-cards-new-active-xl, web-list-new, web-list-new-xl, web-list-new-active and web-list-new-active-xl

Components

• [Dropdown] Updated Dropdown caret to make it visually aligned with Select
• [Dropdown] Updated DropdownFooter hover styles
• [Icon] Updated Icon component to render only in large sizes (>= 48) for the following legacy icons: bars-arrow-outline, bars-check-outline, bars-line-chart-outline, kids-outline, conseq, drag-drop, erste, geo-control, sparkasse
• [Toggle] Fixed ToggleGroup not using all available space for its columns
• [Typography] Aligned headings padding in Card

Styles

• Added overflow-wrap: anywhere to theme container which will enable modern browsers to break unusually long words if necessary

TypeScript

• [Containers] Refactored LanguageProvider to TypeScript
• [Internal] Refactored Internal components to TypeScript
• [Transition] Refactored Transition components to TypeScript

Documentation

• Added NewDateInput and NewDateRangeInput documentation
• Added ToggleGroup and programmatic Toggle components control documentation

v2.4.1 - 2021-09-20

Components

• [Tabs] Fixed losing state when the component is re-rendered

v2.4.0 - 2021-09-08

Components

• [ProductInfo] Added backButton prop

Components BETA

• [Navigation] BREAKING Changed PrimaryNavigation default color
• [Dropdown] Improved layout of MenuDropdown’s isLoading spinner
• [Input] Updated NewDateInput and NewDateRangeInput to increase font weight of disabled dates
• [Input] Fixed minimumNights functionality in NewDateRangeInput
• [Misc] Added ColorDecoration component
• [Overview] Added padded prop to OverviewCard
• [Stripe] Added backButton prop to StripeProductInfo

TypeScript

• [Button] Refactored ButtonGroup to TypeScript
• [Image] Refactored Image components to TypeScript
• [Misc] Refactored Misc components to TypeScript
• [Utilities] Refactored Utilities components to TypeScript

Documentation

• Added documentation of Dropdown, MenuDropdown and ColorDropdown
• Extended Card article with documentation on ColorDecoration

v2.3.1 - 2021-09-01

General

• We wrote another article about GDS 2.0 on our blog, go check it out!
• Added published folders assets, dist, sass and types to the exports field in package.json to enable Webpack 5 imports

Components BETA

• [Input] Fixed missing padding in NewDateInput and NewDateRangeInput’s pickerFooter
• [Input] Fixed an issue with NewDateInput and NewDateRangeInput’s calendar sometimes missing the last week
• [Navigation] Fixed PrimaryNavigation alignment in webkit browsers

v2.3.0 - 2021-08-25

General

• Added “Edit page” links to all content pages in GDS
• Fixed all story source issues and restored source jumping for most of them

Components

• [Button] Added pill prop to Button component

Components BETA

• [Input] Added extendCalendarToThePast prop to NewDateInput and NewDateRangeInput
• [Input] Updated NewDateInput and NewDateRangeInput to highlight today in the calendar
• [Navigation] Improved overflow handling in PrimaryNavigation
• [Stripe] Added styling to force StripeHeader to be visible when hovered or focused while transitioning between large and small variant
• [Toggle] DEPRECATED usage of ToggleBadge.SIZE.LARGE, please use other ToggleBadge size

Styles

• Added g-card-confirm-footer to enable the confirm page outside of Store theme

TypeScript

• [Data] Refactored DateTime component to TypeScript
• [Handover] Refactored Handover component to TypeScript

Documentation

• Added documentation for FormField in large variant
• Added an example of a confirm page

v2.2.1 - 2021-08-17

Components

• [Collapsible] Fixed Collapsible button alignment

Components BETA

• [Input] Fixed an issue with NewDateInput and NewDateRangeInput calendar starting weeks on various weekdays
• [Navigation] Fixed issues introduced with latest PrimaryNavigationButton changes

v2.2.0 - 2021-08-11

General

• We wrote an article about GDS 2.0 on our blog, go check it out!

Components

• [Collapsible] Added centered prop to CollapsibleHeader to display the button in the center
• [ContactInfo] Added truncate prop to ContactInfo

Components BETA

• [Input] BREAKING PseudoInput no longer stops the nested ContactInfo from truncating. Please set ContactInfo’s truncate prop to false if you want to keep the behaviour
• [Navigation] Fixed missing truncation in PrimaryNavigationButton
• [Overview] Added OverviewCard hover styles
• [Overview] Updated OverviewCard to make the footer optional in list view. It is however discouraged to omit it

Styles

• [Form] Updated LargeFormField description to hug its contents

TypeScript

• [Collapsible] Refactored Collapsible components to TypeScript
• [Dropdown] Updated ColorDropdown callbacks to use COLOR enum
• [LanguageProvider] Fixed an issue with missing input.date.previousMonth and input.date.nextMonth keys in the strings structure
• [Misc] Refactored UnreadIndicator to TypeScript
• [Misc] Refactored AccountNumber to TypeScript
• [Misc] Refactored TextHighlighter to TypeScript
• [Navigation] Refactored AnchorNavigation to TypeScript
• [Tabs] Fixed export of TabsItem interface
• [Toggle] Refactored Toggle components to TypeScript

Documentation

• Updated Introduction and UI Text pages in UX Content guides
• [App] Added page for Onboarding and Tour

Special thanks for contributing to this release 🎉🥇👏

• Lisa Stadler

v2.1.0 - 2021-07-28

General

• Fixed bundling issue with external dependencies that don’t declare side effects correctly
• Fixed console warnings for component-slot props with conditional rendering

Components

• [Dropdown] Fixed missing transition when for deselected items in ColorDropdown
• [Input] Added showDecimals prop to AmountInput to add an option to hide decimals without a need to change precision
• [Typography] Added disabled prop to Link component

Components BETA

• [Overview] Fixed an issue with OverviewCard title truncation when subtitle is empty
• [Data] Added DateTime component
• [Input] Added NewDateInput and NewDateRangeInput components

Containers

• [LanguageProvider] Added input.date.previousMonth and input.date.nextMonth strings

Styles

• Fixed button focus style in input group
• Fixed disabled pointer-events in Portals when a Modal was open
• Added default focus ring to all interactive elements
• Aligned OverviewCard focus style

TypeScript

• [Amount] Refactored Amount to TypeScript
• [Stripe] Refactored Stripe components to TypeScript
• [Tabs] Refactored Tabs components to TypeScript

Documentation

• [Select] Reworked Select stories to make them easier to understand and use
• [Spinner] Added ConditionalSpinner docs
• [Transaction] Added documentation of Transaction components

v2.0.0 - 2021-07-14

General

• GDS is now out of beta
• Several components were elevated to stable status. Remember, you continue to be encouraged to use components marked as beta. Beta label means that a component might include breaking changes in the minor releases of GDS.
• The following components have been promoted and are no longer beta: Button, CardHeader, Carousel, all Dropdown components, Stepper, Animation, CountedTextInput, PasswordInput, Meter, Switch, Tabs and TabPanel
• We’ve expanded the access whitelist of GDS to Erste Group Countries. As long as you are in a VPN or at the office you should not need to authenticate anymore

Components

• [Badge] BREAKING Removed previously deprecated STORE Badge variant
• [Collapsible] DEPRECATED usage of multiple Cards inside a single CollapsibleContent, please use one per Card
• [Collapsible] Improved support for more than one CollapsibleContent in a Collapsible
• [Collapsible] Added story “in a CardGroup” to showcase how to handle multiple Cards in a collapsible CardGroup
• [Dropdown] Simplified PrimaryNavigationDropdownToggle component detection
• [Switch] Fixed bootstrap styles leaking through in rare cases
• [Table] Updated Table inside CardGroup stories to use one CollapsibleContent per Card
• [Typography] Added disabled prop to Link component

Components BETA

• [Input] Improved buttons alignment in PseudoInput

Styles

• BREAKING Removed previously deprecated classes g-badge-store, g-card-product-dark and g-card-checkout-dark

TypeScript

• [Alert] Refactored Alert components to TypeScript
• [FocusPage] Refactored FocusPage components to TypeScript
• [Overview] Updated OverviewCardButton interface to extend from NewButton
• [SecondaryNavigation] Updated SecondaryNavigationItemProps to extend from LinkProps

Documentation

• DEPRECATED use of more than one heading inside function card and function information card
• [Spinner] Added ConditionalSpinner docs

v2.0.0-beta.52 - 2021-07-07

General

• Fixed issues with lodash in CommonJS environments
• Fixed too many external dependencies being bundled into the module

Styles

• Fixed .g-group-button-segmented being too wide if not placed in a Card

TypeScript

• [Card] Refactored LargeCardHeader left & right props to utilise ReactNode type
• [LanguageProvider] Fixed missing language keys for table.sort.select, table.sort.ascending and table.sort.descending

v2.0.0-beta.51 - 2021-07-02

Components

• [FunctionCard] Fixed an issue with FunctionCard buttons not being rendered
• [Icon] Fixed an issue with overlapping UI colors and shaded colors

v2.0.0-beta.50 - 2021-07-01

General

• BREAKING Minimum required version of React and ReactDOM is now 16.14
• BREAKING Minimum required version of Node.js to run GDS locally is now 12.13
• BREAKING Dropped support for npm as package manager to run GDS locally, please use yarn instead
• Changed bundle method to preserve individual modules to improve tree-shakeability (~90% for a minimal import, ~50% for a project other than George)
• Upgraded Storybook, Playroom and various other dependencies to their latest version
• Added measure plugin to Storybook, which enables checking dimensions and spacing directly on elements
• Added toolbar item to Storybook to switch between different GDS layouts
• Removed global “Display SecondaryNavigation placeholder” knob in Storybook
• Fixed GDS debug info failing to highlight elements created with React 17
• Added old shading functionality for deprecated colours to TS-migrated components

Components

• [ContactInfo] Added amount prop
• [ContactInfo] Scaled up micro (12px) to small font (14px)
• [ProductInfo] Scaled up micro (12px) to small font (14px)
• [Select] Updated ProductSelect toggle to improve a11y and truncation
• [Select] Fixed Select toggle using the wrong id attribute
• [Snackbar] Fixed SnackbarButton not having enough spacing to the text above
• [Table] Added a toolbar above Table with sortable columns in smaller tiers
• [Table] Added sortSelectLabel, sortAscendingLabel and sortDescendingLabel props to Table components

Components BETA

• [Dropdown] Fixed Dropdown appearing above toggle in Cards and other elements with hidden overflow
• [Dropdown] Fixed Dropdown toggle using the wrong id attribute
• [Input] Updated g-faded colour in PseudoInput
• [Input] Added tag prop to PseudoInput
• [Overview] Fixed an issue with OverviewCard’s default action not triggering in avatar region
• [Overview] Fixed footer button truncation in vertical OverviewCard
• [Overview] Fixed subtitle truncation in OverviewCard
• [Transaction] Added sortSelectLabel, sortAscendingLabel and sortDescendingLabel props to TransactionGroup

Containers

• [LanguageProvider] Added table.sort.select, table.sort.ascending and table.sort.descending keys

Styles

• Updated tertiary button variant styles
• Fixed close Alert buttons vertical alignment
• Fixed g-card-group-horizontal producing a border on the Card in smaller tiers
• Fixed an issue that could have resulted in gaps between .g-card-checkout cards

TypeScript

• Replaced usage of ReactElement with ReactNode in various interfaces
• [Card] Refactored Card components to TypeScript
• [FunctionCard] Refactored FunctionCard components to TypeScript
• [Input] Refactored PseudoInput to TypeScript
• [Layout] Refactored Text & Group to TypeScript
• [Typography] Refactored Heading, Inline, LineBreak, Link, List, ListItem, Paragraph, and Separator to TypeScript

Documentation

• [Store] Updated Confirm page article to ban Stepper

v2.0.0-beta.49 - 2021-06-23

Components

• [Input] Fixed indeterminate RadioInput having a blue background
• [Table] Fixed displaced CollapsibleTable button on tier XS/SM
• [Table] Removed interactive elements from invisible table header on tier XS/SM

Components BETA

• [Navigation] Moved .g-primary className from PrimaryNavigation to PrimaryNavigationButton wrapper
• [Timeline] Fixed CollapsibleTimelineButton displaying an index in smaller tiers
• [Timeline] Fixed CollapsibleTimelineButton not utilising available space on the right
• [Stripe] Fixed StripeToolbar appearing blurry in some browsers
• [Stripe] Fixed StripeToolbar background being cut off in Safari due to a clash with Bootstrap 3

v2.0.0-beta.48 - 2021-06-17

Components

• [Card] Updated CardFooter to always use padded
• [Dropdown] Updated Dropdown stories to use new Button
• [Input] Added indeterminate prop to CheckboxInput
• [Select] Added indeterminate prop to SelectableItem of type CHECKBOX
• [Table] Added truncateHeaders prop to Table
• [Table] Updated Table to show actions column header label on MD/LG/XL
• [Transaction] Added sortable and onSortClick props to TransactionGroup component
• [Transaction] Added columns prop to TransactionGroup through which Table column settings like label, sortDirection can be customised
• [Transaction] DEPRECATED all label props like dateLabel in TransactionGroup in favour of columns.[id].label, see Migration Guide for details

Components BETA

• [Search] BREAKING Removed AmountDropdown component
• [Form] Added disabled prop to PseudoInput
• [Overview] Updated OverviewCard layout and focus styles to support placement in CardGroup
• [Utilities] Improved Interactable support for ContactInfo as PseudoInput

Styles

• DEPRECATED $typo-x-font-weight, use $typo-x-font-weight-regular instead
• Re-added deprecated, but mistakenly removed $typo-x-font-weight

TypeScript

• [Button] Refactored Button to TypeScript
• [Layout] Refactored Grid, Row, Col to TypeScript
• [Spinner] Refactored Spinner to TypeScript
• [Utilities] Refactored MatchMedia and MatchMediaProvider to TypeScript

Sketch

• Updated Sketch libraries and Sketch browser kits for George

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

v2.0.0-beta.47 - 2021-06-09

General

• Updated peer dependencies to include version 17 of React and ReactDOM

v2.0.0-beta.46 - 2021-06-07

Components

• [Card] Fixed an issue with nested Cards in a CardGroup
• [Tooltip] Fixed unselectable text in Tooltip
• [Tooltip] Fixed Tooltip flickering when used with a Button

TypeScript

• Fixed existing types imports

v2.0.0-beta.45 - 2021-06-02

General

• We wish you a Happy Pride Month!
• Added icon geu-service-mzf-xl

Components

• [Alert] BREAKING Updated heading prop to be required when Alert is closable or collapsible
• [Form] Updated large FormField with currency Select example with an itemToString function to enable keyboard selection
• [Table] Added tooltip prop to Table header cells to replace Tooltips in children
• [Tooltip] Fixed rendering of Tooltip in Modals and other elements
• [Tooltip] Added usePortal prop

Components BETA

• [Overview] Removed titleLabel prop from OverviewCard and OverviewWidgetCard
• [Overview] Improved a11y of Overview components by uniting title with default action
• [Overview] Fixed an issue with overflowing OverviewWidgetCard title
• [Navigation] BREAKING Removed PrimaryNavigationDropdownButton component, use Dropdown instead
• [Timeline] Updated TimelineItem to always display predefined icons for completed entries with a variant of SUCCESS, WARNING or ERROR
• [Utilities] Added Interactable component

TypeScript

• [Icon] Refactored Icon to TypeScript
• [Navigation] Refactored PrimaryNavigation to TypeScript
• [Navigation] Refactored SecondaryNavigation to TypeScript
• [Spinner] Refactored Spinner to TypeScript
• [Timeline] Refactored Timeline components to TypeScript
• [Transaction] Fixed TransactionGroup not accepting CardGroup props

Documentation

• Moved Usage of Styles section from Downloads to Getting Started guide

v2.0.0-beta.44 - 2021-05-27

Components

• [Avatar] Fixed Avatar using bright icon color in components using ProductInfo
• [Table] Fixed table header truncation

Documentation

• [App] Fixed identical titles for CRM guide

v2.0.0-beta.43 - 2021-05-25

Components

• [Tooltip] DEPRECATED fragments and arrays in Tooltip children
• [Tooltip] Fixed Tooltip not rendering when provided with multiple children
• [Tooltip] Added keyboard navigation support

Components BETA

• [FocusPage] Fixed an issue with particular CollapsibleHeaders having erroneous padding in FocusPage

Documentation

• Changed one plugin and added one new plugin recommendation

v2.0.0-beta.42 - 2021-05-20

General

• Upgraded react-popper dependency to v2

Components

• [Spinner] Added ornamental prop to suppress “Loading…” message
• [Spinner] Removed aria-live prop
• [Table] Updated Table to render sort button after truncated table column header label
• [Tooltip] DEPRECATED strings in Tooltip children
• [Tooltip] Improved Tooltip accessibility

Components BETA

• [Dropdown] Fixed Dropdown not positioning correctly in some cases
• [FocusPage] Removed extra paddings from TransactionGroup header
• [Timeline] Added CollapsibleTimelineItems and CollapsibleTimelineButton components

TypeScript

• [Image] Improved Avatar to utilise subset enums
• [Meter] Refactored Meter to TypeScript
• [StatusInfo] Improved folder exports

Documentation

• Added Browser Support and OS Support articles
• Expanded AmountInput API documentation
• Expanded Documentation Editing guides
• Updated occurrences of HTML components to use Typography components
• [App, Store] Added CRM guides

v2.0.0-beta.41 - 2021-05-05

General

• Added table of contents to GDS website side navigation
• Added a setting to toggle table of contents navigation globally

Components

• Removed aria-busy from multiple components
• [Alert] Fixed closeable Alert not using language strings for the close button
• [Alert] Fixed icon in close button not being aligned correctly
• [Handover] Improved announced text in screenreaders
• [Input] Fixed a visual issue with clear date button in DateInput and DateRangeInput
• [Modal] Fixed ConfirmationModal heading
• [Select] Updated Select to use new Button for its SelectToggle

Components BETA

• [Button] Fixed Select Button disabled caret colour
• [FocusPage] Fixed an issue with negative margins on Collapsible
• [FocusPage] Improved Collapsible paddings when placed at the end of a group
• [Image] Added path prop to Animation
• [Transaction] Fixed an issue with colour decoration in Safari

Containers

• [LanguageProvider] Fixed broken language keys input.date.rangeButton and table.sort.column
• [LanguageProvider] Removed incorrect language key table.column.sort

Styles

• Reduced font weight of active AnchorNavigationItem
• [Button] Removed unnecessary z-index logic

TypeScript

• [LabeledList] Refactored LabeledList to TypeScript
• [Misc] Refactored Badge to TypeScript
• [Misc] Refactored Pill to TypeScript
• [StatusInfo] Refactored StatusInfo to TypeScript
• [Switch] Refactored Switch to TypeScript
• [Utilities] Refactored VisuallyHidden to TypeScript

Documentation

• Edited headings and structure of articles site-wide
• Improved Stripe documentation

v2.0.0-beta.40 - 2021-04-30

Components BETA

• [FocusPage] Fixed an issue with ProductInfo nested inside multiple Cards

v2.0.0-beta.39 - 2021-04-21

Components

• [Form] Added alert prop to FormField to support completely custom Alerts
• [Form] Updated error alerts in FormField to use ARIA role ‘alert’

Components BETA

• [Stripe] BREAKING Updated Button cloning logic in right slot to allow for secondary variant
• [FocusPage] Updated styles for various components when used within FocusPage
• [Input] Added defaultAction prop in FileList
• [Stripe] Updated StripeHeader stories with more button variants
• [Stripe] Fixed Buttons not being truncated in some cases
• [Stripe] Fixed StripeActionButton being too big in smaller tiers

TypeScript

• [Image] Refactored Avatar to TypeScript

Documentation

• [App] Added Header page
• [App] Updated Button documentation
• Added Button page to Store docs
• Fixed iOS RuleBox title casting

v2.0.0-beta.38 - 2021-04-07

General

• Added console.error warning to various components
• Updated GDS warnings to use console.warn

Components

• [Card] Fixed an issue with CardHeader info variant not having a separator underneath
• [Image] Fixed Avatar badgeIcon colour when using COLOR.DARK
• [Stripe] Updated StripeHeader stories to use tertiary Button in overlay menu

Components BETA

• [Search] Fixed an issue with disappearing clear button in ClearableButton on hover
• [Search] Fixed an issue with innerRef leaking to the DOM on ClearableButton
• [Stripe] Updated StripeHeader stories to use sticky SecondaryNavigation

Styles

• [Button] Removed unnecessary z-index logic

TypeScript

• [ContactInfo] Refactored ContactInfo to TypeScript

Documentation

• Updated blog index page
• [Collapsible] Added CollapsibleHeader documentation

v2.0.0-beta.37 - 2021-03-24

Components

• [Button] Updated ButtonGroup segmented logic
• [Card] DEPRECATED LargeCardHeader, please use StripeHeader instead
• [Card] DEPRECATED InfoCardHeader, please use CardHeader variant with INFO instead
• [Card] Added variant prop to CardHeader
• [Card] Updated CardHeader default colour to “Grey 200”
• [Input] Added background color to input append/prepend elements

Components BETA

• [Meter] BREAKING Removed description, use VisuallyHidden instead
• [Meter] BREAKING Removed tooltip, wrap inside Tooltip instead
• [Meter] BREAKING Removed support for min > max ranges
• [Meter] BREAKING Renamed auxillaryValue to auxValue
• [Meter] BREAKING Changed default label to show the uncapped value
• [Overview] BREAKING Removed icon and imageUrl props and ICON enum from OverviewCard, please use the new avatar prop instead
• [FocusPage] Updated Stepper colours to improve accessibility
• [FocusPage] Updated XS Stepper to new design
• [Navigation] Improved PrimaryNavigation font and button colors
• [Overview] Added required avatar prop to OverviewCard
• [Overview] Added titleLabel prop to OverviewWidgetCard
• [Stripe] Added scroll transition between StripeHeader variants with VARIANT.AUTO and sticky
• [Stripe] Aligned StripeHeaderToolbar with recent Card styling changes
• [Stripe] Updated Button automatic size & variant behaviour
• [Transaction] Updated Transaction indicators icon size to 16px

Styles

• Fixed new Button truncation
• Fixed Cards styles inside CardGroup
• Fixed SmallModal header padding
• Updated checkbox/radio focus styles to new focus ring
• Added .g-tabular helper class for tabular numbers

TypeScript

• [Carousel] Migrated Carousel component to TypeScript
• [Meter] Changed label from string to node
• [Overview] Updated OverviewCard and OverviewWidgetCard title and subtitle props to accept nodes

Documentation

• Added George Business universe
• Added Blog section to the overview of the different universes
• Revealed third party (external) universe
• Added Meter documentation
• Updated editing page to match the move from GDS to GDSWEB

Sketch

• Updated Sketch libraries and Sketch browser kits for George

Special thanks for contributing to this release 🎉🥇👏

• Jakub Sebok

v2.0.0-beta.36 - 2021-03-17

Components

• [Card] Fixed an issue with Card styles inside CardGroup
• [ContactInfo] Added truncation in alias when ContactInfo is not part of FormField as PseudoInput
• [Input] Fixed DateInput rendering bullet points near month labels in date picker

Components BETA

• [Transaction] Fixed Transaction components rendering 0 if no indicators were present

Styles

• Fixed toggle components disappearing on click in Chrome in case they were placed in a scroll-container

Documentation

• [App] Fixed broken link on the Card page

v2.0.0-beta.35 - 2021-03-10

General

• Added icons media-pause and media-pause-xl
• Changed rules in documentation pages to collapse/expand depending on user settings
• Updated Jira references to use the new project key “GDSWEB” instead of “GSG”

Components

• [ContactInfo] Removed truncation of alias
• [Icon] DEPRECATED Icon.SIZE.SIZE_20, please use other size
• [Icon] Added SIZE_24 as new default Icon size

Components BETA

• [Button] Fixed icon-only Button layout inside ButtonGroup
• [Form] Adjusted buttons position in PseudoInput
• [Form] Fixed FormField description positioning in large variant
• [Overview] Improved grid view OverviewCard and OverviewWidgetCard button size
• [Overview] Changed OverviewCardAmount prependedText/appendedText to allow rich content
• [Search] Added ClearableButton useNewButton logic
• [Stripe] Updated left button to medium size on MD+ tiers
• [Timeline] Added Timeline and TimelineItem components
• [Transaction] Moved decoration color to indicators column instead of using a dedicated column

Styles

• [Modal] Updated modal title horizontal padding

TypeScript

• [Button] Added target, rel, and download types to ButtonProps

Documentation

• Improved Navigation documentation
• Improved Selectable Table examples
• Restructured and updated input articles
• Added stubs for archived articles
• Updated LabeledList examples to use HTML time elements and datetime attributes to mark up dates
• [App] Added Card page
• [App] Added Toolbar page

v2.0.0-beta.34 - 2021-03-08

Components

• [Input] Fixed a DateInput and DateRangeInput closing issue by changing closeOnScroll default to false
• [Select] Fixed FilteredSelect remembering highlighted items after the search value has been changed
• [Select] Fixed an issue with FilteredSelect not updating its displayed value on selection
• [Select] Fixed FilteredSelect capturing Home and End keys

Components BETA

• [Search] Fixed some issues with ClearableButton and ClearableTextInput in combination with InputGroup
• [Search] Aligned styling of clear buttons DateInput

v2.0.0-beta.33 - 2021-03-02

Components BETA

• [Stripe] Fixed StripeProductInfo not showing icon or image when using avatar prop

v2.0.0-beta.32 - 2021-03-02

Components BETA

• [Overview] Added label to OverviewCardMenu dropdown trigger

Containers

• [LanguageProvider] Added new language key common.more to be used for buttons with three horizontal dots
• [LanguageProvider] Added new language key input.date.rangeButton for DateRangeInput

Styles

• Restored original min-height and line-height for unstyled button

TypeScript

• [Collapsible] Made CollapsibleButton children optional

v2.0.0-beta.31 - 2021-02-24

Components

• [Alert] Fixed missing truncation for buttons with a href prop
• [Button] Added old button sizes in ButtonGroup buttonSize prop types
• [Card] Updated border-radius and box-shadow styles
• [Input] Fixed AmountInput displaying an empty string if the given value was 0
• [Input] Fixed high DateInput and DateRangeInput clear button and separator z-indices
• [Misc] Added colorValue in ColorDecoration
• [Modal] Updated border-radius styles
• [ProductInfo] Removed size prop default value
• [Table] Added decorationColorValue in TableRow
• [Table] Fixed order of toggle and content in CollapsibleTable so that content appears later in the DOM, this also applies to Transactions
• [Utilities] Updated Transitions to hide their content for screen readers while transitioning out, this also affects components like Modal, Collapsible, Dropdown, Alert, etc.

Components BETA

• [Button] BREAKING Updated component to make children required
• [Button] BREAKING Removed iconLabel, please specify as children instead
• [Button] Added type prop to new Button
• [Button] Added label content vertical alignment
• [Button] Fixed ButtonGroup new Button margins in XS tier
• [Button] Fixed new Button primary variant order in ButtonGroup
• [Dropdown] Fixed arrow positioning for smaller toggles
• [Form] Added FilteredSelect as a valid input for large FormField variant
• [Form] Added PseudoInput component to add support for arbitrary content plus buttons in a large FormField
• [Overview] Added hasInteractiveChildren prop to OverviewCard, which raises the children above default action
• [Overview] Updated components to new Buttons and refined hover and focus states
• [Overview] Updated OverviewWidgetCard to make children interactive and add overflow
• [Select] Added label prop to Selectable component to provide a group description for Screenreaders
• [Stripe] Fixed StripeNavigation menu flickering and disappearing in Safari
• [Stripe] Fixed StripeNavigation toggle focus style
• [Table] Reduced sort trigger from column header to arrows only
• [Toggle] Added label prop to ToggleGroup component to provide a group description for Screenreaders
• [Toggle] Fixed a layout issue with ToggleGroup and longer item descriptions
• [Transaction] Updated AccountTransaction to skip announcing visual new transaction indicator
• [Transaction] Fixed OrderTransaction overlay buttons background
• [Transaction] Improved accessibility for Transaction table

Containers

• [LanguageProvider] Added new language key table.sort.column to be used for sort buttons in Table

Styles

• Fixed InputGroup text addon being too large in some cases
• Removed input steppers cross-browser from input[type="number"]
• Updated size of inputs and form controls to 40px to match new button styles
• Updated spacing in forms

TypeScript

• [Button] Fixed new Button types exports
• Fixed missing exports of component prop interfaces

Documentation

• [App] Updated button page
• Added Button label, including aria-label usage clarification
• Added documentation of AmountInput
• Added keys from recent releases to LanguageProvider page
• Added Slack infoboxes to pages (A11y, Button, FocusPage and Stripe)
• Aligned colours of badges, rule and info boxes
• Enabled Development guide pages in the Store section
• Fixed Modal examples being cut off on documentation pages
• Fixed UX Content and Store broken URLs
• Replaced removeAllStyles with toggleAllStyles bookmarklet
• Updated documentation of collaboration model
• Updated allowed buttons in Stripe and FocusPage

Sketch

• Updated Sketch libraries and Sketch browser kits for George

v2.0.0-beta.30 - 2021-02-11

Components BETA

• [Stripe] Fixed deprecated prop icon set as required in StripeProductInfo

TypeScript

• [ProductInfo] Fixed type imports
• [Stripe] Fixed types for StripeProductInfo

v2.0.0-beta.29 - 2021-02-10

General

• Upgraded some dependencies that were not compatible with Node.js 14

Components

• [ContactInfo] DEPRECATED icon, imageUrl, badgeIcon and badgeColor, please use avatar instead
• [ProductInfo] DEPRECATED icon, imageUrl, size,badgeIcon,badgeColor,hoverIcon,hoverIconLabel and hoverIconProps, please use avatar instead
• [Alert] Fixed large Alert icon vertical alignment in LG+ tiers
• [Button] Fixed PrimaryLinkButton and DangerButton size
• [Button] Removed old buttons active state 1px transform
• [ContactInfo] Added avatar prop
• [ContactInfo] Updated to inline element and improved accessibility
• [Dropdown] Added DropdownToggle useNewButton prop
• [Dropdown] Reverted DropdownToggle styles to old buttons
• [Modal] Updated ConfirmationModal to enable animations by default
• [ProductInfo] Added avatar prop
• [ProductInfo] Updated to inline element and improved accessibility
• [ProductInfo] Added verbosity prop

Components BETA

• [Stripe] DEPRECATED icon, imageUrl,hoverIcon,hoverIconLabel and hoverIconProps in StripeProductInfo, please use avatar prop instead
• [Button] Added component prop to allow a custom component
• [FocusPage] Updated FocusPage to align icons in tertiary Buttons to the right
• [Overview] Added OverviewWidgetCard component
• [Search] Added resetOnClickOutside prop to AmountDropdown
• [Search] Reverted ClearableButton styles to old buttons
• [Stripe] Added avatar prop to StripeProductInfo

Styles

• DEPRECATED .g-product-info-icon, use .g-product-info .g-avatar instead
• Removed aggressive a element underline styling
• [Button] Removed last traces of positioning from new Button
• [Button] Removed position: relative in focus state of old buttons
• [Toggle] Updated ToggleIcon, ToggleImage and ToggleButton styles

TypeScript

• [Table] Added missing ALIGNMENT enum type to TableCell
• [Layout] Updated Col prop types to inherit from HTMLElement

Documentation

• Added Stripe documentation
• Updated FocusPage documentation on slots and configurations
• Updated LabeledList documentation with rules against using different font sizes for values in a single list
• Restored old button docs & examples

Sketch

• Fixed G-App Sketch library

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

v2.0.0-beta.28 - 2021-02-02

Components

• [Modal] Fixed an issue with matchMedia.addEventListener on iOS 13

TypeScript

• [Button] Fixed forwardRef types
• [Grid] Fixed forwardRef types for Grid, Row, & Col
• [LabeledList] Fixed type imports
• [Overview] Fixed an issue with OverviewCardAmount types

v2.0.0-beta.27 - 2021-02-01

Components

• [Table] Fixed CollapsibleTableRow ignoring custom onMouseEnter and onMouseLeave event handlers

Components (BETA)

• [Overview] Fixed OverviewCardMenu displayName
• [Transaction] Fixed Badges being cutoff on Windows with a screen scaling of 150%

TypeScript

• [Amount] Fixed missing Amount currencySymbol type definition
• [Collapsible] Fixed CollapsibleButton types
• [Dropdown] Fixed DropdownActionButton types
• [Dropdown] Fixed ColorDropdown types
• [Search] Fixed ClearableButton types

Documentation

• Added new colours hex value migration guide

v2.0.0-beta.26 - 2021-01-27

General

• Hello New Button component
• Fixed GDS debug info not highlighting components in George Pro

Components

• [ButtonGroup] BREAKING Updated buttonSize prop to only support New Button component
• [Collapsible] BREAKING Replaced buttonColor prop with buttonVariant
• [Alert] Updated large closeable Alert vertical alignment
• [Button] Added new Button component
• [Dropdown] Added custom renderToggle logic for Avatar
• [ProductInfo] Added badgeIcon and badgeColor
• [Select] Fixed FilteredSelect not correctly displaying a selected value if allowAny was used
• [Select] Fixed RecipientSelect throwing an error if highlightText was activated
• [Table] Updated sorting buttons sizing so they do not increase the header height
• [Toggle] Fixed ToggleImage label jumping in checked state

Components BETA

• [Overview] BREAKING Removed progress prop from OverviewCard, please use meter instead
• [Overview] BREAKING Removed amountLabel prop from OverviewCard, please use OverviewCardAmount’s label instead
• [Overview] BREAKING Updated OverviewCard to expect OverviewCardAmount component instead of Amount in mainAmount prop, and in an array in extraAmounts prop
• [ClearableTextInput] Updated ClearableTextInput to pass custom props to TextInput
• [Dropdown] Fixed an issue with arrow not rendering properly when Dropdown drops upwards
• [Meter] Updated Meter to ignore showLabel if size is not LARGE
• [Overview] Added meter prop to OverviewCard
• [Overview] Added OverviewCardAmount component
• [Overview] Updated OverviewCardMenu to render arrow
• [Overview] Updated OverviewCard to hide overflowing body

Styles

• DEPRECATED $px* helper variables, use rem(*) instead
• DEPRECATED $spacer-* helper variables
• Added CSS variables to .g-bg-* and .g-fg-* colour helper classes
• Added G-Sky colour
• Added hover and focus styles to sortable table headers
• Updated Toggle* styles

TypeScript

• [Overview] Fixed and improved type definitions
• [Toggle] Added missing export for ToggleGroup
• [Transaction] Added TransactionDetailButton VARIANT enum types

Documentation

• Improved documentation for usage of bold text
• Added Card wrapper to Toggle component stories
• Updated FocusPage documentation with flow and detail configurations

Sketch

• Updated Sketch libraries and Sketch browser kits for George

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

v2.0.0-beta.25 - 2021-01-13

General

• DEPRECATED icon pfm-atm, it has been renamed to pfm-withdrawal
• Removed empty placeholders which were being announced

Components

• [LabeledList] Removed right-align logic on XS and SM tiers
• [Input] Added CheckboxInput and RadioInput disabled cursor
• [Navigation] DEPRECATED separatorText prop in AnchorNavigation, can safely be removed
• [Navigation] Updated AnchorNavigation to support maxItems values below five
• [Navigation] Updated AnchorNavigation to remove nonessential list items
• [Select] Updated selection text colour
• [Select] Fixed an issue with rendering RecipientSelect contact account number
• [Snackbar] Fixed jumpy enter and exit transitions
• [Toggle] Added support to manage Toggle components’ state via ToggleGroup or Selectable
• [Transition] Fixed TransitionCollapseHeight not respecting outer margins in transitions
• [Typography] Added accessible label to external Link icon
• [Typography] Fixed a Safari VoiceOver issue with unordered lists

Components BETA

• [Toggle] Added ToggleGroup component
• [Dropdown] Fixed an issue with closeOnScroll making Dropdown close on its own
• [Input] Updated DateInput and DateRangeInput to close on scroll again

Containers

• [LanguageProvider] Added new language key common.externalLink to be used for external links

TypeScript

• [Transaction] Fixed missing TransactionDetailButton type export

Documentation

• [App] Added app colours page
• Updated FocusPage and store pages examples with StripeActionButton
• Fixed version numbers of Sketch Assistants

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

v2.0.0-beta.24 - 2020-12-17

General

• Happy Holidays from the Design System Squad 🎄
• Added a PrimaryNavigation placeholder to stories, examples and Playroom in case a full page layout is in use

Components

• [Icon] Updated icons to replace aria-label with VisuallyHidden
• [LabeledList] Updated row styles in the striped variant of LabeledList
• [Modal] Added tabindex="-1" to ModalHeader
• [Modal] Updated ConfirmationModal to disable animations by default (temporarily)

Components BETA

• [Dropdown] Fixed an issue with DropdownFooter alignment
• [Form] Removed currency border in large FormField with Amount
• [Input] Added renderExtraButtons prop to FileList
• [Input] Fixed an issue with DateRangeInput selection when isOpen is true
• [Input] Fixed a visual issue with DateRangeInput footer
• [Input] Fixed props spreading in FileInput
• [Stripe] Added tabindex="-1" to StripeTitle
• [Transaction] Added renderDecoration prop to AccountTransaction and OrderTransaction components
• [Transaction] Fixed additionalCard translation in AccountTransaction