Use React Material UI's builtin required

Material UI supports handing over a 'required' prop to their components.
We now use this prop instead of appending an asterisk manually to  the
control labels in the React Material renderer set . Using this approach the
asterisk is rendered in a consistent and themeable way.

Closes #1695

Signed-off-by: Lukas Boll <[email protected]>

Author: LukasBoll

packages/core/src/util/renderer.ts

@@ -88,6 +88,7 @@ const isRequired = (
  *
  * @param {string} label the label string
  * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
  * @returns {string} the label string
  */
 export const computeLabel = (
@@ -98,6 +99,20 @@ export const computeLabel = (
   return required && !hideRequiredAsterisk ? label + '*' : label;
 };
 
+/**
+ * Indicates whether to mark a field as required.
+ *
+ * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
+ * @returns {boolean} should the field be marked as required
+ */
+ export const showAsRequired = (
+  required: boolean,
+  hideRequiredAsterisk: boolean
+): boolean => {
+  return required && !hideRequiredAsterisk;
+};
+
 /**
  * Create a default value based on the given scheam.
  * @param schema the schema for which to create a default value.

packages/material/src/controls/MaterialInputControl.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import {
-  computeLabel,
+  showAsRequired,
   ControlProps,
   ControlState,
   isDescriptionHidden,
@@ -84,12 +84,10 @@ export abstract class MaterialInputControl extends Control<
           <InputLabel
             htmlFor={id + '-input'}
             error={!isValid}
+            required={showAsRequired(required,
+              appliedUiSchemaOptions.hideRequiredAsterisk)}
           >
-            {computeLabel(
-              label,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
+            {label}
           </InputLabel>
           <InnerComponent
             {...this.props}

packages/material/src/controls/MaterialNativeControl.tsx

@@ -24,9 +24,9 @@
 */
 import React from 'react';
 import {
-  computeLabel,
   ControlProps,
   ControlState,
+  showAsRequired,
   isDateControl,
   isDescriptionHidden,
   isTimeControl,
@@ -73,12 +73,10 @@ export class MaterialNativeControl extends Control<ControlProps, ControlState> {
     return (
       <Hidden xsUp={!visible}>
         <TextField
+          required={showAsRequired(required,
+            appliedUiSchemaOptions.hideRequiredAsterisk)}
           id={id + '-input'}
-          label={computeLabel(
-            label,
-            required,
-            appliedUiSchemaOptions.hideRequiredAsterisk
-          )}
+          label={label}
           type={fieldType}
           error={!isValid}
           disabled={!enabled}

packages/material/src/controls/MaterialRadioGroup.tsx

@@ -25,9 +25,9 @@
 import merge from 'lodash/merge';
 import React from 'react';
 import {
-  computeLabel,
   ControlProps,
   ControlState,
+  showAsRequired,
   isDescriptionHidden,
   OwnPropsOfEnum
 } from '@jsonforms/core';
@@ -81,12 +81,10 @@ export class MaterialRadioGroup extends Control<
             htmlFor={id}
             error={!isValid}
             component={'legend' as 'label'}
+            required={showAsRequired(required,
+              appliedUiSchemaOptions.hideRequiredAsterisk)}
           >
-            {computeLabel(
-              label,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
+            {label}
           </FormLabel>
 
           <RadioGroup

packages/material/src/controls/MaterialSliderControl.tsx

@@ -24,9 +24,9 @@
 */
 import React from 'react';
 import {
-  computeLabel,
   ControlProps,
   ControlState,
+  showAsRequired,
   isDescriptionHidden,
   isRangeControl,
   RankedTester,
@@ -37,6 +37,7 @@ import { Control, withJsonFormsControlProps } from '@jsonforms/react';
 import {
   FormControl,
   FormHelperText,
+  FormLabel,
   Hidden,
   Slider,
   Typography
@@ -95,13 +96,17 @@ export class MaterialSliderControl extends Control<ControlProps, ControlState> {
           onBlur={this.onBlur}
           id={id}
         >
-          <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
-            {computeLabel(
-              label,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
-          </Typography>
+          <FormLabel
+            htmlFor={id}
+            error={!isValid}
+            component={'legend' as 'label'}
+            required={showAsRequired(required,
+              appliedUiSchemaOptions.hideRequiredAsterisk)}
+          >
+            <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
+              {label}
+            </Typography>
+          </FormLabel>
           <div style={rangeContainerStyle}>
             <Typography style={rangeItemStyle} variant='caption' align='left'>
               {schema.minimum}

packages/material/test/renderers/MaterialInputControl.test.tsx

@@ -283,7 +283,7 @@ describe('Material input control', () => {
       </JsonFormsStateProvider>
     );
     const label = wrapper.find('label').first();
-    expect(label.text()).toBe('Date Cell*');
+    expect(label.text()).toBe('Date Cell *');
   });
 
   it('should not display a marker for a non-required prop', () => {