Changelog

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

Components BETA

• [Overview] Fixed OverviewCard padding prop logic

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TypeScript

• Fixed elementOrComponent utility types

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

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

Components

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

Utilities

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

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

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

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

Components

• [Image] Fixed an issue with Animation size prop

Styles

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

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

Styles

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

Styles

• Fixed text color in .g-inverted buttons

Honorary mentions 🎖️

• Vlad Slavin

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

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

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

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

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

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

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

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

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

Components BETA

• [Input] Added timeZone support to NewDateInput and NewDateRangeInput

Special thanks for contributing to this release 🎉🥇👏

• Jakub Tucek

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

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

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

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

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

Components BETA

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

Components BETA

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

Components

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

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

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

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

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

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

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 semibold 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

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

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

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

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

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

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

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

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

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

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

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

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

Components

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

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

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

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

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

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

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

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

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

Components

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

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

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

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

General

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

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

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

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

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

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

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

Components BETA

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

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

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

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

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

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

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

Components BETA

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

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

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

Components BETA

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

TypeScript

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

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

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

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

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

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

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

Containers

• [LanguageProvider] Added new language key transaction.indicator.additionalCard to be used for TransactionIndicator.ICON.CARD_ADDITIONAL

Styles

• BREAKING Leading icons in SecondaryNavigation are no longer hidden, they must be removed from markup

Documentation

• Improved documentation of Modals
• Translated Modals in example section to English

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu ,

Components

• [Input] Fixed an issue with DateInput and DateRangeInput closing unintentionally
• [Input] Fixed an issue where inputMode could not be set in AmountInput

General

• Added icons hand-coin-xl and hand-coins-xl

Components

• [Handover] Fixed Handover transition being stopped too early
• [Layout] Added forwardRef logic to Grid, Row, and Col
• [Misc] Updated AccountNumber to use visually hidden text instead of aria-label
• [Modal] Fixed an issue with ConfirmationModal by delaying Animation rendering
• [Modal] Fixed an issue where the transition timeout could not be parsed correctly

Components BETA

• [Image] Added delay prop to Animation
• [Misc] Added UnreadIndicator component for messages and transactions
• [Navigation] Added PrimaryNavigationButton dynamic overlay colour
• [Stripe] Added overlay prop to small variant of StripeHeader
• [Transaction] Added unread prop to indicate “New since last login” to Transaction
• [Transaction] Updated TransactionIndicator’s ariaLabel to optional, falls back to LanguageProvider
• [Transaction] Updated TransactionIndicator colour

Styles

• Removed top/left from .sr-only to avoid page jumps

TypeScript

• [DateRangeInput] Fixed types for pickerFooter prop

Documentation

• Added third party universe

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

General

• Fixed an issue with KeyboardDetector and ClickOutside in responsive viewer

Components

• [Modal] Fixed an issue with body accumulating padding with opening of Modals
• [Table] Fixed an issue with details button distorting CollapsibleTable rows
• [Transaction] Fixed an issue with TransactionDetail buttons and StarToggle distorting the grid
• [Transaction] Fixed color of star indicator to match the star toggle in TransactionDetail

Components BETA

• [Navigation] Improved Navigation buttons to be selectable
• [Transaction] Fixed styling issues with nested Transactions

Styles

• [Button] Removed white UIButton default border
• [Input] Updated background colour of disabled inputs

Special thanks for contributing to this release 🎉🥇👏

• Jakub Sebok

Honorary mentions 🎖️

• Rado Laucik

General

• Hello New Colour Palette! GDS now comes with the new George colour set
• BREAKING George Pro colour PRO has been renamed to G_PRO in component enums

Components

• [Amount] Added human-readable currency names, please use the wildcard key amount.currency.* to set them via LanguageProvider (e.g. amount.currency.EUR) or set it through the added prop currencyText on a component level
• [Button] Added isLoading prop to Button components, which will display a Spinner instead of the text
• [Input] Added useSeparatorsOnly prop to AmountInput to disable period being identified as a potential decimal point
• [Navigation] Added support for custom props in AnchorNavigation items
• [Navigation] Updated AnchorNavigation to use links instead of buttons

