From a61b84d7341335b69011888dd3d902893ef4aa2b Mon Sep 17 00:00:00 2001 From: sirineJ <112706079+sirineJ@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:43:32 +0200 Subject: [PATCH] mark ColorInput and PhoneNumberInput as Stable. Improve readonly ColorInput styles --- .changeset/hip-comics-agree.md | 15 +++++++++++++++ .changeset/witty-rabbits-collect.md | 5 +++++ .../components/ColorInput/ColorInput.mdx | 10 +++++++++- .../components/ColorInput/ColorInput.stories.tsx | 6 ++++++ .../components/ColorInput/ColorInput.tsx | 8 ++++---- .../PhoneNumberInput/PhoneNumberInput.mdx | 4 ++-- packages/circuit-ui/experimental.ts | 4 ---- packages/circuit-ui/index.ts | 4 ++++ .../component-lifecycle-imports/index.ts | 10 +++++++++- 9 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 .changeset/hip-comics-agree.md create mode 100644 .changeset/witty-rabbits-collect.md diff --git a/.changeset/hip-comics-agree.md b/.changeset/hip-comics-agree.md new file mode 100644 index 0000000000..2cc52ac4ba --- /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, 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'; +``` 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/packages/circuit-ui/components/ColorInput/ColorInput.mdx b/packages/circuit-ui/components/ColorInput/ColorInput.mdx index 2867d1fe0f..f333d98b42 100644 --- a/packages/circuit-ui/components/ColorInput/ColorInput.mdx +++ b/packages/circuit-ui/components/ColorInput/ColorInput.mdx @@ -5,9 +5,17 @@ import * as Stories from './ColorInput.stories'; # ColorInput - + 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`. + +## 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. + + diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx index d852030f66..dc17eb5778 100644 --- a/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx +++ b/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) => ( + +); + +Readonly.args = { ...baseArgs, readOnly: true }; diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx index 15f1cfbc4f..f0b736a9c0 100644 --- a/packages/circuit-ui/components/ColorInput/ColorInput.tsx +++ b/packages/circuit-ui/components/ColorInput/ColorInput.tsx @@ -99,6 +99,7 @@ export const ColorInput = forwardRef( const descriptionIds = clsx(validationHintId, descriptionId); + // TODO this appears to not be used in this component const suffix = RenderSuffix && ( ); @@ -178,7 +179,7 @@ export const ColorInput = forwardRef( diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx index 600de1b70b..7dc7f19903 100644 --- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx +++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx @@ -5,7 +5,7 @@ import * as Stories from './PhoneNumberInput.stories'; # PhoneNumberInput - + 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 diff --git a/packages/circuit-ui/experimental.ts b/packages/circuit-ui/experimental.ts index ae28b8ea69..e32e3b5857 100644 --- a/packages/circuit-ui/experimental.ts +++ b/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'; diff --git a/packages/circuit-ui/index.ts b/packages/circuit-ui/index.ts index d212b2b28c..0b5b1254e6 100644 --- a/packages/circuit-ui/index.ts +++ b/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'; diff --git a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts index 29aeb23dd3..f31c6771eb 100644 --- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts +++ b/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', + ], }, ];