Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated.

Releases

@sumup/[email protected]

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 (🤖 component-names-v3).

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

  {
    "presets": [
      [
        "next/babel",
        {
          "preset-react": {
            "runtime": "automatic",
            "importSource": "@emotion/core"
          }
        }
      ]
    ],
    "plugins": [["babel-plugin-emotion", { "cssPropOptimization": true }]]
  }

• #984 7879a990 Thanks @amelako! - Increased the Button sizes to match other form components and renamed the default size from mega to giga. These changes can be codemodded (🤖 button-default-size).

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

  • CardHeader: labelCloseButton 👉 closeButtonLabel
  • Hamburger: labelActive 👉 activeLabel, labelInActive 👉 inactiveLabel
  • Tag: labelRemoveButton 👉 removeButtonLabel
  • Toggle: labelChecked 👉 checkedLabel, labelUnchecked 👉 uncheckedLabel

• #960 1a1a3646 Thanks @robinmetral! - A sortLabel for sortable Table columns (previously optional) is now required.

  For sortable Table columns (when headers have the sortable prop set), the sortLabel prop is now required. This label is fundamental for accessibility. If it is omitted, the column will not be sortable, even if the sortable prop is set.

  Here's an example sortable column header:

  import { TableCell, TableSortDirection } from '@sumup/circuit-ui';
  
  const headers: TableCell[] = [
    {
      children: 'Date',
      sortable: true,
      sortLabel: ({ direction }: { direction?: TableSortDirection }) => {
        const order = direction === 'ascending' ? 'descending' : 'ascending';
        return `Sort in ${order} order`;
      },
    },
  ];

• #995 bd234296 Thanks @robinmetral! - Enforced accessible labels in several components: the CardHeader requires a labelCloseButton when it is dismissible, the SearchInput requires a clearLabel when it is clearable.

• #960 1a1a3646 Thanks @robinmetral! - For sortable Table columns (when headers have the sortable prop), the previously optional sortLabel prop is now enforced. This is an accessibility requirement. If a sortLabel is not provided, the column will not be sortable.

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

  Headline

  Renamed the Heading component to Headline and mapped the styles to the new ones. These changes can be codemodded (🤖 component-names-v3).
  The size prop has been changed to accept the new size numbers. For Headline component exa and peta has been changed to one with new values, tera has been changed to two, giga to three, mega and kilo to four (🤖 typography-sizes)

  Usage example:

  -  <Heading size="kilo" />
  +  <Headline size="four" />

  SubHeadline

  Renamed the SubHeading component to SubHeadline and mapped the styles to the new ones (🤖 component-names-v3). The SubHeadline component now uses only one size value (🤖 typography-sizes).

  Body

  The Text component has been renamed to Body (🤖 component-names-v3). The size prop is adapted to accept the new size numbers and giga size has been removed, mega and kilo sizes have been changed to one and two respectively.

  Usage example:

  -  <Text size="mega" />
  +  <Body size="one" />

  The Text component's bold prop has been removed. Use the Body component (variant="highlight") instead (🤖 body-variant-highlight).

  Usage example:

  <Body variant="highlight">bold</Body>

  The Text component's italic and strike props has been removed. Use the custom styles instead.

  Additionally, the new success, error and subtle variants are added.

  The Blockquote component has been removed and replaced by the Body component with variant="quote".

  Usage example:

  <Body variant="quote">quote</Body>

  List

  Replaced the List component sizes mega and kilo with new values one and two respectively (🤖 typography-sizes).

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

• #995 bd234296 Thanks @robinmetral! - Removed the deprecated noMargin prop from components. Use the spacing mixin to add spacing.

  The components with a removed noMargin prop are:

  • Typography: Body, Headline, SubHeadline, List, InlineMessage
  • Forms: Input, Select, Selector, Toggle, Checkbox

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

• #995 bd234296 Thanks @robinmetral! - Removed the ProgressBar's deprecated children prop. Use the label prop instead.

• #960 1a1a3646 Thanks @robinmetral! - The TableHeader, TableRow and TableCell components are no longer exported from Circuit.

  These components are only used internally by the Table component and should not be imported directly.

  Relevant Table TypeScript types (TableProps, TableSortDirection TableCell, TableRow) are newly exported.

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

  Size name	Value	Usage
  giga	48px	Default for web + mobile
  kilo	32px	Dense layout for web + mobile
  byte	24px	Extreme dense layout for web + mobile

  Here's an overview of how the component heights have changed:

  Component	Old height	New height
  Button and derived components	40px	48px
  Input and derived components	40px	48px
  Select	40px	48px
  Tabs	80px	48px
  Tag	34px	32px

• #984 7879a990 Thanks @amelako! - Added a size prop to the Spinner component. The possible values are byte, kilo (default), and giga.

• #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! - Replaced the old Popover component with a new one. It uses Popper v2 and comes with a refreshed component API.

• #995 bd234296 Thanks @robinmetral! - Removed the deprecated withComponents HOC. Use the useComponents hook instead.

• #995 bd234296 Thanks @robinmetral! - Removed the deprecated Spacing component. Use the spacing style mixin instead.

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

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.

• Updated dependencies [900e6bc4, bd234296, eb9e0b47, 7879a990, 900e6bc4]:

  • @sumup/[email protected]
  • @sumup/[email protected]

@sumup/[email protected]

Major Changes

• #995 bd234296 Thanks @robinmetral! - Removed the drawer and select z-index values from the design tokens. Use input instead of select.

• #884 eb9e0b47 Thanks @amelako! - Replaced the typography design tokens' heading, subHeading and text properties by headline, subHeadline, and body. These are used by the new semantic Headline, SubHeadline, and Body components in Circuit UI.

• #984 7879a990 Thanks @amelako! - Added a new icon size tera (48px).

• #980 900e6bc4 Thanks @robinmetral! - Updated the design token's borderRadius properties. The 1px and 6px values are removed and a 16px value is added, and the sizes are renamed (🤖 theme-border-radius).

@sumup/[email protected]

Patch Changes

• #980 900e6bc4 Thanks @robinmetral! - Fixes the Plus icon to use the currentColor instead of black.

[sumup-clark]

Hey @github-actions[bot],
we are super excited that you are contributing! 🎉There's one more thing you need to do. Please accept our Contributor License Agreement. It helps you and us to collaborate on clear terms and focus on what we love most: code.

Thanks!

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/91p9FVgo9vRFUN7RtAGvnqoRnU8g
✅ Preview: https://oss-circuit-ui-git-changeset-release-next-sumup.vercel.app

[codecov]

Codecov Report

Merging #897 (27bb110) into next (a702a35) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next     #897   +/-   ##
=======================================
  Coverage   90.96%   90.96%           
=======================================
  Files         160      160           
  Lines        2646     2646           
  Branches      763      763           
=======================================
  Hits         2407     2407           
  Misses        214      214           
  Partials       25       25           

[robinmetral]

• circuit-ui: major
• cna-template: no changes
• cra-template: no changes
• design-tokens: major
• icons: patch

[robinmetral]

Not sure if these are what we want in peer dependencies

[connor-baer]

I think it's fine. In the future, I wouldn't treat a minor peer dependency bump as a breaking change.