Components BETA

• [Dropdown] Fixed minimum width of MenuDropdown
• [Dropdown] Fixed Dropdown arrow missing shadow
• [Navigation] Added PrimaryNavigation component
• [Navigation] Added PrimaryNavigationButton component
• [Navigation] Added PrimaryNavigationDropdownButton
• [Transaction] Added CARD_ADDITIONAL as an available icon to TransactionIndicator
• [Transaction] Added tableCaption prop to TransactionGroup
• [Stripe] Fixed an issue with large StripeHeader toolbar grid
• [Stripe] Fixed position of StripeToolbar when inside sticky StripeHeader

Documentation

• DEPRECATED old colour variables, replaced with new colours
• Added PrimaryNavigation documentation with example usage
• Fixed semi-transparent background to highlight full-page examples
• Fixed ProductSelect demo
• Updated layout on landing pages for larger screens
• Updated almost all demos and examples compatible to be opened in Playroom

TypeScript

• Fixed an issue with WrapperFunctionComponent’s wrapsComponent if a class-based component was set
• [FocusPage] Fixed FocusPage type definitions
• [Overview] Fixed OverviewCard type definitions

Styles

• BREAKING Removed $color-g-emerald, please use $color-g-forest instead, same applies to colour classes Removed .g-bg-g-emerald and .g-fg-g-emerald
• BREAKING Removed $color-g-fog, please use $color-g-stone instead, same applies to colour classes .g-bg-g-fog and .g-fg-g-fog
• DEPRECATED CI colours (Erste Group colours), use new colour palette instead
• DEPRECATED UI colours (Primary, Secondary, Grey, Active, Green, Red, Orange and Yellow colours), use new colour palette instead
• DEPRECATED g- in $color-g-* variables, same applies to the in-between g- in colour classes .g-bg-g-* and .g-fg-g-*
• Added new George colours
• Mapped old George colours to automatically use new colour variables

Sketch

• Added documentation of layer-styles-prefer-shared rule

Special thanks for contributing to this release 🎉🥇👏

• Jakub Sebok
• Lukas Zboron
• Victoria Doiron

General

• George Design System mourns the victims of the horrific acts of terror in Vienna

Components BETA

• [Dropdown] Improved scrolling UX
• [Transaction] Fixed an issue with TransactionDetail missing TransactionStarToggle

TypeScript

• Added an interface for WrapperFunctionComponent (alias WrapperFC) with support for a static wrapsComponent property

Styles

• Fixed Modal Help link positioning

Documentation

• Split Technical Readme into Guide pages (Installation, Component Types, Local GDS-Development)
• Always show GDS SideNavigation on medium-sized screens
• Updated Badge documentation

Sketch

• Improved text colour checks and added font size checks in Sketch Assistant

General

• Fixed build error that would happen due to a missing asset
• Added ANIMATION enum to module export, which can be used in Animation.data

Components

• [Modal] Fixed ConfirmationModal animations
• [Input] Fixed an issue with DateInput and DateRangeInput sometimes closing undesirably

Components BETA

• [Transaction] Fixed missing centre-alignment of custom dates

TypeScript

• [Meter] Added missing TypeScript export

Components

• [Amount] BREAKING Removed forceSuperscript and useSuperscript props. Please use superscript instead
• [Button] BREAKING Removed StoreButton. Please use PrimaryButton instead
• [Card] BREAKING Repurposed children in CardFooter. Please use label instead
• [Card] BREAKING Removed back* props in LargeCardHeader. Please use left instead
• [Card] BREAKING Removed button* props in LargeCardHeader. Please use right instead
• [Form] BREAKING Removed noLayout prop in FormField. Please use variant set to FormField.VARIANT.NO_LAYOUT instead
• [Select] BREAKING Removed item.color in ProductSelect. Please specify color on the product (ProductInfo.color) instead
• [Select] BREAKING Removed item.color in RecipientSelect. Please specify color on the product (ProductInfo.color) instead
• [Progress] DEPRECATED Progress, please use Meter instead
• [Button] Fixed SegmentedButtonGroup in Card alignment
• [Card] Updated CardFooter to add the possibility of placing children below amount/action without a label
• [Form] Removed multiple labels inside FormField
• [Form] Improved FormField a11y with group heading for Radios/Checkboxes
• [Modal] Improved ConfirmationModal with animations

