Skip to content

Latest commit

 

History

History
1697 lines (875 loc) · 147 KB

CHANGELOG.md

File metadata and controls

1697 lines (875 loc) · 147 KB
Raw

@sumup/circuit-ui

8.13.1

Patch Changes

  • #2682 032b696 Thanks @matoous! - Added the missing exports for the experimental ColorInput component.

8.13.0

Minor Changes

  • #2679 ce178f8 Thanks @connor-baer! - Deprecated the Toggle component's checkedLabel and uncheckedLabel props since they are no longer needed.

  • #2655 5c62949 Thanks @matoous! - Added an experimental ColorInput component that enables users to type or select a color.

8.12.1

Patch Changes

8.12.0

Minor Changes

  • #2642 d53ccb1 Thanks @connor-baer! - Switched the ImageInput's button variant from primary to secondary to improve its appearance on dark backgrounds.

8.11.0

Minor Changes

  • #2551 d2115fb Thanks @connor-baer! - Always use the secondary Button variant for the second button in a ButtonGroup. Previously, it switched to the tertiary variant in narrow spaces.

  • #2551 d2115fb Thanks @connor-baer! - Tweaked the Button's updated design to improve its usability.

    • Normalized the border-radius to 8px for all sizes.
    • Removed the horizontal padding of the tertiary variant and improved the color contrast its underline.
    • Updated the disabled styles to better distinguish the button variants.

8.10.2

Patch Changes

  • #2611 4d394a6 Thanks @connor-baer! - Increased the NotificationBanner content's maximum width to better use the available space on wide viewports.

  • #2610 b895f7e Thanks @connor-baer! - Fixed a style specificity issue in the PhoneNumberInput component.

8.10.1

Patch Changes

  • #2601 c33d370 Thanks @roma-claudio! - Fixed the visibility of the PhoneNumberInput's country code prefix when hovered or focused.

8.10.0

Minor Changes

8.9.1

Patch Changes

  • #2578 3c026f3 Thanks @connor-baer! - Balanced the widths of the PhoneNumberInput component's country code and subscriber number fields.

8.9.0

Minor Changes

  • #2500 349be76 Thanks @roma-claudio! - Added an experimental PhoneNumberInput component to provide a straightforward way for users to type their phone number in an accurate, consistent format including the country code and subscriber number.

8.8.4

Patch Changes

8.8.3

Patch Changes

  • c10a6f9 Thanks @connor-baer! - Fixed the display of the month headline and weekday names in the Calendar component.

8.8.2

Patch Changes

  • #2516 d3ce6bf Thanks @connor-baer! - Fixed the size of the main content while the SidePanel's onClose callback is pending.

8.8.1

Patch Changes

  • #2514 8217e7b Thanks @connor-baer! - Fixed the positioning of the Calender component's month navigation buttons.

  • #2514 8217e7b Thanks @connor-baer! - Deprecated the RangePickerController component. Use the experimental Calendar component instead.

8.8.0

Minor Changes

  • #2511 3e98f16 Thanks @connor-baer! - Added a new useMedia hook to track the state of a media query.

  • #2499 def7f98 Thanks @connor-baer! - Added support for the SidePanel's onClose prop to be asynchronous. The SidePanel is closed after the onClose callback resolves and is prevented from closing if the callback rejects.

  • #2494 3d3ae20 Thanks @connor-baer! - Added an experimental Calendar component that displays a monthly date grid. This is a low-level component for advanced use cases; new DateInput and DateRangeInput components are in development.

  • #2494 3d3ae20 Thanks @connor-baer! - Added a new useSwipe hook to detect swipe gestures on touch screen devices.

8.7.0

Minor Changes

  • #2491 35ee26a Thanks @Burtchen! - Renamed the Table's initialSortedRow prop to initialSortedColumn to better express its purpose. The initialSortedRow is deprecated and will be removed in the next major release.
  • #2508 5e90c53 Thanks @connor-baer! Reverted the overflow behaviour of long Button labels. Text that would previously be truncated to a single line with a trailing ellipsis once again wraps to multiple lines, as it did before v8.

8.6.2

Patch Changes

  • #2489 c97a10a Thanks @connor-baer! - Reverted usage of the experimental Tooltip component in the IconButton, Pagination, and Table components. Testing the change in applications surfaced too many edge cases and conflicts. The changes will be re-applied in the next major release.

8.6.1

Patch Changes

  • #2486 54dbfd2 Thanks @connor-baer! - Switched to using an option's value instead of its label as the React key in the CheckboxGroup, RadioButtonGroup and SelectorGroup components.

8.6.0

Minor Changes

⚠️ This version adds two new dependencies to Circuit UI: @nanostores/react and nanostores. Both packages use the ES Module format and might need to be transpiled (e.g. for Jest).

  • 2d69309 Thanks @connor-baer! - Added experimental Tooltip and Toggletip components to display additional information that is contextual, helpful, and nonessential to clarify the purpose of otherwise ambiguous elements.

  • 2d69309 Thanks @connor-baer! - Extended the function signature of the useClickOutside hook to accept an array of refs as its first argument.

  • #2481 43951d0 Thanks @connor-baer! - Added support for passing custom components to the links prop of the TopNavigation component and deprecated the user and profileMenu props.

8.5.4

Patch Changes

8.5.3

Patch Changes

8.5.2

Patch Changes

  • #2469 1a2e807 Thanks @connor-baer! - Added the aria-pressed="true" attribute to the Tag component when it is rendered as a selected button.

  • #2469 1a2e807 Thanks @connor-baer! - Wired up the total number of pages to the page select as its accessible description in the Pagination component.

  • #2469 1a2e807 Thanks @connor-baer! - Added instructions for writing relevant alternative text for images.

  • #2469 1a2e807 Thanks @connor-baer! - Removed the semantics from the Hr component by default since its most commonly used for purely visual or aesthetic purposes. If the horizontal rule is useful or essential to understanding the structure of the content, pass the aria-hidden="false" attribute to restore its semantics.

  • #2469 1a2e807 Thanks @connor-baer! - Removed the redundant aria-label label from the TableHeader component.

8.5.1

Patch Changes

  • #2461 ea05708 Thanks @connor-baer! - Fixed the missing focus outline of the Anchor component when it renders as the a element.

8.5.0

Minor Changes

  • 779a911 Thanks @connor-baer! - Changed the CloseButton to use the tertiary instead of the secondary Button variant.

  • 779a911 Thanks @connor-baer! - Changed the background color of the active Toggle to green to better distinguish its states.

8.4.1

Patch Changes

8.4.0

Minor Changes

Patch Changes

  • f1977ef Thanks @connor-baer! - Changed how CSS Modules are bundled to fix CSS specificity issues caused by out-of-order styles.

8.3.1

