fix: adjust textfield character counter position

nginformatica · May 3, 2024 · b9661bc · b9661bc
1 parent 0b16e46
commit b9661bc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.31.5",
+    "version": "0.31.6",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",

diff --git a/src/core/inputs/text-field/index.tsx b/src/core/inputs/text-field/index.tsx
@@ -303,6 +303,12 @@ export const TextField = ({
                                 ? classes.outlinedMultiline
                                 : ''
                     },
+                    endAdornment: characters && (
+                        <CharactersCount>
+                            {otherProps.value?.toString().length}/
+                            {otherProps.inputProps?.maxLength}
+                        </CharactersCount>
+                    ),
                     ...InputProps
                 }}
                 SelectProps={{
@@ -319,12 +325,6 @@ export const TextField = ({
                 {...otherProps}>
                 {options ? renderOptions(options, classes) : children}
             </MuiTextField>
-            {characters && (
-                <CharactersCount>
-                    {otherProps.value?.toString().length}/
-                    {otherProps.inputProps?.maxLength}
-                </CharactersCount>
-            )}
             {onHelperClick && (
                 <HelperBox
                     helperIcon={helperIcon}

diff --git a/src/core/inputs/text-field/styles.ts b/src/core/inputs/text-field/styles.ts
@@ -11,9 +11,9 @@ export const Helper = styled.div`
 `
 
 export const TextFieldWrapper = styled.div`
+    width: 100%;
     display: flex;
     flex-direction: rows;
-    width: 100%;
     align-items: center;
     button {
         display: none;
@@ -24,14 +24,13 @@ export const TextFieldWrapper = styled.div`
 `
 
 export const StaticTextFieldWrapper = styled.div`
+    width: 100%;
     display: flex;
     flex-direction: rows;
-    width: 100%;
     align-items: center;
 `
 
 export const CharactersCount = styled.span`
-    margin-left: -35px;
     color: ${grays.g3};
     font-size: 14px;
     font-family: