[Bugfix] Align textinput and searchinput styles with design

src/components/Form/TextInput.tsx

@@ -104,9 +104,11 @@ class BaseTextInput extends Component<TextInputProps> {
             />
             {children}
           </HtmlDiv>
-          <HtmlSpan className={statusTextSpanClassName} id={generatedId}>
-            {statusText}
-          </HtmlSpan>
+          {statusText && (
+            <HtmlSpan className={statusTextSpanClassName} id={generatedId}>
+              {statusText}
+            </HtmlSpan>
+          )}
         </HtmlDiv>
       </HtmlLabel>
     );

src/core/Form/SearchInput/SearchInput.baseStyles.tsx

@@ -9,14 +9,17 @@ export const baseStyles = withSuomifiTheme(
         position: relative;
       }
       &_input {
+        min-height: 40px;
         padding-right: ${math(
           `${theme.spacing.insetXl} * 2 + ${theme.spacing.insetM}`,
         )};
       }
       &_icon {
         position: absolute;
+        width: 18px;
+        height: 18px;
         top: 50%;
-        right: ${theme.spacing.insetXl};
+        right: ${theme.spacing.insetL};
         margin-top: -0.5em;
       }
     }

src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap

@@ -73,30 +73,6 @@ exports[`calling render with the same component on the same container does not r
   max-width: 100%;
 }
 
-.c7 {
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  box-sizing: border-box;
-  font: 100% inherit;
-  line-height: 1;
-  text-align: left;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  vertical-align: baseline;
-  color: inherit;
-  background: none;
-  cursor: inherit;
-  display: inline;
-  max-width: 100%;
-  word-wrap: normal;
-  word-break: normal;
-  white-space: normal;
-}
-
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -131,7 +107,21 @@ exports[`calling render with the same component on the same container does not r
 }
 
 .c2 .fi-text-input_label-p {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+  color: hsl(0,0%,16%);
 }
 
 .c2 .fi-text-input_container > input:focus {
@@ -183,6 +173,8 @@ exports[`calling render with the same component on the same container does not r
   font-size: 16px;
   line-height: 1.5;
   font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
 }
 
 .c2 .fi-text-input_input {
@@ -208,13 +200,32 @@ exports[`calling render with the same component on the same container does not r
   line-height: 1;
   background-color: hsl(0,0%,100%);
   width: 100%;
+  min-height: 40px;
+  padding-left: 10px;
+}
+
+.c2 .fi-text-input_input::-webkit-input-placeholder {
+  font-style: italic;
+}
+
+.c2 .fi-text-input_input::-moz-placeholder {
+  font-style: italic;
+}
+
+.c2 .fi-text-input_input:-ms-input-placeholder {
+  font-style: italic;
+}
+
+.c2 .fi-text-input_input::placeholder {
+  font-style: italic;
 }
 
 .c2.fi-text-input--error .fi-text-input_input {
   border-color: hsl(3,59%,48%);
 }
 
 .c2.fi-text-input--error .fi-text-input_statusText_span {
+  margin-top: 5px;
   color: hsl(3,59%,48%);
 }
 
@@ -232,13 +243,16 @@ exports[`calling render with the same component on the same container does not r
 }
 
 .c2 .fi-search-input_input {
+  min-height: 40px;
   padding-right: 40px;
 }
 
 .c2 .fi-search-input_icon {
   position: absolute;
+  width: 18px;
+  height: 18px;
   top: 50%;
-  right: 16px;
+  right: 10px;
   margin-top: -0.5em;
 }
 
@@ -277,10 +291,6 @@ exports[`calling render with the same component on the same container does not r
         />
       </svg>
     </div>
-    <span
-      class="c7 fi-text-input_statusText_span"
-      id="test-id-statusText"
-    />
   </div>
 </label>
 `;

src/core/Form/TextInput/TextInput.baseStyles.tsx

@@ -1,11 +1,13 @@
 import { css } from 'styled-components';
 import { withSuomifiTheme, TokensAndTheme } from '../../theme';
-import { input, inputContainer } from '../../theme/reset';
+import { input, inputContainer, font } from '../../theme/reset';
 
 export const baseStyles = withSuomifiTheme(
   ({ theme }: TokensAndTheme) => css`
   & .fi-text-input_label-p {
-    margin-bottom: ${theme.spacing.insetXl};
+    margin-bottom: ${theme.spacing.insetL};
+    ${font({ theme })('actionElementInnerTextBold')};
+    color: ${theme.colors.blackBase};
   }
 
   & .fi-text-input_container {
@@ -18,20 +20,28 @@ export const baseStyles = withSuomifiTheme(
 
     & .fi-text-input_statusText_span {
       ${theme.typography.bodySemiBoldSmall}
+      font-size: 14px;
+      line-height: 20px;
     }
   }
 
   & .fi-text-input_input {
     ${input({ theme })}
     background-color: ${theme.colors.whiteBase};
     width: 100%;
-  }
+    min-height:40px;
+    padding-left: ${theme.spacing.insetL};
+    ::placeholder{
+      font-style: italic;
+    }
+    }
 
   &.fi-text-input--error {
     & .fi-text-input_input {
       border-color: ${theme.colors.alertBase};
     }
     & .fi-text-input_statusText_span {
+      margin-top: ${theme.spacing.xxs};
       color: ${theme.colors.alertBase};
     }
   }

src/core/Form/TextInput/TextInput.md

@@ -33,7 +33,7 @@ import { TextInput } from 'suomifi-ui-components';
 ```
 
 ```js
-import { TextInput } from 'suomifi-ui-components';
+import { TextInput, Button } from 'suomifi-ui-components';
 
 const [errorState, setErrorState] = React.useState(false);
 const statusText = errorState
@@ -48,8 +48,8 @@ const status = errorState ? 'error' : 'default';
     status={status}
   />
 
-  <button onClick={() => setErrorState(!errorState)}>
+  <Button onClick={() => setErrorState(!errorState)}>
     Toggle error state
-  </button>
+  </Button>
 </>;
 ```

src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap

@@ -73,30 +73,6 @@ exports[`calling render with the same component on the same container does not r
   max-width: 100%;
 }
 
-.c6 {
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  box-sizing: border-box;
-  font: 100% inherit;
-  line-height: 1;
-  text-align: left;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  vertical-align: baseline;
-  color: inherit;
-  background: none;
-  cursor: inherit;
-  display: inline;
-  max-width: 100%;
-  word-wrap: normal;
-  word-break: normal;
-  white-space: normal;
-}
-
 .c3 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -126,7 +102,21 @@ exports[`calling render with the same component on the same container does not r
 }
 
 .c2 .fi-text-input_label-p {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 600;
+  color: hsl(0,0%,16%);
 }
 
 .c2 .fi-text-input_container > input:focus {
@@ -178,6 +168,8 @@ exports[`calling render with the same component on the same container does not r
   font-size: 16px;
   line-height: 1.5;
   font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
 }
 
 .c2 .fi-text-input_input {
@@ -203,13 +195,32 @@ exports[`calling render with the same component on the same container does not r
   line-height: 1;
   background-color: hsl(0,0%,100%);
   width: 100%;
+  min-height: 40px;
+  padding-left: 10px;
+}
+
+.c2 .fi-text-input_input::-webkit-input-placeholder {
+  font-style: italic;
+}
+
+.c2 .fi-text-input_input::-moz-placeholder {
+  font-style: italic;
+}
+
+.c2 .fi-text-input_input:-ms-input-placeholder {
+  font-style: italic;
+}
+
+.c2 .fi-text-input_input::placeholder {
+  font-style: italic;
 }
 
 .c2.fi-text-input--error .fi-text-input_input {
   border-color: hsl(3,59%,48%);
 }
 
 .c2.fi-text-input--error .fi-text-input_statusText_span {
+  margin-top: 5px;
   color: hsl(3,59%,48%);
 }
 
@@ -244,10 +255,6 @@ exports[`calling render with the same component on the same container does not r
         type="text"
       />
     </div>
-    <span
-      class="c6 fi-text-input_statusText_span"
-      id="test-id-statusText"
-    />
   </div>
 </label>
 `;