Patch Changes

8.3.0

Minor Changes

  • #2414 5d7a92f Thanks @connor-baer! - Added a minimum height to the SidePanelProvider to allow its children to be vertically centered.

8.2.0

Minor Changes

Patch Changes

  • #2412 86a15c8 Thanks @connor-baer! - Fixed a bug where users were unable to scroll after the ModalProvider was mounted and immediately unmounted.

8.1.2

Patch Changes

8.1.1

Patch Changes

8.1.0

Minor Changes

8.0.1

Patch Changes

8.0.0

Major Changes

  • #2351 cf297de Thanks @connor-baer! - Improved the accessibility of disabled Buttons. The disabled attribute has been replaced with the aria-disabled attribute which enables the disabled element to receive focus and be perceived by screenreader users. Interactions with the disabled element are blocked by a dummy click handler.

  • #2352 08aa962 Thanks @connor-baer! - Changed the overflow behaviour of long Button labels. Text that would previously wrap is now truncated to a single line with a trailing ellipsis.

  • #2299 7c92ef0 Thanks @connor-baer! - Changed the default size of the CloseButton from 40px to 48px to match the Button component.

  • #2299 7c92ef0 Thanks @connor-baer! - Changed the NotificationInline's action from the Button to the Anchor component. Update the action props if necessary.

  • #2361 31b6f03 Thanks @connor-baer! - Removed the deprecated variant prop from the ProgressBar component.

  • #2353 f33c269 Thanks @connor-baer! - Removed the legacy navigation components: Header, Sidebar, SidebarContextProvider and SidebarContextConsumer. Use the TopNavigation and SideNavigation components instead.

Minor Changes

  • #2299 7c92ef0 Thanks @connor-baer! - Updated the look of the Button component. Corners are now rounded instead of pill-shaped, the loading spinner has been replaced with three animated dots, and the tertiary variant now sports an underline to improve accessibility.

  • #2299 7c92ef0 Thanks @connor-baer! - Changed the variant of the previous/next buttons in the Pagination component from "tertiary" to "secondary".

  • #2372 8f6dfee Thanks @connor-baer! - Deprecated the ButtonGroup's actions.[primary|secondary].size prop. Use the top-level size prop instead.

  • #2299 7c92ef0 Thanks @connor-baer! - Replaced the NotificationBanner's "tertiary" action variant with the "secondary" one and changed the action size to medium. Update the action props if necessary.

Patch Changes

7.7.3

Patch Changes

7.7.2

Patch Changes

7.7.1

Patch Changes

7.7.0

Minor Changes

  • #2358 947340b6 Thanks @connor-baer! - Deprecated the ProgressBar's variant prop. The ProgressBar will always be black in the future.

7.6.0

Minor Changes

  • #2344 e0fa9ef4 Thanks @connor-baer! - Added support for rendering the Tag component as an anchor (a) element when passed the href prop.

7.5.2

Patch Changes

  • #2332 4cd3c9cb Thanks @connor-baer! - Fixed the size of icons inside IconButtons when the available icon size doesn't match the IconButton size.

7.5.1

Patch Changes

  • #2330 3eafd13d Thanks @connor-baer! - Fixed the size of icons inside Buttons when the available icon size doesn't match the Button size.

7.5.0

Minor Changes

  • #2307 a51de39c Thanks @connor-baer! - Replaced the IconButton's children with a new icon prop.

  • #2326 7959570f Thanks @connor-baer! - Replaced the IconButton's and CloseButton's label prop with children.

  • #2307 a51de39c Thanks @connor-baer! - Added a new navigationIcon prop to the Button component. Navigation icons hint that the button will perform an unexpected action, such as opening a dropdown or navigating the user to a new tab.

  • #2307 a51de39c Thanks @connor-baer! - Renamed the Button sizes from kilo to s and giga to m. The legacy size names are deprecated and will be removed in the next major version.

  • #2311 39466c05 Thanks @connor-baer! - Renamed the Avatar sizes from giga to s and yotta to m. The legacy size names are deprecated and will be removed in the next major version.

  • #2311 39466c05 Thanks @connor-baer! - Renamed the ProgressBar sizes from byte to s, kilo to m and mega to l. The legacy size names are deprecated and will be removed in the next major version.

  • #2311 39466c05 Thanks @connor-baer! - Renamed the SelectorGroup sizes from kilo to s and mega to m. The legacy size names are deprecated and will be removed in the next major version.

  • #2311 39466c05 Thanks @connor-baer! - Renamed the Spinner sizes from byte to s, kilo to m and giga to l. The legacy size names are deprecated and will be removed in the next major version.

7.4.2

Patch Changes

7.4.1

Patch Changes

7.4.0

Minor Changes

Patch Changes

7.3.0

Minor Changes

Patch Changes

7.2.1

Patch Changes

7.2.0

Minor Changes

  • #2280 2897ec7a Thanks @tranhoangan22! - Inside TopNavigation, extended ProfileMenu's props to accept a class name to be passed to the ProfileMenu's PopOver component. Passed an empty array for the fallbackPlacements prop to the PopOver used by TopNavigation to disable the flipping behavior.

Patch Changes

  • Updated dependencies [b2edba64]:
    • @sumup/icons@3.3.0

7.1.11

Patch Changes

  • Updated dependencies [61d5ca87]:
    • @sumup/icons@3.2.0

7.1.10

Patch Changes

7.1.9

Patch Changes

7.1.8

Patch Changes

7.1.7

Patch Changes

7.1.6

Patch Changes

7.1.5

Patch Changes

7.1.4

Patch Changes

7.1.3

Patch Changes

7.1.2

Patch Changes

  • #2244 7326063c Thanks @connor-baer! - Silenced the error for a missing as prop in the Title, Headline, and SubHeadline components in test environments.

  • #2241 296709f8 Thanks @connor-baer! - Added a missing type for the onValueChange prop of the CurrencyInput.

7.1.1

Patch Changes

7.1.0

Minor Changes

  • #2224 7e5bbd57 Thanks @connor-baer! - Added additional validation for labels.

    Labels are required for form fields and other controls so those who use assistive technologies can tell what the control is for. Labels should concisely describe the control's purpose and need to be localized.

  • #2228 4d67245d Thanks @connor-baer! - Truncated placeholders using an ellipsis when they overflow the input.

  • #2225 4df339ce Thanks @connor-baer! - Added support for an optional label to the Checkbox component.

  • #2236 3fc4ef44 Thanks @connor-baer! - Re-exported the RadioButton and Selector components as legacy components. They will be removed again in the next major release.

  • #2238 24d746b0 Thanks @connor-baer! - Added support for icons to illustrate SelectorGroup options.

7.0.4

Patch Changes

7.0.3

Patch Changes

7.0.2

