text field: fix date types with labels (#531)

frontend/packages/core/src/Input/stories/text-field.stories.tsx

@@ -26,3 +26,10 @@ WithLabel.args = {
   placeholder: "",
   label: "TextField",
 };
+
+export const WithType = Template.bind({});
+WithType.args = {
+  ...Primary.args,
+  label: "Date",
+  type: "datetime-local",
+};

frontend/packages/core/src/Input/text-field.tsx

@@ -29,6 +29,7 @@ const TextField: React.FC<TextFieldProps & MuiTextFieldProps> = ({
   onReturn,
   maxWidth,
   placeholder,
+  type,
   ...props
 }) => {
   const onKeyDown = (
@@ -46,7 +47,9 @@ const TextField: React.FC<TextFieldProps & MuiTextFieldProps> = ({
     color: "secondary",
   } as Partial<InputLabelProps>;
 
-  if (placeholder) {
+  const placeholderInputTypes = ["date", "datetime-local", "month", "time", "week"];
+  const hasInputPlaceholder = placeholderInputTypes.indexOf(type) !== -1;
+  if (placeholder || hasInputPlaceholder) {
     inputLabelProps.shrink = true;
   }
 
@@ -59,6 +62,7 @@ const TextField: React.FC<TextFieldProps & MuiTextFieldProps> = ({
       onFocus={onChange}
       onBlur={onChange}
       placeholder={placeholder}
+      type={type}
       {...props}
     />
   );