Components BETA

• [Animation] Added color and size props
• [Dropdown] Updated Dropdown to close on outside scroll
• [FocusPage] Fixed incorrect width of FocusPage content in most configurations
• [Input] Fixed an issue with changing DateRangeInput selection when using maximumNights
• [Meter] Added Meter component
• [OverviewCard] Fixed font weight of title

Styles

• Fixed Bootstrap3 container styles leaking into GDS

TypeScript

• [Input] Fixed missing DateRangeInput export

Documentation

• Added Getting Started guide
• Added LanguageProvider documentation
• Added Animation documentation

Sketch

• Updated Sketch libraries and Sketch browser kits for George

TypeScript

• [Input] Fixed missing DateInput types
• [Transaction] Fixed missing export of TransactionIndicator

Components

• [Input] BREAKING Updated DateInput to make dateButtonLabel required when showDateIcon is true
• [Input] BREAKING Removed screenReaderInputMessage from DateInput, please use ariaLabel instead
• [Modal] Added animation prop in TeaserModal to allow the usage of Lottie animations
• [StatusInfo] Added animation prop to allow the usage of Lottie animations
• [Utilities] Added VisuallyHidden component to facilitate accessibility improvements
• [Card] Improved icon alignment in LargeCardHeader
• [Image] Improved Avatar badge size for better legibility
• [Navigation] Fixed AnchorNavigation maxItems when selectedItem is falsy
• [Select] Fixed an issue with Select toggle label covering the caret
• [Navigation] Removed nav element wrapper from AnchorNavigation

Components BETA

• [Input] BREAKING Removed ariaLabel and screenReaderInputMessage props from DateRangeInput, please use startAriaLabel and endAriaLabel instead
• [Overview] BREAKING Removed OverviewCardGroup and OverviewCardGroupSummary components
• [Overview] BREAKING Removed COLOR enum and color prop from OverviewCardButton
• [Transaction] BREAKING Removed INDICATOR enum from AccountTransaction, please use TransactionIndicator instead
• [Transaction] BREAKING Changed indicators prop to accept an array of TransactionIndicator elements
• [Image] Added Animation component
• [Input] Added startAriaLabel and endAriaLabel props to DateRangeInput
• [Input] Added minimumNights and maximumNights props to DateRangeInput
• [Overview] Added OverviewCardMenu component
• [Transaction] Added TransactionIndicator component
• [Transaction] Added accessible label extraAmountLabel to extra amount
• [FocusPage] Updated FocusPage styles to support Alerts and Typography components
• [Input] Updated DateRangeInput to support selection of a range spanning a single date
• [Overview] Updated OverviewCard styles and improved accessibility
• [Overview] Updated OverviewCard to display extraAmounts on XS
• [Overview] Updated OverviewCard to pass arbitrary props
• [Dropdown] Fixed ColorDropdown incorrectly focussing the first option if it was closed and the reopened again
• [FocusPage] Fixed cosmetic issue with nested Cards inside FocusPage in small tiers

Containers

• [LanguageProvider] Added support for defining strings with a deep object, see Migration Guide for details
• [LanguageProvider] DEPRECATED defining strings through a flat object
• [LanguageProvider] DEPRECATED retrieving string through flat keys, a warning will include the new key
• [LanguageProvider] Added a warning in the console if a component is using a language string that is neither set through LanguageProvider nor local override. Additionally, in DEV environments, components will display the name of the key instead of an empty string
• [LanguageProvider] Changed individual keys in strings prop types to non-required

Documentation

• Added Snackbar documentation
• Added AnchorNavigation
• Removed deprecated icon font
• [App] Updated semantic colours and semantic variants page

Components BETA

• [Transaction] Fixed small date appearing on larger tiers in some cases

Components BETA