Patch Changes

7.0.1

Patch Changes

7.0.0

Major Changes

  • #1992 0b7fb453 Thanks @connor-baer! - Raised the minimum version of the react and react-dom peer dependencies to >=18.

  • #2061 bc882426 Thanks @connor-baer! - Raised the minimum Node.js version to 18+.

  • #2061 bc882426 Thanks @connor-baer! - This package is now pure ESM. Please read this.

    • If you use TypeScript, you need to use TypeScript 4.7 or later (ref).
    • If you use a bundler, make sure it supports ESM and that you have correctly configured it for ESM. (Next.js supports ESM packages out of the box since v12).

  • #2061 bc882426 Thanks @connor-baer! - Switched to the "exports" field to configure the package entry points. Files that are not explicitly defined in "exports" can no longer be imported.

  • #2163 6ff0b7da Thanks @connor-baer! - Migrated all stable components from Emotion.js to CSS Modules.

    The styles are bundled and exported as a single CSS file as @sumup/circuit-ui/styles.css. Refer to your framework's documentation on how to include the styles globally in your application.

    The CSS file includes the base styles, so the BaseStyles component has been removed.

    If you are only importing stable components and aren't using Emotion.js in your app, you can remove all Emotion.js-related dependencies.

  • #2154 eef360c4 Thanks @connor-baer! - Updated the list of supported browsers:

    Browser Previous New
    Chrome 63+ 73+
    Firefox 67+ 67+
    Edge 79+ 79+
    Safari iOS 11.0+ 12.2+
    Safari macOS 11.1+ 12.1+
    Opera 50+ 60+
    Samsung Internet 8.2+ 11.1+

  • #1972 0f29f87b Thanks @connor-baer! - Removed @sumup/collector from the peer dependencies and removed the related tracking and trackingLabel props (deprecated since v6.4).

  • #2124 22b03d04 Thanks @connor-baer! - Removed the public export of the RadioButton component. Use the RadioButtonGroup component instead.

  • #2124 22b03d04 Thanks @connor-baer! - Removed the public export of the Selector component. Use the SelectorGroup component instead.

  • #2124 22b03d04 Thanks @connor-baer! - Removed the deprecated children prop from the Selector component. Use the label and description props instead.

  • #2063 fef5b955 Thanks @connor-baer! - Removed the deprecated children prop from the Checkbox component. Use the label prop instead.

  • #2124 22b03d04 Thanks @connor-baer! - Removed the deprecated explanation prop from the Toggle component. Use the description prop instead.

  • #2067 4f78573e Thanks @connor-baer! - Changed the signature of the ImageInput's component prop. The component should now accept aria-hidden instead of alt.

  • #2063 fef5b955 Thanks @connor-baer! - Removed the deprecated confirm, notify, and alert variants from the Badge, NotificationInline, and NotificationToast components. Use the success, warning, and danger variants instead.

  • #2125 82878190 Thanks @connor-baer! - Moved the Grid, Row, Col, and InlineElements components to the "legacy" status. Update your imports:

    -import { Grid } from '@sumup/circuit-ui';
+import { Grid } from '@sumup/circuit-ui/legacy';

  • #2094 da1a11b0 Thanks @connor-baer! - Moved the SingleDayPicker, RangePicker, CalendarTag, and CalendarTagTwoStep components to the "legacy" status.

    Install the optional peer dependencies...

    npm install react-dates@^21.8 moment@^2.29

    ...and update your imports:

    -import { SingleDayPicker } from '@sumup/circuit-ui';
+import { SingleDayPicker } from '@sumup/circuit-ui/legacy';

  • #2094 da1a11b0 Thanks @connor-baer! - Moved the Tooltip component to the "legacy" status. Update your imports:

    -import { Tooltip } from '@sumup/circuit-ui';
+import { Tooltip } from '@sumup/circuit-ui/legacy';

  • #2094 da1a11b0 Thanks @connor-baer! - Moved the Sidebar, SidebarContextProvider, SidebarContextConsumer, and Header components to the "legacy" status. Update your imports:

    -import { Sidebar } from '@sumup/circuit-ui';
+import { Sidebar } from '@sumup/circuit-ui/legacy';

  • #2125 82878190 Thanks @connor-baer! - Moved the uniqueId util to the "legacy" status. Update your imports:

    -import { uniqueId } from '@sumup/circuit-ui';
+import { uniqueId } from '@sumup/circuit-ui/legacy';

  • #2065 8adb8fee Thanks @connor-baer! - Migrated the Carousel components to TypeScript. Added the required playButtonLabel, pauseButtonLabel, prevButtonLabel, and nextButtonLabel props.

  • #2065 8adb8fee Thanks @connor-baer! - Migrated the Calendar components to TypeScript. Some props are now required. The CalendarTagTwoStep's clearText and confirmText props have been renamed to clearButtonLabel and confirmButtonLabel respectively.

  • #1995 1267c69c Thanks @connor-baer! - Simplified the function signature of the style mixins that no longer require the theme parameter (shadow, focusOutline, focusVisible, and inputOutline).

  • #2065 8adb8fee Thanks @connor-baer! - Removed the sharedPropTypes export. Type the props using TypeScript instead.

  • #2114 f53e4336 Thanks @connor-baer! - Changed the font-display of Aktiv Grotesk, Circuit UI's default font family, from swap to optional. If the font family is not available locally or cached, a fallback font is used. This reduces the cumulative layout shift (CLS) and largest contentful paint (LCP). The visual difference is minimal.

Minor Changes

  • #2124 22b03d04 Thanks @connor-baer! - Added support for validations to the SelectorGroup component. Use the validationHint and invalid props to communicate validation requirements to users.

  • #2163 6ff0b7da Thanks @connor-baer! - Improved the accessibility of the SearchInput component. The input now has the search type and focus is returned to the input after clearing the value.

  • #2065 8adb8fee Thanks @connor-baer! - Migrated the Tabs components to TypeScript.

  • #2065 8adb8fee Thanks @connor-baer! - Migrated the Sidebar component to TypeScript.

  • #1992 0b7fb453 Thanks @connor-baer! - Deprecated the uniqueId util. Use the official useId hook instead.

  • #2195 6f992ae6 Thanks @connor-baer! - Added a helpful error message when the Title, Headline or SubHeadline components are missing the as prop.

  • #1615 51cd70d3 Thanks @connor-baer! - Automatically set the size prop on the Button's icon prop based on the Button's size prop.

Patch Changes

6.11.0

Minor Changes

  • #2191 7ba96798 Thanks @sirineJ! - Added a new description prop to the RadioInput component. Use it to provide additional context for an option.

6.10.1

Patch Changes

6.10.0

