Version Packages

packages/circuit-ui/CHANGELOG.md

@@ -1,5 +1,131 @@
 # @sumup/circuit-ui
 
+## 3.0.0
+
+### Major Changes
+
+- [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/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](https://github.com/sumup-oss/circuit-ui/pull/979) [`3cfefac0`](https://github.com/sumup-oss/circuit-ui/commit/3cfefac08339d8b45291b892b74a182226336b9b) Thanks [@robinmetral](https://github.com/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](https://github.com/sumup-oss/circuit-ui/pull/972) [`95488037`](https://github.com/sumup-oss/circuit-ui/commit/95488037472ced5952a41b55d67872ae2b2355d8) Thanks [@connor-baer](https://github.com/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.
+
+* [#984](https://github.com/sumup-oss/circuit-ui/pull/984) [`7879a990`](https://github.com/sumup-oss/circuit-ui/commit/7879a9901c06e389135e0d22697b97669c485949) Thanks [@amelako](https://github.com/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_).
+
+- [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/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:
+
+  ```ts
+  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`;
+      },
+    },
+  ];
+  ```
+
+* [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/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](https://github.com/sumup-oss/circuit-ui/pull/884) [`eb9e0b47`](https://github.com/sumup-oss/circuit-ui/commit/eb9e0b474e675f13c9876e22857a170665e9a92f) Thanks [@amelako](https://github.com/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:
+
+  ```diff
+  -  <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:
+
+  ```diff
+  -  <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>`
+
+* [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/robinmetral)! - Default `data-testid`s are no longer built into the `Table` component. They can still be passed manually. We also recommend [querying by role](https://testing-library.com/docs/queries/about/#priority) in tests, for them to resemble how users interact with the code. You can find examples in the component's specs.
+
+- [#943](https://github.com/sumup-oss/circuit-ui/pull/943) [`0543719b`](https://github.com/sumup-oss/circuit-ui/commit/0543719bfceaf616829a223f9e4f306539fbcc15) Thanks [@mykolaharmash](https://github.com/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](https://github.com/sumup-oss/circuit-ui/pull/985) [`61c15cf7`](https://github.com/sumup-oss/circuit-ui/commit/61c15cf7a5a23fb723a2d9a0b1434639bc8ae700) Thanks [@robinmetral](https://github.com/robinmetral)! - Removed the experimental static styles extraction feature.
+
+- [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/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.
+
+* [#984](https://github.com/sumup-oss/circuit-ui/pull/984) [`7879a990`](https://github.com/sumup-oss/circuit-ui/commit/7879a9901c06e389135e0d22697b97669c485949) Thanks [@amelako](https://github.com/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](https://github.com/sumup-oss/circuit-ui/pull/984) [`7879a990`](https://github.com/sumup-oss/circuit-ui/commit/7879a9901c06e389135e0d22697b97669c485949) Thanks [@amelako](https://github.com/amelako)! - Added a `size` prop to the Spinner component. The possible values are `byte`, `kilo` (default), and `giga`.
+
+* [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/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).
+
+- [#944](https://github.com/sumup-oss/circuit-ui/pull/944) [`2628fce1`](https://github.com/sumup-oss/circuit-ui/commit/2628fce1b93dd5a1ef1fc4b05a6a29ccf5469f9d) Thanks [@amelako](https://github.com/amelako)! - Replaced the old Popover component with a new one. It uses Popper v2 and comes with a refreshed component API.
+
+### Patch Changes
+
+- [#980](https://github.com/sumup-oss/circuit-ui/pull/980) [`900e6bc4`](https://github.com/sumup-oss/circuit-ui/commit/900e6bc465e4f909ab000403da3d17724f2ab73e) Thanks [@robinmetral](https://github.com/robinmetral)! - Tweaked components (`Anchor`, `InlineMessage`, `SearchInput`, `Selector`, `Tag`) to use the new border radius values.
+
+* [#960](https://github.com/sumup-oss/circuit-ui/pull/960) [`1a1a3646`](https://github.com/sumup-oss/circuit-ui/commit/1a1a36466e096c20b0dd19dc468359d65341e0fe) Thanks [@robinmetral](https://github.com/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`](https://github.com/sumup-oss/circuit-ui/commit/900e6bc465e4f909ab000403da3d17724f2ab73e), [`eb9e0b47`](https://github.com/sumup-oss/circuit-ui/commit/eb9e0b474e675f13c9876e22857a170665e9a92f), [`7879a990`](https://github.com/sumup-oss/circuit-ui/commit/7879a9901c06e389135e0d22697b97669c485949), [`900e6bc4`](https://github.com/sumup-oss/circuit-ui/commit/900e6bc465e4f909ab000403da3d17724f2ab73e)]:
+  - @sumup/icons@1.7.1
+  - @sumup/design-tokens@3.0.0
+
 ## 2.6.0
 
 ### Minor Changes

packages/circuit-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup/circuit-ui",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "description": "SumUp's React UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -57,7 +57,7 @@
     "@emotion/styled": "^10.0.17",
     "@emotion/stylis": "^0.8.4",
     "@sumup/collector": "^1.0.0",
-    "@sumup/design-tokens": "^2.1.1",
+    "@sumup/design-tokens": "^3.0.0",
     "@sumup/icons": "^1.6.1",
     "@sumup/intl": "^1.0.0",
     "@svgr/webpack": "^5.5.0",
@@ -99,8 +99,8 @@
     "@emotion/styled": "10.x",
     "@emotion/stylis": "0.8.x",
     "@sumup/collector": "1.x",
-    "@sumup/design-tokens": ">=1.0.0 <3.0.0",
-    "@sumup/icons": "1.x",
+    "@sumup/design-tokens": ">=3.0.0",
+    "@sumup/icons": "1.7.1",
     "@sumup/intl": "1.x",
     "emotion-theming": "10.x",
     "react": ">=16.8.0 <18.0.0",

packages/design-tokens/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @sumup/design-tokens
 
+## 3.0.0
+
+### Major Changes
+
+- [#884](https://github.com/sumup-oss/circuit-ui/pull/884) [`eb9e0b47`](https://github.com/sumup-oss/circuit-ui/commit/eb9e0b474e675f13c9876e22857a170665e9a92f) Thanks [@amelako](https://github.com/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](https://github.com/sumup-oss/circuit-ui/pull/984) [`7879a990`](https://github.com/sumup-oss/circuit-ui/commit/7879a9901c06e389135e0d22697b97669c485949) Thanks [@amelako](https://github.com/amelako)! - Added a new icon size `tera` (48px).
+
+- [#980](https://github.com/sumup-oss/circuit-ui/pull/980) [`900e6bc4`](https://github.com/sumup-oss/circuit-ui/commit/900e6bc465e4f909ab000403da3d17724f2ab73e) Thanks [@robinmetral](https://github.com/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_).
+
 ## 2.2.0
 
 ### Minor Changes