• [Dropdown] Activated hardware-acceleration for all Dropdown based components to prevent cents in Amounts from disappearing in some cases
• [Dropdown] Fixed positioning issues if alignment was set to RIGHT and the Dropdown would be too big to fit in the available space
• [Dropdown] Fixed Dropdown closing and reopening instantaneously if the toggle element was clicked

Styles

• Fixed .modal-open having no effect

Docs

• Fixed Modal examples not opening correctly

Components

• [ContactInfo] BREAKING Removed useGroupIcon, please use icon with ContactInfo.ICON.GROUP instead
• [Snackbar] BREAKING Renamed SnackbarItem’s enum TYPE to VARIANT and accordingly renamed the prop type
• [Modal] DEPRECATED smallColor in SmallModal, please use variant instead
• [Card] Added CardFooterTotal component to support composing of multiple label/amount pairs in CardFooter
• [ContactInfo] Extended icon to allow all GDS icons
• [Form] Moved FormField description to aria-details so that it won’t be fully announced by screenreaders on focus
• [Form] Prevented aria-required from being null in optional form fields
• [Image] Improved icon padding in Avatar
• [Input] Fixed an issue with DateInput not calling onDateChange after clearing date after it was changed via props
• [Modal] Added variant and enum VARIANT to replace the deprecated smallColor and SMALL_COLOR in SmallModal. Possible values are: DEFAULT/SUCCESS/ERROR
• [Modal] Fixed SmallModal propagating smallColor to subcomponents
• [Select] Fixed an issue when clicking an item in RecipientSelect
• [Select] Improved Selectable’s alignment when VERTICAL_ALIGN is TOP
• [Transaction] Added screenreader-friendly date
• [Utilities] Changed event handling of ClickOutside to be triggered in capturing phase instead of bubbling phase so that checks can happen before eventual DOM manipulations
• Prevent unnecessary content duplication in clipboard

Components BETA

• [Stripe] BREAKING Renamed StripeHeader’s stickyOffsets prop to stickyOffset
• [Input] Fixed an issue with DateRangeInput not calling onDatesChange after clearing date after it was changed via props
• [SegmentedMenu] Fixed DropdownMenu not aligning to toggle width in XS tier
• [Stripe] Updated StripeHeader to fill in missing undefined tiers in stickyOffset

Documentation

• [App] Added iOS modal view page

Sketch

• Added artboard-background-opaque to design files Assistant

Special thanks for contributing to this release 🎉🥇👏

• Jakub Sebok

Components

• [Amount] Removed custom props from visually hidden label
• [ContactInfo] Added badgeColor to ContactInfo
• [ContactInfo] Added bank icon
• [Image] Added badgeColor prop to Avatar
• [Image] Updated Avatar to allow all GDS icons as badgeIcon prop
• [Misc] Updated AccountNumber to improve accessibility
• [Select] Fixed an issue with FilteredSelect selecting items when user types spaces into the text input

Components BETA

• [Search] Updated AmountDropdown to prevent default when enter is pressed inside
• [Stripe] Added sticky and stickyOffsets props to StripeHeader
• [Switch] Added Switch component

Documentation

• Replaced static universe icons in GDS with Lottie animations
• [App] Added HeaderSurface_PluginPro to list of semantic colours
• [App] Added list of semantic opacities

Sketch

• Added artboard background colour to GDS-colors rule checks

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

General

• Changed styling and behaviour of side navigation toggle when there is no side navigation content

Components

• [Input] Fixed renderSelection passing an empty array instead of null when nothing was selected

Components BETA

• [Stripe] Fixed style attribute not being forwarded to StripeHeader container
• [Search] Fixed onSave event of AmountDropdown to trigger with correct values after pressing Enter
• [Search] Fixed onChange in AmountDropdown being propagated down to AmountInput

Special thanks for contributing to this release 🎉🥇👏

• Radu Tofoleanu

Components

• [ContactInfo] Added business icon to ICON enum
• [Table] Added alignment prop and enum to TableCell component, with four possible values: AUTO/LEFT/CENTER/RIGHT. Setting alignment to anything else than AUTO will overrule any column type or default alignment
• [Table] Added alignment property to Table’s columnDefaults and columns
• [Table] Changed the alignment of a Table’s last simple column to be right by default