fix(slash): radio input error design (item not in red)

AxaFrance · Dec 24, 2024 · 1e5e201 · 1e5e201
1 parent 56ae05e
commit 1e5e201
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 23 deletions.
diff --git a/slash/react/src/Form/Choice/ChoiceInput.stories.tsx b/slash/react/src/Form/Choice/ChoiceInput.stories.tsx
@@ -32,6 +32,7 @@ export const ChoiceInputStory: StoryObj<ChoiceInputProps> = {
     placeholder: "Paris",
     messageType: MessageTypes.error,
     forceDisplayMessage: false,
+    message: "",
     id: "uniqueid",
     classModifier: [],
     isVisible: true,

diff --git a/slash/react/src/Form/Date/DateInput.stories.tsx b/slash/react/src/Form/Date/DateInput.stories.tsx
@@ -35,6 +35,7 @@ export const DateInputStory: Story = {
     label: "Birth date",
     helpMessage: "jj/mm/aaaa",
     messageType: MessageTypes.success,
+    message: "",
     forceDisplayMessage: false,
     id: "dateId",
     classModifier: "",
@@ -58,6 +59,7 @@ export const DateInputRequiredStory: Story = {
     label: "Birth date",
     helpMessage: "jj/mm/aaaa",
     messageType: MessageTypes.success,
+    message: "",
     forceDisplayMessage: false,
     id: "dateId",
     className: "",

diff --git a/slash/react/src/Form/MultiSelect/MultiSelect.stories.tsx b/slash/react/src/Form/MultiSelect/MultiSelect.stories.tsx
@@ -121,6 +121,7 @@ export const MultiSelectInputStory: StoryObj<
     helpMessage: "Enter the place type",
     messageType: MessageTypes.error,
     forceDisplayMessage: false,
+    message: "",
     isVisible: true,
     classModifier: "",
     classNameContainerLabel: "col-md-2",

diff --git a/slash/react/src/Form/Number/NumberInput.stories.tsx b/slash/react/src/Form/Number/NumberInput.stories.tsx
@@ -45,6 +45,7 @@ export const NumberInputStory: Story = {
     label: "Your name",
     helpMessage: "Aide à la saisie",
     forceDisplayMessage: false,
+    message: "",
     messageType: MessageTypes.error,
     classNameContainerLabel: "col-md-2",
     classNameContainerInput: "col-md-10",

diff --git a/slash/react/src/Form/Pass/PassInput.stories.tsx b/slash/react/src/Form/Pass/PassInput.stories.tsx
@@ -39,6 +39,7 @@ export const PassInputStory: StoryObj<typeof PassInput> = {
     required: true,
     messageType: MessageTypes.error,
     forceDisplayMessage: false,
+    message: "",
     readOnly: false,
     disabled: false,
     isVisible: true,

diff --git a/slash/react/src/Form/Radio/RadioInput.stories.tsx b/slash/react/src/Form/Radio/RadioInput.stories.tsx
@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
-import { ComponentPropsWithRef } from "react";
 import { RadioModes } from "./Radio";
 import { RadioInput } from "./RadioInput";
+import { MessageTypes } from "../core";
 
 const meta: Meta<typeof RadioInput> = {
   component: RadioInput,
@@ -13,27 +13,24 @@ const meta: Meta<typeof RadioInput> = {
 
 export default meta;
 
-type RadioInputProps = Omit<
-  ComponentPropsWithRef<typeof RadioInput>,
-  "classModifier"
-> & {
-  classModifier?: string[];
-};
-export const RadioInputStory: StoryObj<RadioInputProps> = {
+type Story = StoryObj<typeof RadioInput>;
+
+export const RadioInputStory: Story = {
   name: "RadioInput",
-  render: ({ classModifier, ...args }) => (
-    <RadioInput classModifier={classModifier?.join(" ")} {...args} />
-  ),
+  render: ({ ...args }) => <RadioInput {...args} />,
   args: {
     label: "Where are you ?",
     required: true,
     mode: RadioModes.classic,
     value: "",
-    classModifier: [],
+    classModifier: "",
     isChecked: false,
     readOnly: false,
     disabled: false,
     name: "placeName",
+    forceDisplayMessage: true,
+    messageType: MessageTypes.error,
+    message: "",
     options: [
       { label: "Paris", value: "paris" },
       { label: "Lille", value: "lille" },
@@ -53,9 +50,5 @@ export const RadioInputStory: StoryObj<RadioInputProps> = {
       },
       control: { type: "inline-radio" },
     },
-    classModifier: {
-      options: ["disabled", "required"],
-      control: { type: "inline-check" },
-    },
   },
 };
diff --git a/slash/react/src/Form/Radio/RadioInput.tsx b/slash/react/src/Form/Radio/RadioInput.tsx
@@ -77,6 +77,6 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
   },
 );
 
-RadioInput.displayName = "RadioInput";
+RadioInput.displayName = "EnhancedInputRadio";
 
 export { RadioInput };
diff --git a/slash/react/src/Form/Textarea/TextareaInput.stories.tsx b/slash/react/src/Form/Textarea/TextareaInput.stories.tsx
@@ -30,6 +30,7 @@ export const TextareaInputStory: Story = {
     placeholder: "",
     helpMessage: "Enter a comment",
     messageType: MessageTypes.error,
+    message: "",
     forceDisplayMessage: false,
     readOnly: false,
     disabled: false,

diff --git a/slash/react/src/Form/core/FieldForm.tsx b/slash/react/src/Form/core/FieldForm.tsx
@@ -4,7 +4,6 @@ import {
   cloneElement,
   Dispatch,
   isValidElement,
-  ReactElement,
   ReactNode,
   SetStateAction,
   useEffect,
@@ -148,7 +147,7 @@ export const eventWrapper = ({ wrapper, props }: EventWrapperProps) => ({
 });
 
 type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
-  child: ReactElement;
+  child: JSX.Element;
   classModifier: string;
   name: string;
   getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;
@@ -168,17 +167,14 @@ export const addPropsClone = ({
   name,
   getMessageClassModifierFn = FormClassManager.getMessageClassModifier,
   eventWrapperFn = eventWrapper,
-  ...rest
 }: AddPropsClone) => {
   const messageClassModifier = getMessageClassModifierFn(
     messageType,
     message,
     classModifier,
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const type: any = { ...rest };
-  const displayName = type?.displayName ?? name;
+  const displayName = child.type.displayName ?? name;
 
   switch (displayName) {
     case "HelpMessage":