feat(inputtext): add lineHeight in inputText

ZopaPublic · Jul 25, 2024 · 4300892 · 4300892
1 parent a572969
commit 4300892
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/components/atoms/InputText/InputText.tsx b/src/components/atoms/InputText/InputText.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { colors } from '../../../constants';
+import { colors, typography } from '../../../constants';
 import { getInputTextColor, getBorderColorByStatus } from '../../../helpers/utils';
 import { InputProps } from '../../types';
 import { useThemeContext, AppThemeProps } from '../../styles/Theme';
@@ -47,6 +47,8 @@ const Input = styled.input<InputThemeProps>`
   padding-right: ${({ endIcon }: InputThemeProps) => !!endIcon && '60px'};
   font-size: ${({ theme, fontSize = 'body' }: InputThemeProps) => theme.typography.text.sizes[fontSize]};
   font-weight: ${({ theme, fontWeight = 'regular' }: InputThemeProps) => theme.typography.weights[fontWeight]};
+  line-height: ${({ theme, fontLineHeight = 'body' }: InputThemeProps) =>
+    theme.typography.lineHeight[fontLineHeight] || typography.sizes.lineHeight.body};
   color: ${getInputTextColor};
   border: 1px solid ${getBorderColorByStatus};
   box-shadow: 0 0 4px 0 transparent;

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -117,6 +117,7 @@ export interface InputTheme {
   padding: string;
   labelLineHeight?: string;
   labelFontWeight: number;
+  fontLineHeight?: string;
   placeholderColor: string;
   borderRadius: string;
   boxShadow: string;

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -36,6 +36,8 @@ export interface InputProps extends InputStatus, InputHTMLAttributes<HTMLInputEl
   fontWeight?: keyof AppTheme['typography']['weights'];
 
   fontSize?: keyof AppTheme['typography']['text']['sizes'];
+
+  fontLineHeight?: keyof AppTheme['typography']['lineHeight'];
 }
 
 export interface SelectProps extends InputStatus, InputHTMLAttributes<HTMLSelectElement> {