diff --git a/package.json b/package.json index d09c37be7..55a927a0b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codegouvfr/react-dsfr", - "version": "1.16.4", + "version": "1.16.5-rc.0", "description": "French State Design System React integration library", "repository": { "type": "git", diff --git a/src/Input.tsx b/src/Input.tsx index b47376e35..05dbfba4f 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -28,7 +28,10 @@ export namespace InputProps { disabled?: boolean; iconId?: FrIconClassName | RiIconClassName; classes?: Partial< - Record<"root" | "label" | "description" | "nativeInputOrTextArea" | "message", string> + Record< + "root" | "label" | "description" | "nativeInputOrTextArea" | "message" | "wrap", + string + > >; style?: CSSProperties; /** Default: "default" */ @@ -36,6 +39,7 @@ export namespace InputProps { /** The message won't be displayed if state is "default" */ stateRelatedMessage?: ReactNode; addon?: ReactNode; + action?: ReactNode; }; export type RegularInput = Common & { @@ -84,6 +88,7 @@ export const Input = memo( nativeTextAreaProps, nativeInputProps, addon, + action, ...rest } = props; @@ -154,7 +159,6 @@ export const Input = memo( case "default": return undefined; } - assert>(); })() ), classes.nativeInputOrTextArea @@ -168,16 +172,22 @@ export const Input = memo( const hasIcon = iconId !== undefined; const hasAddon = addon !== undefined; - return hasIcon || hasAddon ? ( + const hasAction = action !== undefined; + return hasIcon || hasAddon || hasAction ? (
{nativeInputOrTextArea} {hasAddon && addon} + {hasAction && action}
) : ( nativeInputOrTextArea @@ -198,7 +208,6 @@ export const Input = memo( case "info": return "fr-info-text"; } - assert>(); })() ), classes.message diff --git a/src/blocks/PasswordInput.tsx b/src/blocks/PasswordInput.tsx index 25530adac..37a71bdfc 100644 --- a/src/blocks/PasswordInput.tsx +++ b/src/blocks/PasswordInput.tsx @@ -21,7 +21,7 @@ import { useAnalyticsId } from "../tools/useAnalyticsId"; export type PasswordInputProps = Omit< InputProps.Common, - "state" | "stateRelatedMessage" | "iconId" | "classes" | "addon" + "state" | "stateRelatedMessage" | "iconId" | "classes" | "addon" | "action" > & { classes?: Partial>; /** Default "Your password must contain:", if empty string the hint wont be displayed */ diff --git a/stories/Input.stories.tsx b/stories/Input.stories.tsx index a0f697093..548c0ddf7 100644 --- a/stories/Input.stories.tsx +++ b/stories/Input.stories.tsx @@ -144,3 +144,8 @@ export const WithButtonAddon = getStory({ "label": "Label champs de saisie", "addon": }); + +export const WithButtonAction = getStory({ + "label": "Label champs de saisie", + "addon":