Fix input height

src/harmony/FormControl/FormControl.stories.tsx

@@ -73,6 +73,7 @@ export const AllControls = () => {
 export const Editor = () => {
     const [value, setValue] = React.useState<string>();
     const [name, setName] = React.useState<string>();
+    const [date, setDate] = React.useState<Date | string>();
 
     return (
         <>
@@ -86,10 +87,24 @@ export const Editor = () => {
                     onChange={(e) => setName(e.target.value)}
                 />
             </FormControl>
-            <FormControl style={{ marginBottom: 40, width: '500px' }}>
+            <FormControl style={{ width: '500px' }}>
                 <FormControlLabel>Code</FormControlLabel>
                 <FormControlEditor outline placeholder="Your decision here" value={value} onChange={setValue} />
             </FormControl>
+            <FormControl style={{ marginBottom: 40, width: '500px' }}>
+                <FormControlLabel>Date</FormControlLabel>
+                <FormControlInput
+                    placeholder="Enter the name"
+                    value={String(date)}
+                    type="date"
+                    size="m"
+                    outline
+                    onChange={(e) => setDate(e.target.value)}
+                />
+                {nullable(!date, () => (
+                    <FormControlError>Some error</FormControlError>
+                ))}
+            </FormControl>
         </>
     );
 };

src/harmony/Input/Input.module.css

@@ -1,25 +1,38 @@
 .Input {
-    border: none;
+    position: relative;
+    border: 1px solid transparent;
     display: flex;
     flex: 1;
     box-sizing: border-box;
     border-radius: var(--radius-m);
-    line-height: 1.5;
     transition: 200ms ease-in;
     transition-property: border, color, background;
     width: 100%;
     background: var(--input-fill-borderless);
     color: var(--text-primary);
+    padding-inline: 0;
+    padding-block: 0;
+
+    font: inherit;
 }
 
 .Input:focus-visible {
     background: var(--input-fill-focused-borderless);
 }
 
+.Input::-webkit-datetime-edit,
 .Input::placeholder {
     color: var(--text-ghost);
 }
 
+.Input_Filled::-webkit-datetime-edit {
+    color: var(--text-primary);
+}
+
+.Input_outline:hover {
+    border-color: var(--input-border-hovered);
+}
+
 .Input_outline.Input {
     border-color: var(--input-border);
     background: var(--input-fill);
@@ -42,7 +55,8 @@
     color: var(--primary-400);
 }
 
-.Input.Input_success::placeholder {
+.Input.Input_success::placeholder,
+.Input::-webkit-datetime-edit.Input_success {
     color: var(--primary-700);
 }
 
@@ -62,7 +76,8 @@
     color: var(--danger-400);
 }
 
-.Input.Input_danger::placeholder {
+.Input.Input_danger::placeholder,
+.Input::-webkit-datetime-edit.Input_success {
     color: var(--danger-700);
 }
 
@@ -89,10 +104,6 @@
     color: var(--text-disabled);
 }
 
-.Input_outline:hover {
-    border-color: var(--input-border-hovered);
-}
-
 .InputWrapper {
     position: relative;
     display: flex;
@@ -169,25 +180,86 @@
 
 .Input_size_xs {
     font-size: var(--font-size-xs);
-    padding: var(--gap-xs) var(--gap-sm);
-    min-height: 24px;
+    padding: 0 var(--gap-sm);
+    height: 24px;
+}
+
+.Input_size_xs:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="datetime"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+) {
+    padding-right: calc(1em + var(--gap-sm) * 2);
+}
+
+.InputWrapper_icon_right .Input.Input_size_xs:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="datetime"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+) {
+    padding-right: calc(1em + var(--gap-l) + var(--gap-sm) * 2);
 }
 
 .Input_size_s {
     font-size: var(--font-size-s);
-    padding: var(--gap-xs) var(--gap-sm);
-    min-height: 32px;
+    padding: 0 var(--gap-sm);
+    height: 32px;
+}
+
+.Input_size_s:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="datetime"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+) {
+    padding-right: calc(1em + var(--gap-sm) * 2);
+}
+
+.InputWrapper_icon_right .Input.Input_size_s:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="datetime"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+) {
+    padding-right: calc(1em + var(--gap-l) + var(--gap-sm) * 2);
 }
 
 .Input_size_m {
     font-size: var(--font-size-m);
-    padding: var(--gap-s) var(--gap-m);
-    min-height: 40px;
+    padding: 0 var(--gap-m);
+    height: 40px;
+}
+
+.Input_size_m:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="datetime"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+) {
+    padding-right: calc(1em + var(--gap-m) * 2);
 }
 