Minor Changes

  • #1415 f2c20b88 Thanks @long-lazuli! - Added the indeterminate prop to the Checkbox component. Use it to display and control the collective state of a group of nested checkboxes.

6.9.0

Minor Changes

  • #2105 9aabce8d Thanks @connor-baer! - Added support for the CheckboxGroup, RadioButtonGroup and SelectorGroup components to be used as uncontrolled inputs using the new defaultValue prop.

  • #2105 9aabce8d Thanks @connor-baer! - Deprecated the RadioButton component. Use the RadioButtonGroup component instead.

  • #2105 9aabce8d Thanks @connor-baer! - Deprecated the Selector component. Use the SelectorGroup component instead.

  • #1851 0e3bdd53 Thanks @tranhoangan22! - Added the CheckboxGroup component. The options prop specifies how the Checkboxes are rendered. Each option in the options prop must have a value key and a label key. The value prop indicates which Checkboxes are checked by default. The validationHint for the individual Checkboxes are disallowed in favor of a single validationHint for the CheckboxGroup.

  • #2105 9aabce8d Thanks @connor-baer! - Added support for the required and optionalLabel props to the SelectorGroup component.

Patch Changes

  • #2123 22184900 Thanks @connor-baer! - Reduced the breakpoint for the expanded SideNavigation on wide viewpoints to account for scroll bars.

  • #2115 5f955ce5 Thanks @pdrmdrs! - Fixed the styles of a checked and disabled Checkbox.

  • #2113 2bea43ff Thanks @robinmetral! - Marked Popover dividers as presentational to ensure that the right number of items is announced by screen readers.

  • #2121 eb445e65 Thanks @connor-baer! - Don't crop content overflow when the useCollapsible hook is expanded.

6.8.0

Minor Changes

  • #2071 abf11b69 Thanks @connor-baer! - Added an optional description prop to the Toggle component, and deprecated the legacy explanation prop. This aligns with the Selector component's API.

  • #2071 abf11b69 Thanks @connor-baer! - Added optional label and description props to the Selector component, and deprecated the legacy children prop. The label prop will become required in the next major version. This aligns with the Checkbox and RadioButton component APIs.

Patch Changes

6.7.0

Minor Changes

Patch Changes

6.6.4

Patch Changes

6.6.3

Patch Changes

6.6.2

Patch Changes

  • #2021 c6fb3aed Thanks @robinmetral! - Removed the title attribute from the ProgressBar component. The ProgressBar already has an accessible label, so the title is redundant. You might need to update your snapshots.

6.6.1

Patch Changes

  • #2011 2728e9da Thanks @connor-baer! - Moved the Toggle's explanation outside the switch button's label and connected it to the switch button using aria-describedby to provide a better experience to screen reader users. This affects the component's markup and might be a breaking change in instances customizing the Toggle's styles.

6.6.0

Minor Changes

  • #2007 8ab8c209 Thanks @connor-baer! - Forward refs to the NotificationBanner, NotificationFullscreen, and NotificationInline components.

Patch Changes

6.5.0

Minor Changes

  • #1996 6d7c5de4 Thanks @connor-baer! - Added an optional label prop to the Checkbox component, and deprecated the legacy children prop. The label prop will become required in the next major version. This aligns with the RadioButton component's API.

6.4.0

Minor Changes

  • #1997 9a348fd2 Thanks @connor-baer! - Deprecated the tracking and trackingLabel props in all components. Use event handlers to dispatch user interaction events instead. @sumup/collector will be removed from @sumup/circuit-ui in the next major version.

  • #1998 81e3ea06 Thanks @connor-baer! - Deprecated the uniqueId util. If your app is already using React 18, use the official useId hook instead. uniqueId will be removed from Circuit UI v7, along with dropping support for React <18.

  • #2000 757e0c1e Thanks @connor-baer! - Added the success, warning, and danger variants to the Badge, NotificationInline, and NotificationToast components and deprecated the confirm, notify, and alert variants.

6.3.5

Patch Changes

6.3.4

Patch Changes

6.3.3

Patch Changes

6.3.2

Patch Changes

  • #1973 226e6cd9 Thanks @connor-baer! - Removed codemods for legacy Circuit UI versions and removed the obsolete circuit-ui CLI. The library doesn't support skipping major versions when upgrading.

6.3.1

Patch Changes

6.3.0

Minor Changes

  • #1944 5e1bbb6a Thanks @connor-baer @robinmetral! - Migrated all components to use the new semantic color tokens. There are minor visual differences between colors. You will also notice the change in snapshots.

  • #1944 5e1bbb6a Thanks @robinmetral! - Added a new --cui-bg-elevated color token to use as background for elevated elements such as modals, popovers, etc.

  • #1944 5e1bbb6a Thanks @connor-baer @robinmetral! - Adapted the warning state of form components validationHint to the new color tokens. Both the warning icon and copy are now orange with the default Circuit UI theme.

  • #1944 5e1bbb6a Thanks @connor-baer @robinmetral! - Adjusted the Avatar component's design to work with new semantic color tokens.

Patch Changes

6.2.3

Patch Changes

6.2.2

Patch Changes

6.2.1

Patch Changes

  • #1938 18735f1c Thanks @sirineJ! - Fixed the interactive styles of the secondary button inside a ButtonGroup.

6.2.0

Minor Changes

  • #1916 75a1b203 Thanks @tavarest! - Tweaked the SideNavigation to expand the primary navigation on large viewports.

6.1.0

Minor Changes

6.0.0

Major Changes

  • #1664 e7c6ed5e Thanks @connor-baer! - Wrapped the ImageInput component in a div. This aligns the component with other form components and makes it easier to apply style mixins such as spacing.

  • #1664 e7c6ed5e Thanks @connor-baer! - Removed the inline prop from the Input, Textarea, and Select components. Use the css prop to apply custom styles instead.

  • #1772 817d7585 Thanks @a5e! - Tweaked the ButtonGroup component to switch between a secondary button (on viewports of at least mq.kilo) and a tertiary button (on viewports narrower than mq.kilo) using CSS media queries instead of rendering three buttons. Tests (e.g. using @testing-library) can now query the secondary button without using *AllBy queries.

  • #1664 e7c6ed5e Thanks @connor-baer! - Removed the Label component from the public exports. Use the label prop on the form components instead. When building a custom form component, use a label element with the typography('two') style mixin (don't forget about the for prop).

  • #1759 b03da80d Thanks @robinmetral! - Removed the noMargin prop from Circuit UI form and typography components. Use the spacing() style mixin instead.

  • #1661 177fe66f Thanks @tranhoangan22! - Migrated the Popover component from Popper to Floating UI. Popper's modifiers are no longer supported, use the offset prop for flexible placement of the floating element instead. The placement prop no longer accepts auto* values.

  • #1664 e7c6ed5e Thanks @connor-baer! - Changed how custom styles are forwarded to the Input and Textarea components. The className and style props are now passed to the outermost div (this also applies to Emotion's css prop). The labelStyles prop has been removed. This aligns the components with other form components and makes it easier to apply style mixins such as spacing.

  • #1760 b8f129ee Thanks @robinmetral! - Switched typography units for the Badge component to use rem units. See The Surprising Truth About Pixels and Accessibility.

  • #1789 3c0c98dd Thanks @robinmetral! - Rendered the Checkbox's validationHint under the input instead of in a tooltip. This makes the behavior consistent with other form components and improves accessibility.

  • #1795 426a0f63 Thanks @robinmetral! - Moved the validationHint outside the input labels and connected them to the inputs using aria-describedby. This affects form component markup and might be a breaking change in instances customizing input styles.

  • #1664 e7c6ed5e Thanks @connor-baer! - Restricted the label prop on all form components to the string type.

  • #1766 47ef6962 Thanks @robinmetral! - Updated the browser support policy for Circuit UI. Moving forward, only browsers that support dynamic module imports will be supported.

  • #1781 5fe99fe8 Thanks @robinmetral! - Upgraded to react-number-format version 5. This could be a breaking change if you were relying on internal react-number-format props. Refer to the react-number-format migration guide for details. Any explicit typings will also need to be updated.

