Skip to content

Latest commit

 

History

History
1374 lines (700 loc) · 119 KB

CHANGELOG.md

File metadata and controls

1374 lines (700 loc) · 119 KB
Raw

@sumup/circuit-ui

7.0.0-next.2

Major Changes

  • #2061 bc882426 Thanks @connor-baer! - Raised the minimum Node.js version to 16+. This is the first maintained version with support for ES modules.

  • #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).

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

  • #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.

Patch Changes

7.0.0-next.1

Major Changes

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

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

  • #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.

  • #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.

Minor Changes

7.0.0-next.0

Major Changes

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

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

  • #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).

Minor 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.

4.0.0-next.5

Patch Changes

4.0.0-next.4

Major Changes

  • #1186 17cf95aa Thanks @connor-baer! - Changed the Modal's tracking event to include the open/close data in the tracking label.
  • #1186 17cf95aa Thanks @connor-baer! - Marked the label property of the tracking prop as required. This matches the existing behaviour where click events are only tracked if the label property is provided.

Minor Changes

4.0.0-next.3

Patch Changes

4.0.0-next.2

Major Changes

  • #1184 dfbe2bb3 Thanks @connor-baer! - Fixed the useClickEvent hook to track events even if no custom onClick handler is defined.

4.0.0-next.1

Major Changes

Patch Changes

  • #1176 c7483f0b Thanks @robinmetral! - Switched all component interfaces to extend *HTMLAttributes<HTML*Element> instead of the less accurate HTMLProps.

4.0.0-next.0

Major 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.

  • Updated dependencies [ca74d320]:

    • @sumup/icons@2.0.0-next.0

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.1.0-canary.16

Minor Changes

Patch Changes

3.1.0-canary.15

Patch Changes

3.1.0-canary.14

Patch Changes

3.1.0-canary.13

Patch Changes

  • #1156 5c865e15 Thanks @connor-baer! - Improved the display of long strings in the primary, secondary, and utility navigation.

3.1.0-canary.12

Patch Changes

3.1.0-canary.11

Patch Changes

  • #1136 9dfda4e9 Thanks @robinmetral! - Fixed the nav tracking by passing a defaut noop as onClick. This will be fixed in collector in the next major.

3.1.0-canary.10

Patch Changes

3.1.0-canary.9

Minor Changes

3.1.0-canary.8

Patch Changes

3.1.0-canary.7

Patch Changes

  • #1128 fdc0575e Thanks @robinmetral! - Fixed the click handler to close the Popover when a PopoverItem doesn't have an onClick.

3.1.0-canary.6

Minor Changes

3.1.0-canary.5

Patch Changes

3.1.0-canary.4

Minor Changes

3.1.0-canary.3

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.
  • #1114 159bd7ad Thanks @connor-baer! - Fixed a number of issues in the navigation components, including adding a min-width when the secondary nav is hidden, closing the mobile navigation modal when a link is clicked, and exporting additional navigation types.

  • #1114 159bd7ad Thanks @connor-baer! - Fixed the TopNavigation's profile menu alignment when no userId is provided.

  • Updated dependencies [159bd7ad]:

    • @sumup/icons@1.9.0-canary.1

3.1.0-canary.2

Patch Changes

  • Updated dependencies [c077b900]:
    • @sumup/design-tokens@3.1.0-canary.0

3.1.0-canary.1

Patch Changes

3.1.0-canary.0

Minor Changes

Patch Changes

  • Updated dependencies [12ef7cf6]:
    • @sumup/icons@1.9.0-canary.0

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.

3.0.0-next.14

Patch Changes

  • #1087 9ac7aa8f Thanks @connor-baer! - Improved fullscreen display of immersive Modals on iOS and added bottom padding to the Modal content to clear any browser chrome overlays.

3.0.0-next.13

Patch Changes

  • be99e904 Thanks @robinmetral! - Passed a dummy label to the ImageInput's presentational AddButton to prevent it from throwing because of a missing label.

3.0.0-next.12

Minor Changes

  • #1083 3513326a Thanks @robinmetral! - Added an escape hatch to silence accessibility errors in development when the UNSAFE_DISABLE_ACCESSIBILITY_ERRORS environment variable is set to true.

3.0.0-next.11

Major Changes

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

Patch Changes

  • #1082 00ee3ffb Thanks @connor-baer! - Reduced the height of the Button's kilo size from 34px to 32px to align it with the other components.

3.0.0-next.10

Patch Changes

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

3.0.0-next.9

Major Changes

  • #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

  • #1074 1869c218 Thanks @connor-baer! - Persisted the active state of the Button when it is pressed or an associated menu is expanded.
  • #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

  • #1072 35a6048c Thanks @connor-baer! - Fixed the useClickOutside hook when the clicked element is inside the container and removed from the DOM immediately after the click.

3.0.0-next.8

Patch Changes

3.0.0-next.7

Patch Changes

3.0.0-next.6

Patch Changes

3.0.0-next.5

Patch Changes

  • #1055 a4a514fd Thanks @connor-baer! - Prevented pointer events when the Popover is closed. Previously, it would obstruct the content behind it.

3.0.0-next.4

Patch Changes

3.0.0-next.3

Minor Changes

  • #1023 07614c5f Thanks @connor-baer! - Added the useClickOutside, useEscapeKey, and useFocusList hooks which can be used to make custom components more keyboard accessible.

Patch Changes

3.0.0-next.2

Major Changes

  • #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.

Minor Changes

  • #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).

Patch Changes

  • #1013 d5e528bf Thanks @amelako! - Extended the Popover component to accept custom modifiers, moved the open state outside of the component, and improved accessibility features.
  • #1020 cee2c0c4 Thanks @amelako! - Fixed a bug in the Popover component to correctly stack the popover content on top of the overlay on mobile.

3.0.0-next.1

Major Changes

  • #1000 8f181a6c Thanks @robinmetral! - Improved keyboard and accessibility support.

    • Now the Popover can be closed using Escape key.
    • The trigger component now accepts the aria-haspopup and aria-controls props.

Minor Changes

  • #998 43b1403a Thanks @robinmetral! - Extended the typography-sizes codemod to transform the Anchor component and warn of any necessary manual migration.

Patch Changes

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