chore(circuit-ui): DSYS-823 | mark phone color input stable

.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, ColorInputProps } from '@sumup-oss/circuit-ui/experimental';
++ import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui';
+```
+
+```diff
+- import { PhoneNumberInput, PhoneNumberInputProps } from '@sumup-oss/circuit-ui/experimental';
++ import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui';
+```

.changeset/pre.json

@@ -15,26 +15,41 @@
   "changesets": [
     "brown-cobras-invite",
     "chilly-dodos-end",
+    "chilly-gorillas-wonder",
     "clever-pugs-sing",
     "dry-cheetahs-tap",
+    "dry-melons-bake",
+    "eleven-moons-hear",
     "five-elephants-travel",
     "flat-steaks-itch",
     "fluffy-lobsters-sin",
     "friendly-falcons-turn",
+    "gold-worms-worry",
     "great-kiwis-compare",
     "grumpy-coins-sip",
+    "heavy-chairs-repeat",
+    "hip-spies-lick",
+    "hip-weeks-happen",
     "hot-toys-compare",
     "itchy-geckos-protect",
+    "late-books-attack",
+    "late-feet-attack",
+    "lazy-icons-beg",
     "old-sloths-speak",
     "plenty-chicken-deny",
     "pretty-tigers-run",
     "rich-phones-attend",
     "seven-bees-train",
     "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-suits-smile",
-    "wise-emus-count"
+    "wise-emus-count",
+    "yellow-moose-push"
   ]
 }

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

packages/circuit-ui/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @sumup-oss/circuit-ui
 
+## 9.0.0-next.2
+
+### Major Changes
+
+- [#2707](https://github.com/sumup-oss/circuit-ui/pull/2707) [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6) Thanks [@sirineJ](https://github.com/sirineJ)! - Raised the minimum Node.js version to 20+.
+
+- [#2684](https://github.com/sumup-oss/circuit-ui/pull/2684) [`ae6e0bc`](https://github.com/sumup-oss/circuit-ui/commit/ae6e0bc1ccdaaf7d11fd8e2403a8c16a58538c97) Thanks [@connor-baer](https://github.com/connor-baer)! - Made the ImageInput's label visible by default for consistency with other inputs. Use the new `hideLabel` prop to visually hide the label.
+
+- [#2711](https://github.com/sumup-oss/circuit-ui/pull/2711) [`a55b08a`](https://github.com/sumup-oss/circuit-ui/commit/a55b08af3dd3af982a075942df7009cd4529ca9b) Thanks [@connor-baer](https://github.com/connor-baer)! - Added [`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill) to the list of required peer dependencies.
+
+- [#2468](https://github.com/sumup-oss/circuit-ui/pull/2468) [`c7c2a10`](https://github.com/sumup-oss/circuit-ui/commit/c7c2a108c9b827f87bc9d39de32b31b9d86e5a6b) Thanks [@leonardodino](https://github.com/leonardodino)! - Removed the Table component's deprecated `initialSortedRow` prop. Use the `initialSortedColumn` prop instead.
+
+- [#2713](https://github.com/sumup-oss/circuit-ui/pull/2713) [`00727aa`](https://github.com/sumup-oss/circuit-ui/commit/00727aae7976970283c2d658e9668d093ec2334f) Thanks [@sirineJ](https://github.com/sirineJ)! - 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';
+  ```
+
+- [#2722](https://github.com/sumup-oss/circuit-ui/pull/2722) [`137a817`](https://github.com/sumup-oss/circuit-ui/commit/137a817685a3636e13b62ec5bb65c71f7b06c6bb) Thanks [@sirineJ](https://github.com/sirineJ)! - 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.
+
+### Minor Changes
+
+- [#2678](https://github.com/sumup-oss/circuit-ui/pull/2678) [`0652935`](https://github.com/sumup-oss/circuit-ui/commit/0652935b0fc6999ac2f6885410fdcbea000b771f) Thanks [@connor-baer](https://github.com/connor-baer)! - Added a new `decoration` prop to the Body component. Choose between the `italic` and `strikethrough` styles.
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Updated new typography design tokens names by removing the `-typography` infix.
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Introduced new sizes to the List component and deprecated old sizes. Updated `no-renamed-props` ESlint rule.
+
+- [#2728](https://github.com/sumup-oss/circuit-ui/pull/2728) [`2e6a4be`](https://github.com/sumup-oss/circuit-ui/commit/2e6a4be70035f0fce77dea2073c5f7fbedca0c5a) Thanks [@connor-baer](https://github.com/connor-baer)! - Migrated to the new typography APIs internally.
+
+### Patch Changes
+
+- [#2730](https://github.com/sumup-oss/circuit-ui/pull/2730) [`d39dc28`](https://github.com/sumup-oss/circuit-ui/commit/d39dc28267b1c7a6b8040f47d552ec2a03705ea9) Thanks [@sirineJ](https://github.com/sirineJ)! - Fixed some sizing and alignment issues for composite inputs ColorInput and PhoneNumberInput. Disabled color input when ColorInput has prop `readOnly`.
+
+- [#2724](https://github.com/sumup-oss/circuit-ui/pull/2724) [`b37eec9`](https://github.com/sumup-oss/circuit-ui/commit/b37eec9b4cb23cc59f6b89a305dd4b948017d5ec) Thanks [@sirineJ](https://github.com/sirineJ)! - Restored the height of the Input, Select, Tag and SelectorGroup components.
+
 ## 9.0.0-next.1
 
 ### Major Changes

packages/circuit-ui/components/ColorInput/ColorInput.mdx

@@ -5,9 +5,17 @@ import * as Stories from './ColorInput.stories';
 
 # ColorInput
 
-<Status variant="experimental" />
+<Status variant="stable" />
 
 The ColorInput component enables users to type or select a color.
+The component only supports seven-character string representations of colors in hexadecimal format. Shorthand Hex values like `#fff` will not be normalized to `#ffffff`.
 
 <Story of={Stories.Base} />
 <Props />
+
+## Readonly
+
+The `ColorInput` component supports a Readonly state. Use the `readOnly` prop to indicate that the field is not currently editable.
+The readOnly state is applied to the text input field of the `ColorInput` component, while disabling the color picker input to prevent interactions with the element.
+
+<Story of={Stories.Readonly} />

packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx

@@ -32,3 +32,9 @@ export const Base = (args: ColorInputProps) => (
 );
 
 Base.args = baseArgs;
+
+export const Readonly = (args: ColorInputProps) => (
+  <ColorInput {...args} style={{ maxWidth: '250px' }} />
+);
+
+Readonly.args = { ...baseArgs, readOnly: true };

packages/circuit-ui/components/ColorInput/ColorInput.tsx

@@ -99,6 +99,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
 
     const descriptionIds = clsx(validationHintId, descriptionId);
 
+    // TODO this appears to not be used in this component
     const suffix = RenderSuffix && (
       <RenderSuffix className={inputClasses.suffix} />
     );
@@ -178,7 +179,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
           <label
             htmlFor={pickerId}
             className={classes.picker}
-            data-disabled={disabled}
+            data-disabled={disabled || readOnly}
           >
             <input
               id={pickerId}
@@ -189,7 +190,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
               className={classes['color-input']}
               onChange={onPickerColorChange}
               disabled={disabled || readOnly}
-              defaultValue={defaultValue}
+              defaultValue={defaultValue} // should we give a fallback value if default is invalid ?
               value={value}
             />
           </label>

packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx

@@ -5,7 +5,7 @@ import * as Stories from './PhoneNumberInput.stories';
 
 # PhoneNumberInput
 
-<Status variant="experimental" />
+<Status variant="stable" />
 
 The PhoneNumberInput component provides a straightforward way for users to type their phone number in an accurate, consistent format including the country code and subscriber number.
 
@@ -15,7 +15,7 @@ The PhoneNumberInput component provides a straightforward way for users to type
 ## When to use it
 
 When you need to collect a phone number from the user. This could be for contact information, two-factor authentication, or other purposes where a phone number is required.
-The component allows the user to select their country code, and normalizes the input to the E.164 format.
+The component allows the user to select their country code, and normalizes the input to the [E.164 format](https://www.itu.int/rec/t-rec-e.164/en).
 
 ## Usage guidelines
 

packages/circuit-ui/experimental.ts

@@ -22,7 +22,3 @@ export {
   Toggletip,
   type ToggletipProps,
 } from './components/Toggletip/index.js';
-export { PhoneNumberInput } from './components/PhoneNumberInput/index.js';
-export type { PhoneNumberInputProps } from './components/PhoneNumberInput/index.js';
-export { ColorInput } from './components/ColorInput/index.js';
-export type { ColorInputProps } from './components/ColorInput/index.js';

packages/circuit-ui/index.ts

@@ -65,6 +65,10 @@ export type { ImageInputProps } from './components/ImageInput/index.js';
 export { Calendar } from './components/Calendar/index.js';
 export type { CalendarProps } from './components/Calendar/index.js';
 export type { PlainDateRange } from './util/date.js';
+export { PhoneNumberInput } from './components/PhoneNumberInput/index.js';
+export type { PhoneNumberInputProps } from './components/PhoneNumberInput/index.js';
+export { ColorInput } from './components/ColorInput/index.js';
+export type { ColorInputProps } from './components/ColorInput/index.js';
 
 // Actions
 export { Button } from './components/Button/index.js';

packages/circuit-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/circuit-ui",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.2",
   "description": "SumUp's React UI component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,8 +62,8 @@
     "@emotion/jest": "^11.13.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@sumup-oss/design-tokens": "^8.0.0-next.1",
-    "@sumup-oss/icons": "^5.0.0-next.0",
+    "@sumup-oss/design-tokens": "^8.0.0-next.2",
+    "@sumup-oss/icons": "^5.0.0-next.1",
     "@sumup-oss/intl": "^2.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "6.5.0",

packages/design-tokens/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sumup-oss/design-tokens
 
+## 8.0.0-next.2
+
+### Major Changes
+
+- [#2707](https://github.com/sumup-oss/circuit-ui/pull/2707) [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6) Thanks [@sirineJ](https://github.com/sirineJ)! - Raised the minimum Node.js version to 20+.
+
+### Minor Changes
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Updated several typography token values and replaced the component-specific letter spacing tokens with a unified one.
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Updated new typography design tokens names by removing the `-typography` infix.
+
 ## 8.0.0-next.1
 
 ### Major Changes

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/design-tokens",
-  "version": "8.0.0-next.1",
+  "version": "8.0.0-next.2",
   "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

packages/eslint-plugin-circuit-ui/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sumup-oss/eslint-plugin-circuit-ui
 
+## 5.0.0-next.2
+
+### Major Changes
+
+- [#2728](https://github.com/sumup-oss/circuit-ui/pull/2728) [`2e6a4be`](https://github.com/sumup-oss/circuit-ui/commit/2e6a4be70035f0fce77dea2073c5f7fbedca0c5a) Thanks [@connor-baer](https://github.com/connor-baer)! - Added missing rules for the Anchor and BodyLarge migrations.
+
+- [#2707](https://github.com/sumup-oss/circuit-ui/pull/2707) [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6) Thanks [@sirineJ](https://github.com/sirineJ)! - Raised the minimum Node.js version to 20+.
+
+### Minor Changes
+
+- [#2713](https://github.com/sumup-oss/circuit-ui/pull/2713) [`00727aa`](https://github.com/sumup-oss/circuit-ui/commit/00727aae7976970283c2d658e9668d093ec2334f) Thanks [@sirineJ](https://github.com/sirineJ)! - Updated the `component-lifecycle-imports` ESLint rule to flag imports of stable entities from `@sumup-oss/circuit-ui/experimental`.
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Updated new typography design tokens names by removing the `-typography` infix.
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Introduced new sizes to the List component and deprecated old sizes. Updated `no-renamed-props` ESlint rule.
+
 ## 5.0.0-next.1
 
 ### Major Changes

packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts

@@ -74,7 +74,15 @@ const mappings = [
   {
     from: '@sumup-oss/circuit-ui/experimental',
     to: '@sumup-oss/circuit-ui',
-    specifiers: ['Calendar', 'CalendarProps', 'PlainDateRange'],
+    specifiers: [
+      'Calendar',
+      'CalendarProps',
+      'PlainDateRange',
+      'ColorInput',
+      'ColorInputProps',
+      'PhoneNumberInputProps',
+      'PhoneNumberInput',
+    ],
   },
 ];
 

packages/eslint-plugin-circuit-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/eslint-plugin-circuit-ui",
-  "version": "5.0.0-next.1",
+  "version": "5.0.0-next.2",
   "description": "ESLint rules to lint Circuit UI.",
   "keywords": [
     "sumup",
@@ -30,7 +30,7 @@
     "@typescript-eslint/utils": "^7.16.1"
   },
   "devDependencies": {
-    "@sumup-oss/design-tokens": "^8.0.0-next.1",
+    "@sumup-oss/design-tokens": "^8.0.0-next.2",
     "@tsconfig/node18": "^18.2.4",
     "@typescript-eslint/rule-tester": "^7.16.1",
     "typescript": "^5.6.2"

packages/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sumup-oss/icons
 
+## 5.0.0-next.1
+
+### Major Changes
+
+- [#2707](https://github.com/sumup-oss/circuit-ui/pull/2707) [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6) Thanks [@sirineJ](https://github.com/sirineJ)! - Raised the minimum Node.js version to 20+.
+
 ## 5.0.0-next.0
 
 ### Major Changes

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/icons",
-  "version": "5.0.0-next.0",
+  "version": "5.0.0-next.1",
   "description": "A collection of icons by SumUp",
   "type": "module",
   "main": "./dist/index.js",

packages/stylelint-plugin-circuit-ui/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @sumup-oss/stylelint-plugin-circuit-ui
 
+## 3.0.0-next.2
+
+### Major Changes
+
+- [#2707](https://github.com/sumup-oss/circuit-ui/pull/2707) [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6) Thanks [@sirineJ](https://github.com/sirineJ)! - Raised the minimum Node.js version to 20+.
+
+### Minor Changes
+
+- [#2717](https://github.com/sumup-oss/circuit-ui/pull/2717) [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161) Thanks [@sirineJ](https://github.com/sirineJ)! - Updated new typography design tokens names by removing the `-typography` infix.
+
 ## 3.0.0-next.1
 
 ### Minor Changes

packages/stylelint-plugin-circuit-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sumup-oss/stylelint-plugin-circuit-ui",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.2",
   "description": "Stylelint rules to lint Circuit UI.",
   "exports": "./dist/index.js",
   "type": "module",
@@ -29,7 +29,7 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@sumup-oss/design-tokens": "^8.0.0-next.1",
+    "@sumup-oss/design-tokens": "^8.0.0-next.2",
     "@tsconfig/node18": "^18.2.4",
     "jest-preset-stylelint": "^7.1.0",
     "typescript": "^5.6.2"

templates/astro/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sumup-oss/astro-template-circuit-ui
 
+## 3.0.0-next.1
+
+### Major Changes
+
+- [#2707](https://github.com/sumup-oss/circuit-ui/pull/2707) [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6) Thanks [@sirineJ](https://github.com/sirineJ)! - Raised the minimum Node.js version to 20+.
+
+### Patch Changes
+
+- Updated dependencies [[`d39dc28`](https://github.com/sumup-oss/circuit-ui/commit/d39dc28267b1c7a6b8040f47d552ec2a03705ea9), [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161), [`f8016eb`](https://github.com/sumup-oss/circuit-ui/commit/f8016ebe246005ed415ed9587ecdb76892e981c6), [`ae6e0bc`](https://github.com/sumup-oss/circuit-ui/commit/ae6e0bc1ccdaaf7d11fd8e2403a8c16a58538c97), [`0652935`](https://github.com/sumup-oss/circuit-ui/commit/0652935b0fc6999ac2f6885410fdcbea000b771f), [`a55b08a`](https://github.com/sumup-oss/circuit-ui/commit/a55b08af3dd3af982a075942df7009cd4529ca9b), [`c7c2a10`](https://github.com/sumup-oss/circuit-ui/commit/c7c2a108c9b827f87bc9d39de32b31b9d86e5a6b), [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161), [`00727aa`](https://github.com/sumup-oss/circuit-ui/commit/00727aae7976970283c2d658e9668d093ec2334f), [`0fb5dc0`](https://github.com/sumup-oss/circuit-ui/commit/0fb5dc0d68221e0f63103883e6cd14ea801cf161), [`b37eec9`](https://github.com/sumup-oss/circuit-ui/commit/b37eec9b4cb23cc59f6b89a305dd4b948017d5ec), [`2e6a4be`](https://github.com/sumup-oss/circuit-ui/commit/2e6a4be70035f0fce77dea2073c5f7fbedca0c5a), [`137a817`](https://github.com/sumup-oss/circuit-ui/commit/137a817685a3636e13b62ec5bb65c71f7b06c6bb)]:
+  - @sumup-oss/[email protected]
+  - @sumup-oss/[email protected]
+  - @sumup-oss/[email protected]
+
 ## 2.1.1-next.0
 
 ### Patch Changes