Minor Changes

  • #1664 e7c6ed5e Thanks @connor-baer! - Added support for the optionalLabel and disabled props to the RadioButtonGroup component. This aligns the component with other form components.

Patch Changes

  • #1813 269d4a19 Thanks @robinmetral! - Allowed passing a custom aria-describedby value to form components. The custom value (an element id, or list of ids separated by a space) will be combined with the generated id of the validationHint element.

  • #1809 bd184b53 Thanks @robinmetral! - Marked invalid radio buttons as invalid using aria-invalid="true". This makes the state available to assistive technologies.

  • #1795 426a0f63 Thanks @robinmetral! - Fixed the size of the Input component's optional prefix and suffix (when passed as strings). They are now 16px (the size of the input's placeholder and value) instead of 14px (the size of the input's label).

  • #1795 426a0f63 Thanks @robinmetral! - Removed unintended spacing below the TextArea component.

  • #1795 426a0f63 Thanks @robinmetral! - Improved the accessibility of the RadioButtonGroup component by adding the role="radiogroup" and orientation="vertical" attributes.

  • #1814 befbeee4 Thanks @robinmetral! - Added the currency symbol to the CurrencyInput's accessible description.

  • #1811 0db1e468 Thanks @robinmetral! - Hid the decorative chevron icons in the Select component from assistive technology.

  • #1738 b0e046d3 Thanks @robinmetral! - Removed the unnecessary passive option from the Popover component's scroll event listener.

  • #1809 bd184b53 Thanks @robinmetral! - Ensured that aria-invalid is always either 'true' or undefined (defaults to 'false'). This prevents errors in implementations not using TypeScript.

5.4.0

Minor Changes

  • #1786 242e1541 Thanks @connor-baer! - Added the option of using initials as a placeholder for the identity variant of the Avatar component.

5.3.2

Patch Changes

5.3.1

Patch Changes

  • #1651 ea1ebb0d Thanks @anasalles47! - Adjusted the SelectorGroup component to ensure that all Selectors have the same height.

5.3.0

Minor Changes

  • #1720 d3c6165d Thanks @connor-baer! - Added support for passing an SVG component as image.svg to the NotificationFullscreen and NotificationModal components.

5.2.4

Patch Changes

5.2.3

Patch Changes

  • #1644 6c5c2a1a Thanks @amelako! - Improved the accessibility of the ImageInput component by associating the validation hint with the input and announcing updates to screen reader users.

5.2.2

Patch Changes

  • #1692 cab2f20c Thanks @connor-baer! - Added a max-width to the headline of an imageless NotificationModal to prevent it from being overlapped by the close button.

5.2.1

Patch Changes

5.2.0

Minor Changes

  • #1682 d4ce46f0 Thanks @connor-baer! - Added the ClickEvent, PopoverItemProps, and TableSortByValue types to the public exports.

5.1.7

Patch Changes

  • #1662 a74749c0 Thanks @robinmetral! - Improved Table component types. Deprecated the Cell type in favor of HeaderCell and RowCell, to reflect differences in sorting-related props. Correctly typed the align prop on the Cell instead of the Row.

  • b74dc5e2 Thanks @dependabot[bot]! - Upgraded moment.js to v2.29.4. If your app also depends on moment.js, you need to pin it to the same version to avoid the bug described in #674.

  • #1653 d4ecc20f Thanks @tranhoangan22! - Fixed a spacing issue in the Table component when sorting a column in condensed mode.

5.1.6

Patch Changes

  • #1645 607ba30f Thanks @robinmetral! - Removed codemods for legacy Circuit UI versions. Any given Circuit UI version will now only include codemods for migrating from the previous major version. The library doesn't support skipping major versions when upgrading.

5.1.5

Patch Changes

  • #1635 5c2ea976 Thanks @robinmetral! - Changed Pagination return type from ReactNode to ReactElement | null to prevent a clash with React 18 types.

5.1.4

Patch Changes

5.1.3

Patch Changes

  • #1614 2ac245b6 Thanks @connor-baer! - Replaced colors.n900 with colors.bodyColor when used as a text color for consistency.
  • #1605 384cedb7 Thanks @robinmetral! - Switched the ToastContext's live region element from a ul to a div: lists shouldn't have role="status" since this strips list semantics.

5.1.2

Patch Changes

5.1.1

Patch Changes

  • Updated dependencies [701b9f4b]:
    • @sumup/icons@2.9.1

5.1.0

Minor Changes

Patch Changes

  • #1570 bb9a8a39 Thanks @vascofg! - Allowed the loading state for the IconButton component. Pass an isLoading prop with an accessible loadingLabel label.

5.0.0

