Merge pull request #497 from team-monite/feat/DEV-13434-new-styles-fo…

…r-display-components feat(DEV-13434): new styles for display components and form controls
team-monite · Dec 20, 2024 · d210da6 · d210da6
2 parents bd71671 + 06da3d0
commit d210da6
Show file tree

Hide file tree

Showing 32 changed files with 439 additions and 229 deletions.
diff --git a/.changeset/early-jokes-wash.md b/.changeset/early-jokes-wash.md
@@ -0,0 +1,5 @@
+---
+'@monite/sdk-react': minor
+---
+
+feat(DEV-13434): new styles for display components and form controls
diff --git a/packages/sdk-react/src/components/RHF/RHFAutocomplete/RHFAutocomplete.tsx b/packages/sdk-react/src/components/RHF/RHFAutocomplete/RHFAutocomplete.tsx
@@ -79,6 +79,7 @@ export const RHFAutocomplete = <
     return (params: AutocompleteRenderInputParams) => (
       <TextField
         {...params}
+        variant="standard"
         required={required}
         label={label}
         error={!!error?.message}

diff --git a/packages/sdk-react/src/components/RHF/RHFDatePicker/RHFDatePicker.tsx b/packages/sdk-react/src/components/RHF/RHFDatePicker/RHFDatePicker.tsx
@@ -48,6 +48,7 @@ export const RHFDatePicker = <T extends FieldValues>({
                   container: root,
                 },
                 textField: {
+                  variant: 'standard',
                   ...slotProps?.textField,
                   id: name,
                   error: isInvalid && !!error?.message,

diff --git a/packages/sdk-react/src/components/RHF/RHFTextField/RHFTextField.tsx b/packages/sdk-react/src/components/RHF/RHFTextField/RHFTextField.tsx
@@ -33,6 +33,7 @@ export const RHFTextField = <T extends FieldValues>({
               {...field}
               {...other}
               id={name}
+              variant="standard"
               value={field.value ?? ''} // This makes component controlled https://mui.com/material-ui/react-text-field/#uncontrolled-vs-controlled otherwise there are warnings in console
               error={isInvalid && !!error?.message}
               helperText={isInvalid && error?.message}

diff --git a/packages/sdk-react/src/components/RHF/RHFTextFieldPhone/RHFTextFieldPhone.tsx b/packages/sdk-react/src/components/RHF/RHFTextFieldPhone/RHFTextFieldPhone.tsx
@@ -30,6 +30,7 @@ export const RHFTextFieldPhone = <T extends FieldValues>({
               {...otherField}
               {...other}
               id={name}
+              variant="standard"
               onChange={(value) => onChange(value)}
               value={value ?? ''} // This makes component controlled https://mui.com/material-ui/react-text-field/#uncontrolled-vs-controlled otherwise there are warnings in console
               error={isInvalid && !!error?.message}

diff --git a/packages/sdk-react/src/components/RHF/RHFTimePicker/RHFTimePicker.tsx b/packages/sdk-react/src/components/RHF/RHFTimePicker/RHFTimePicker.tsx
@@ -35,6 +35,7 @@ export const RHFTimePicker = <T extends FieldValues>({
             <TimeField
               {...field}
               {...other}
+              variant="standard"
               required={required}
               fullWidth={fullWidth}
               value={date}

diff --git a/...alPolicies/ApprovalPolicyDetails/ApprovalPolicyForm/AutocompleteTags/AutocompleteTags.tsx b/...alPolicies/ApprovalPolicyDetails/ApprovalPolicyForm/AutocompleteTags/AutocompleteTags.tsx
@@ -48,7 +48,7 @@ export const AutocompleteTags = ({
       control={control}
       render={({ field, fieldState: { error } }) => (
         <FormControl
-          variant="outlined"
+          variant="standard"
           fullWidth
           required
           error={Boolean(error)}

diff --git a/...ponents/counterparts/CounterpartDetails/CounterpartAddressForm/CounterpartAddressForm.tsx b/...ponents/counterparts/CounterpartDetails/CounterpartAddressForm/CounterpartAddressForm.tsx
@@ -49,7 +49,7 @@ export const CounterpartAddressForm = ({
             <TextField
               id={field.name}
               label={t(i18n)`Address line 1`}
-              variant="outlined"
+              variant="standard"
               fullWidth
               error={Boolean(error)}
               helperText={error?.message}
@@ -65,7 +65,7 @@ export const CounterpartAddressForm = ({
             <TextField
               id={field.name}
               label={t(i18n)`Address line 2`}
-              variant="outlined"
+              variant="standard"
               fullWidth
               error={Boolean(error)}
               helperText={error?.message}
@@ -80,7 +80,7 @@ export const CounterpartAddressForm = ({
             <TextField
               id={field.name}
               label={t(i18n)`City`}
-              variant="outlined"
+              variant="standard"
               fullWidth
               required
               error={Boolean(error)}
@@ -96,7 +96,7 @@ export const CounterpartAddressForm = ({
             <TextField
               id={field.name}
               label={t(i18n)`ZIP code`}
-              variant="outlined"
+              variant="standard"
               fullWidth
               required
               error={Boolean(error)}
@@ -112,7 +112,7 @@ export const CounterpartAddressForm = ({
             <TextField
               id={field.name}
               label={t(i18n)`State / Area / Province`}
-              variant="outlined"
+              variant="standard"
               fullWidth
               required
               error={Boolean(error)}
@@ -126,7 +126,7 @@ export const CounterpartAddressForm = ({
           control={control}
           render={({ field, fieldState: { error } }) => (
             <FormControl
-              variant="outlined"
+              variant="standard"
               fullWidth
               required
               error={Boolean(error)}

diff --git a/...terparts/CounterpartDetails/CounterpartAddressFormUpdate/CounterpartAddressFormUpdate.tsx b/...terparts/CounterpartDetails/CounterpartAddressFormUpdate/CounterpartAddressFormUpdate.tsx
@@ -65,7 +65,7 @@ export const CounterpartAddressFormUpdate = (
                 <TextField
                   id={field.name}
                   label={t(i18n)`Address line 1`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -81,7 +81,7 @@ export const CounterpartAddressFormUpdate = (
                 <TextField
                   id={field.name}
                   label={t(i18n)`Address line 2`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -96,7 +96,7 @@ export const CounterpartAddressFormUpdate = (
                 <TextField
                   id={field.name}
                   label={t(i18n)`City`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -112,7 +112,7 @@ export const CounterpartAddressFormUpdate = (
                 <TextField
                   id={field.name}
                   label={t(i18n)`ZIP code`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -128,7 +128,7 @@ export const CounterpartAddressFormUpdate = (
                 <TextField
                   id={field.name}
                   label={t(i18n)`State / Area / Province`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -142,7 +142,7 @@ export const CounterpartAddressFormUpdate = (
               control={control}
               render={({ field, fieldState: { error } }) => (
                 <FormControl
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   required
                   error={Boolean(error)}

diff --git a/...rc/components/counterparts/CounterpartDetails/CounterpartBankForm/CounterpartBankForm.tsx b/...rc/components/counterparts/CounterpartDetails/CounterpartBankForm/CounterpartBankForm.tsx
@@ -98,7 +98,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`Account name`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -113,7 +113,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`Bank account holder name`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -128,7 +128,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`IBAN`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -143,7 +143,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`Account number`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -158,7 +158,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`Sort code`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -173,7 +173,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`Routing number`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -188,7 +188,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
                 <TextField
                   id={field.name}
                   label={t(i18n)`BIC`}
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   error={Boolean(error)}
                   helperText={error?.message}
@@ -201,7 +201,7 @@ export const CounterpartBankForm = (props: CounterpartBankFormProps) => {
               control={control}
               render={({ field, fieldState: { error } }) => (
                 <FormControl
-                  variant="outlined"
+                  variant="standard"
                   fullWidth
                   required
                   error={Boolean(error)}

diff --git a/...ponents/counterparts/CounterpartDetails/CounterpartContactForm/CounterpartContactForm.tsx b/...ponents/counterparts/CounterpartDetails/CounterpartContactForm/CounterpartContactForm.tsx
@@ -81,7 +81,7 @@ export const CounterpartContactForm = (props: CounterpartContactFormProps) => {
                         <TextField
                           id={field.name}
                           label={t(i18n)`First name`}
-                          variant="outlined"
+                          variant="standard"
                           fullWidth
                           error={Boolean(error)}
                           helperText={error?.message}
@@ -99,7 +99,7 @@ export const CounterpartContactForm = (props: CounterpartContactFormProps) => {
                         <TextField
                           id={field.name}
                           label={t(i18n)`Last name`}
-                          variant="outlined"
+                          variant="standard"
                           fullWidth
                           error={Boolean(error)}
                           helperText={error?.message}
@@ -119,7 +119,7 @@ export const CounterpartContactForm = (props: CounterpartContactFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Email`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}
@@ -137,7 +137,7 @@ export const CounterpartContactForm = (props: CounterpartContactFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Phone number`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}

diff --git a/...ounterpartDetails/CounterpartForm/CounterpartIndividualForm/CounterpartIndividualForm.tsx b/...ounterpartDetails/CounterpartForm/CounterpartIndividualForm/CounterpartIndividualForm.tsx
@@ -206,7 +206,7 @@ export const CounterpartIndividualForm = (props: CounterpartsFormProps) => {
                         <TextField
                           id={field.name}
                           label={t(i18n)`First name`}
-                          variant="outlined"
+                          variant="standard"
                           fullWidth
                           error={Boolean(error)}
                           helperText={error?.message}
@@ -224,7 +224,7 @@ export const CounterpartIndividualForm = (props: CounterpartsFormProps) => {
                         <TextField
                           id={field.name}
                           label={t(i18n)`Last name`}
-                          variant="outlined"
+                          variant="standard"
                           fullWidth
                           error={Boolean(error)}
                           helperText={error?.message}
@@ -312,7 +312,7 @@ export const CounterpartIndividualForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Email`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}
@@ -336,7 +336,7 @@ export const CounterpartIndividualForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Phone number`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}
@@ -367,7 +367,7 @@ export const CounterpartIndividualForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Tax ID`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}

diff --git a/...erpartDetails/CounterpartForm/CounterpartOrganizationForm/CounterpartOrganizationForm.tsx b/...erpartDetails/CounterpartForm/CounterpartOrganizationForm/CounterpartOrganizationForm.tsx
@@ -211,7 +211,7 @@ export const CounterpartOrganizationForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Company name`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}
@@ -296,7 +296,7 @@ export const CounterpartOrganizationForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Email`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}
@@ -320,7 +320,7 @@ export const CounterpartOrganizationForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Phone number`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}
@@ -370,7 +370,7 @@ export const CounterpartOrganizationForm = (props: CounterpartsFormProps) => {
                     <TextField
                       id={field.name}
                       label={t(i18n)`Tax ID`}
-                      variant="outlined"
+                      variant="standard"
                       fullWidth
                       error={Boolean(error)}
                       helperText={error?.message}

diff --git a/...dk-react/src/components/payables/PayableDetails/PayableDetailsForm/PayableDetailsForm.tsx b/...dk-react/src/components/payables/PayableDetails/PayableDetailsForm/PayableDetailsForm.tsx
@@ -410,7 +410,7 @@ const PayableDetailsFormBase = forwardRef<
                             {...field}
                             id={field.name}
                             label={t(i18n)`Number`}
-                            variant="outlined"
+                            variant="standard"
                             fullWidth
                             error={Boolean(error)}
                             helperText={error?.message}
@@ -426,7 +426,7 @@ const PayableDetailsFormBase = forwardRef<
                         control={control}
                         render={({ field, fieldState: { error } }) => (
                           <FormControl
-                            variant="outlined"
+                            variant="standard"
                             fullWidth
                             error={Boolean(error)}
                             required={
@@ -479,7 +479,7 @@ const PayableDetailsFormBase = forwardRef<
                         control={control}
                         render={({ field, fieldState: { error } }) => (
                           <FormControl
-                            variant="outlined"
+                            variant="standard"
                             fullWidth
                             error={Boolean(error)}
                             required={
@@ -609,7 +609,7 @@ const PayableDetailsFormBase = forwardRef<
                           control={control}
                           render={({ field, fieldState: { error } }) => (
                             <FormControl
-                              variant="outlined"
+                              variant="standard"
                               fullWidth
                               disabled={isTagsDisabled}
                               required={isFieldRequired(
@@ -639,7 +639,7 @@ const PayableDetailsFormBase = forwardRef<
                                   <TextField
                                     {...params}
                                     label={t(i18n)`Tags`}
-                                    variant="outlined"
+                                    variant="standard"
                                     fullWidth
                                     error={Boolean(error)}
                                     helperText={error?.message}