Merge pull request #138 from SwitchDreams/fix/size-of-support-message

♻️ Refactor ErrorMessage to SupportOrErrorMessage
SwitchDreams · Oct 15, 2024 · cd577fd · cd577fd
2 parents cbde741 + c0830a9
commit cd577fd
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 29 deletions.
diff --git a/src/components/CheckBox/index.tsx b/src/components/CheckBox/index.tsx
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { HTMLProps } from "react";
-import ErrorMessage from "src/internal/ErrorMessage";
 import FormLabel from "src/internal/FormLabel";
+import SupportOrErrorMessage from "src/internal/SupportOrErrorMessage";
 import { twMerge } from "tailwind-merge";
 
 export interface ICheckBox {
@@ -139,7 +139,7 @@ export const CheckBox = ({
           </svg>
         </label>
       </div>
-      <ErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
+      <SupportOrErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
     </div>
   );
 };
diff --git a/src/components/RadioButton/index.tsx b/src/components/RadioButton/index.tsx
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { ChangeEvent, HTMLProps, useState } from "react";
-import ErrorMessage from "src/internal/ErrorMessage";
 import FormLabel from "src/internal/FormLabel";
+import SupportOrErrorMessage from "src/internal/SupportOrErrorMessage";
 import { twMerge } from "tailwind-merge";
 
 export interface IRadioButton {
@@ -75,7 +75,7 @@ export const RadioButton = ({
         ></input>
         <FormLabel label={label} name={name} className={labelClassName} />
       </div>
-      <ErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
+      <SupportOrErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
     </>
   );
 };
diff --git a/src/components/Select/AsyncSelect.tsx b/src/components/Select/AsyncSelect.tsx
@@ -1,7 +1,7 @@
 import { ElementType } from "react";
 import ReactAsyncSelect, { AsyncProps } from "react-select/async";
-import ErrorMessage from "src/internal/ErrorMessage";
 import FormLabel from "src/internal/FormLabel";
+import SupportOrErrorMessage from "src/internal/SupportOrErrorMessage";
 
 import { DropdownIndicator, selectClassName, selectStyles } from "./styles";
 
@@ -62,7 +62,7 @@ export const AsyncSelect = ({
         classNames={selectClassName({ size, error, className })}
         {...rest}
       />
-      {<ErrorMessage error={error} supportText={supportText} errorMsg={errorMsg} />}
+      {<SupportOrErrorMessage error={error} supportText={supportText} errorMsg={errorMsg} />}
     </>
   );
 };
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,7 +1,7 @@
 import { ElementType } from "react";
 import ReactSelect, { Props } from "react-select";
-import ErrorMessage from "src/internal/ErrorMessage";
 import FormLabel from "src/internal/FormLabel";
+import SupportOrErrorMessage from "src/internal/SupportOrErrorMessage";
 
 import { Control, DropdownIndicator, selectClassName, selectStyles } from "./styles";
 
@@ -61,7 +61,7 @@ export const Select = ({
         classNames={selectClassName({ size, error, className })}
         {...rest}
       />
-      {<ErrorMessage error={error} supportText={supportText} errorMsg={errorMsg} />}
+      {<SupportOrErrorMessage error={error} supportText={supportText} errorMsg={errorMsg} />}
     </>
   );
 };
diff --git a/src/components/SelectBox/index.tsx b/src/components/SelectBox/index.tsx
@@ -10,7 +10,7 @@ import {
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
 import { cva, type VariantProps } from "class-variance-authority";
 import { ElementType, Fragment, ReactNode, useEffect, useState } from "react";
-import ErrorMessage from "src/internal/ErrorMessage";
+import SupportOrErrorMessage from "src/internal/SupportOrErrorMessage";
 import { twMerge } from "tailwind-merge";
 
 type Options = {
@@ -221,7 +221,7 @@ function SelectBox({
           </>
         )}
       </Listbox>
-      <ErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
+      <SupportOrErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
     </div>
   );
 }

diff --git a/src/components/TextField/TextFieldBase.tsx b/src/components/TextField/TextFieldBase.tsx
@@ -1,7 +1,7 @@
 import { cva, VariantProps } from "class-variance-authority";
 import React, { ElementType, forwardRef } from "react";
 import InputMask from "react-input-mask";
-import ErrorMessage from "src/internal/ErrorMessage";
+import SupportOrErrorMessage from "src/internal/SupportOrErrorMessage";
 import { twMerge } from "tailwind-merge";
 
 import FormLabel from "../../internal/FormLabel";
@@ -148,7 +148,7 @@ export const TextFieldBase = /* @__PURE__ */ forwardRef(
             />
           )}
         </div>
-        <ErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
+        <SupportOrErrorMessage error={error} errorMsg={errorMsg} supportText={supportText} />
       </div>
     );
   },

diff --git a/src/internal/ErrorMessage.tsx b/src/internal/ErrorMessage.tsx
diff --git a/src/internal/SupportOrErrorMessage.tsx b/src/internal/SupportOrErrorMessage.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Text } from "src/components/Text";
+
+interface ErrorMsgProps {
+  error: boolean;
+  supportText?: string;
+  errorMsg?: string;
+}
+
+export const SupportOrErrorMessage = ({ error, supportText, errorMsg }: ErrorMsgProps) => {
+  return error && errorMsg ? (
+    <Text size="xs" as="span" className="text-error-500">
+      {errorMsg}
+    </Text>
+  ) : (
+    supportText && (
+      <Text size="xs" as="span" className="text-coolGray-600">
+        {supportText}
+      </Text>
+    )
+  );
+};
+
+export default SupportOrErrorMessage;