Major Changes

  • #1513 4740ef30 Thanks @amelako! - Removed the UNSAFE_DISABLE_ACCESSIBILITY_ERRORS environment variable.
  • #1511 eed3888f Thanks @amelako! - Threw a runtime error when the noMargin prop isn't passed to components requiring it. Setting the UNSAFE_DISABLE_NO_MARGIN_ERRORS environment variable to true will temporarily turn off the errors.
  • #1528 005d2a17 Thanks @robinmetral! - Removed the default placeholder option in the Select component. Pass a localized string to placeholder instead, or keep the default option empty.
  • #1552 4e6a3750 Thanks @robinmetral! - Removed the deprecated children prop from the ButtonGroup component. Use the actions prop instead.
  • #1512 b7712b30 Thanks @robinmetral! - Removed the RadioButton's deprecated children prop. Use the label prop (now required) instead, in both the RadioButton and the RadioButtonGroup's options.
  • #1526 ba059828 Thanks @amelako! - Removed the deprecated success, warning and danger color variants. Use confirm, notify and alert instead.
  • #1510 908f1e77 Thanks @robinmetral! - Removed the deprecated shadowSingle, shadowDouble and shadowTriple style mixins. Use the shadow() style mixin instead.
  • #1518 2987be29 Thanks @amelako! - Removed the deprecated Notification, NotificationCard, NotificationList and InlineMessage components.
  • #1533 dec0db59 Thanks @robinmetral! - Renamed the ListItem component's prefix and suffix props to leadingComponent and trailingComponent. Renamed the suffixLabel and suffixDetails props to trailingLabel and trailingDetails.
  • #1512 b7712b30 Thanks @robinmetral! - Made the RadioButton's label prop required and throw an error if it isn't passed. This is an accessibility requirement.

Minor Changes

  • #1507 c1942507 Thanks @connor-baer! - Removed lodash as a dependency to reduce Circuit UI's bundle size. If you aren't using lodash in your application, you can remove babel-plugin-lodash.
  • #1559 1d7dc8c3 Thanks @robinmetral! - Added support for the as prop in the Button component. This is necessary to render buttons in a ButtonGroup as links with routing.

Patch Changes

4.20.0

Minor Changes

  • #1540 2a7d1c91 Thanks @amelako! - Added support for the ButtonGroup component's align prop when using the new actions prop. Defaults to center.

4.19.0

Minor Changes

  • #1504 467c3a82 Thanks @connor-baer! - Migrated the Grid, Row, and Col components to TypeScript. The Col component's span and skip props now accept numbers or numeric strings, even when nested in a breakpoints object. Here are some examples:

    <Col span={2} />
<Col span="2" />
<Col span={{ default: 2, kilo: "4" }} />

Patch Changes

  • #1505 bbd20fd6 Thanks @connor-baer! - Migrated the useStep hook and Step component to TypeScript. The useStep hook now has the same default options as the Step component.
  • #1498 209b35bf Thanks @hris27! - Fixed opening animation and unwanted page scroll when closing a SidePanel or Modal on Safari.

4.18.0

Minor Changes

4.17.1

Patch Changes

4.17.0

Minor Changes

  • #1464 f22cf47a Thanks @sumius! - Added a new center style mixin to center content horizontally and vertically.

Patch Changes

  • #1453 21a5d902 Thanks @felixjung! - Fixed a runtime error that occurred when users click on a disabled item in the Sidebar with an onClick handler.

4.16.0

Minor Changes

  • #1401 d8361322 Thanks @hris27! - Added a new SidePanel component. Use it via the useSidePanel hook and SidePanelProvider.

Patch Changes

  • #1401 d8361322 Thanks @hris27! - Changed the Popover's strategy to fixed to prevent overflow issues.

4.15.1

Patch Changes

4.15.0

Minor Changes

4.14.0

Minor Changes

  • #1437 34177608 Thanks @amelako! - Deprecated the InlineMessage, Notification, NotificationList, and NotificationCard components. Use the new NotificationBanner, NotificationInline, and NotificationToast components instead.

4.13.1

Patch Changes

  • #1435 55e78782 Thanks @connor-baer! - Removed modern syntax in the NotificationInline component that wasn't transpiled and could lead to build issues in apps that consume Circuit UI.

4.13.0

Minor Changes

  • #1431 3f9585a4 Thanks @amelako! - Replaced the success, warning, and danger colors with the new confirm, notify, and alert colors.

Patch Changes

  • Updated dependencies [3f9585a4]:
    • @sumup/design-tokens@3.4.0

4.12.0

Minor Changes

  • #1432 60d57a8a Thanks @robinmetral! - Allow heading levels h2 to h6 in the NotificationInline headline. Pass it an object with the properties label (the heading text) and as (the heading level).

4.11.4

Patch Changes

  • #1421 4bc2b453 Thanks @robinmetral! - Set aria-pressed on a ListItem or CardList.Item (deprecated) only when it has a role of button. The attribute is invalid on any other role.

4.11.3

Patch Changes

4.11.2

Patch Changes

4.11.1

Patch Changes

  • #1386 c49a6b42 Thanks @amelako! - Changed the "Notify" icon to "NotifyCircle" for the NotificationInline, NotificationToast and Input components.

4.11.0

Minor Changes

4.10.2

Patch Changes

4.10.1

Patch Changes

  • #1384 e0e5c431 Thanks @robinmetral! - Refactored Checkbox styles. This is an internal change only, but you'll need to update your snapshots.

4.10.0

Minor Changes

  • #1332 dd65ad12 Thanks @amelako! - Added a new NotificationInline component that provides quick and contextual inline notifications.

4.9.0

Minor Changes

4.8.1

Patch Changes

  • #1367 e2362dc6 Thanks @robinmetral! - Fixed spacing in the NotificationBanner. Any extra horizontal spacing in the component should be added between the copy and the asset.

4.8.0

Minor Changes

  • #1359 5804fd8d Thanks @amelako! - Added a z-index to the NotificationToasts so they always float above other content. Requires updating to @sumup/design-tokens@3.3.0.

Patch Changes

  • Updated dependencies [5804fd8d]:
    • @sumup/design-tokens@3.3.0

4.7.3

Patch Changes

  • #1357 5d24f0d2 Thanks @amelako! - Increased the NotificationToast's default duration to 6 seconds to match the accessibility guidelines.
  • #1357 5d24f0d2 Thanks @amelako! - Updated the NotificationToast's prop types, now the iconLabel prop is optional and the isVisible prop is internal only.

4.7.2

Patch Changes

  • #1355 d08ad565 Thanks @amelako! - Fixed the issue of the NotificationToast transition, now the toast appears with a smoother fade and height transition.

4.7.1

Patch Changes

  • #1346 e6a34e92 Thanks @robinmetral! - Improved types in the CurrencyInput. The component's type (exposed via its ref) changed from NumberFormat to NumberFormat<InputProps>, now explicitly typing the wrapped Circuit UI Input.

4.7.0

Minor Changes

  • #1295 3861db2a Thanks @amelako! - Added a new NotificationToast component that provides quick and contextual feedback to the user.

4.6.1

Patch Changes

  • #1328 23065d4a Thanks @robinmetral! - Removed event listeners from the Popover when it is closed, to prevent unnecessary re-renders.

4.6.0

Minor Changes

  • #1310 d9f0b380 Thanks @felixjung! - Converted the Tooltip component to TypeScript and removed its Lodash dependency.

4.5.6

Patch Changes

4.5.5

Patch Changes

4.5.4

