@lets-events/react 12.4.1 → 12.5.1

package/src/components/FormFields/TextAreaFormField.tsx

@@ -20,7 +20,8 @@ export const TextAreaFormField = ({
   placeholder,
   validate,
   validationErrorMessage = "Este campo é obrigatório.",
-  simpleLayout = false,
+  maxLength,
+  top,
   ...props
 }: TextAreaFormFieldProps) => {
   const {
@@ -50,8 +51,9 @@ export const TextAreaFormField = ({
         {...register(name, validationRules)}
         placeholder={placeholder}
         color={haveError ? "error" : "default"}
-        simpleLayout={simpleLayout}
         aria-labelledby={`${name}-label`}
+        maxLength={maxLength}
+        top={top}
       />
       <ErrorFormMessage message={errorMsg} />
     </Flex>

package/src/components/TextareaField.tsx

@@ -1,10 +1,9 @@
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import { styled } from "../styles";
 import React, { ComponentProps, useRef, useState, useEffect } from "react";
 import { typographyValues } from "../types/typographyValues";
-import { Text } from "./Text";
 import { Badge } from "./Badge";
 import { Flex } from "./Flex";
+import { styled } from "../styles";
 
 export const TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -60,33 +59,19 @@ const TextareaContainer = styled("div", {
   },
 });
 
-const TextareaLimitIndicator = styled("div", {
-  padding: "$12 $16",
-  borderTop: "1px solid $neutral300",
-  width: "100%",
-  flex: 1,
-  display: "flex",
-  backgroundColor: "$dark50",
-  span: {
-    backgroundColor: "$neutral200",
-    color: "$neutral700",
-    borderRadius: "$2xs",
-    padding: "$4",
-  },
-});
-
 export type TextareaFieldProps = Omit<
   ComponentProps<typeof TextareaFieldStyle>,
   "color"
 > &
   ComponentProps<typeof TextareaContainer> & {
-    simpleLayout?: boolean;
-  };
+    maxLength?: number;
+    top?: string;
+  }
 
 export const TextareaField = React.forwardRef<
   HTMLTextAreaElement,
   TextareaFieldProps
->(({ maxLength, color, simpleLayout = false, ...props }, forwardedRef) => {
+>(({ maxLength, color, top = "-1.75rem", ...props }, forwardedRef) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [remaining, setRemaining] = useState(maxLength);
 
@@ -105,7 +90,7 @@ export const TextareaField = React.forwardRef<
 
   return (
     <Flex direction="column" align="end" style={{ position: 'relative' }}>
-      {maxLength && simpleLayout && (
+      {maxLength && (
         <Badge size="sm" color="grey" style={{ position: 'absolute', right: 0, top: '-1.75rem' }}>
           {remaining}
         </Badge>
@@ -125,13 +110,6 @@ export const TextareaField = React.forwardRef<
           maxLength={maxLength}
           {...props}
         />
-        {maxLength && !simpleLayout && (
-          <TextareaLimitIndicator>
-            <Text typography="badgeMedium">
-              {remaining}
-            </Text>
-          </TextareaLimitIndicator>
-        )}
       </TextareaContainer>
     </Flex>
   );