From 091ada9934701421d18ab4f05b8894d393bc9288 Mon Sep 17 00:00:00 2001
From: Jexsie <jessiessebuliba@gmail.com>
Date: Thu, 20 Jul 2023 19:53:18 +0300
Subject: [PATCH] update width for inputs

---
 .../field/address/address-field.component.tsx | 36 +++++++++++++------
 .../address/address-search.component.tsx      |  4 +++
 .../field/dob/dob.component.tsx               |  2 ++
 .../src/patient-registration/field/field.scss | 22 ++++++++++--
 .../field/gender/gender-field.component.tsx   |  1 +
 .../basic-input/input/input.component.tsx     |  5 +++
 .../autosuggest/autosuggest.component.tsx     |  4 ++-
 .../custom-input/autosuggest/autosuggest.scss |  4 +++
 .../identifier/identifier-input.component.tsx |  9 ++---
 .../dummy-data/dummy-data-input.component.tsx |  7 ++--
 .../src/patient-registration/input/input.scss |  6 ++++
 .../patient-registration.component.tsx        |  2 +-
 .../relationships-section.component.tsx       | 10 ++++--
 .../patient-relationships/relationships.scss  | 18 +++++-----
 .../section/section-wrapper.component.tsx     |  8 +++--
 15 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
index 3a329d9b2..1b5c6e18c 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
@@ -27,6 +27,7 @@ export const AddressComponent: React.FC = () => {
       name: string;
       value: string;
       label: string;
+      maxCount: number;
     }>
   >([]);
   const { t } = useTranslation();