Patch Changes

  • #1304 6f621e53 Thanks @amelako! - Removed the onClick function from Image component in NotificationBanner.

4.5.3

Patch Changes

4.5.2

Patch Changes

  • #1283 c35e1c2c Thanks @robinmetral! - Added the noMargin prop to the NotificationFullscreen's headline to prevent the deprecation warning.

4.5.1

Patch Changes

4.5.0

Minor Changes

  • #1273 ed0c4f83 Thanks @robinmetral! - Introduced the Title and BodyLarge components for rendering copy with large typography, for example on landing pages.
  • #1260 40339fe0 Thanks @giedoka! - Added an optional size prop to the ImageInput component to change the action button's size.

Patch Changes

  • #1260 40339fe0 Thanks @giedoka! - Adjusted the border radius of the Avatar component when size="giga" and variant="object".

  • Updated dependencies [ed0c4f83]:

    • @sumup/design-tokens@3.2.0

4.4.2

Patch Changes

  • #1271 1c35dae3 Thanks @robinmetral! - Fixed the import of IconProps in the IconButton component. This was causing TypeScript build failures.

4.4.1

Patch Changes

  • #1263 d07efc86 Thanks @robinmetral! - Removed optional chaining from the NotificationModal for compatibility with Node 12.

  • Updated dependencies [d619b6e1]:

    • @sumup/design-tokens@3.1.1

4.4.0

Minor Changes

  • #1182 8ad10a93 Thanks @hris27! - Added new ListItem and ListItemGroup components. The ListItemGroup replaces the CardList component.

4.3.0

Minor Changes

  • #994 0b7b3226 Thanks @amelako! - Added a new NotificationModal component that communicates critical information, and needs the user's attention or action to proceed.

4.2.1

Patch Changes

  • #1231 c9ec5169 Thanks @amelako! - Updated the NotificationFullscreen body prop to accept a ReactNode and removed the external spacing.

4.2.0

Minor Changes

  • #964 75a67df4 Thanks @amelako! - Added a new NotificationFullscreen component that provides important information or feedback as part of a process flow.

Patch Changes

  • #964 75a67df4 Thanks @amelako! - Fixed the ButtonGroup to horizontally center buttons on wide viewports.

4.1.7

Patch Changes

  • #1225 b451fb20 Thanks @long-lazuli! - Fixed a bug where the RadioButtonGroup didn't forward the required attribute to the inputs.

4.1.6

Patch Changes

4.1.5

Patch Changes

4.1.4

Patch Changes

  • #1218 8402e6b9 Thanks @connor-baer! - Fixed a compatibility issue between the Popover and Button where the Button content would remain visible when the Popover was closed.

4.1.3

Patch Changes

4.1.2

Patch Changes

  • #1214 994ee8e2 Thanks @connor-baer! - Added a codemod for the LoadingButton → Button migration (🤖 component-names-v4-1).

4.1.1

Patch Changes

4.1.0

Minor Changes

  • #1167 7b5c44c9 Thanks @amelako! - Added a new actions prop to the ButtonGroup that replaces the children prop. The new API is more ergonomic and enables an improved look on mobile.
  • #1113 d6350cc3 Thanks @amelako! - Added a new NotificationBanner component that communicates and promotes high-level, site-wide information to the user.

4.0.0

Major Changes

  • #1186 17cf95aa Thanks @connor-baer! - Changed the Modal's tracking event to include the open/close data in the tracking label.
  • #1184 dfbe2bb3 Thanks @connor-baer! - Fixed the useClickEvent hook to track events even if no custom onClick handler is defined.
  • #1186 17cf95aa Thanks @connor-baer! - Marked the label property of the tracking prop as required. This matches the existing behavior where click events are only tracked if the label property is provided.
  • be3c0781 Thanks @robinmetral! - Replaced the SideNavigation badge's label prop by children for consistency with the BadgeProps.

Minor Changes

Patch Changes

  • #1168 ca74d320 Thanks @robinmetral! - Fixed the spacing between a PopoverItem's label and (optional) icon. Since the items should receive 24px icons, the component looks more balanced with a 16px spacing.
  • #1176 c7483f0b Thanks @robinmetral! - Switched all component interfaces to extend *HTMLAttributes<HTML*Element> instead of the less accurate HTMLProps.

3.1.0

Minor Changes

Patch Changes

  • #1114 159bd7ad Thanks @connor-baer! - Changed the styles returned by the useCollapsible hook to only hide vertical overflow, fixing a compatibility issue with the form components.
  • #1128 fdc0575e Thanks @robinmetral! - Fixed the click handler to close the Popover when a PopoverItem doesn't have an onClick.

3.0.1

Patch Changes

3.0.0

