Fix icon button position in FieldWithButton when on error

MTES-MCT · May 8, 2024 · ceb3fe8 · ceb3fe8
1 parent 74caeea
commit ceb3fe8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/.../ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FieldWithButton.tsx b/.../ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FieldWithButton.tsx
@@ -1,14 +1,21 @@
 import { IconButton } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
-const BareFieldWithIconButton = styled.div`
-  display: flex;
+// TODO Replace this dirty hack with an `IconButton` prop in some monitor-ui fields.
+const BareFieldWithIconButton = styled.div<{
+  $hasError: boolean
+}>`
   align-items: flex-end;
+  display: flex;
 
   > *:first-child {
     flex-grow: 1;
     margin-right: 4px;
   }
+
+  > .Element-IconButton {
+    margin-bottom: ${p => (p.$hasError ? '22px' : 0)};
+  }
 `
 
 const IconButtonOff = styled(IconButton)`

diff --git a/...ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikEmailField.tsx b/...ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikEmailField.tsx
@@ -11,7 +11,7 @@ type FormikIsEmailSubscriptionContactToggleProps = {
   controlUnit: ControlUnit.ControlUnit
 }
 export function FormikEmailField({ controlUnit }: FormikIsEmailSubscriptionContactToggleProps) {
-  const { setFieldValue, values } = useFormikContext<ControlUnitContactFormValues>()
+  const { errors, setFieldValue, values } = useFormikContext<ControlUnitContactFormValues>()
 
   const [isConfirmationMessageOpened, setIsConfirmationMessageOpened] = useState(false)
   const [otherContactSubscribedEmail, setOtherContactSubscribedEmail] = useState<string | undefined>(undefined)
@@ -48,7 +48,7 @@ export function FormikEmailField({ controlUnit }: FormikIsEmailSubscriptionConta
 
   return (
     <>
-      <FieldWithButton>
+      <FieldWithButton $hasError={!!errors.email}>
         <FormikTextInput isLight label="Adresse mail" name="email" type="email" />
         {values.isEmailSubscriptionContact ? (
           <FieldWithButton.IconButtonOn

diff --git a/...ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikPhoneField.tsx b/...ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikPhoneField.tsx
@@ -1,20 +1,22 @@
 import { FormikTextInput, Icon } from '@mtes-mct/monitor-ui'
-import { useField } from 'formik'
+import { useFormikContext } from 'formik'
 
 import { FieldWithButton } from './FieldWithButton'
 
+import type { ControlUnitContactFormValues } from '../types'
+
 export function FormikPhoneField() {
-  const [input, , props] = useField<boolean>('isSmsSubscriptionContact')
+  const { errors, setFieldValue, values } = useFormikContext<ControlUnitContactFormValues>()
 
   const toggleSubscription = () => {
-    props.setValue(!input.value)
+    setFieldValue('isSmsSubscriptionContact', !values.isSmsSubscriptionContact)
   }
 
   return (
-    <FieldWithButton>
+    <FieldWithButton $hasError={!!errors.phone}>
       <FormikTextInput isLight label="Numéro de téléphone" name="phone" type="tel" />
 
-      {input.value ? (
+      {values.isSmsSubscriptionContact ? (
         <FieldWithButton.IconButtonOn
           Icon={Icon.Subscription}
           onClick={toggleSubscription}