Merge pull request #418 from dhis2/DHIS2-18129/title-subtile-in-all-s…

…ection-types feat: add title and subtitle to all form types
dhis2 · Nov 6, 2024 · aecaa17 · aecaa17 · dhis2-bot · Nov 6, 2024
2 parents f7aaa51 + 0e51947
commit aecaa17
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 47 deletions.
diff --git a/src/data-workspace/entry-form.js b/src/data-workspace/entry-form.js
@@ -1,5 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useFormState } from 'react-final-form'
@@ -12,7 +13,10 @@ import { FORM_TYPES } from './constants.js'
 import { CustomForm } from './custom-form/index.js'
 import { DefaultForm } from './default-form.js'
 import FilterField from './filter-field.js'
+import { getDisplayOptions } from './section-form/displayOptions.js'
 import { SectionForm } from './section-form/index.js'
+import { SanitizedText } from './section-form/sanitized-text.js'
+import styles from './section-form/section.module.css'
 
 const lockedNoticeBoxMessages = {
     [LockedStates.LOCKED_DATA_INPUT_PERIOD]: i18n.t(
@@ -47,6 +51,7 @@ export const EntryForm = React.memo(function EntryForm({ dataSet }) {
     const formType = dataSet.formType
 
     const Component = formTypeToComponent[formType]
+    const displayOptions = getDisplayOptions(dataSet)
 
     return (
         <>
@@ -63,6 +68,28 @@ export const EntryForm = React.memo(function EntryForm({ dataSet }) {
                 />
             )}
             <EntryFormErrorSpy />
+            <div
+                className={cx(styles.sectionsCustomText, {
+                    [styles.textStartLine]:
+                        displayOptions.customText?.align === 'line-start',
+                    [styles.textCenter]:
+                        displayOptions.customText?.align === 'center',
+                    [styles.textEndLine]:
+                        !displayOptions.customText ||
+                        displayOptions.customText?.align === 'line-end',
+                })}
+            >
+                {displayOptions.customText?.header && (
+                    <SanitizedText className={styles.sectionsTitle}>
+                        {displayOptions.customText?.header}
+                    </SanitizedText>
+                )}
+                {displayOptions.customText?.subheader && (
+                    <SanitizedText className={styles.sectionsSubtitle}>
+                        {displayOptions.customText?.subheader}
+                    </SanitizedText>
+                )}
+            </div>
             <Component dataSet={dataSet} globalFilterText={globalFilterText} />
         </>
     )

diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { useSectionFilter } from '../../shared/index.js'
 import { getDisplayOptions } from './displayOptions.js'
-import { SanitizedText } from './sanitized-text.js'
 import { SectionFormSection } from './section.js'
 import styles from './section.module.css'
 
@@ -16,49 +15,23 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
 
     const displayOptions = getDisplayOptions(dataSet)
 
-    return (
-        <>
-            <div
-                className={cx(styles.sectionsCustomText, {
-                    [styles.textStartLine]:
-                        displayOptions.customText?.align === 'line-start',
-                    [styles.textCenter]:
-                        displayOptions.customText?.align === 'center',
-                    [styles.textEndLine]:
-                        !displayOptions.customText ||
-                        displayOptions.customText?.align === 'line-end',
-                })}
-            >
-                {displayOptions.customText?.header && (
-                    <SanitizedText className={styles.sectionsTitle}>
-                        {displayOptions.customText?.header}
-                    </SanitizedText>
-                )}
-                {displayOptions.customText?.subheader && (
-                    <SanitizedText className={styles.sectionsSubtitle}>
-                        {displayOptions.customText?.subheader}
-                    </SanitizedText>
-                )}
-            </div>
-            {dataSet.renderAsTabs ? (
-                <TabbedSectionForm
-                    globalFilterText={globalFilterText}
-                    sections={dataSet.sections}
-                    dataSetId={dataSet.id}
-                    direction={displayOptions?.tabsDirection}
-                />
-            ) : (
-                filteredSections.map((s) => (
-                    <SectionFormSection
-                        section={s}
-                        dataSetId={dataSet.id}
-                        key={s.id}
-                        globalFilterText={globalFilterText}
-                        collapsible
-                    />
-                ))
-            )}
-        </>
+    return dataSet.renderAsTabs ? (
+        <TabbedSectionForm
+            globalFilterText={globalFilterText}
+            sections={dataSet.sections}
+            dataSetId={dataSet.id}
+            direction={displayOptions?.tabsDirection}
+        />
+    ) : (
+        filteredSections.map((s) => (
+            <SectionFormSection
+                section={s}
+                dataSetId={dataSet.id}
+                key={s.id}
+                globalFilterText={globalFilterText}
+                collapsible
+            />
+        ))
     )
 }
 

diff --git a/src/data-workspace/section-form/section.module.css b/src/data-workspace/section-form/section.module.css
@@ -96,17 +96,17 @@
     font-size: 1.125rem;
     line-height: 1.3;
     color: var(--colors-grey900);
-    max-width: 1040px;
+    max-inline-size: 1040px;
 }
 .sectionsSubtitle {
     margin: 0;
     font-size: 0.875em;
     line-height: 1.3;
     color: var(--colors-grey800);
-    max-width: 1040px;
+    max-inline-size: 1040px;
 }
 .sectionsCustomText {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     flex-direction: column;
     margin: 0 0 var(--spacers-dp4) 0;