fix(widget): make header optional, adjust header style

dhis2 · Sep 4, 2024 · b8bf3a2 · b8bf3a2
1 parent 1d53036
commit b8bf3a2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/core_modules/capture-core/components/Widget/WidgetNonCollapsible.component.js b/src/core_modules/capture-core/components/Widget/WidgetNonCollapsible.component.js
@@ -1,7 +1,7 @@
 // @flow
 import React, { type ComponentType } from 'react';
 import { withStyles } from '@material-ui/core';
-import { colors, spacersNum } from '@dhis2/ui';
+import { colors, spacers } from '@dhis2/ui';
 import cx from 'classnames';
 import type { WidgetNonCollapsibleProps, WidgetNonCollapsiblePropsPlain } from './widgetNonCollapsible.types';
 
@@ -18,11 +18,13 @@ const styles = {
     header: {
         display: 'flex',
         alignItems: 'center',
-        padding: spacersNum.dp16,
+        minHeight: '44px', // match the height of the collapsible version
+        padding: `${spacers.dp8} ${spacers.dp8} ${spacers.dp8} ${spacers.dp12}`,
         fontWeight: 500,
-        fontSize: 16,
+        fontSize: 15,
         color: colors.grey800,
     },
+
 };
 
 const WidgetNonCollapsiblePlain = ({
@@ -36,12 +38,14 @@ const WidgetNonCollapsiblePlain = ({
         className={cx(classes.container, { borderless })}
         style={{ backgroundColor: color }}
     >
-        <div
-            className={classes.header}
-            data-test="widget-header"
-        >
-            {header}
-        </div>
+        {header && (
+            <div
+                className={classes.header}
+                data-test="widget-header"
+            >
+                {header}
+            </div>
+        )}
         <div
             data-test="widget-contents"
         >

diff --git a/src/core_modules/capture-core/components/Widget/widgetNonCollapsible.types.js b/src/core_modules/capture-core/components/Widget/widgetNonCollapsible.types.js
@@ -2,7 +2,7 @@
 import type { Node } from 'react';
 
 export type WidgetNonCollapsibleProps = {|
-    header: Node,
+    header?: Node,
     children: Node,
     color?: string,
     borderless?: boolean,