Skip to content

Commit

Permalink
react-material: Add tooltips for MaterialArrayLayout and MaterialArra…
Browse files Browse the repository at this point in the history 
…yControl (#2295)

* Add tooltips for remove, up and down button on MaterialArrayLayout and MaterialArrayControl
  • Loading branch information
@Maxouwell
Maxouwell committed Feb 27, 2024
1 parent 2bfe9aa commit 21dd591
Show file tree
Hide file tree
Showing 5 changed files with 377 additions and 46 deletions.
61 changes: 41 additions & 20 deletions packages/material-renderers/src/complex/MaterialTableControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import {
TableCell,
TableHead,
TableRow,
Tooltip,
Typography,
} from '@mui/material';
import {
Expand Down Expand Up @@ -319,35 +320,55 @@ const NonEmptyRowComponent = ({
{showSortButtons ? (
<Fragment>
<Grid item>
<IconButton
aria-label={translations.upAriaLabel}
onClick={moveUp}
disabled={!enableUp}
size='large'
<Tooltip
id='tooltip-up'
title={translations.up}
placement='bottom'
open={enableUp ? undefined : false}
>
<ArrowUpward />
</IconButton>
<IconButton
aria-label={translations.upAriaLabel}
onClick={moveUp}
disabled={!enableUp}
size='large'
>
<ArrowUpward />
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<IconButton
aria-label={translations.downAriaLabel}
onClick={moveDown}
disabled={!enableDown}
size='large'
<Tooltip
id='tooltip-down'
title={translations.down}
placement='bottom'
open={enableDown ? undefined : false}
>
<ArrowDownward />
</IconButton>
<IconButton
aria-label={translations.downAriaLabel}
onClick={moveDown}
disabled={!enableDown}
size='large'
>
<ArrowDownward />
</IconButton>
</Tooltip>
</Grid>
</Fragment>
) : null}
<Grid item>
<IconButton
aria-label={translations.removeAriaLabel}
onClick={() => openDeleteDialog(childPath, rowIndex)}
size='large'
<Tooltip
id='tooltip-remove'
title={translations.removeTooltip}
placement='bottom'
>
<DeleteIcon />
</IconButton>
<IconButton
aria-label={translations.removeAriaLabel}
onClick={() => openDeleteDialog(childPath, rowIndex)}
size='large'
>
<DeleteIcon />
</IconButton>
</Tooltip>
</Grid>
</Grid>
</NoBorderTableCell>
Expand Down
67 changes: 44 additions & 23 deletions packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
Avatar,
Grid,
IconButton,
Tooltip,
} from '@mui/material';
import {
ExpandMore as ExpandMoreIcon,
Expand Down Expand Up @@ -169,41 +170,61 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
{showSortButtons && enabled ? (
<Fragment>
<Grid item>
<IconButton
onClick={moveUp(path, index)}
style={iconStyle}
disabled={!enableMoveUp}
aria-label={translations.upAriaLabel}
size='large'
<Tooltip
id='tooltip-up'
title={translations.up}
placement='bottom'
open={enableMoveUp ? undefined : false}
>
<ArrowUpward />
</IconButton>
<IconButton
onClick={moveUp(path, index)}
style={iconStyle}
disabled={!enableMoveUp}
aria-label={translations.upAriaLabel}
size='large'
>
<ArrowUpward />
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<IconButton
onClick={moveDown(path, index)}
style={iconStyle}
disabled={!enableMoveDown}
aria-label={translations.downAriaLabel}
size='large'
<Tooltip
id='tooltip-down'
title={translations.down}
placement='bottom'
open={enableMoveDown ? undefined : false}
>
<ArrowDownward />
</IconButton>
<IconButton
onClick={moveDown(path, index)}
style={iconStyle}
disabled={!enableMoveDown}
aria-label={translations.downAriaLabel}
size='large'
>
<ArrowDownward />
</IconButton>
</Tooltip>
</Grid>
</Fragment>
) : (
''
)}
{enabled && (
<Grid item>
<IconButton
onClick={removeItems(path, [index])}
style={iconStyle}
aria-label={translations.removeAriaLabel}
size='large'
<Tooltip
id='tooltip-remove'
title={translations.removeTooltip}
placement='bottom'
>
<DeleteIcon />
</IconButton>
<IconButton
onClick={removeItems(path, [index])}
style={iconStyle}
aria-label={translations.removeAriaLabel}
size='large'
>
<DeleteIcon />
</IconButton>
</Tooltip>
</Grid>
)}
</Grid>
Expand Down
112 changes: 111 additions & 1 deletion packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@
THE SOFTWARE.
*/
import './MatchMediaMock';
import { ControlElement, DispatchCellProps, JsonSchema } from '@jsonforms/core';
import {
ArrayTranslationEnum,
ControlElement,
DispatchCellProps,
JsonSchema,
} from '@jsonforms/core';
import * as React from 'react';

import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
Expand All @@ -32,6 +37,7 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
import { initCore, TestEmitter } from './util';
import { checkTooltip, checkTooltipTranslation } from './tooltipChecker';

Enzyme.configure({ adapter: new Adapter() });

Expand Down Expand Up @@ -699,4 +705,108 @@ describe('Material array control', () => {
.find({ 'aria-label': 'Move item down' });
expect(downButton.is('[disabled]')).toBe(true);
});

it('should have a tooltip for add button', () => {
wrapper = checkTooltip(
fixture.schema,
fixture.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(0),
ArrayTranslationEnum.addTooltip,
{
id: 'tooltip-add',
},
fixture.data
);
});
it('should have a translatable tooltip for add button', () => {
wrapper = checkTooltipTranslation(
fixture.schema,
fixture.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(0),
{
id: 'tooltip-add',
},
fixture.data
);
});

it('should have a tooltip for delete button', () => {
wrapper = checkTooltip(
fixture2.schema,
fixture2.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(1),
ArrayTranslationEnum.removeTooltip,
{
id: 'tooltip-remove',
},
fixture2.data
);
});
it('should have a translatable tooltip for delete button', () => {
wrapper = checkTooltipTranslation(
fixture2.schema,
fixture2.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(1),
{
id: 'tooltip-remove',
},
fixture2.data
);
});

it('should have a tooltip for up button', () => {
wrapper = checkTooltip(
fixture2.schema,
fixture2.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(1),
ArrayTranslationEnum.up,
{
id: 'tooltip-up',
},
fixture2.data
);
});
it('should have a translatable tooltip for up button', () => {
wrapper = checkTooltipTranslation(
fixture2.schema,
fixture2.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(1),
{
id: 'tooltip-up',
},
fixture2.data
);
});

it('should have a tooltip for down button', () => {
wrapper = checkTooltip(
fixture2.schema,
fixture2.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(1),
ArrayTranslationEnum.down,
{
id: 'tooltip-down',
},
fixture2.data
);
});
it('should have a translatable tooltip for down button', () => {
wrapper = checkTooltipTranslation(
fixture2.schema,
fixture2.uischema,
wrapper,
(wrapper) => wrapper.find('tr').at(1),
{
id: 'tooltip-down',
},
fixture2.data
);
});
});

0 comments on commit 21dd591

Please sign in to comment.