Merge pull request #475 from lidofinance/feature/ui-1340-input-compon…

…ent-prop-to-allow-input-error-tooltip-to-wrap feat: add error message wrap for inputs
lidofinance · Jan 26, 2024 · 82b101f · 82b101f
2 parents 4d9c9ca + 62bd9b8
commit 82b101f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/input/Input.tsx b/packages/input/Input.tsx
@@ -93,12 +93,12 @@ export const Input = forwardRef(
         </InputContentStyle>
 
         {hasErrorMessage && (
-          <InputMessageStyle $variant='error' $bordered>
+          <InputMessageStyle $variant='error' $bordered $wrap>
             {error}
           </InputMessageStyle>
         )}
         {hasWarningMessage && (
-          <InputMessageStyle $variant='warning' $bordered>
+          <InputMessageStyle $variant='warning' $bordered $wrap>
             {warning}
           </InputMessageStyle>
         )}

diff --git a/packages/input/InputStyles.ts b/packages/input/InputStyles.ts
@@ -293,6 +293,7 @@ const messageVariants = {
 export const InputMessageStyle = styled.span<{
   $variant: InputMessageVariants
   $bordered?: boolean
+  $wrap?: boolean
 }>`
   margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;
   left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;
@@ -303,7 +304,7 @@ export const InputMessageStyle = styled.span<{
   font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
   border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;
   padding: 6px 10px;
-  white-space: nowrap;
+  white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};
   overflow: hidden;
   box-sizing: border-box;
   text-overflow: ellipsis;