mark ColorInput and PhoneNumberInput as Stable. Improve readonly Colo…

…rInput styles

.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/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/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}
@@ -188,9 +189,8 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
               aria-describedby={descriptionIds}
               className={classes['color-input']}
               onChange={onPickerColorChange}
-              readOnly={readOnly}
-              disabled={disabled}
-              defaultValue={defaultValue}
+              disabled={disabled || readOnly}
+              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/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',
+    ],
   },
 ];