Merge pull request #6381 from VikrantShirvankar/field-title-label

Add ability to hide input labels with label=false
marmelab · Jun 28, 2021 · 7997a82 · 7997a82
2 parents 18e06d6 + 567b0a8
commit 7997a82
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 31 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -33,7 +33,7 @@ All input components accept the following props:
 | Prop            | Required | Type                      | Default | Description                                                                                                                  |
 | --------------- | -------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | `source`        | Required | `string`                  | -       | Name of the entity property to use for the input value                                                                       |
-| `label`         | Optional | `string`                  | -       | Input label. In i18n apps, the label is passed to the `translate` function. Defaults to the humanized `source` when omitted. |
+| `label`         | Optional | `string`                  | -       | Input label. In i18n apps, the label is passed to the `translate` function. Defaults to the humanized `source` when omitted. Set `label={false}` to hide the label. |
 | `validate`      | Optional | `Function` &#124; `array` | -       | Validation rules for the current property. See the [Validation Documentation](./CreateEdit.md#validation) for details.       |
 | `helperText`    | Optional | `string`                  | -       | Text to be displayed under the input                                                                                         |
 | `fullWidth`     | Optional | `boolean`                 | `false` | If `true`, the input will expand to fill the form width                                                                      |

diff --git a/packages/ra-core/src/util/FieldTitle.spec.tsx b/packages/ra-core/src/util/FieldTitle.spec.tsx
@@ -82,4 +82,14 @@ describe('FieldTitle', () => {
         const { container } = render(<FieldTitle label="foo" isRequired />);
         expect(container.firstChild.textContent).toEqual('foo *');
     });
+
+    it('should return null if label is false', () => {
+        const { container } = render(<FieldTitle label={false} isRequired />);
+        expect(container.firstChild).toBeNull();
+    });
+
+    it('should return null if label is empty string', () => {
+        const { container } = render(<FieldTitle label="" isRequired />);
+        expect(container.firstChild).toBeNull();
+    });
 });
diff --git a/packages/ra-core/src/util/FieldTitle.tsx b/packages/ra-core/src/util/FieldTitle.tsx
@@ -8,7 +8,7 @@ interface Props {
     isRequired?: boolean;
     resource?: string;
     source?: string;
-    label?: string | ReactElement;
+    label?: string | ReactElement | false;
 }
 
 export const FieldTitle: FunctionComponent<Props> = ({
@@ -18,9 +18,15 @@ export const FieldTitle: FunctionComponent<Props> = ({
     isRequired,
 }) => {
     const translate = useTranslate();
+
+    if (label === false || label === '') {
+        return null;
+    }
+
     if (label && typeof label !== 'string') {
         return label;
     }
+
     return (
         <span>
             {translate(

diff --git a/packages/ra-input-rich-text/src/index.tsx b/packages/ra-input-rich-text/src/index.tsx
@@ -137,16 +137,14 @@ const RichTextInput: FunctionComponent<Props> = props => {
             className="ra-rich-text-input"
             margin={margin}
         >
-            {label !== '' && label !== false && (
-                <InputLabel shrink htmlFor={id} className={classes.label}>
-                    <FieldTitle
-                        label={label}
-                        source={source}
-                        resource={resource}
-                        isRequired={isRequired}
-                    />
-                </InputLabel>
-            )}
+            <InputLabel shrink htmlFor={id} className={classes.label}>
+                <FieldTitle
+                    label={label}
+                    source={source}
+                    resource={resource}
+                    isRequired={isRequired}
+                />
+            </InputLabel>
             <div data-testid="quill" ref={divRef} className={variant} />
             <FormHelperText
                 error={!!error}
@@ -163,7 +161,8 @@ const RichTextInput: FunctionComponent<Props> = props => {
 };
 
 RichTextInput.propTypes = {
-    label: PropTypes.string,
+    // @ts-ignore
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     source: PropTypes.string,
     fullWidth: PropTypes.bool,

diff --git a/packages/ra-ui-materialui/src/input/ArrayInput.tsx b/packages/ra-ui-materialui/src/input/ArrayInput.tsx
@@ -148,7 +148,7 @@ ArrayInput.propTypes = {
     className: PropTypes.string,
     defaultValue: PropTypes.any,
     isRequired: PropTypes.bool,
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     helperText: PropTypes.string,
     resource: PropTypes.string,
     source: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -238,7 +238,7 @@ const useStyles = makeStyles(
 CheckboxGroupInput.propTypes = {
     choices: PropTypes.arrayOf(PropTypes.object),
     className: PropTypes.string,
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     source: PropTypes.string,
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([

diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx
@@ -121,7 +121,7 @@ const DateInput = ({
 };
 
 DateInput.propTypes = {
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx
@@ -139,7 +139,7 @@ const DateTimeInput = ({
 };
 
 DateTimeInput.propTypes = {
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/InputPropTypes.ts b/packages/ra-ui-materialui/src/input/InputPropTypes.ts
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
  * Common PropTypes for all react-admin inputs
  */
 const InputPropTypes = {
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     resource: PropTypes.string,
     source: PropTypes.string,
 };

diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx
@@ -113,7 +113,7 @@ const NullableBooleanInput: FunctionComponent<NullableBooleanInputProps> = props
 };
 
 NullableBooleanInput.propTypes = {
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx
@@ -95,7 +95,7 @@ const NumberInput: FunctionComponent<NumberInputProps> = ({
 };
 
 NumberInput.propTypes = {
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -197,7 +197,7 @@ const RadioButtonGroupInput: FunctionComponent<RadioButtonGroupInputProps> = pro
 
 RadioButtonGroupInput.propTypes = {
     choices: PropTypes.arrayOf(PropTypes.any),
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([
         PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -291,7 +291,7 @@ SelectArrayInput.propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
     children: PropTypes.node,
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([
         PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/input/TextInput.tsx b/packages/ra-ui-materialui/src/input/TextInput.tsx
@@ -62,15 +62,12 @@ const TextInput: FunctionComponent<TextInputProps> = ({
             id={id}
             {...input}
             label={
-                label !== '' &&
-                label !== false && (
-                    <FieldTitle
-                        label={label}
-                        source={source}
-                        resource={resource}
-                        isRequired={isRequired}
-                    />
-                )
+                <FieldTitle
+                    label={label}
+                    source={source}
+                    resource={resource}
+                    isRequired={isRequired}
+                />
             }
             error={!!(touched && (error || submitError))}
             helperText={