Show description or tooltip on react material boolean controls (#2072)

* Show description or tooltip for checkboxes * Add description to boolean example * Document hardcoded parameters in boolean control * Give toggle booleans the same description treatment as checkboxes
eclipsesource · Jan 9, 2023 · 36e3732 · 36e3732
1 parent 3b32c9b
commit 36e3732
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 47 deletions.
diff --git a/packages/examples/src/examples/control-options.ts b/packages/examples/src/examples/control-options.ts
@@ -31,7 +31,8 @@ export const schema = {
         type: 'string'
       },
       boolean: {
-        type: 'boolean'
+        type: 'boolean',
+        description: 'Boolean description as a tooltip'
       },
       number: {
         type: 'number'

diff --git a/packages/material-renderers/src/controls/MaterialBooleanControl.tsx b/packages/material-renderers/src/controls/MaterialBooleanControl.tsx
@@ -23,15 +23,17 @@
   THE SOFTWARE.
 */
 import isEmpty from 'lodash/isEmpty';
+import merge from 'lodash/merge';
 import React from 'react';
 import {
   isBooleanControl,
   RankedTester,
   rankWith,
-  ControlProps
+  ControlProps,
+  isDescriptionHidden
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@mui/material';
+import { FormControlLabel, FormHelperText, Tooltip, Hidden } from '@mui/material';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
 
 export const MaterialBooleanControl = ({
@@ -46,30 +48,71 @@ export const MaterialBooleanControl = ({
   handleChange,
   errors,
   path,
-  config
+  config,
+  description
 }: ControlProps) => {
+
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    // Checkboxes do not receive focus until they are used, so
+    // we cannot rely on focus as criteria for showing descriptions.
+    // So we pass "false" to treat it as unfocused.
+    false,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
+  const showTooltip = !showDescription && !isDescriptionHidden(
+    visible,
+    description,
+    // Tooltips have their own focus handlers, so we do not need to rely
+    // on focus state here. So we pass 'true' to treat it as focused.
+    true,
+    // We also pass true here for showUnfocusedDescription since it should
+    // render regardless of that setting.
+    true
+  );
+
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+
   return (
     <Hidden xsUp={!visible}>
-      <FormControlLabel
-        label={label}
-        id={id}
-        control={
-          <MuiCheckbox
-            id={`${id}-input`}
-            isValid={isEmpty(errors)}
-            data={data}
-            enabled={enabled}
-            visible={visible}
-            path={path}
-            uischema={uischema}
-            schema={schema}
-            rootSchema={rootSchema}
-            handleChange={handleChange}
-            errors={errors}
-            config={config}
-          />
-        }
-      />
+      <Tooltip title={(showTooltip) ? description : ''}>
+        <FormControlLabel
+          label={label}
+          id={id}
+          control={
+            <MuiCheckbox
+              id={`${id}-input`}
+              isValid={isEmpty(errors)}
+              data={data}
+              enabled={enabled}
+              visible={visible}
+              path={path}
+              uischema={uischema}
+              schema={schema}
+              rootSchema={rootSchema}
+              handleChange={handleChange}
+              errors={errors}
+              config={config}
+            />
+          }
+        />
+      </Tooltip>
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>
+        {secondFormHelperText}
+      </FormHelperText>
     </Hidden>
   );
 };

diff --git a/packages/material-renderers/src/controls/MaterialBooleanToggleControl.tsx b/packages/material-renderers/src/controls/MaterialBooleanToggleControl.tsx
@@ -23,17 +23,19 @@
   THE SOFTWARE.
 */
 import isEmpty from 'lodash/isEmpty';
+import merge from 'lodash/merge';
 import React from 'react';
 import {
   isBooleanControl,
   RankedTester,
   rankWith,
   ControlProps,
   optionIs,
-  and
+  and,
+  isDescriptionHidden
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@mui/material';
+import { FormControlLabel, FormHelperText, Tooltip, Hidden } from '@mui/material';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
 export const MaterialBooleanToggleControl = ({
@@ -48,30 +50,71 @@ export const MaterialBooleanToggleControl = ({
   handleChange,
   errors,
   path,
-  config
+  config,
+  description
 }: ControlProps) => {
+
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    // Checkboxes do not receive focus until they are used, so
+    // we cannot rely on focus as criteria for showing descriptions.
+    // So we pass "false" to treat it as unfocused.
+    false,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
+  const showTooltip = !showDescription && !isDescriptionHidden(
+    visible,
+    description,
+    // Tooltips have their own focus handlers, so we do not need to rely
+    // on focus state here. So we pass 'true' to treat it as focused.
+    true,
+    // We also pass true here for showUnfocusedDescription since it should
+    // render regardless of that setting.
+    true
+  );
+
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+
   return (
     <Hidden xsUp={!visible}>
-      <FormControlLabel
-        label={label}
-        id={id}
-        control={
-          <MuiToggle
-            id={`${id}-input`}
-            isValid={isEmpty(errors)}
-            data={data}
-            enabled={enabled}
-            visible={visible}
-            path={path}
-            uischema={uischema}
-            schema={schema}
-            rootSchema={rootSchema}
-            handleChange={handleChange}
-            errors={errors}
-            config={config}
-          />
-        }
-      />
+      <Tooltip title={(showTooltip) ? description : ''}>
+        <FormControlLabel
+          label={label}
+          id={id}
+          control={
+            <MuiToggle
+              id={`${id}-input`}
+              isValid={isEmpty(errors)}
+              data={data}
+              enabled={enabled}
+              visible={visible}
+              path={path}
+              uischema={uischema}
+              schema={schema}
+              rootSchema={rootSchema}
+              handleChange={handleChange}
+              errors={errors}
+              config={config}
+            />
+          }
+        />
+      </Tooltip>
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>
+        {secondFormHelperText}
+      </FormHelperText>
     </Hidden>
   );
 };