update width for inputs

openmrs · Jul 20, 2023 · 5c93e58 · 5c93e58
1 parent 9c6813c
commit 5c93e58
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 31 deletions.
diff --git a/...tient-registration-app/src/patient-registration/field/address/address-field.component.tsx b/...tient-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/...ient-registration-app/src/patient-registration/field/address/address-search.component.tsx b/...ient-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
@@ -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
@@ -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/...patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/...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/...ent-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx b/...ent-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,13 +47,15 @@ export const Input: React.FC<any> = ({ checkWarning, ...props }) => {
     <div style={{ marginBottom: '1rem' }}>
       <Layer>
         <TextInput
+          className={styles.Input}
           {...props}
           {...field}
           labelText={labelText}
           invalid={!!(meta.touched && meta.error)}
           invalidText={invalidText}
           warn={!!warnText}
           warnText={warnText}
+          size={isTablet ? 'lg' : 'md'}
           value={value}
         />
       </Layer>

diff --git a/...ion-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx b/...ion-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,14 +63,15 @@ export const Autosuggest: React.FC<any> = ({
       <Layer>
         <Search
           id="autosuggest"
+          size={isTablet ? 'lg' : 'md'}
           onChange={handleChange}
           ref={searchBox}
           className={styles.autocompleteSearch}
           {...searchProps}
         />
       </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/...registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.scss b/...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/...app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx b/...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/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/.../esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/.../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/...rc/patient-registration/section/patient-relationships/relationships-section.component.tsx b/...rc/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"