Update fieldset to allow for icon in title

forml-js · Nov 15, 2020 · 3f19c2f · 3f19c2f
1 parent 6adb3a1
commit 3f19c2f
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 44 deletions.
diff --git a/example/data/comment.js b/example/data/comment.js
@@ -80,76 +80,84 @@ export function form(props, model) {
     return [
         {
             type: 'fieldset',
-            disablePadding: true,
-            disableGutters: true,
-            title: 'Contact Information',
-            description: 'Let us know how to reach you!',
+            layout: 'vertical',
+            icon: 'alternate_email',
+            title: 'Comment Submission',
+            description:
+                'Give us some feedback that could help improve your experience.',
             items: [
                 {
                     type: 'fieldset',
+                    disablePadding: true,
+                    disableGutters: true,
+                    disableMargin: true,
                     items: [
-                        'name',
-                        'email',
-                        'email' in model && {
-                            key: 'spam',
-                            type: 'checkbox',
-                            title: 'Yes I want spam.',
+                        {
+                            type: 'fieldset',
+                            items: [
+                                'name',
+                                'email',
+                                'email' in model && {
+                                    key: 'spam',
+                                    type: 'checkbox',
+                                    title: 'Yes I want spam.',
+                                },
+                            ],
+                            layout: 'vertical',
+                        },
+                        {
+                            type: 'fieldset',
+                            layout: 'vertical',
+                            items: [
+                                'phoneNumber',
+                                {
+                                    key: 'type',
+                                    type: 'select',
+                                    titleMap: [
+                                        { name: 'Home', value: 'home' },
+                                        { name: 'Work', value: 'work' },
+                                        { name: 'Mobile', value: 'mobile' },
+                                        { name: 'Fax', value: 'fax' },
+                                        { name: 'Etc', value: 'etc' },
+                                    ],
+                                },
+                            ],
                         },
                     ],
-                    layout: 'vertical',
+                    layout: 'horizontal',
                 },
                 {
                     type: 'fieldset',
-                    layout: 'vertical',
+                    alignItems: 'flex-end',
                     items: [
-                        'phoneNumber',
-                        {
-                            key: 'type',
-                            type: 'select',
-                            titleMap: [
-                                { name: 'Home', value: 'home' },
-                                { name: 'Work', value: 'work' },
-                                { name: 'Mobile', value: 'mobile' },
-                                { name: 'Fax', value: 'fax' },
-                                { name: 'Etc', value: 'etc' },
-                            ],
-                        },
+                        { key: 'comment', type: 'textarea' },
+                        { key: 'tos' },
                     ],
+                    layout: 'vertical',
                 },
             ],
-            layout: 'horizontal',
-        },
-        {
-            type: 'fieldset',
-            layout: 'vertical',
-            items: [{ key: 'comment', type: 'textarea' }],
         },
         {
             type: 'fieldset',
             items: [
                 {
                     type: 'array',
+                    icon: 'contacts',
                     disableGutters: true,
                     key: 'nested',
                     items: [
                         {
                             type: 'fieldset',
                             key: 'nested[]',
                             layout: 'vertical',
-                            disablePadding: true,
                             disableMargin: true,
                             elevation: 0,
+                            icon: 'person',
                             items: ['nested[].first', 'nested[].last'],
                         },
                     ],
                 },
             ],
         },
-        {
-            type: 'fieldset',
-            alignItems: 'flex-end',
-            items: [{ key: 'tos' }],
-            layout: 'vertical',
-        },
     ];
 }
diff --git a/src/components/decorator/mui/fieldset.js b/src/components/decorator/mui/fieldset.js
@@ -3,6 +3,8 @@ import FormLabel from '@material-ui/core/FormLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
+import Icon from '@material-ui/core/Icon';
+import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { createElement as h } from 'react';
 import clsx from 'clsx';
@@ -60,9 +62,25 @@ const useStyles = makeStyles(function (theme) {
             flexDirection: 'column',
             padding: theme.spacing(1.0),
         },
-        header: {
+        title: {
             display: 'flex',
             flexDirection: 'column',
+        },
+        formLabel: {
+            color: theme.palette.text.primary,
+        },
+        formHelperText: {
+            color: theme.palette.text.primary,
+        },
+        icon: {
+            display: 'inline-flex',
+            minWidth: theme.spacing(6),
+            color: theme.palette.action.active,
+        },
+        header: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
             padding: theme.spacing(1.0, 2.0),
             borderBottom: '1px solid black',
             borderBottomColor: theme.palette.divider,
@@ -84,6 +102,7 @@ export default function FieldSet(props) {
     const fullWidth = 'fullWidth' in form ? form.fullWidth : false;
     const component = 'component' in form ? form.component : 'div';
     const elevation = 'elevation' in form ? form.elevation : 1;
+    const icon = 'icon' in form ? form.icon : null;
 
     let content = h(
         FormGroup,
@@ -98,12 +117,33 @@ export default function FieldSet(props) {
         [
             (title || description) &&
                 h('div', { className: classes.header }, [
-                    h(FormLabel, { key: 'label' }, title),
-                    h(
-                        FormHelperText,
-                        { key: 'help', variant: 'caption' },
-                        description
-                    ),
+                    icon &&
+                        h(Icon, { key: 'icon', className: classes.icon }, icon),
+                    h('div', { className: classes.title }, [
+                        h(
+                            FormLabel,
+                            {
+                                key: 'label',
+                                className: classes.formLabel,
+                            },
+                            h(
+                                Typography,
+                                {
+                                    variant: 'subtitle2',
+                                },
+                                title
+                            )
+                        ),
+                        h(
+                            FormHelperText,
+                            {
+                                key: 'help',
+                                variant: 'caption',
+                                className: classes.formHelperText,
+                            },
+                            description
+                        ),
+                    ]),
                 ]),
             h(
                 component,