diff --git a/.changeset/hip-needles-design.md b/.changeset/hip-needles-design.md new file mode 100644 index 0000000000..9dee36589b --- /dev/null +++ b/.changeset/hip-needles-design.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/circuit-ui": minor +--- + +Made PhoneNumberInput default flag size responsive to the input size. diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx index 950c323086..f1d17d990f 100644 --- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx +++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx @@ -199,14 +199,21 @@ export interface PhoneNumberInputProps }; } -const DefaultPrefix: ComponentType<{ +type DefaultPrefixProps = { value?: string | number; className?: string; -}> = ({ value, ...rest }) => + size?: FieldSize; +}; + +const DefaultPrefix = ({ value, ...rest }: DefaultPrefixProps) => value ? ( ) : null; +const getDefaultPrefix = (size: FieldSize) => (args: DefaultPrefixProps) => ( + +); + /** * Provides a straightforward way for users to type their phone number in an * accurate, consistent format including the country code and subscriber number. @@ -404,6 +411,7 @@ export function PhoneNumberInput({ (({ value: inputValue, ...rest }) => ( )) @@ -434,7 +442,7 @@ export function PhoneNumberInput({ countryCodeRef as RefObject, countryCode.ref as ForwardedRef, )} - renderPrefix={countryCode.renderPrefix ?? DefaultPrefix} + renderPrefix={countryCode.renderPrefix ?? getDefaultPrefix(size)} /> )}