Skip to content

Releases: sumup-oss/circuit-ui

@sumup-oss/circuit-ui@9.0.1

04 Nov 14:39
c888a14
Compare
Choose a tag to compare

Patch Changes

@sumup-oss/eslint-plugin-circuit-ui@5.1.0

31 Oct 14:09
239d245
Compare
Choose a tag to compare

Minor Changes

  • #2755 93f12f2 Thanks @sirineJ! - Added a fixer method to the no-deprecated-custom-properties ESlint rule.

@sumup-oss/stylelint-plugin-circuit-ui@3.0.0

30 Oct 16:26
6772c78
Compare
Choose a tag to compare

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 your package.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! - Added circuit-ui/no-deprecated-custom-properties rule to flag uses of deprecated custom properties.

@sumup-oss/icons@5.0.0

30 Oct 16:26
6772c78
Compare
Choose a tag to compare

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 your package.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

30 Oct 16:26
6772c78
Compare
Choose a tag to compare

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 your package.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 the circuit-ui/no-renamed-props rule.

  • #2653 33435cf Thanks @connor-baer! - Added circuit-ui/no-deprecated-custom-properties rule to flag uses of deprecated custom properties.

  • #2713 00727aa Thanks @sirineJ! - Updated the component-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! - 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.

@sumup-oss/design-tokens@8.0.0

30 Oct 16:26
6772c78
Compare
Choose a tag to compare

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 your package.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 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

@sumup-oss/circuit-ui@9.0.0

30 Oct 16:26
6772c78
Compare
Choose a tag to compare

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 your package.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! - Added temporal-polyfill to the list of required peer dependencies.

  • #2306 8be7f3b Thanks @connor-baer! - Deprecated the InputElement interface and narrowed the Input's element type to HTMLInputElement and the TextArea's element type to HTMLTextAreaElement. This affects refs and event handlers.

  • #2713 00727aa Thanks @sirineJ! - Marked the Calendar 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 the ColorInput and PhoneNumberInput 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 the Tooltip and Toggletip 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 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.

  • #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 accept value and defaultValue props. The onChange callback is now called with an Event object instead of a string to mimic a native input.

  • #2747 c7c2a10 Thanks @connor-baer! - Removed the Table component's deprecated initialSortedRow prop. Use the initialSortedColumn prop instead.

Minor Changes

Read more

@sumup-oss/eslint-plugin-circuit-ui@5.0.0-next.5

29 Oct 14:15
dcdca9a
Compare
Choose a tag to compare

Minor Changes

  • #2743 12a201a Thanks @sirineJ! - Updated the component-lifecycle-imports ESLint rule to flag imports of stable components Tooltip and Toggletip from @sumup-oss/circuit-ui/experimental.

  • #2731 a4b5d2c Thanks @sirineJ! - Updated the component-lifecycle-imports ESLint rule to handle imports of ColorInput and PhoneNumberInput as experimental components.

@sumup-oss/design-tokens@8.0.0-next.3

29 Oct 14:34
8a7ed68
Compare
Choose a tag to compare
Pre-release

Patch Changes

  • #2747 84091c5 Thanks @connor-baer! - Updated the design token values for headline-m-font-size, font-weight-semibold and font-weight-bold.

@sumup-oss/circuit-ui@9.0.0-next.4

29 Oct 14:15
dcdca9a
Compare
Choose a tag to compare
Pre-release

Major Changes

  • #2741 1251f90 Thanks @connor-baer! - 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.

  • #2731 a4b5d2c Thanks @sirineJ! - Marked the ColorInput and PhoneNumberInput 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 the Tooltip and Toggletip 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';