Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to hide input labels with label=false #6381

Merged
merged 11 commits into from
Jun 28, 2021
2 changes: 1 addition & 1 deletion docs/Inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` | `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 |
Expand Down
10 changes: 10 additions & 0 deletions packages/ra-core/src/util/FieldTitle.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
8 changes: 7 additions & 1 deletion packages/ra-core/src/util/FieldTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface Props {
isRequired?: boolean;
resource?: string;
source?: string;
label?: string | ReactElement;
label?: string | ReactElement | false;
}

export const FieldTitle: FunctionComponent<Props> = ({
Expand All @@ -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(
Expand Down
21 changes: 10 additions & 11 deletions packages/ra-input-rich-text/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -163,7 +161,8 @@ const RichTextInput: FunctionComponent<Props> = props => {
};

RichTextInput.propTypes = {
label: PropTypes.string,
// @ts-ignore
fzaninotto marked this conversation as resolved.
Show resolved Hide resolved
label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
options: PropTypes.object,
source: PropTypes.string,
fullWidth: PropTypes.bool,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/ArrayInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/DateInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/DateTimeInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/InputPropTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/NumberInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
15 changes: 6 additions & 9 deletions packages/ra-ui-materialui/src/input/TextInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down