-.Input_outline {
-    border-width: 1px;
-    border-style: solid;
+.InputWrapper_icon_right .Input.Input_size_m:is(
+    [type="date"],
+    [type="datetime-local"],
+    [type="datetime"],
+    [type="month"],
+    [type="time"],
+    [type="week"]
+) {
+    padding-right: calc(1em + var(--gap-l) + var(--gap-m) * 2);
 }
 
 .Input:read-only {
@@ -198,4 +270,32 @@
 
 .Input:focus-visible ~ .Icon {
     color: var(--text-secondary);
+}
+
+.Input::-webkit-calendar-picker-indicator {
+    display: inline-flex;
+    color: transparent;
+    background-image: none;
+    background-size: 1em 1em;
+    background-color: var(--text-ghost);
+    margin: 0;
+    padding: 0;
+    margin-left: 0.25em;
+    cursor: pointer;
+    position: absolute;
+    right: 1em;
+}
+
+.InputWrapper_icon_right .Input::-webkit-calendar-picker-indicator {
+    right: 2em;
+}
+
+.Input::-webkit-calendar-picker-indicator {
+    -webkit-mask-image: url(../../../node_modules/teenyicons/outline/calendar.svg);
+    mask-image: url(../../../node_modules/teenyicons/outline/calendar.svg);
+}
+
+.Input[type="time"]::-webkit-calendar-picker-indicator {
+    -webkit-mask-image: url(../../../node_modules/teenyicons/outline/clock.svg);
+    mask-image: url(../../../node_modules/teenyicons/outline/clock.svg);
 }

src/harmony/Input/Input.stories.tsx

@@ -199,6 +199,14 @@ const InputWithKeyboardAction = () => {
     );
 };
 
+const DifferentInputTypes = () => (
+    <Layout>
+        <Input outline size="m" name="date" type="date" style={{ width: '200px' }} />
+        <Input outline size="m" name="month" type="month" />
+        <Input outline size="m" name="time" type="time" />
+    </Layout>
+);
+
 export const AllInputs = () => {
     return (
         <>
@@ -208,8 +216,9 @@ export const AllInputs = () => {
             <InputsWithIcons />
             <InputGroups />
             <InputWithKeyboardAction />
+            <DifferentInputTypes />
         </>
     );
 };
 
-export { Inputs, InputsSizes, InputsOutlined, InputsWithIcons, InputGroups };
+export { Inputs, InputsSizes, InputsOutlined, InputsWithIcons, InputGroups, DifferentInputTypes };

src/harmony/Input/Input.tsx

@@ -4,9 +4,11 @@ import React, {
     MutableRefObject,
     ReactNode,
     forwardRef,
+    useCallback,
     useEffect,
     useMemo,
     useRef,
+    useState,
 } from 'react';
 import cn from 'classnames';
 
@@ -60,12 +62,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             pointerEvents,
             forwardedRef,
             autoFocus,
+            type,
+            value,
+            onChange,
             ...rest
         },
         ref,
     ) => {
+        const isDateTimeInput = type?.includes('date') || type?.includes('time') || type?.includes('month');
+
         const inputRef = useRef<HTMLInputElement>(null);
         const forkedInputRef = useForkedRef(inputRef, ref);
+        const [hasDateTimeValue, setFlag] = useState(isDateTimeInput ? !!value : false);
 
         useEffect(() => {
             if (autoFocus) {
@@ -85,6 +93,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             return wrapper;
         }, [pointerEvents]);
 
+        const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+            (event) => {
+                if (isDateTimeInput) {
+                    setFlag(!!event.target.value);
+                }
+                onChange?.(event);
+            },
+            [onChange],
+        );
+
         return (
             <div
                 className={cn(
@@ -100,10 +118,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 <input
                     className={cn(s.Input, viewMap[view], sizeMap[size], brick ? brickMap[brick] : '', {
                         [s.Input_outline]: outline,
+                        [s.Input_Filled]: hasDateTimeValue,
                     })}
                     ref={forkedInputRef}
                     autoComplete={autoComplete}
                     autoFocus={autoFocus}
+                    value={value}
+                    onChange={handleChange}
+                    type={type}
                     {...rest}
                 />