@@ -50,7 +51,16 @@ export const AddressComponent: React.FC = () => {
   useEffect(() => {
     const templateXmlDoc = parseString(addressTemplateXml);
     const elementDefaults = getTagAsDocument('elementDefaults', templateXmlDoc);
+    const maxCountEntries = getTagAsDocument('sizeMappings', templateXmlDoc).getElementsByTagName('entry');
     const defaultValuesEntries = elementDefaults.getElementsByTagName('entry');
+
+    const maxCounts = Object.fromEntries(
+      Array.prototype.map.call(maxCountEntries, (entry: Element) => {
+        const [name, value] = Array.from(entry.getElementsByTagName('string'));
+        return [name.innerHTML, value.innerHTML];
+      }),
+    );
+
     const defaultValues = Object.fromEntries(
       Array.prototype.map.call(defaultValuesEntries, (entry: Element) => {
         const [name, value] = Array.from(entry.getElementsByTagName('string'));
@@ -79,6 +89,7 @@ export const AddressComponent: React.FC = () => {
         t('countyDistrict', 'District')
       */
       const value = defaultValues[name];
+      const maxCountValue = Number(maxCounts[name]);
       setInitialFormValues((initialFormValues) => ({
         ...initialFormValues,
         address: {
@@ -91,6 +102,7 @@ export const AddressComponent: React.FC = () => {
         name,
         value,
         label,
+        maxCount: maxCountValue,
       };
     });
     setAddressLayout(propertiesObj);
@@ -119,16 +131,19 @@ export const AddressComponent: React.FC = () => {
   if (!enabled) {
     return (
       <AddressComponentContainer>
-        {addressLayout.map((attributes, index) => (
-          <Input
-            key={`combo_input_${index}`}
-            name={`address.${attributes.name}`}
-            labelText={t(attributes.label)}
-            id={attributes.name}
-            setSelectedValue={setSelectedValue}
-            selected={selected}
-          />
-        ))}
+        {addressLayout.map((attributes, index) => {
+          return (
+            <Input
+              key={`combo_input_${index}`}
+              name={`address.${attributes.name}`}
+              labelText={t(attributes.label)}
+              id={attributes.name}
+              setSelectedValue={setSelectedValue}
+              selected={selected}
+              maxLength={attributes.maxCount}
+            />
+          );
+        })}
       </AddressComponentContainer>
     );
   }
@@ -167,6 +182,7 @@ export const AddressComponent: React.FC = () => {
             labelText={t(attributes.label)}
             id={attributes.name}
             setSelectedValue={setSelectedValue}
+            maxLength={attributes.maxCount}
             selected={selected}
           />
         ))
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx
index ca967a179..0c327823e 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx
@@ -3,6 +3,7 @@ import { useAddressHierarchy } from '../../patient-registration.resource';
 import { Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useFormikContext } from 'formik';
+import { useLayoutType } from '@openmrs/esm-framework';
 import styles from './address-search.scss';
 
 interface AddressSearchComponentProps {
@@ -14,6 +15,7 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
   const separator = ' > ';
   const searchBox = useRef(null);
   const wrapper = useRef(null);
+  const isTablet = useLayoutType() === 'tablet';
   const [searchString, setSearchString] = useState<string>('');
   const { addresses, isLoading, error } = useAddressHierarchy(searchString, separator);
   const addressOptions: Array<string> = useMemo(() => {
@@ -62,6 +64,8 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
   return (
     <div className={styles.autocomplete} ref={wrapper} style={{ marginBottom: '1rem' }}>
       <Search
+        light
+        size={isTablet ? 'lg' : 'md'}
         onChange={handleInputChange}
         labelText={t('searchAddress', 'Search address')}
         placeholder={t('searchAddress', 'Search address')}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
index 35d674c77..54d904e94 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -107,6 +107,7 @@ export const DobField: React.FC = () => {
               <TextInput
                 id="yearsEstimated"
                 type="number"
+                className={styles.numberInput}
                 name={yearsEstimated.name}
                 light
                 onChange={onEstimatedYearsChange}
@@ -122,6 +123,7 @@ export const DobField: React.FC = () => {
             </div>
             <div className={styles.dobField}>
               <TextInput
+                className={styles.numberInput}
                 id="monthsEstimated"
                 type="number"
                 name={monthsEstimated.name}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
index 57920c2ed..0b020f077 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/field.scss
@@ -55,6 +55,17 @@
   justify-content: flex-start;
 }
 
+.dobField {
+  :global(.cds--date-picker-input__wrapper) {
+    max-width: 8.125rem;
+
+    :global(.cds--date-picker__icon) {
+      right: unset;
+      left: 10.5rem;
+    }
+  }
+}
+
 .photoExtension {
   margin-bottom: 1rem;
   grid-row: 1;
@@ -92,6 +103,10 @@
   margin-bottom: spacing.$spacing-05;
 }
 
+.radioButton {
+  padding-block: spacing.$spacing-03 !important;
+}
+
 :global(.omrs-breakpoint-lt-desktop) {
   .grid {
     grid-template-columns: 1fr;
@@ -106,9 +121,6 @@
     grid-row: 1;
     justify-self: start;
   }
-  .radioButton label {
-    height: spacing.$spacing-09 !important;
-  }
   .halfWidthInDesktopView {
     width: 100%;
   }
@@ -125,3 +137,7 @@
   line-height: 1.34;
   margin: 0.25rem 0 0;
 }
+
+.numberInput {
+  width: 13.125rem;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
index d7bf15b36..8a68f05eb 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
@@ -33,6 +33,7 @@ export const GenderField: React.FC = () => {
         <RadioButtonGroup name="gender" orientation="vertical" onChange={setGender} valueSelected={field.value}>
           {fieldConfigs.map((option) => (
             <RadioButton
+              className={styles.radioButton}
               key={option.label}
               id={option.id}
               value={option.value}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
index 3ee974dda..50a313102 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, TextInput, TextInputProps } from '@carbon/react';
 import { useField } from 'formik';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from '../../input.scss';
 
 interface InputProps extends TextInputProps {
   checkWarning?(value: string): string;
@@ -10,6 +12,7 @@ interface InputProps extends TextInputProps {
 export const Input: React.FC<any> = ({ checkWarning, ...props }) => {
   const [field, meta] = useField(props.name);
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
 
   /*
     Do not remove these comments
@@ -44,6 +47,7 @@ export const Input: React.FC<any> = ({ checkWarning, ...props }) => {
     <div style={{ marginBottom: '1rem' }}>
       <Layer>
         <TextInput
+          className={styles.Input}
           {...props}
           {...field}
           labelText={labelText}
@@ -51,6 +55,7 @@ export const Input: React.FC<any> = ({ checkWarning, ...props }) => {
           invalidText={invalidText}
           warn={!!warnText}
           warnText={warnText}
+          size={isTablet ? 'lg' : 'md'}
           value={value}
         />
       </Layer>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx
index 32e733a95..7d1fe7bcb 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx
@@ -11,6 +11,7 @@ interface AutosuggestProps extends SearchProps {
 }
 
 export const Autosuggest: React.FC<any> = ({
+  isTablet,
   getDisplayValue,
   getFieldValue,
   getSearchResults,
@@ -62,6 +63,7 @@ export const Autosuggest: React.FC<any> = ({
       <Layer>
         <Search
           id="autosuggest"
+          size={isTablet ? 'lg' : 'md'}
           onChange={handleChange}
           ref={searchBox}
           className={styles.autocompleteSearch}
@@ -69,7 +71,7 @@ export const Autosuggest: React.FC<any> = ({
         />
       </Layer>
       {suggestions.length > 0 && (
-        <ul className={styles.suggestions}>
+        <ul className={`${styles.suggestions} ${isTablet && styles.tabletSuggestions}`}>
           {suggestions.map((suggestion, index) => (
             <li //eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
               key={index}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss
index 83f7e1404..f8ce54071 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss
@@ -6,6 +6,10 @@
   @include type.type-style('label-01');
 }
 
+.autocomplete {
+  width: 18.75rem;
+}
+
 .suggestions {
   position: relative;
   border-top-width: 0;
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
index 8e91e9192..db16b87ae 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
@@ -4,7 +4,7 @@ import { useField } from 'formik';
 import { Button } from '@carbon/react';
 import { TrashCan, Edit, Reset } from '@carbon/react/icons';
 import { ResourcesContext } from '../../../../offline.resources';
-import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import { showModal, useConfig, useLayoutType, UserHasAccess } from '@openmrs/esm-framework';
 import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
 import { PatientIdentifierValue } from '../../../patient-registration-types';
@@ -19,6 +19,7 @@ interface IdentifierInputProps {
 
 export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
   const { defaultPatientIdentifierTypes } = useConfig();
   const { identifierTypes } = useContext(ResourcesContext);
   const { isOffline, values, setFieldValue } = useContext(PatientRegistrationContext);
@@ -114,7 +115,7 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
         {!patientIdentifier.required && patientIdentifier.initialValue && hideInputField && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
-              size="md"
+              size={isTablet ? 'lg' : 'md'}
               kind="ghost"
               onClick={handleEdit}
               iconDescription={t('editIdentifierTooltip', 'Edit')}
@@ -127,7 +128,7 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
         {initialValue && initialValue !== identifierValue && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
-              size="md"
+              size={isTablet ? 'lg' : 'md'}
               kind="ghost"
               onClick={handleReset}
               iconDescription={t('resetIdentifierTooltip', 'Reset')}
@@ -140,7 +141,7 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
         {!patientIdentifier.required && !defaultPatientIdentifierTypesMap[patientIdentifier.identifierTypeUuid] && (
           <UserHasAccess privilege="Delete Patient Identifiers">
             <Button
-              size="md"
+              size={isTablet ? 'lg' : 'md'}
               kind="danger--ghost"
               onClick={handleDelete}
               iconDescription={t('deleteIdentifierTooltip', 'Delete')}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx
index a0bccefe8..bc0294fd4 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/dummy-data/dummy-data-input.component.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { v4 } from 'uuid';
+import { Button } from '@carbon/react';
 import { FormValues } from '../../patient-registration-types';
 import styles from './../input.scss';
 
@@ -40,13 +41,15 @@ export const dummyFormValues: FormValues = {
 export const DummyDataInput: React.FC<DummyDataInputProps> = ({ setValues }) => {
   return (
     <main>
-      <button
+      <Button
+        kind="secondary"
+        size="sm"
         onClick={() => setValues(dummyFormValues)}
         className={`omrs-btn omrs-filled-neutral ${styles.dummyData}`}
         type="button"
         aria-label="Dummy Data Input">
         Input Dummy Data
-      </button>
+      </Button>
     </main>
   );
 };
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/input.scss b/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
index 10a7e2e5f..5a5f3a24a 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/input.scss
@@ -99,6 +99,8 @@
 :global(.omrs-breakpoint-lt-desktop) {
   .IDInput {
     max-width: unset;
+    display: flex;
+    gap: 0.25rem;
     width: 100%;
   }
 }
@@ -116,3 +118,7 @@
   margin: 0;
   padding-left: 1rem;
 }
+
+.Input {
+  max-width: 300px;
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
index 1b32c5295..6d8301496 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
@@ -193,7 +193,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   disabled={!currentSession || !identifierTypes}>
                   {inEditMode ? t('updatePatient', 'Update Patient') : t('registerPatient', 'Register Patient')}
                 </Button>
-                <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
+                <Button className={styles.cancelButton} kind="secondary" onClick={cancelRegistration}>
                   {t('cancel', 'Cancel')}
                 </Button>
               </div>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
index 3634218a1..c05c38ef1 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
@@ -7,6 +7,7 @@ import {
   InlineNotification,
   NotificationActionButton,
   SkeletonText,
+  Tile,
 } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
 import { FieldArray } from 'formik';
@@ -16,6 +17,7 @@ import { PatientRegistrationContext } from '../../patient-registration-context';
 import { ResourcesContext } from '../../../offline.resources';
 import { fetchPerson } from '../../patient-registration.resource';
 import { RelationshipValue } from '../../patient-registration-types';
+import { useLayoutType } from '@openmrs/esm-framework';
 import sectionStyles from '../section.scss';
 import styles from './relationships.scss';
 
@@ -116,6 +118,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
 }) => {
   const { t } = useTranslation();
   const { setFieldValue } = React.useContext(PatientRegistrationContext);
+  const isTablet = useLayoutType() === 'tablet';
 
   const newRelationship = !relationship.uuid;
 
@@ -156,7 +159,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
   }, [index]);
 
   return relationship.action !== 'DELETE' ? (
-    <div className={styles.relationship}>
+    <Tile className={styles.relationship}>
       <div className={styles.searchBox}>
         <div className={styles.relationshipHeader}>
           <h4 className={styles.productiveHeading}>
@@ -181,6 +184,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
               getSearchResults={searchPerson}
               getDisplayValue={(item) => item.display}
               getFieldValue={(item) => item.uuid}
+              isTablet={isTablet}
               required
             />
           ) : (
@@ -195,6 +199,8 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
         <Layer>
           <Select
             id="select"
+            size={isTablet ? 'lg' : 'md'}
+            className={styles.relationshipSelector}
             labelText={t('relationship', 'Relationship')}
             onChange={handleRelationshipTypeChange}
             name={`relationships[${index}].relationshipType`}
@@ -211,7 +217,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
           </Select>
         </Layer>
       </div>
-    </div>
+    </Tile>
   ) : (
     <InlineNotification
       kind="info"
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss
index 4e8f631a3..8db338c68 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships.scss
@@ -14,9 +14,17 @@
   margin-bottom: spacing.$spacing-05;
 }
 
+.relationship {
+  margin-block: spacing.$spacing-05;
+}
+
 .relationshipHeader {
   display: flex;
   align-items: center;
+
+  .trashCan {
+    fill: $danger !important;
+  }
 }
 
 .productiveHeading {
@@ -24,12 +32,6 @@
   color: $text-02;
 }
 
-.trashCan {
-  color: $danger !important;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .relationshipHeader {
-    justify-content: space-between;
-  }
+.relationshipSelector {
+  max-width: 18.75rem;
 }
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx
index b0bcb6ea8..ef3849d7c 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx
@@ -31,9 +31,13 @@ export const SectionWrapper = ({ sectionDefinition, index }: SectionWrapperProps
         {t('allFieldsRequiredText', 'All fields are required unless marked optional')}
       </span>
       <div style={{ margin: '1rem 0 1rem' }}>
-        <Tile>
+        {sectionDefinition.id === 'relationships' ? (
           <Section sectionDefinition={sectionDefinition} />
-        </Tile>
+        ) : (
+          <Tile>
+            <Section sectionDefinition={sectionDefinition} />
+          </Tile>
+        )}
       </div>
     </div>
   );