Merge pull request #351 from codegouvfr/feat/input-with-action

feat(input): add action and enable wrap class access
codegouvfr · Jan 1, 2025 · 0293305 · 0293305
2 parents 9ab632d + 0bfbd3b
commit 0293305
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git 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
@@ -28,14 +28,18 @@ 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" */
         state?: "success" | "error" | "info" | "default";
         /** 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<Equals<typeof state, never>>();
                                     })()
                                 ),
                                 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 ? (
                         <div
-                            className={fr.cx(
-                                "fr-input-wrap",
-                                hasIcon && iconId,
-                                hasAddon && "fr-input-wrap--addon"
+                            className={cx(
+                                fr.cx(
+                                    "fr-input-wrap",
+                                    hasIcon && iconId,
+                                    hasAddon && "fr-input-wrap--addon",
+                                    hasAction && "fr-input-wrap--action"
+                                ),
+                                classes.wrap
                             )}
                         >
                             {nativeInputOrTextArea}
                             {hasAddon && addon}
+                            {hasAction && action}
                         </div>
                     ) : (
                         nativeInputOrTextArea
@@ -198,7 +208,6 @@ export const Input = memo(
                                             case "info":
                                                 return "fr-info-text";
                                         }
-                                        assert<Equals<typeof state, never>>();
                                     })()
                                 ),
                                 classes.message

diff --git 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<Record<"root" | "input" | "label" | "checkbox", string>>;
     /** 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
@@ -144,3 +144,8 @@ export const WithButtonAddon = getStory({
     "label": "Label champs de saisie",
     "addon": <Button>Valider</Button>
 });
+
+export const WithButtonAction = getStory({
+    "label": "Label champs de saisie",
+    "addon": <Button title="Supprimer le champ" iconId="fr-icon-delete-line" priority="secondary" />
+});