fix: 🐛 Correção do componente de Fildset

welllucky · Mar 13, 2024 · 7f772a3 · 7f772a3
1 parent 9eaa673
commit 7f772a3
Show file tree

Hide file tree

Showing 9 changed files with 377 additions and 343 deletions.
diff --git a/src/components/Fieldset/index.tsx b/src/components/Fieldset/index.tsx
@@ -1,5 +1,5 @@
 import { buildTestIds } from "@/utils/functions";
-import { Fieldset, Legend, LegendText } from "./styles";
+import { FieldSetContent, Fieldset, FieldsetContainer, Legend } from "./styles";
 
 export type FieldsetProps = {
   children: React.ReactNode;
@@ -21,20 +21,19 @@ const CustomFieldset = ({
   $justifyContent = "end"
 }: FieldsetProps) => {
   return (
-    <Fieldset
-      {...buildTestIds(`fieldset-container-${labelText}`)}
+    <FieldsetContainer
       width={width}
       height={height}
-      color={color}
-      $hasOverflow={$hasOverflow}
-      $justifyContent={$justifyContent}>
-      <Legend {...buildTestIds(`legend-container-${labelText}`)}>
-        <LegendText {...buildTestIds(`legend-text-${labelText}`)}>
-          {labelText}
-        </LegendText>
-      </Legend>
-      {children}
-    </Fieldset>
+      $hasOverflow={$hasOverflow}>
+      <Legend {...buildTestIds(`legend-text-${labelText}`)}>{labelText}</Legend>
+      <Fieldset
+        {...buildTestIds(`fieldset-container-${labelText}`)}
+        color={color}
+        $hasOverflow={$hasOverflow}
+        $justifyContent={$justifyContent}>
+        <FieldSetContent>{children}</FieldSetContent>
+      </Fieldset>
+    </FieldsetContainer>
   );
 };
 

diff --git a/src/components/Fieldset/styles.ts b/src/components/Fieldset/styles.ts
@@ -1,44 +1,73 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-export const Fieldset = styled.fieldset<{
-  width?: string;
-  height?: string;
+export const FieldSetContent = styled.div`
+  overflow: scroll;
+  width: 100%;
+  word-wrap: break-word;
+`;
+
+export const Fieldset = styled.div<{
   color?: string;
   $hasOverflow?: boolean;
   $justifyContent?: "start" | "center" | "end";
 }>`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: ${({ $justifyContent }) => $justifyContent || "center"};
-  padding: 16px;
-  width: ${({ width }) => width || "fit-content"};
-  height: ${({ height }) => height || "fit-content"};
   border-radius: 4px;
-  border: 1px solid ${({ theme, color }) => color || theme.colors.neutral["15"]};
-  text-overflow: ellipsis;
-  line-height: 112%;
-  overflow: ${({ $hasOverflow }) => ($hasOverflow ? "scroll" : "hidden")};
+  border: 1px solid ${({ theme, color }) => color ?? theme.colors.neutral["15"]};
+  line-height: 132%;
   color: ${({ theme }) => theme.colors.neutral["100"]};
-`;
+  padding: 1rem;
+  width: 100%;
+  overflow: hidden;
 
-export const Legend = styled.legend`
-  padding: 0px 4px 0px 4px;
+  ${({ $hasOverflow }) =>
+    !$hasOverflow &&
+    css`
+      ${FieldSetContent} {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    `};
 `;
 
-export const LegendText = styled.span`
+export const Legend = styled.span`
   font-style: normal;
   font-weight: 400;
-  font-size: 12px;
+  font-size: 1rem;
   line-height: 16px;
   letter-spacing: 0.4px;
   color: #2b4417;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
+  background-color: #f8fcf6;
+  display: inline-flex;
+  left: 16px;
+  padding: 0px 4px;
+  top: 8px;
+  position: relative;
 `;
 
 export const FieldsetTextContent = styled.p`
   width: 100%;
   height: fit-content;
 `;
+
+export const FieldsetContainer = styled.div<{
+  width?: string;
+  height?: string;
+  $hasOverflow?: boolean;
+}>`
+  width: ${({ width }) => width ?? "fit-content"};
+  height: fit-content;
+
+  ${Fieldset} {
+    max-height: ${({ height }) => height ?? "51px"};
+  }
+
+  ${FieldSetContent} {
+    ${({ $hasOverflow, height }) =>
+      $hasOverflow &&
+      height &&
+      css`
+        height: ${height};
+      `}
+  }
+`;
diff --git a/src/components/common/CustomSelect/index.tsx b/src/components/common/CustomSelect/index.tsx
@@ -1,62 +1,65 @@
-import { ChangeEventHandler, ReactNode } from "react";
-import { SelectComponent, CustomOption } from "./styles";
-import { CustomFieldset } from "@/components/Fieldset";
-
-interface OptionProps {
-  key: string;
-  value: string;
-  text: string;
-  isDisabled?: boolean;
-  isSelected?: boolean;
-}
-
-interface SelectProps {
-  labelText: string;
-  width?: string;
-  placeholder?: string;
-  height?: string;
-  onChange?: ChangeEventHandler<HTMLSelectElement>;
-  options?: OptionProps[];
-  isRequired?: boolean;
-  multiple?: boolean;
-  form?: string;
-  name?: string;
-  value?: string;
-}
-
-export const CustomSelect = ({
-  labelText,
-  placeholder = "selecione uma opção",
-  width = "100%",
-  height = "56px",
-  options,
-  onChange,
-  isRequired = false,
-  multiple = false,
-  form
-}: SelectProps) => {
-  return (
-    <CustomFieldset width={width} height={height} labelText={labelText}>
-      <SelectComponent
-        onChange={onChange}
-        required={isRequired}
-        name={placeholder}
-        multiple={multiple}
-        form={form}
-        defaultValue={placeholder}>
-        <CustomOption value="">
-          {placeholder ?? "selecione uma opção abaixo"}
-        </CustomOption>
-        {options?.map((option) => (
-          <CustomOption
-            key={option?.key}
-            value={option?.value}
-            selected={option?.isSelected as boolean}
-            disabled={option?.isDisabled as boolean}>
-            {option?.text}
-          </CustomOption>
-        ))}
-      </SelectComponent>
-    </CustomFieldset>
-  );
-};
+import { ChangeEventHandler, ReactNode } from "react";
+import { SelectComponent, CustomOption } from "./styles";
+import { CustomFieldset } from "@/components/Fieldset";
+
+interface OptionProps {
+  key: string;
+  value: string;
+  text: string;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+}
+
+interface SelectProps {
+  labelText: string;
+  width?: string;
+  placeholder?: string;
+  height?: string;
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
+  options?: OptionProps[];
+  isRequired?: boolean;
+  multiple?: boolean;
+  form?: string;
+  name?: string;
+  value?: string;
+}
+
+export const CustomSelect = ({
+  labelText,
+  placeholder = "selecione uma opção",
+  width = "100%",
+  height = "56px",
+  options,
+  onChange,
+  isRequired = false,
+  multiple = false,
+  form
+}: SelectProps) => {
+  return (
+    <CustomFieldset
+      width={width}
+      height={height}
+      labelText={labelText}>
+      <SelectComponent
+        onChange={onChange}
+        required={isRequired}
+        name={placeholder}
+        multiple={multiple}
+        form={form}
+        defaultValue={placeholder}>
+        <CustomOption value="">
+          {placeholder ?? "selecione uma opção abaixo"}
+        </CustomOption>
+        {options?.map((option) => (
+          <CustomOption
+            key={option?.key}
+            value={option?.value}
+            selected={option?.isSelected as boolean}
+            disabled={option?.isDisabled as boolean}>
+            {option?.text}
+          </CustomOption>
+        ))}
+      </SelectComponent>
+    </CustomFieldset>
+  );
+};
diff --git a/src/components/common/Inputs/CustomSelect/index.tsx b/src/components/common/Inputs/CustomSelect/index.tsx
@@ -43,7 +43,7 @@ export const CustomSelect = ({
       <CustomFieldset
         width={width}
         height={height}
-        labelText={labelText as unknown as string}>
+        labelText={labelText || ""}>
         <SelectComponent
           {...register(id, {
             ...registerOptions,
@@ -58,7 +58,9 @@ export const CustomSelect = ({
             }
           })}
           multiple={multiple}>
-          <CustomOption disabled={isRequired} value="">
+          <CustomOption
+            disabled={isRequired}
+            value="">
             {placeholder ?? "selecione uma opção abaixo"}
           </CustomOption>
           {options?.map((option) => (

diff --git a/src/components/common/Inputs/CustomSelect/styles.ts b/src/components/common/Inputs/CustomSelect/styles.ts
@@ -1,45 +1,42 @@
-import styled from "styled-components";
-
-export const SelectContainer = styled.div<{ $status: string }>`
-  width: inherit;
-  display: flex;
-
-  & > fieldset {
-    padding: 11px 12px;
-    border: ${({ $status }) =>
-      $status === "invalid"
-        ? "1px solid red"
-        : $status === "valid"
-          ? "1px solid #7ac143"
-          : "1px solid #79747e"};
-  }
-`;
-
-export const SelectComponent = styled.select`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  outline: 0;
-  border: none;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 24px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 7px;
-  letter-spacing: 0.5px;
-  resize: none;
-  background: transparent;
-  color: #77757b;
-`;
-
-export const CustomOption = styled.option`
-  display: flex;
-  align-items: center;
-  background-color: #ebf6e3;
-  padding-bottom: 10px;
-  width: 20px;
-  border-radius: 0;
-  border: none;
-  font-size: 16px;
-`;
+import styled from "styled-components";
+
+export const SelectContainer = styled.div<{ $status: string }>`
+  width: inherit;
+  display: flex;
+
+  & > div > div {
+    border: ${({ $status }) =>
+      $status === "invalid"
+        ? "1px solid red"
+        : $status === "valid"
+          ? "1px solid #7ac143"
+          : "1px solid #79747e"};
+  }
+`;
+
+export const SelectComponent = styled.select`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  border: none;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 24px;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.5px;
+  resize: none;
+  background: transparent;
+`;
+
+export const CustomOption = styled.option`
+  display: flex;
+  align-items: center;
+  background-color: #ebf6e3;
+  padding-bottom: 10px;
+  width: 20px;
+  border-radius: 0;
+  border: none;
+  font-size: 16px;
+`;
diff --git a/src/components/common/Inputs/CustomTextArea/index.tsx b/src/components/common/Inputs/CustomTextArea/index.tsx
@@ -25,8 +25,10 @@ export const CustomTextArea = ({
   return (
     <TextAreaContainer $status={$status}>
       <CustomFieldset
-        width={width as string}
-        labelText={labelText as string}>
+        width={width}
+        height={height}
+        $hasOverflow
+        labelText={labelText || ""}>
         <TextArea
           {...register(id, {
             ...registerOptions,
@@ -40,8 +42,8 @@ export const CustomTextArea = ({
               if (registerOptions?.onChange) registerOptions.onChange(e);
             }
           })}
-          height={height as string}
-          width={width as string}
+          height="100%"
+          width="100%"
           placeholder={placeholder}
           value={value}
         />