Releases: sumup-oss/circuit-ui
@sumup-oss/eslint-plugin-circuit-ui@5.1.0
@sumup-oss/stylelint-plugin-circuit-ui@3.0.0
Major Changes
-
#2707
f8016eb
Thanks @sirineJ! - Raised the minimum Node.js version to 20+. -
#2648
f583d05
Thanks @connor-baer! - Renamed the package scope from@sumup
to@sumup-oss
. Replace@sumup/stylelint-plugin-circuit-ui
with@sumup-oss/stylelint-plugin-circuit-ui
in yourpackage.json
file, then update the plugin name in your Stylelint config:// .stylelintrc.js module.exports = { - plugins: ['@sumup/stylelint-plugin-circuit-ui'], + plugins: ['@sumup-oss/stylelint-plugin-circuit-ui'], };
Minor Changes
- #2653
33435cf
Thanks @connor-baer! - Addedcircuit-ui/no-deprecated-custom-properties
rule to flag uses of deprecated custom properties.
@sumup-oss/icons@5.0.0
Major Changes
-
#2707
f8016eb
Thanks @sirineJ! - Raised the minimum Node.js version to 20+. -
#2648
f583d05
Thanks @connor-baer! - Renamed the package scope from@sumup
to@sumup-oss
. Replace@sumup/icons
with@sumup-oss/icons
in yourpackage.json
file, then update all imports:-import { Search } from '@sumup/icons'; +import { Search } from '@sumup-oss/icons';
Circuit UI's ESLint plugin offers the
renamed-package-scope
rule to automate updating the package imports.
@sumup-oss/eslint-plugin-circuit-ui@5.0.0
Major Changes
-
#2707
f8016eb
Thanks @sirineJ! - Raised the minimum Node.js version to 20+. -
#2648
f583d05
Thanks @connor-baer! - Renamed the package scope from@sumup
to@sumup-oss
. Replace@sumup/eslint-plugin-circuit-ui
with@sumup-oss/eslint-plugin-circuit-ui
in yourpackage.json
file, then update the plugin and rule names in your ESLint config:// .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', }, };
Minor Changes
-
#2653
33435cf
Thanks @connor-baer! - Added a migration for the Display (formerly Title), Headline and Body components'size
prop to thecircuit-ui/no-renamed-props
rule. -
#2653
33435cf
Thanks @connor-baer! - Addedcircuit-ui/no-deprecated-custom-properties
rule to flag uses of deprecated custom properties. -
#2713
00727aa
Thanks @sirineJ! - Updated thecomponent-lifecycle-imports
ESLint rule to flag imports of the now stable Calendar, ColorInput, PhoneNumberInput, Tooltip and Toggletip components from@sumup-oss/circuit-ui/experimental
. -
#2648
f583d05
Thanks @connor-baer! - Addedcircuit-ui/renamed-package-scope
rule to update imports for design system packages that have moved from the@sumup
to the@sumup-oss
scope.
@sumup-oss/design-tokens@8.0.0
Major Changes
-
#2707
f8016eb
Thanks @sirineJ! - Raised the minimum Node.js version to 20+. -
#2648
f583d05
Thanks @connor-baer! - Renamed the package scope from@sumup
to@sumup-oss
. Replace@sumup/design-tokens
with@sumup-oss/design-tokens
in yourpackage.json
file, then update all imports:-import '@sumup/design-tokens/light.css'; +import '@sumup-oss/design-tokens/light.css';
Circuit UI's ESLint plugin offers the
renamed-package-scope
rule to automate updating the package imports. -
#2654
55bf9ad
Thanks @connor-baer! - 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. -
#2654
55bf9ad
Thanks @connor-baer! - 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.
Minor Changes
-
#2653
33435cf
Thanks @connor-baer! - Consolidated and renamed thetypography
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
@sumup-oss/circuit-ui@9.0.0
Circuit UI v9 introduces a new typeface, more flexible typography APIs, and stable input components for colors, dates, and phone numbers. For upgrade instructions, refer to the migration guide.
Major Changes
-
#2707
f8016eb
Thanks @sirineJ! - Raised the minimum Node.js version to 20+. -
#2648
f583d05
Thanks @connor-baer! - Renamed the package scope from@sumup
to@sumup-oss
. Replace@sumup/circuit-ui
with@sumup-oss/circuit-ui
in yourpackage.json
file, then update all imports:-import { Button } from '@sumup/circuit-ui'; +import { Button } from '@sumup-oss/circuit-ui';
Circuit UI's ESLint plugin offers the
renamed-package-scope
rule to automate updating the package imports. -
#2648
f583d05
Thanks @connor-baer! - 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. -
#2711
a55b08a
Thanks @connor-baer! - Addedtemporal-polyfill
to the list of required peer dependencies. -
#2306
8be7f3b
Thanks @connor-baer! - Deprecated theInputElement
interface and narrowed the Input's element type toHTMLInputElement
and the TextArea's element type toHTMLTextAreaElement
. This affectsref
s and event handlers. -
#2713
00727aa
Thanks @sirineJ! - Marked theCalendar
component as stable. Update the related imports:- import { Calendar, CalendarProps, PlainDateRange } from '@sumup-oss/circuit-ui/experimental'; + import { Calendar, CalendarProps, PlainDateRange } from '@sumup-oss/circuit-ui';
-
#2731
a4b5d2c
Thanks @sirineJ! - Marked theColorInput
andPhoneNumberInput
components as stable. Update the related imports:- import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui/experimental'; + import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui';
- import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui/experimental'; + import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui';
-
#2743
12a201a
Thanks @sirineJ! - Marked theTooltip
andToggletip
components as stable. Update the related imports:- import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui/experimental'; + import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui';
- import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui/experimental'; + import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui';
-
#2741
1251f90
Thanks @connor-baer! - Changed thePlainDateRange
type from a tuple to an object withstart
andend
properties. This affects the Calendar component'sselection
prop. Use the newupdatePlainDateRange
helper function to update a date range when a user selects a date. -
#2645
4f11234
Thanks @connor-baer! - 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. -
#2677
4a2f1a6
Thanks @connor-baer! - Removed the legacy RangePicker, RangePickerController, SingleDayPicker, CalendarTag, and CalendarTagTwoStep components. Use the updated DateInput component instead. -
#2751
96df6fa
Thanks @connor-baer! - Updated the PhoneNumberInput component to acceptvalue
anddefaultValue
props. TheonChange
callback is now called with anEvent
object instead of a string to mimic a native input. -
#2747
c7c2a10
Thanks @connor-baer! - Removed the Table component's deprecatedinitialSortedRow
prop. Use theinitialSortedColumn
prop instead.
Minor Changes
-
#2653
33435cf
Thanks @connor-baer! - Renamed the Title component to Display for consistency with other platforms. -
#2653
33435cf
Thanks @connor-baer! - Deprecated the SubHeadline component. Use the Headline component in sizes
instead. -
#2653
33435cf
Thanks @connor-baer! - Deprecated the BodyLarge component. Use the Body component in sizel
instead. -
#2653
33435cf
Thanks @connor-baer! - Added a new Compact component for text in space-constraint contexts. -
#2653
33435cf
Thanks @connor-baer! - Added a new Numeral component for numeric content such as currency values. -
#2722
137a817
Thanks @sirineJ! - Added a newweight
prop to the Display component. Choose between theregular
,semibold
, andbold
font weights. -
#2653
33435cf
Thanks @connor-baer! - Added a newweight
prop to the Body component. Choose between theregular
,semibold
, andbold
font weights. -
#2678
0652935
Thanks @connor-baer! - Added a newdecoration
prop to the Body component. Choose between theitalic
andstrikethrough
styles. -
#2653
33435cf
Thanks @connor-baer! - Added a newcolor
prop to the Body component. Choose any foreground color. -
#2653
33435cf
Thanks @connor-baer! - 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. -
#2653
33435cf
Thanks [@connor-baer](https://github.com/...
@sumup-oss/eslint-plugin-circuit-ui@5.0.0-next.5
Minor Changes
-
#2743
12a201a
Thanks @sirineJ! - Updated thecomponent-lifecycle-imports
ESLint rule to flag imports of stable components Tooltip and Toggletip from@sumup-oss/circuit-ui/experimental
. -
#2731
a4b5d2c
Thanks @sirineJ! - Updated thecomponent-lifecycle-imports
ESLint rule to handle imports ofColorInput
andPhoneNumberInput
as experimental components.
@sumup-oss/design-tokens@8.0.0-next.3
Patch Changes
- #2747
84091c5
Thanks @connor-baer! - Updated the design token values forheadline-m-font-size
,font-weight-semibold
andfont-weight-bold
.
@sumup-oss/circuit-ui@9.0.0-next.4
Major Changes
-
#2741
1251f90
Thanks @connor-baer! - Changed thePlainDateRange
type from a tuple to an object withstart
andend
properties. This affects the Calendar component'sselection
prop. Use the newupdatePlainDateRange
helper function to update a date range when a user selects a date. -
#2731
a4b5d2c
Thanks @sirineJ! - Marked theColorInput
andPhoneNumberInput
components as stable. Update the related imports:- import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui/experimental'; + import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui';
- import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui/experimental'; + import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui';
-
#2677
4a2f1a6
Thanks @connor-baer! - Removed the legacy RangePicker, RangePickerController, SingleDayPicker, CalendarTag, and CalendarTagTwoStep components. Use the updated DateInput component instead. -
#2645
4f11234
Thanks @connor-baer! - 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. -
#2743
12a201a
Thanks @sirineJ! - Marked theTooltip
andToggletip
components as stable. Update the related imports:- import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui/experimental'; + import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui';
- import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui/experimental'; + import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui';
@sumup-oss/eslint-plugin-circuit-ui@5.0.0-next.4
Minor Changes
- #2735
70f3ab8
Thanks @connor-baer! - Expanded therenamed-package-scope
ESLint rule to cover additional occurrences of package names such as in Jest module mocks.
Patch Changes
- #2735
70f3ab8
Thanks @connor-baer! - Fixed theno-renamed-props
ESLint rule to add theas="strong"
prop when migrating the Body'svariant="highlight"
prop to match the previous semantics.