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.

Sign up for GitHub

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

Jump to bottom

Show description or tooltip on boolean controls #2072

Merged
merged 4 commits into from
Jan 9, 2023
Merged

Show description or tooltip on boolean controls #2072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6ff90d0
Show description or tooltip for checkboxes
brockfanning Jan 9, 2023
2964308
Add description to boolean example
brockfanning Jan 9, 2023
d229886
Document hardcoded parameters in boolean control
brockfanning Jan 9, 2023
d292be4
Give toggle booleans the same description treatment as checkboxes
brockfanning Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/examples/src/examples/control-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ export const schema = {
type: 'string'
},
boolean: {
type: 'boolean'
type: 'boolean',
description: 'Boolean description as a tooltip'
},
number: {
type: 'number'
Expand Down
89 changes: 66 additions & 23 deletions packages/material-renderers/src/controls/MaterialBooleanControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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(
lucas-koehler marked this conversation as resolved.
Show resolved Hide resolved
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>
);
};
Expand Down
89 changes: 66 additions & 23 deletions packages/material-renderers/src/controls/MaterialBooleanToggleControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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>
);
};
Expand Down