diff --git a/.changeset/brown-cobras-invite.md b/.changeset/brown-cobras-invite.md new file mode 100644 index 0000000000..470f8e0731 --- /dev/null +++ b/.changeset/brown-cobras-invite.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": minor +--- + +Added a new `weight` prop to the Body component. Choose between the `regular` and `bold` font weights. diff --git a/.changeset/chilly-dodos-end.md b/.changeset/chilly-dodos-end.md new file mode 100644 index 0000000000..455ebd2d91 --- /dev/null +++ b/.changeset/chilly-dodos-end.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Upgraded to `@sumup-oss/intl` v3. If your app also depends on `@sumup-oss/intl` (previously called `@sumup/intl`), you need to upgrade it as well. diff --git a/.changeset/chilly-gorillas-wonder.md b/.changeset/chilly-gorillas-wonder.md new file mode 100644 index 0000000000..72b0c8f95e --- /dev/null +++ b/.changeset/chilly-gorillas-wonder.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": patch +--- + +Fixed some sizing and alignment issues for composite inputs ColorInput and PhoneNumberInput. Disabled color input when ColorInput has prop `readOnly`. diff --git a/.changeset/chilly-scissors-remember.md b/.changeset/chilly-scissors-remember.md new file mode 100644 index 0000000000..16a34568d4 --- /dev/null +++ b/.changeset/chilly-scissors-remember.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": patch +--- + +Fixed safely accessing environment variables in environments where the `process` variable is undefined. diff --git a/.changeset/clever-pugs-sing.md b/.changeset/clever-pugs-sing.md new file mode 100644 index 0000000000..361654faa4 --- /dev/null +++ b/.changeset/clever-pugs-sing.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Added a new Compact component for text in space-constraint contexts. diff --git a/.changeset/config.json b/.changeset/config.json index 16c4bd9921..e68ca960f3 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,16 +1,16 @@ { - "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json", - "changelog": [ - "@changesets/changelog-github", - { "repo": "sumup-oss/circuit-ui" } - ], - "commit": false, - "linked": [], - "access": "public", - "baseBranch": "main", - "updateInternalDependencies": "minor", - "ignore": [], - "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { - "onlyUpdatePeerDependentsWhenOutOfRange": true - } + "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json", + "changelog": [ + "@changesets/changelog-github", + { "repo": "sumup-oss/circuit-ui" } + ], + "commit": false, + "linked": [], + "access": "public", + "baseBranch": "main", + "updateInternalDependencies": "minor", + "ignore": [], + "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { + "onlyUpdatePeerDependentsWhenOutOfRange": true + } } diff --git a/.changeset/cuddly-worms-love.md b/.changeset/cuddly-worms-love.md new file mode 100644 index 0000000000..8b65a396c7 --- /dev/null +++ b/.changeset/cuddly-worms-love.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": minor +--- + +Updated the `component-lifecycle-imports` ESLint rule to flag imports of stable components Tooltip and Toggletip from `@sumup-oss/circuit-ui/experimental`. diff --git a/.changeset/dry-cheetahs-tap.md b/.changeset/dry-cheetahs-tap.md new file mode 100644 index 0000000000..97e5310f19 --- /dev/null +++ b/.changeset/dry-cheetahs-tap.md @@ -0,0 +1,32 @@ +--- +'@sumup-oss/design-tokens': minor +--- + +Consolidated and renamed the `typography` tokens: + +| Old | New | +| --------------------------------------- | ----------------------------------- | +| `typography-title-one-font-size` | `typography-display-l-font-size` | +| `typography-title-one-line-height` | `typography-display-l-line-height` | +| `typography-title-two-font-size` | `typography-display-m-font-size` | +| `typography-title-two-line-height` | `typography-display-m-line-height` | +| `typography-title-three-font-size` | `typography-display-m-font-size` | +| `typography-title-three-line-height` | `typography-display-m-line-height` | +| `typography-title-four-font-size` | `typography-display-s-font-size` | +| `typography-title-four-line-height` | `typography-display-s-line-height` | +| `typography-headline-one-font-size` | `typography-headline-l-font-size` | +| `typography-headline-one-line-height` | `typography-headline-l-line-height` | +| `typography-headline-two-font-size` | `typography-headline-m-font-size` | +| `typography-headline-two-line-height` | `typography-headline-m-line-height` | +| `typography-headline-three-font-size` | `typography-headline-m-font-size` | +| `typography-headline-three-line-height` | `typography-headline-m-line-height` | +| `typography-headline-four-font-size` | `typography-headline-s-font-size` | +| `typography-headline-four-line-height` | `typography-headline-s-line-height` | +| `typography-sub-headline-font-size` | `typography-headline-s-font-size` | +| `typography-sub-headline-line-height` | `typography-headline-s-line-height` | +| `typography-body-large-font-size` | `typography-body-l-font-size` | +| `typography-body-large-line-height` | `typography-body-l-line-height` | +| `typography-body-one-font-size` | `typography-body-m-font-size` | +| `typography-body-one-line-height` | `typography-body-m-line-height` | +| `typography-body-two-font-size` | `typography-body-s-font-size` | +| `typography-body-two-line-height` | `typography-body-s-line-height` | diff --git a/.changeset/dry-melons-bake.md b/.changeset/dry-melons-bake.md new file mode 100644 index 0000000000..b78521fb3b --- /dev/null +++ b/.changeset/dry-melons-bake.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/design-tokens": minor +--- + +Updated several typography token values and replaced the component-specific letter spacing tokens with a unified one. diff --git a/.changeset/eleven-moons-hear.md b/.changeset/eleven-moons-hear.md new file mode 100644 index 0000000000..4dfd24104a --- /dev/null +++ b/.changeset/eleven-moons-hear.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": major +--- + +Added missing rules for the Anchor and BodyLarge migrations. diff --git a/.changeset/five-elephants-travel.md b/.changeset/five-elephants-travel.md new file mode 100644 index 0000000000..3173bbdd60 --- /dev/null +++ b/.changeset/five-elephants-travel.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": minor +--- + +Added a new Numeral component for numeric content such as currency values. diff --git a/.changeset/flat-steaks-itch.md b/.changeset/flat-steaks-itch.md new file mode 100644 index 0000000000..60d85ef200 --- /dev/null +++ b/.changeset/flat-steaks-itch.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Deprecated the `InputElement` interface and narrowed the Input's element type to `HTMLInputElement` and the TextArea's element type to `HTMLTextAreaElement`. This affects `ref`s and event handlers. diff --git a/.changeset/fluffy-lobsters-sin.md b/.changeset/fluffy-lobsters-sin.md new file mode 100644 index 0000000000..9ff69f1b09 --- /dev/null +++ b/.changeset/fluffy-lobsters-sin.md @@ -0,0 +1,21 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Consolidated and renamed the sizes of the Display (formerly Title), Headline, and Body components: + +**Display & Headline** + +| Old | New | +| ----- | --- | +| one | l | +| two | m | +| three | m | +| four | s | + +**Body** + +| Old | New | +| --- | --- | +| one | m | +| two | s | diff --git a/.changeset/four-geckos-complain.md b/.changeset/four-geckos-complain.md new file mode 100644 index 0000000000..bc641f41ca --- /dev/null +++ b/.changeset/four-geckos-complain.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Changed the `PlainDateRange` type from a tuple to an object with `start` and `end` properties. This affects the Calendar component's `selection` prop. Use the new `updatePlainDateRange` helper function to update a date range when a user selects a date. diff --git a/.changeset/friendly-falcons-turn.md b/.changeset/friendly-falcons-turn.md new file mode 100644 index 0000000000..b7f4989d5f --- /dev/null +++ b/.changeset/friendly-falcons-turn.md @@ -0,0 +1,6 @@ +--- +"@sumup-oss/stylelint-plugin-circuit-ui": minor +"@sumup-oss/eslint-plugin-circuit-ui": minor +--- + +Added `circuit-ui/no-deprecated-custom-properties` rule to flag uses of deprecated custom properties. diff --git a/.changeset/gold-worms-worry.md b/.changeset/gold-worms-worry.md new file mode 100644 index 0000000000..6fdd51ff07 --- /dev/null +++ b/.changeset/gold-worms-worry.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": minor +--- + +Updated the `component-lifecycle-imports` ESLint rule to flag imports of stable entities from `@sumup-oss/circuit-ui/experimental`. diff --git a/.changeset/great-kiwis-compare.md b/.changeset/great-kiwis-compare.md new file mode 100644 index 0000000000..d6c2afa23f --- /dev/null +++ b/.changeset/great-kiwis-compare.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': minor +--- + +Added `circuit-ui/renamed-package-scope` rule to update imports for design system packages that have moved from the `@sumup` to the `@sumup-oss` scope. diff --git a/.changeset/grumpy-coins-sip.md b/.changeset/grumpy-coins-sip.md new file mode 100644 index 0000000000..1b533cb6dc --- /dev/null +++ b/.changeset/grumpy-coins-sip.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Deprecated the BodyLarge component. Use the Body component in size `l` instead. diff --git a/.changeset/heavy-chairs-repeat.md b/.changeset/heavy-chairs-repeat.md new file mode 100644 index 0000000000..1acc7d344f --- /dev/null +++ b/.changeset/heavy-chairs-repeat.md @@ -0,0 +1,13 @@ +--- +"@sumup-oss/stylelint-plugin-circuit-ui": major +"@sumup-oss/eslint-plugin-circuit-ui": major +"next-app": major +"@sumup-oss/design-tokens": major +"@sumup-oss/circuit-ui": major +"@sumup-oss/cna-template": major +"@sumup-oss/astro-template-circuit-ui": major +"@sumup-oss/remix-template-circuit-ui": major +"@sumup-oss/icons": major +--- + +Raised the minimum Node.js version to 20+. diff --git a/.changeset/hip-comics-agree.md b/.changeset/hip-comics-agree.md new file mode 100644 index 0000000000..fd895539d5 --- /dev/null +++ b/.changeset/hip-comics-agree.md @@ -0,0 +1,15 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Marked the `ColorInput` and `PhoneNumberInput` components as stable. Update the related imports: + +```diff +- import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui/experimental'; ++ import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui'; +``` + +```diff +- import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui/experimental'; ++ import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui'; +``` diff --git a/.changeset/hip-spies-lick.md b/.changeset/hip-spies-lick.md new file mode 100644 index 0000000000..67a63a51f8 --- /dev/null +++ b/.changeset/hip-spies-lick.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Made the ImageInput's label visible by default for consistency with other inputs. Use the new `hideLabel` prop to visually hide the label. diff --git a/.changeset/hip-weeks-happen.md b/.changeset/hip-weeks-happen.md new file mode 100644 index 0000000000..8012666611 --- /dev/null +++ b/.changeset/hip-weeks-happen.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": minor +--- + +Added a new `decoration` prop to the Body component. Choose between the `italic` and `strikethrough` styles. diff --git a/.changeset/hot-toys-compare.md b/.changeset/hot-toys-compare.md new file mode 100644 index 0000000000..5b79b64166 --- /dev/null +++ b/.changeset/hot-toys-compare.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/design-tokens': major +--- + +Changed the default font from Aktiv Grotesk to Inter, a variable font. Variable fonts combine a continuous range of weights and other "axes" into a single file. This speeds up page load times and enables more creative freedom. Inter is a close match to Aktiv Grotesk, so users shouldn't notice a difference. diff --git a/.changeset/itchy-geckos-protect.md b/.changeset/itchy-geckos-protect.md new file mode 100644 index 0000000000..fb94a4db72 --- /dev/null +++ b/.changeset/itchy-geckos-protect.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/design-tokens': major +--- + +Added a new `@sumup-oss/design-tokens/fonts.css` file containing the `@font-face` declarations to load the Inter font family. Refer to the documentation on [how to load fonts in your application](https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens#fonts). diff --git a/.changeset/large-adults-dance.md b/.changeset/large-adults-dance.md new file mode 100644 index 0000000000..173f2c673a --- /dev/null +++ b/.changeset/large-adults-dance.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Removed the legacy RangePicker, RangePickerController, SingleDayPicker, CalendarTag, and CalendarTagTwoStep components. Use the updated DateInput component instead. diff --git a/.changeset/late-books-attack.md b/.changeset/late-books-attack.md new file mode 100644 index 0000000000..31d98fd29d --- /dev/null +++ b/.changeset/late-books-attack.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Added [`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill) to the list of required peer dependencies. diff --git a/.changeset/late-feet-attack.md b/.changeset/late-feet-attack.md new file mode 100644 index 0000000000..1a71cb1cbe --- /dev/null +++ b/.changeset/late-feet-attack.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Removed the Table component's deprecated `initialSortedRow` prop. Use the `initialSortedColumn` prop instead. diff --git a/.changeset/lazy-icons-beg.md b/.changeset/lazy-icons-beg.md new file mode 100644 index 0000000000..9de311d95f --- /dev/null +++ b/.changeset/lazy-icons-beg.md @@ -0,0 +1,8 @@ +--- +"@sumup-oss/stylelint-plugin-circuit-ui": minor +"@sumup-oss/eslint-plugin-circuit-ui": minor +"@sumup-oss/circuit-ui": minor +"@sumup-oss/design-tokens": minor +--- + +Updated new typography design tokens names by removing the `-typography` infix. diff --git a/.changeset/metal-games-knock.md b/.changeset/metal-games-knock.md new file mode 100644 index 0000000000..c5dde85ad7 --- /dev/null +++ b/.changeset/metal-games-knock.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': minor +--- + +Expanded the `renamed-package-scope` ESLint rule to cover additional occurrences of package names such as in Jest module mocks. diff --git a/.changeset/old-sloths-speak.md b/.changeset/old-sloths-speak.md new file mode 100644 index 0000000000..15c899a8ab --- /dev/null +++ b/.changeset/old-sloths-speak.md @@ -0,0 +1,12 @@ +--- +'@sumup-oss/icons': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/icons` with `@sumup-oss/icons` in your `package.json` file, then update all imports: + +```diff +-import { Search } from '@sumup/icons'; ++import { Search } from '@sumup-oss/icons'; +``` + +[Circuit UI's ESLint plugin](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) offers the `renamed-package-scope` rule to automate updating the package imports. diff --git a/.changeset/plenty-chicken-deny.md b/.changeset/plenty-chicken-deny.md new file mode 100644 index 0000000000..6d577a56b7 --- /dev/null +++ b/.changeset/plenty-chicken-deny.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Added an explicit foreground color to the Body component (`fg-normal`) to better support localized dark mode. Previously, the component inherited its color from its parent. diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..4e4360c6e6 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,67 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@sumup-oss/astro-template-circuit-ui": "2.1.0", + "@sumup-oss/circuit-ui": "8.12.1", + "@sumup-oss/cna-template": "5.1.0", + "next-app": "1.1.0", + "@sumup-oss/design-tokens": "7.3.1", + "@sumup-oss/eslint-plugin-circuit-ui": "4.1.0", + "@sumup-oss/icons": "4.0.0", + "@sumup-oss/remix-template-circuit-ui": "3.1.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "2.0.0" + }, + "changesets": [ + "brown-cobras-invite", + "chilly-dodos-end", + "chilly-gorillas-wonder", + "chilly-scissors-remember", + "clever-pugs-sing", + "cuddly-worms-love", + "dry-cheetahs-tap", + "dry-melons-bake", + "eleven-moons-hear", + "five-elephants-travel", + "flat-steaks-itch", + "fluffy-lobsters-sin", + "four-geckos-complain", + "friendly-falcons-turn", + "gold-worms-worry", + "great-kiwis-compare", + "grumpy-coins-sip", + "heavy-chairs-repeat", + "hip-comics-agree", + "hip-spies-lick", + "hip-weeks-happen", + "hot-toys-compare", + "itchy-geckos-protect", + "large-adults-dance", + "late-books-attack", + "late-feet-attack", + "lazy-icons-beg", + "metal-games-knock", + "old-sloths-speak", + "plenty-chicken-deny", + "pretty-tigers-run", + "quick-books-train", + "rich-phones-attend", + "seven-bees-train", + "shaggy-tomatoes-protect", + "shiny-dragons-sip", + "shiny-geckos-hang", + "shiny-pumpkins-jog", + "slimy-pots-lie", + "soft-drinks-accept", + "tall-sheep-provide", + "tasty-pugs-sort", + "thirty-lions-yawn", + "tiny-jars-knock", + "tiny-suits-smile", + "violet-llamas-cheat", + "wet-avocados-speak", + "wise-emus-count", + "witty-rabbits-collect", + "yellow-moose-push" + ] +} diff --git a/.changeset/pretty-tigers-run.md b/.changeset/pretty-tigers-run.md new file mode 100644 index 0000000000..614d636818 --- /dev/null +++ b/.changeset/pretty-tigers-run.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": major +--- + +Added a migration for the Display (formerly Title), Headline and Body components' `size` prop to the `circuit-ui/no-renamed-props` rule. diff --git a/.changeset/quick-books-train.md b/.changeset/quick-books-train.md new file mode 100644 index 0000000000..9debeacf9f --- /dev/null +++ b/.changeset/quick-books-train.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': patch +--- + +Fixed the `no-renamed-props` ESLint rule to add the `as="strong"` prop when migrating the Body's `variant="highlight"` prop to match the previous semantics. diff --git a/.changeset/rich-phones-attend.md b/.changeset/rich-phones-attend.md new file mode 100644 index 0000000000..8dffc39e71 --- /dev/null +++ b/.changeset/rich-phones-attend.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Deprecated the SubHeadline component. Use the Headline component in size `s` instead. diff --git a/.changeset/seven-bees-train.md b/.changeset/seven-bees-train.md new file mode 100644 index 0000000000..28c7ee014a --- /dev/null +++ b/.changeset/seven-bees-train.md @@ -0,0 +1,12 @@ +--- +'@sumup-oss/circuit-ui': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/circuit-ui` with `@sumup-oss/circuit-ui` in your `package.json` file, then update all imports: + +```diff +-import { Button } from '@sumup/circuit-ui'; ++import { Button } from '@sumup-oss/circuit-ui'; +``` + +[Circuit UI's ESLint plugin](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) offers the `renamed-package-scope` rule to automate updating the package imports. diff --git a/.changeset/shaggy-tomatoes-protect.md b/.changeset/shaggy-tomatoes-protect.md new file mode 100644 index 0000000000..1ac4ecb0e8 --- /dev/null +++ b/.changeset/shaggy-tomatoes-protect.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": patch +--- + +Guarded against similar names package names in the `renamed-package-scope` ESLint rule. diff --git a/.changeset/shiny-dragons-sip.md b/.changeset/shiny-dragons-sip.md new file mode 100644 index 0000000000..1ddfe2a5b8 --- /dev/null +++ b/.changeset/shiny-dragons-sip.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Renamed the Title component to Display for consistency with other platforms. diff --git a/.changeset/shiny-geckos-hang.md b/.changeset/shiny-geckos-hang.md new file mode 100644 index 0000000000..c2ef575638 --- /dev/null +++ b/.changeset/shiny-geckos-hang.md @@ -0,0 +1,11 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Marked the `Calendar` component as stable. Update the related imports: + +```diff +- import { Calendar, CalendarProps, PlainDateRange } from '@sumup-oss/circuit-ui/experimental'; ++ import { Calendar, CalendarProps, PlainDateRange } from '@sumup-oss/circuit-ui'; +``` + diff --git a/.changeset/shiny-pumpkins-jog.md b/.changeset/shiny-pumpkins-jog.md new file mode 100644 index 0000000000..708824fc4e --- /dev/null +++ b/.changeset/shiny-pumpkins-jog.md @@ -0,0 +1,6 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": minor +"@sumup-oss/circuit-ui": minor +--- + +Introduced new sizes to the List component and deprecated old sizes. Updated `no-renamed-props` ESlint rule. diff --git a/.changeset/slimy-pots-lie.md b/.changeset/slimy-pots-lie.md new file mode 100644 index 0000000000..e5830f2f97 --- /dev/null +++ b/.changeset/slimy-pots-lie.md @@ -0,0 +1,18 @@ +--- +'@sumup-oss/eslint-plugin-circuit-ui': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/eslint-plugin-circuit-ui` with `@sumup-oss/eslint-plugin-circuit-ui` in your `package.json` file, then update the plugin and rule names in your ESLint config: + +```diff +// .eslintrc.js + +module.exports = { +- plugins: ['@sumup/circuit-ui'], ++ plugins: ['@sumup-oss/circuit-ui'], + rules: { +- '@sumup/circuit-ui/component-lifecycle-imports': 'error', ++ '@sumup-oss/circuit-ui/component-lifecycle-imports': 'error', + }, +}; +``` diff --git a/.changeset/soft-drinks-accept.md b/.changeset/soft-drinks-accept.md new file mode 100644 index 0000000000..894a64a7dc --- /dev/null +++ b/.changeset/soft-drinks-accept.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Deprecated the Body component's `variant` prop. Use the new `color` prop instead of the `alert`, `confirm` and `subtle` variants. Use the new `weight` prop instead of the `highlight` variant. Use custom CSS for the `quote` variant. diff --git a/.changeset/tall-sheep-provide.md b/.changeset/tall-sheep-provide.md new file mode 100644 index 0000000000..93a72e3679 --- /dev/null +++ b/.changeset/tall-sheep-provide.md @@ -0,0 +1,14 @@ +--- +'@sumup-oss/stylelint-plugin-circuit-ui': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/stylelint-plugin-circuit-ui` with `@sumup-oss/stylelint-plugin-circuit-ui` in your `package.json` file, then update the plugin name in your Stylelint config: + +```diff +// .stylelintrc.js + +module.exports = { +- plugins: ['@sumup/stylelint-plugin-circuit-ui'], ++ plugins: ['@sumup-oss/stylelint-plugin-circuit-ui'], +}; +``` diff --git a/.changeset/tasty-pugs-sort.md b/.changeset/tasty-pugs-sort.md new file mode 100644 index 0000000000..8b3aa2da03 --- /dev/null +++ b/.changeset/tasty-pugs-sort.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": patch +--- + +Restored the height of the Input, Select, Tag and SelectorGroup components. diff --git a/.changeset/thirty-lions-yawn.md b/.changeset/thirty-lions-yawn.md new file mode 100644 index 0000000000..47c7d82c88 --- /dev/null +++ b/.changeset/thirty-lions-yawn.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Migrated to the new typography APIs internally. diff --git a/.changeset/tiny-jars-knock.md b/.changeset/tiny-jars-knock.md new file mode 100644 index 0000000000..34f20f7e97 --- /dev/null +++ b/.changeset/tiny-jars-knock.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Rewrote the DateInput component and replaced the native date input with a custom implementation to improve its usability and accessibility. The component now requires additional localized label props. diff --git a/.changeset/tiny-suits-smile.md b/.changeset/tiny-suits-smile.md new file mode 100644 index 0000000000..68e9856668 --- /dev/null +++ b/.changeset/tiny-suits-smile.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Added a new `color` prop to the Body component. Choose any foreground color. diff --git a/.changeset/two-snakes-tease.md b/.changeset/two-snakes-tease.md new file mode 100644 index 0000000000..89f570d7be --- /dev/null +++ b/.changeset/two-snakes-tease.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Updated the PhoneNumberInput component to accept `value` and `defaultValue` props. The `onChange` callback is now called with an `Event` object instead of a string to mimic a native input. diff --git a/.changeset/violet-llamas-cheat.md b/.changeset/violet-llamas-cheat.md new file mode 100644 index 0000000000..f77659252b --- /dev/null +++ b/.changeset/violet-llamas-cheat.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/design-tokens": patch +--- + +Updated the design token values for `headline-m-font-size`, `font-weight-semibold` and `font-weight-bold`. diff --git a/.changeset/wet-avocados-speak.md b/.changeset/wet-avocados-speak.md new file mode 100644 index 0000000000..e776168913 --- /dev/null +++ b/.changeset/wet-avocados-speak.md @@ -0,0 +1,16 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Marked the `Tooltip` and `Toggletip` components as stable. Update the related imports: + +```diff +- import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui/experimental'; ++ import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui'; +``` + +```diff +- import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui/experimental'; ++ import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui'; +``` + diff --git a/.changeset/wise-emus-count.md b/.changeset/wise-emus-count.md new file mode 100644 index 0000000000..d114ee715d --- /dev/null +++ b/.changeset/wise-emus-count.md @@ -0,0 +1,12 @@ +--- +'@sumup-oss/design-tokens': major +--- + +Renamed the package scope from `@sumup` to `@sumup-oss`. Replace `@sumup/design-tokens` with `@sumup-oss/design-tokens` in your `package.json` file, then update all imports: + +```diff +-import '@sumup/design-tokens/light.css'; ++import '@sumup-oss/design-tokens/light.css'; +``` + +[Circuit UI's ESLint plugin](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) offers the `renamed-package-scope` rule to automate updating the package imports. diff --git a/.changeset/witty-rabbits-collect.md b/.changeset/witty-rabbits-collect.md new file mode 100644 index 0000000000..effeb9b4af --- /dev/null +++ b/.changeset/witty-rabbits-collect.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": minor +--- + +Updated the `component-lifecycle-imports` ESLint rule to handle imports of `ColorInput` and `PhoneNumberInput` as experimental components. diff --git a/.changeset/yellow-moose-push.md b/.changeset/yellow-moose-push.md new file mode 100644 index 0000000000..1f1ee31c3d --- /dev/null +++ b/.changeset/yellow-moose-push.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Added a semibold weight option to the Body and the Compact components. Added the `weight` prop to the Display component. Removed the `weight` prop from the Numeral component and changed its default font weight to semibold. diff --git a/.eslintignore b/.eslintignore index 051988e7f2..fd2e70fc60 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,7 +12,7 @@ package-lock.json *rc.* /scripts/ # disable linting for templates because they will have their own rules when used in a new app -packages/cna-template/template -packages/astro-template/src/env.d.ts +templates/nextjs/template +templates/astro/src/env.d.ts packages/circuit-ui/vendor packages/icons/vendor diff --git a/.eslintrc.js b/.eslintrc.js index 98c271bad8..6cd4c31fe1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,7 +3,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({ 'plugin:storybook/recommended', 'plugin:react-server-components/recommended', ], - plugins: ['@sumup/circuit-ui'], + plugins: ['@sumup-oss/circuit-ui'], settings: { 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'], @@ -16,9 +16,16 @@ module.exports = require('@sumup-oss/foundry/eslint')({ }, }, rules: { - '@sumup/circuit-ui/no-invalid-custom-properties': 'error', - '@sumup/circuit-ui/prefer-custom-properties': 'warn', + '@sumup-oss/circuit-ui/no-invalid-custom-properties': 'error', + '@sumup-oss/circuit-ui/no-deprecated-custom-properties': 'error', + '@sumup-oss/circuit-ui/no-deprecated-props': 'error', + '@sumup-oss/circuit-ui/no-deprecated-components': 'error', + '@sumup-oss/circuit-ui/no-renamed-props': 'error', + '@sumup-oss/circuit-ui/prefer-custom-properties': 'warn', 'react/no-unknown-property': ['error', { ignore: ['css'] }], + // These rules are already covered by Biome + 'jsx-a11y/click-events-have-key-events': 'off', + 'jsx-a11y/no-static-element-interactions': 'off', }, parserOptions: { project: ['./packages/*/tsconfig.json', './tsconfig.eslint.json'], @@ -55,7 +62,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({ { files: ['packages/circuit-ui/components/legacy/**/*'], rules: { - '@sumup/circuit-ui/prefer-custom-properties': 'off', + '@sumup-oss/circuit-ui/prefer-custom-properties': 'off', }, }, { @@ -72,7 +79,7 @@ module.exports = require('@sumup-oss/foundry/eslint')({ }, }, { - files: ['packages/remix-template/**/*', 'packages/astro-template/**/*'], + files: ['templates/remix/**/*', 'templates/astro/**/*'], rules: { 'notice/notice': 'off', }, diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 6c63ed2ac3..be234452d9 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -16,10 +16,10 @@ jobs: with: fetch-depth: 0 - - name: Setup Node.js v18 + - name: Setup Node.js v20 uses: actions/setup-node@v4 with: - node-version: 18.x + node-version: 20.x cache: 'npm' - name: Install dependencies diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 83547a4471..f3a10fd4a9 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,7 +7,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node: [18, 20] + node: [20, 22] steps: - name: Checkout repository uses: actions/checkout@v4 @@ -34,7 +34,9 @@ jobs: run: npm run lint:css - name: Run unit tests - run: npm run test:ci + # For some reason, the global script doesn't run tests in packages/eslint-plugin-circuit-ui + # I suspect it's because it's not an ES module. + run: npm run test:ci && cd packages/eslint-plugin-circuit-ui && npm run test:ci - name: Upload results to Codecov uses: codecov/codecov-action@v4 diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml new file mode 100644 index 0000000000..ad33461afc --- /dev/null +++ b/.github/workflows/size.yml @@ -0,0 +1,16 @@ +name: Bundle Size + +on: [pull_request] + +jobs: + size: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Check compressed bundle sizes + uses: preactjs/compressed-size-action@v2 + with: + pattern: 'packages/**/dist/**/*.{js,css,json}' + exclude: '{**/*.map,**/node_modules/**,**/eslint-plugin-circuit-ui/**,**/stylelint-plugin-circuit-ui/**,**/*.index.*,**/*.module.css.js}' diff --git a/.github/workflows/templates.yml b/.github/workflows/templates.yml index 5d7595a42b..7c94261b65 100644 --- a/.github/workflows/templates.yml +++ b/.github/workflows/templates.yml @@ -11,17 +11,17 @@ jobs: strategy: # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs matrix: - node: [18, 20] + node: [20, 22] template: [astro, nextjs, remix] include: - template: astro - bootstrap: 'npx create-astro@latest ./test-app --template sumup-oss/circuit-ui/packages/astro-template --install --no-git --typescript=strictest' + bootstrap: 'npx create-astro@latest ./test-app --template sumup-oss/circuit-ui/templates/astro --install --no-git --typescript=strictest' verify: 'npm run lint && npm run astro check' - template: nextjs - bootstrap: 'npx create-next-app --example "https://github.com/sumup-oss/circuit-ui/tree/main/packages/cna-template/template" test-app' + bootstrap: 'npx create-next-app --example "https://github.com/sumup-oss/circuit-ui/tree/main/templates/nextjs/template" test-app' verify: 'npm run test:ci' - template: remix - bootstrap: 'npx create-remix@latest ./test-app --template https://github.com/sumup-oss/circuit-ui/tree/main/packages/remix-template --install --no-git-init' + bootstrap: 'npx create-remix@latest ./test-app --template https://github.com/sumup-oss/circuit-ui/tree/main/templates/remix --install --no-git-init' verify: 'npm run lint && npm run typecheck' steps: diff --git a/.gitignore b/.gitignore index da5a3a1595..7cd0999755 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ circuit-ui-global.css # These are generated in CI from other files. docs/packages/ +docs/templates/ docs/contributing/1-overview.mdx docs/contributing/*-contributing-*.mdx docs/introduction/*-changelog.mdx diff --git a/.nvmrc b/.nvmrc index a77793ecc5..9de2256827 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/hydrogen +lts/iron diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index ad31105685..60634b9a6c 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -20,9 +20,9 @@ import { type ChangeEvent, } from 'react'; import { Unstyled } from '@storybook/addon-docs'; -import * as iconComponents from '@sumup/icons'; -import type { IconsManifest } from '@sumup/icons'; -import iconsManifest from '@sumup/icons/manifest.json'; +import * as iconComponents from '@sumup-oss/icons'; +import type { IconsManifest } from '@sumup-oss/icons'; +import iconsManifest from '@sumup-oss/icons/manifest.json'; import { Headline, Body, @@ -32,8 +32,8 @@ import { SelectorGroup, clsx, utilClasses, + Tooltip, } from '../../packages/circuit-ui/index.js'; -import { Tooltip } from '../../packages/circuit-ui/experimental.js'; import { slugify } from '../slugify.js'; import classes from './Icons.module.css'; @@ -151,7 +151,7 @@ export function Icons() { groupBy(activeIcons, 'category'), ).map(([category, items]) => (
- + {category}
@@ -191,7 +191,7 @@ export function Icons() { Deprecated diff --git a/.storybook/components/Intro.tsx b/.storybook/components/Intro.tsx index 6a0c356928..5bb1b71075 100644 --- a/.storybook/components/Intro.tsx +++ b/.storybook/components/Intro.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import { BodyLarge } from '../../packages/circuit-ui/index.js'; +import { Body } from '../../packages/circuit-ui/index.js'; import type { BodyLargeProps } from '../../packages/circuit-ui/index.js'; @@ -26,8 +26,15 @@ export function Intro({ children: BodyLargeProps['children']; }) { return ( - + {children} - + ); } diff --git a/.storybook/components/Preview.tsx b/.storybook/components/Preview.tsx index b08eec6e79..8e55072a17 100644 --- a/.storybook/components/Preview.tsx +++ b/.storybook/components/Preview.tsx @@ -15,7 +15,7 @@ import type { PropsWithChildren } from 'react'; import { ThemeProvider } from '@emotion/react'; -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; export function Preview({ children }: PropsWithChildren) { return {children}; diff --git a/.storybook/components/Statuses.module.css b/.storybook/components/Statuses.module.css index 9b81fd204c..bf2b1844c0 100644 --- a/.storybook/components/Statuses.module.css +++ b/.storybook/components/Statuses.module.css @@ -1,5 +1,5 @@ .description { - margin-left: var(--cui-spacings-byte) + margin-left: var(--cui-spacings-byte); } .description p { diff --git a/.storybook/components/Statuses.tsx b/.storybook/components/Statuses.tsx index d7543c79a6..1f88645d3f 100644 --- a/.storybook/components/Statuses.tsx +++ b/.storybook/components/Statuses.tsx @@ -63,12 +63,7 @@ export function Status({ {label} {children && ( - + {children} )} diff --git a/.storybook/components/Teaser.module.css b/.storybook/components/Teaser.module.css index 2ce07d2af7..c46a1feb08 100644 --- a/.storybook/components/Teaser.module.css +++ b/.storybook/components/Teaser.module.css @@ -20,7 +20,7 @@ .base h2 { padding: 0; margin-bottom: var(--cui-spacings-giga); - border: none + border: none; } .base p { @@ -28,5 +28,5 @@ } .base a::after { - content: ' →'; + content: " →"; } diff --git a/.storybook/components/Teaser.tsx b/.storybook/components/Teaser.tsx index ce4fa3d2a9..0ae90d1484 100644 --- a/.storybook/components/Teaser.tsx +++ b/.storybook/components/Teaser.tsx @@ -27,7 +27,7 @@ interface TeaserProps { export function Teaser({ title, children }: TeaserProps) { return ( - + {title} diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx index cc80e25f5e..967b60a526 100644 --- a/.storybook/components/Theme.tsx +++ b/.storybook/components/Theme.tsx @@ -16,36 +16,40 @@ import { useEffect, useState, type ComponentType } from 'react'; import { ThemeProvider, useTheme } from '@emotion/react'; import { Unstyled } from '@storybook/addon-docs'; -import { light, schema } from '@sumup/design-tokens'; -import { SumUpLogomark } from '@sumup/icons'; +import { light, schema } from '@sumup-oss/design-tokens'; +import { SumUpLogomark } from '@sumup-oss/icons'; import { Anchor, + Badge, Table, ToastProvider, useNotificationToast, type TableHeaderCell, type TableRow, + Tooltip, } from '../../packages/circuit-ui/index.js'; type CustomPropertyName = `--cui-${string}`; type CustomPropertyValue = string; -type CustomProperty = [CustomPropertyName, CustomPropertyValue]; +type CustomProperty = { + name: CustomPropertyName; + value: CustomPropertyValue; + deprecation?: { replacement: CustomPropertyName }; +}; type CustomProperties = CustomProperty[]; type PreviewProps = { name: CustomPropertyName }; type PreviewComponent = ComponentType; -function filterCustomProperties( - namespace: string, - type?: string, -): CustomPropertyName[] { - return schema - .filter((token) => { - const isNamespace = token.name.startsWith(`--cui-${namespace}`); - const isType = type ? token.type === type : true; - return isNamespace && isType; - }) - .map((token) => token.name); +function filterCustomProperties(namespace: string | string[], type?: string) { + return schema.filter((token) => { + const isNamespace = + typeof namespace === 'string' + ? token.name.startsWith(`--cui-${namespace}`) + : namespace.some((ns) => token.name.startsWith(`--cui-${ns}`)); + const isType = type ? token.type === type : true; + return isNamespace && isType; + }); } function getCustomPropertyValue(name: CustomPropertyName): CustomPropertyValue { @@ -57,7 +61,7 @@ function CopyButton({ name }: { name: CustomPropertyName }) { return ( navigator.clipboard .writeText(name) @@ -73,13 +77,38 @@ function getRows( customProperties: CustomProperties, Preview?: PreviewComponent, ) { - return customProperties.map(([name, value]) => { + return customProperties.map(({ name, value, deprecation }) => { const row: TableRow = [ { children: (
- {name} - + + {name} + + {!deprecation && } + {deprecation && ( + ( + + Deprecated + + )} + /> + )}
), }, @@ -98,7 +127,7 @@ function getRows( } interface CustomPropertiesTableProps { - namespace: string; + namespace: string | string[]; preview?: PreviewComponent; type?: string; } @@ -111,9 +140,12 @@ export function CustomPropertiesTable({ const [customProperties, setCustomProperties] = useState(); useEffect(() => { - const names = filterCustomProperties(namespace, type); + const tokens = filterCustomProperties(namespace, type); setCustomProperties( - names.map((name) => [name, getCustomPropertyValue(name)]), + tokens.map((token) => ({ + ...token, + value: getCustomPropertyValue(token.name), + })), ); }, [namespace, type]); @@ -194,12 +226,28 @@ export function FontStack({ name }: PreviewProps) { export function FontWeight({ name }: PreviewProps) { return ( + // @ts-expect-error A CSS custom property is a valid font weight

Lorem ipsum

); } +export function Typography({ name }: PreviewProps) { + if (name.includes('font-size')) { + return ( +

Lorem ipsum

+ ); + } + if (name.includes('line-height')) { + return

Lorem ipsum

; + } + if (name.includes('letter-spacing')) { + return

Lorem ipsum

; + } + return null; +} + export function IconSize({ name }: PreviewProps) { return ( [ { children: {`theme.mq.${bp}`} }, - { children: {theme.mq[bp]} }, + { + children: {theme.mq[bp as keyof typeof theme.mq]}, + }, ])} /> diff --git a/.storybook/components/index.ts b/.storybook/components/index.ts index 859a9e10ab..bb2c325cfd 100644 --- a/.storybook/components/index.ts +++ b/.storybook/components/index.ts @@ -40,6 +40,7 @@ export { BorderWidth, FontStack, FontWeight, + Typography, Transition, MediaQueriesTable, } from './Theme.js'; diff --git a/.storybook/decorators/withThemeProvider.tsx b/.storybook/decorators/withThemeProvider.tsx index 6d37e6d7b4..69b6fd10ab 100644 --- a/.storybook/decorators/withThemeProvider.tsx +++ b/.storybook/decorators/withThemeProvider.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { ThemeProvider } from '@emotion/react'; import type { Decorator } from '@storybook/react'; -import { light } from '@sumup/design-tokens'; +import { light } from '@sumup-oss/design-tokens'; function setColorScheme(colorScheme: 'light' | 'dark') { document.documentElement.dataset.colorScheme = colorScheme; diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 0eb2b1f8c5..27d8284f99 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -4,46 +4,20 @@ /> -