Fix height of the DateInput component (#1942)

sumup-oss · Feb 9, 2023 · fd62d2f · fd62d2f · vercel · Feb 9, 2023
1 parent fbaa82b
commit fd62d2f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/stale-lemons-join.md b/.changeset/stale-lemons-join.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the height of the `DateInput` component.
diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx
@@ -14,9 +14,9 @@
  */
 
 import { forwardRef, useState, useEffect } from 'react';
+import { css } from '@emotion/react';
 import { PatternFormat } from 'react-number-format';
 
-import styled from '../../styles/styled';
 import { Input, InputProps } from '../Input/Input';
 
 export interface DateInputProps
@@ -34,7 +34,7 @@ export interface DateInputProps
   defaultValue?: string | number;
 }
 
-const BaseInput = styled(Input)`
+const dateInputStyles = css`
   height: 48px;
   min-width: 8ch;
 `;
@@ -81,9 +81,10 @@ export const DateInput = forwardRef(
     }
 
     return (
-      <BaseInput
+      <Input
         {...props}
         ref={ref}
+        inputStyles={dateInputStyles}
         type="date"
         pattern="\d{4}-\d{2}-\d{2}"
         placeholder={placeholder}