feat: update FormControl to harmony style

src/components/CriteriaForm/CriteriaForm.module.css

@@ -0,0 +1,20 @@
+.SubmitButton {
+    margin-left: auto;
+}
+
+.FormRow {
+    display: flex;
+    flex-wrap: nowrap;
+    margin-top: var(--gap-sm);
+}
+
+.FormControl {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-xs);
+}
+
+/* Order of styles on page: SC, CSS Modules */
+.GoalBadge.GoalBadge {
+    padding: 0;
+}

src/components/CriteriaForm/CriteriaForm.tsx

@@ -1,20 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-    AutoCompleteRadioGroup,
-    nullable,
-    Form,
-    Text,
-    FormControl,
-    FormControlLabel,
-    FormControlInput,
-    FormControlError,
-} from '@taskany/bricks';
-import { gapSm, gray7 } from '@taskany/colors';
+import { AutoCompleteRadioGroup, nullable, Form, Text } from '@taskany/bricks';
+import { gray7 } from '@taskany/colors';
 import { ComponentProps, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import styled from 'styled-components';
 import { z } from 'zod';
-import { Button } from '@taskany/bricks/harmony';
+import { Button, FormControl, FormControlLabel, FormControlInput, FormControlError } from '@taskany/bricks/harmony';
 
 import { GoalSelect } from '../GoalSelect';
 import { GoalBadge } from '../GoalBadge';
@@ -23,10 +13,7 @@ import { AddInlineTrigger } from '../AddInlineTrigger';
 import { StateDot } from '../StateDot';
 
 import { tr } from './CriteriaForm.i18n';
-
-const StyledGoalBadge = styled(GoalBadge)`
-    padding: 0;
-`;
+import s from './CriteriaForm.module.css';
 
 interface SuggestItem {
     id: string;
@@ -149,38 +136,26 @@ interface WeightFieldProps extends Pick<ComponentProps<typeof FormControlInput>,
     maxValue: number;
 }
 
-const StyledFormRow = styled.div`
-    display: flex;
-    flex-wrap: nowrap;
-    margin-top: ${gapSm};
-`;
-
-const StyledButton = styled(Button)`
-    margin-left: auto;
-`;
-
-const StyledFormControlInput = styled(FormControlInput)`
-    width: 3ch;
-`;
-
 const CriteriaWeightField = forwardRef<HTMLInputElement, WeightFieldProps>(
     ({ error, maxValue, value, onChange, name }, ref) => {
         return (
-            <FormControl error={error?.message != null} variant="outline" inline>
+            <FormControl className={s.FormControl}>
                 <FormControlLabel color={gray7}>{tr('Weight')}</FormControlLabel>
-                <StyledFormControlInput
+                <FormControlInput
+                    outline
+                    size="xs"
                     value={value}
                     onChange={onChange}
                     ref={ref}
                     autoFocus
-                    autoComplete="off"
                     name={name}
                     disabled={maxPossibleWeight === maxValue}
-                >
-                    {nullable(error, (err) => (
-                        <FormControlError error={err} />
-                    ))}
-                </StyledFormControlInput>
+                    maxLength={3}
+                    style={{ width: error ? '10ch' : '7ch' }}
+                />
+                {nullable(error, (err) => (
+                    <FormControlError error={err} />
+                ))}
                 <Text size="s" color={gray7}>
                     {tr.raw('Weight out of', {
                         upTo: maxPossibleWeight - maxValue,
@@ -369,7 +344,9 @@ export const CriteriaForm = ({
                 items={items}
                 value={value}
                 onClick={handleSelectItem}
-                renderItem={(props) => <StyledGoalBadge title={props.item.title} color={props.item.stateColor} />}
+                renderItem={(props) => (
+                    <GoalBadge title={props.item.title} color={props.item.stateColor} className={s.GoalBadge} />
+                )}
             >
                 <>
                     <Controller
@@ -401,7 +378,7 @@ export const CriteriaForm = ({
                         />
                     ))}
 
-                    <StyledFormRow>
+                    <div className={s.FormRow}>
                         {nullable(needShowWeightField, () => (
                             <Controller
                                 name="weight"
@@ -428,8 +405,13 @@ export const CriteriaForm = ({
                             />
                         ))}
 
-                        <StyledButton type="submit" text={isEditMode ? tr('Save') : tr('Add')} view="primary" />
-                    </StyledFormRow>
+                        <Button
+                            type="submit"
+                            text={isEditMode ? tr('Save') : tr('Add')}
+                            view="primary"
+                            className={s.SubmitButton}
+                        />
+                    </div>
                 </>
             </GoalSelect>
 

src/components/EstimateDate/EstimateDate.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormControlInput } from '@taskany/bricks';
+import { FormControl, FormControlInput } from '@taskany/bricks/harmony';
 import { IconXSolid } from '@taskany/icons';
 import { useState, useCallback, useEffect } from 'react';
 import InputMask from 'react-input-mask';
@@ -93,8 +93,13 @@ export const EstimateDate: React.FC = () => {
                 >
                     {/* @ts-ignore incorrect type in react-input-mask */}
                     {(props) => (
-                        <FormControl variant="outline">
-                            <FormControlInput iconRight={<IconXSolid size="xxs" onClick={onRemoveDate} />} {...props} />
+                        <FormControl>
+                            <FormControlInput
+                                outline
+                                size="xs"
+                                iconRight={<IconXSolid size="xxs" onClick={onRemoveDate} />}
+                                {...props}
+                            />
                         </FormControl>
                     )}
                 </InputMask>

src/components/FeedbackCreateForm/FeedbackCreateForm.tsx

@@ -1,19 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-    Form,
-    FormActions,
-    FormAction,
-    FormTextarea,
-    ModalContent,
-    FormControl,
-    FormControlInput,
-    nullable,
-    FormControlError,
-} from '@taskany/bricks';
+import { Form, FormActions, FormAction, FormTextarea, ModalContent, nullable } from '@taskany/bricks';
 import * as Sentry from '@sentry/nextjs';
-import { Button } from '@taskany/bricks/harmony';
+import { Button, FormControl, FormControlInput, FormControlError } from '@taskany/bricks/harmony';
 
 import { errorsProvider } from '../../utils/forms';
 import { createFeedbackSchema, CreateFeedback } from '../../schema/feedback';
@@ -64,8 +54,13 @@ const FeedbackCreateForm: React.FC = () => {
     return (
         <ModalContent>
             <Form disabled={formBusy} onSubmit={handleSubmit(onPending, onError)}>
-                <FormControl flat="bottom" size="l">
-                    <FormControlInput {...register('title')} placeholder={tr('Feedback title')} />
+                <FormControl>
+                    <FormControlInput
+                        brick="bottom"
+                        size="m"
+                        {...register('title')}
+                        placeholder={tr('Feedback title')}
+                    />
                     {nullable(errorsResolver('title'), (error) => (
                         <FormControlError error={error} />
                     ))}

src/components/FilterAutoCompleteInput/FilterAutoCompleteInput.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent, ComponentProps, ReactNode, useCallback } from 'react';
 import styled from 'styled-components';
-import { FormControl, FormControlError, FormControlInput, nullable } from '@taskany/bricks';
+import { nullable } from '@taskany/bricks';
+import { FormControl, FormControlError, FormControlInput } from '@taskany/bricks/harmony';
 import { IconSearchOutline } from '@taskany/icons';
 import { gapS } from '@taskany/colors';
 
@@ -31,8 +32,9 @@ export const FilterAutoCompleteInput: React.FC<FilterAutoCompleteInputProps> = (
     );
 
     return (
-        <StyledFormControl variant="outline" error={error?.message != null}>
+        <StyledFormControl>
             <FormControlInput
+                outline
                 autoFocus
                 placeholder={placeholder}
                 iconLeft={icon}

src/components/FilterCreateForm/FilterCreateForm.tsx

@@ -1,19 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-    Form,
-    FormActions,
-    FormAction,
-    FormTextarea,
-    ModalContent,
-    FormControl,
-    FormControlInput,
-    FormControlError,
-    nullable,
-} from '@taskany/bricks';
+import { Form, FormActions, FormTextarea, FormAction, ModalContent, nullable } from '@taskany/bricks';
 import * as Sentry from '@sentry/nextjs';
-import { Button } from '@taskany/bricks/harmony';
+import { Button, FormControl, FormControlInput, FormControlError } from '@taskany/bricks/harmony';
 
 import { errorsProvider } from '../../utils/forms';
 import { createFilterSchema, CreateFilter } from '../../schema/filter';
@@ -71,8 +61,13 @@ const FilterCreateForm: React.FC<FilterCreateFormProps> = ({ mode, params, onSub
         <>
             <ModalContent>
                 <Form disabled={formBusy} onSubmit={handleSubmit(onPending, onError)}>
-                    <FormControl brick="right" flat="bottom" size="l">
-                        <FormControlInput {...register('title')} placeholder={tr('Preset title')} />
+                    <FormControl>
+                        <FormControlInput
+                            brick="bottom"
+                            size="m"
+                            {...register('title')}
+                            placeholder={tr('Preset title')}
+                        />
                         {nullable(errorsResolver('title'), (error) => (
                             <FormControlError error={error} />
                         ))}

src/components/FlowComboBox.tsx

@@ -1,8 +1,8 @@
 import React, { ChangeEvent, useState } from 'react';
 import { Flow } from '@prisma/client';
-import { ComboBox, MenuItem, FormControl, FormControlInput } from '@taskany/bricks';
+import { ComboBox, MenuItem } from '@taskany/bricks';
 import { IconGitPullOutline } from '@taskany/icons';
-import { Button } from '@taskany/bricks/harmony';
+import { Button, FormControl, FormControlInput } from '@taskany/bricks/harmony';
 
 import { trpc } from '../utils/trpcClient';
 
@@ -44,8 +44,9 @@ export const FlowComboBox = React.forwardRef<HTMLDivElement, FlowComboBoxProps>(
                     />
                 )}
                 renderInput={(props) => (
-                    <FormControl variant="outline">
+                    <FormControl>
                         <FormControlInput
+                            outline
                             autoFocus
                             disabled={props.disabled}
                             placeholder={placeholder}

src/components/GoalDeleteModal/GoalDeleteModal.tsx

@@ -1,18 +1,8 @@
 import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { danger0 } from '@taskany/colors';
-import {
-    Text,
-    Form,
-    FormAction,
-    FormActions,
-    FormTitle,
-    ModalContent,
-    ModalHeader,
-    FormControl,
-    FormControlInput,
-} from '@taskany/bricks';
-import { Button } from '@taskany/bricks/harmony';
+import { Text, Form, FormAction, FormActions, FormTitle, ModalContent, ModalHeader } from '@taskany/bricks';
+import { Button, FormControl, FormControlInput } from '@taskany/bricks/harmony';
 
 import { dispatchModalEvent, ModalEvent } from '../../utils/dispatchModal';
 import { goalDeleteForm, goalDeleteShortIdInput, goalDeleteSubmitButton } from '../../utils/domObjects';
@@ -71,13 +61,14 @@ export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ shortId, onCon
                 <br />
 
                 <Form {...goalDeleteForm.attr}>
-                    <FormControl flat="bottom" size="l">
+                    <FormControl>
                         <FormControlInput
+                            brick="bottom"
                             placeholder={shortId}
-                            autoComplete="off"
                             autoFocus
                             onChange={onConfirmationInputChange}
                             ref={ref}
+                            size="m"
                             {...goalDeleteShortIdInput.attr}
                         />
                     </FormControl>

src/components/GoalForm/GoalForm.tsx

@@ -3,20 +3,9 @@ import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Schema, z } from 'zod';
 import { State, Tag as TagModel } from '@prisma/client';
-import {
-    Form,
-    FormActions,
-    FormAction,
-    ModalContent,
-    Tag,
-    TagCleanButton,
-    nullable,
-    FormControl,
-    FormControlInput,
-    FormControlError,
-} from '@taskany/bricks';
+import { Form, FormActions, FormAction, ModalContent, Tag, TagCleanButton, nullable } from '@taskany/bricks';
 import { IconCalendarTickOutline } from '@taskany/icons';
-import { Button } from '@taskany/bricks/harmony';
+import { Button, FormControl, FormControlInput, FormControlError } from '@taskany/bricks/harmony';
 
 import { FormEditor } from '../FormEditor/FormEditor';
 import { errorsProvider } from '../../utils/forms';
@@ -137,16 +126,18 @@ export const GoalForm: React.FC<GoalFormProps> = ({
     return (
         <ModalContent {...attrs}>
             <Form onSubmit={handleSubmit(onSubmit)}>
-                <FormControl flat="bottom" size="l">
+                <FormControl>
                     <FormControlInput
                         {...register('title')}
                         disabled={busy}
                         autoFocus
                         placeholder={tr("Goal's title")}
+                        brick="bottom"
+                        size="m"
                         {...goalTitleInput.attr}
                     />
                     {nullable(errorsResolver('title'), (error) => (
-                        <FormControlError error={error} placement="top-start" {...goalTitleInputError.attr} />
+                        <FormControlError error={error} {...goalTitleInputError.attr} />
                     ))}
                 </FormControl>
 

src/components/GoalParentComboBox.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
-import { ComboBox, FormControl, FormControlError, FormControlInput, nullable } from '@taskany/bricks';
-import { Button } from '@taskany/bricks/harmony';
+import { ComboBox, nullable } from '@taskany/bricks';
+import { Button, FormControl, FormControlError, FormControlInput } from '@taskany/bricks/harmony';
 
 import { useLocalStorage } from '../hooks/useLocalStorage';
 import { trpc } from '../utils/trpcClient';
@@ -69,7 +69,7 @@ export const GoalParentComboBox = React.forwardRef<HTMLDivElement, GoalParentCom
         }, []);
 
         return (
-            <FormControl variant="outline" {...combobox.attr}>
+            <FormControl {...combobox.attr}>
                 <ComboBox
                     ref={ref}
                     text={value ? `#${value?.id}` : text}
@@ -99,6 +99,7 @@ export const GoalParentComboBox = React.forwardRef<HTMLDivElement, GoalParentCom
                     renderInput={(props) => (
                         <FormControlInput
                             autoFocus
+                            outline
                             placeholder={placeholder}
                             onChange={(e: ChangeEvent<HTMLInputElement>) => {
                                 setInputState(e.currentTarget.value);