feat(textinput): add margin-top to TextInput

guardian · Sep 30, 2021 · 7417208 · 7417208
1 parent 5b682af
commit 7417208
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/core/components/text-input/TextInput.tsx b/src/core/components/text-input/TextInput.tsx
@@ -10,6 +10,8 @@ import {
 	textInput,
 	errorInput,
 	successInput,
+	supportingTextMargin,
+	labelMargin,
 } from './styles';
 import {
 	visuallyHidden as _visuallyHidden,
@@ -114,6 +116,7 @@ export const TextInput = ({
 				css={(theme) => [
 					width ? widths[width] : widthFluid,
 					textInput(theme.textInput && theme),
+					supporting ? supportingTextMargin : labelMargin,
 					error ? errorInput(theme.textInput && theme) : '',
 					!error && success
 						? successInput(theme.textInput && theme)

diff --git a/src/core/components/text-input/styles.ts b/src/core/components/text-input/styles.ts
@@ -9,11 +9,13 @@ import { resets } from '@guardian/src-foundations/utils';
 export const errorInput = ({ textInput } = textInputDefault) => css`
 	border: 4px solid ${textInput.borderError};
 	color: ${textInput.textError};
+	margin-top: 0;
 `;
 
 export const successInput = ({ textInput } = textInputDefault) => css`
 	border: 4px solid ${textInput.borderSuccess};
 	color: ${textInput.textSuccess};
+	margin-top: 0;
 `;
 
 export const textInput = (theme = textInputDefault) => {
@@ -49,6 +51,14 @@ export const textInput = (theme = textInputDefault) => {
 	`;
 };
 
+export const labelMargin = css`
+	margin-top: ${space[1]}px;
+`;
+
+export const supportingTextMargin = css`
+	margin-top: 6px;
+`;
+
 export const widthFluid = css`
 	width: 100%;
 `;