Major Changes

  • #960 1a1a3646 Thanks @robinmetral! - The TableHeader, TableRow and TableCell components are no longer exported from Circuit. They are only used internally by the Table component and should not be used directly.
  • #979 3cfefac0 Thanks @robinmetral! - Renamed the NotificationBanner component to NotificationCard. This frees up the NotificationBanner namespace for a new component that we will introduce in v3.x.
  • #972 95488037 Thanks @connor-baer! - Replaced the deprecated text[Kilo|Mega|Giga] style mixins by a single typography mixin, and removed the deprecated heading[Kilo|Mega|Giga|Tera|Peta|Exa|Zetta] and subHeading[Kilo|Mega] style mixins.
  • #992 b898410e Thanks @robinmetral! - Switched to the new JSX transform with automatic runtime. You will need to update your Babel config to use Emotion's JSX runtime. For example, with Next.js and Emotion 10:
  • #984 7879a990 Thanks @amelako! - Increased the Button sizes to match other form components and renamed the default size from mega to giga.

  • #995 bd234296 Thanks @robinmetral! - Harmonized the label prop names across components to follow the actionLabel pattern.

  • #995 bd234296 Thanks @robinmetral! - Enforced accessible labels in several components. This is an accessibility requirement. If the labels are not provided, the interaction will be disabled.

  • #884 eb9e0b47 Thanks @amelako! - The new semantic typography components make it clear when each should be used, are flexible enough to cover all use cases. To represent more semantic variations some of the sizes have been removed and new size names added.

  • #960 1a1a3646 Thanks @robinmetral! - Default data-testids are no longer built into the Table component. They can still be passed manually. We also recommend querying by role in tests, for them to resemble how users interact with the code. You can find examples in the component's specs.

  • #943 0543719b Thanks @mykolaharmash! - Selector now has multiple size options. SelectorGroup is changed to horizontal layout and to be inline element by default with an option to stretch to full width.

  • #985 61c15cf7 Thanks @robinmetral! - Removed the experimental static styles extraction feature.

  • #995 bd234296 Thanks @robinmetral! - Enforced the Input and Select's built-in label prop. Do not use the Label component separately and pass the label as a prop instead.
  • #960 1a1a3646 Thanks @robinmetral! - The TableHeader, TableRow and TableCell components are no longer exported from Circuit. They should only be used internally by the Table component.
  • #995 bd234296 Thanks @robinmetral! - Removed the deprecated shadow prop from the Card, shadows have been replaced by a single outline.

  • #984 7879a990 Thanks @amelako! - Aligned the heights of all form components to be consistent. The new size values are:

  • #960 1a1a3646 Thanks @robinmetral! - Changed the signature of the Table's custom onSortBy method. The nextDirection argument moved to the third position ((index, nextDirection, rows) 👉 (index, rows, nextDirection)) and can now be undefined (instead of null in the previous implementation).

  • #995 bd234296 Thanks @robinmetral! - Removed the data-testid attribute from the CardHeader's close button. Use queryByRole('button') in your tests instead.
  • #949 4e636205 Thanks @connor-baer! - Removed the exports of the Modal, ModalWrapper, ModalHeader, ModalFooter, ModalContext, and ModalConsumer components. Use the useModal hook instead.
  • #995 bd234296 Thanks @robinmetral! - Removed the aggregate styleHelpers export. Import each style mixin directly instead.
  • #995 bd234296 Thanks @robinmetral! - Removed the themePropType export from @sumup/circuit-ui. Import it from @sumup/design-tokens instead.
  • #944 2628fce1 Thanks @amelako! - Rebuilt the Popover component. It now uses Popper v2 and comes with a refreshed component API.

  • #995 bd234296 Thanks @robinmetral! - Removed the onClick prop from the Badge. Badges are not meant to be interactive and should only communicate the status of an element. Use the Tag component for interactive elements instead. The primary variant of the Badge was also removed. Use the neutral variant instead.

  • #1008 e76f2d03 Thanks @connor-baer! - Made the as prop required in the Headline and SubHeadline components. Intentionally setting the heading level ensures a consistent and accessible page structure.

  • #1082 00ee3ffb Thanks @connor-baer! - Tweaked the Hamburger design and aligned its height with the Button component.

  • #1080 91324688 Thanks @robinmetral! - Added a development-only check for required label props that throws a runtime error if any is missing.

  • #1073 5eaa9520 Thanks @connor-baer! - Made the label of the SelectorGroup visible by default. It can be hidden with the hideLabel prop, but this should only be done in rare cases and only if the purpose of the field can be inferred from context.
  • #1077 4166e2ea Thanks @connor-baer! - Aligned the Calendar styles with other input components and injected the styles as global styles. Previously, they were scoped to a parent classname which prevented the use of the withPortal prop.

Minor Changes

  • #984 7879a990 Thanks @amelako! - Added a size prop to the Spinner component. The possible values are byte, kilo (default), and giga.
  • #884 eb9e0b47 Thanks @amelako! - Added new success, error and subtle variants to the Body and Anchor component.
  • #1089 2d216980 Thanks @connor-baer! - Added a useCollapsible hook to build accessible and smoothly animated collapsible sections.
  • #1023 07614c5f Thanks @connor-baer! - Added the useClickOutside, useEscapeKey, and useFocusList hooks which can be used to make custom components more keyboard accessible.
  • #1074 1869c218 Thanks @connor-baer! - Persisted the active state of the Button when it is pressed or an associated menu is expanded.
  • #1022 afb2eb29 Thanks @connor-baer! - Added the focusVisible style mixin that shows a focus outline only when the user agent determines via heuristics that the focus should be made evident on the element (see :focus-visible).
  • #1073 5eaa9520 Thanks @connor-baer! - Added a hideLabel prop to the RadioButtonGroup to visually hide the label. This should only be used in rare cases and only if the purpose of the field can be inferred from context.

Patch Changes

  • #980 900e6bc4 Thanks @robinmetral! - Tweaked components (Anchor, InlineMessage, SearchInput, Selector, Tag) to use the new border radius values.
  • #960 1a1a3646 Thanks @robinmetral! - Fixed a UI bug in the Table component where multiple words in a table header would wrap on mobile, and break row alignment.

  • #1051 9234ebc3 Thanks @robinmetral! - Tweaked the Card component interface to support any optional ref.

  • #1078 ee1446a3 Thanks @amelako! - Fixed the CurrencyInput bug for Chile locale where shouldn’t be any fraction digits in the input.

2.8.0

Minor Changes

2.7.1

Patch Changes

  • #1047 19fa9c29 Thanks @connor-baer! - Fixed the alignment of the icon next to a validation hint when the text is center-aligned.

2.7.0

Minor Changes

  • #1037 275eef7a Thanks @robinmetral! - Added the inputOutline style mixin. It can be used to communicate to the user that an element is hovered, focused, or active in the disabled, invalid, and warning states.
  • #1034 d9ac0f99 Thanks @connor-baer! - Added the shadow style mixin which can be used to visually elevate an element above the surrounding content.

Patch Changes

2.6.1

Patch Changes

  • #1010 9127352d Thanks @felixjung! - Do not render a placeholder in the Select component when a defaultValue is passed.

2.6.0

Minor Changes

  • #890 e6c39366 Thanks @connor-baer! - Tweaked the styles of the Card, CardList, Modal, Notification, and Table components to increase the color contrast with the new white background color. The shadow prop of the Card component has been deprecated and replaced with a single outline.

2.5.0

Minor Changes

  • #932 ee278194 Thanks @connor-baer! - Added an optionalLabel prop to the Input and Select components. The "(optional)" label is displayed in lighter grey after the main label when the field is not required.
  • #946 a089cf1c Thanks @connor-baer! - Added removeModal and isModalOpen properties to useModal hook and deprecated the getModal property.
  • #923 c41a7353 Thanks @connor-baer! - Added a destructive prop to the Button component to be used for irreversible actions that require special care from users.
  • #945 abf2c10b Thanks @connor-baer! - Added inset option to the focusOutline style mixin. This should only be used when the outline cannot be shown outside the element, for example when the overflow is hidden.

Patch Changes

  • #936 b0f243a3 Thanks @connor-baer! - Fixed the alignment of long, multiline labels in the RadioButton component (#934).

2.4.3

Patch Changes

  • #908 7a76802f Thanks @connor-baer! - Prevent the Aggregator in the Sidebar from rendering its children when they're just an empty array, fixes #907.

2.4.2

Patch Changes

  • Updated dependencies [02558395]:
    • @sumup/icons@1.6.2

2.4.1

Patch Changes

  • #852 95be2245 Thanks @robinmetral! - Fixed an accessibility issue where Table header cells weren't getting the relevant scope (col or row).

  • Updated dependencies [1912119f, 1912119f]:

    • @sumup/icons@1.6.1