Skip to content

Commit 21dd591

Browse files
MaxouwellMaxouwell
authored
react-material: Add tooltips for MaterialArrayLayout and MaterialArrayControl (#2295)
* Add tooltips for remove, up and down button on MaterialArrayLayout and MaterialArrayControl
1 parent 2bfe9aa commit 21dd591

File tree

5 files changed

+377
-46
lines changed

5 files changed

+377
-46
lines changed

‎packages/material-renderers/src/complex/MaterialTableControl.tsx

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
TableCell,
4343
TableHead,
4444
TableRow,
45+
Tooltip,
4546
Typography,
4647
} from '@mui/material';
4748
import {
@@ -319,35 +320,55 @@ const NonEmptyRowComponent = ({
319320
{showSortButtons ? (
320321
<Fragment>
321322
<Grid item>
322-
<IconButton
323-
aria-label={translations.upAriaLabel}
324-
onClick={moveUp}
325-
disabled={!enableUp}
326-
size='large'
323+
<Tooltip
324+
id='tooltip-up'
325+
title={translations.up}
326+
placement='bottom'
327+
open={enableUp ? undefined : false}
327328
>
328-
<ArrowUpward />
329-
</IconButton>
329+
<IconButton
330+
aria-label={translations.upAriaLabel}
331+
onClick={moveUp}
332+
disabled={!enableUp}
333+
size='large'
334+
>
335+
<ArrowUpward />
336+
</IconButton>
337+
</Tooltip>
330338
</Grid>
331339
<Grid item>
332-
<IconButton
333-
aria-label={translations.downAriaLabel}
334-
onClick={moveDown}
335-
disabled={!enableDown}
336-
size='large'
340+
<Tooltip
341+
id='tooltip-down'
342+
title={translations.down}
343+
placement='bottom'
344+
open={enableDown ? undefined : false}
337345
>
338-
<ArrowDownward />
339-
</IconButton>
346+
<IconButton
347+
aria-label={translations.downAriaLabel}
348+
onClick={moveDown}
349+
disabled={!enableDown}
350+
size='large'
351+
>
352+
<ArrowDownward />
353+
</IconButton>
354+
</Tooltip>
340355
</Grid>
341356
</Fragment>
342357
) : null}
343358
<Grid item>
344-
<IconButton
345-
aria-label={translations.removeAriaLabel}
346-
onClick={() => openDeleteDialog(childPath, rowIndex)}
347-
size='large'
359+
<Tooltip
360+
id='tooltip-remove'
361+
title={translations.removeTooltip}
362+
placement='bottom'
348363
>
349-
<DeleteIcon />
350-
</IconButton>
364+
<IconButton
365+
aria-label={translations.removeAriaLabel}
366+
onClick={() => openDeleteDialog(childPath, rowIndex)}
367+
size='large'
368+
>
369+
<DeleteIcon />
370+
</IconButton>
371+
</Tooltip>
351372
</Grid>
352373
</Grid>
353374
</NoBorderTableCell>

‎packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
Avatar,
4040
Grid,
4141
IconButton,
42+
Tooltip,
4243
} from '@mui/material';
4344
import {
4445
ExpandMore as ExpandMoreIcon,
@@ -169,41 +170,61 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
169170
{showSortButtons && enabled ? (
170171
<Fragment>
171172
<Grid item>
172-
<IconButton
173-
onClick={moveUp(path, index)}
174-
style={iconStyle}
175-
disabled={!enableMoveUp}
176-
aria-label={translations.upAriaLabel}
177-
size='large'
173+
<Tooltip
174+
id='tooltip-up'
175+
title={translations.up}
176+
placement='bottom'
177+
open={enableMoveUp ? undefined : false}
178178
>
179-
<ArrowUpward />
180-
</IconButton>
179+
<IconButton
180+
onClick={moveUp(path, index)}
181+
style={iconStyle}
182+
disabled={!enableMoveUp}
183+
aria-label={translations.upAriaLabel}
184+
size='large'
185+
>
186+
<ArrowUpward />
187+
</IconButton>
188+
</Tooltip>
181189
</Grid>
182190
<Grid item>
183-
<IconButton
184-
onClick={moveDown(path, index)}
185-
style={iconStyle}
186-
disabled={!enableMoveDown}
187-
aria-label={translations.downAriaLabel}
188-
size='large'
191+
<Tooltip
192+
id='tooltip-down'
193+
title={translations.down}
194+
placement='bottom'
195+
open={enableMoveDown ? undefined : false}
189196
>
190-
<ArrowDownward />
191-
</IconButton>
197+
<IconButton
198+
onClick={moveDown(path, index)}
199+
style={iconStyle}
200+
disabled={!enableMoveDown}
201+
aria-label={translations.downAriaLabel}
202+
size='large'
203+
>
204+
<ArrowDownward />
205+
</IconButton>
206+
</Tooltip>
192207
</Grid>
193208
</Fragment>
194209
) : (
195210
''
196211
)}
197212
{enabled && (
198213
<Grid item>
199-
<IconButton
200-
onClick={removeItems(path, [index])}
201-
style={iconStyle}
202-
aria-label={translations.removeAriaLabel}
203-
size='large'
214+
<Tooltip
215+
id='tooltip-remove'
216+
title={translations.removeTooltip}
217+
placement='bottom'
204218
>
205-
<DeleteIcon />
206-
</IconButton>
219+
<IconButton
220+
onClick={removeItems(path, [index])}
221+
style={iconStyle}
222+
aria-label={translations.removeAriaLabel}
223+
size='large'
224+
>
225+
<DeleteIcon />
226+
</IconButton>
227+
</Tooltip>
207228
</Grid>
208229
)}
209230
</Grid>

‎packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@
2323
THE SOFTWARE.
2424
*/
2525
import './MatchMediaMock';
26-
import { ControlElement, DispatchCellProps, JsonSchema } from '@jsonforms/core';
26+
import {
27+
ArrayTranslationEnum,
28+
ControlElement,
29+
DispatchCellProps,
30+
JsonSchema,
31+
} from '@jsonforms/core';
2732
import * as React from 'react';
2833

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

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

@@ -699,4 +705,108 @@ describe('Material array control', () => {
699705
.find({ 'aria-label': 'Move item down' });
700706
expect(downButton.is('[disabled]')).toBe(true);
701707
});
708+
709+
it('should have a tooltip for add button', () => {
710+
wrapper = checkTooltip(
711+
fixture.schema,
712+
fixture.uischema,
713+
wrapper,
714+
(wrapper) => wrapper.find('tr').at(0),
715+
ArrayTranslationEnum.addTooltip,
716+
{
717+
id: 'tooltip-add',
718+
},
719+
fixture.data
720+
);
721+
});
722+
it('should have a translatable tooltip for add button', () => {
723+
wrapper = checkTooltipTranslation(
724+
fixture.schema,
725+
fixture.uischema,
726+
wrapper,
727+
(wrapper) => wrapper.find('tr').at(0),
728+
{
729+
id: 'tooltip-add',
730+
},
731+
fixture.data
732+
);
733+
});
734+
735+
it('should have a tooltip for delete button', () => {
736+
wrapper = checkTooltip(
737+
fixture2.schema,
738+
fixture2.uischema,
739+
wrapper,
740+
(wrapper) => wrapper.find('tr').at(1),
741+
ArrayTranslationEnum.removeTooltip,
742+
{
743+
id: 'tooltip-remove',
744+
},
745+
fixture2.data
746+
);
747+
});
748+
it('should have a translatable tooltip for delete button', () => {
749+
wrapper = checkTooltipTranslation(
750+
fixture2.schema,
751+
fixture2.uischema,
752+
wrapper,
753+
(wrapper) => wrapper.find('tr').at(1),
754+
{
755+
id: 'tooltip-remove',
756+
},
757+
fixture2.data
758+
);
759+
});
760+
761+
it('should have a tooltip for up button', () => {
762+
wrapper = checkTooltip(
763+
fixture2.schema,
764+
fixture2.uischema,
765+
wrapper,
766+
(wrapper) => wrapper.find('tr').at(1),
767+
ArrayTranslationEnum.up,
768+
{
769+
id: 'tooltip-up',
770+
},
771+
fixture2.data
772+
);
773+
});
774+
it('should have a translatable tooltip for up button', () => {
775+
wrapper = checkTooltipTranslation(
776+
fixture2.schema,
777+
fixture2.uischema,
778+
wrapper,
779+
(wrapper) => wrapper.find('tr').at(1),
780+
{
781+
id: 'tooltip-up',
782+
},
783+
fixture2.data
784+
);
785+
});
786+
787+
it('should have a tooltip for down button', () => {
788+
wrapper = checkTooltip(
789+
fixture2.schema,
790+
fixture2.uischema,
791+
wrapper,
792+
(wrapper) => wrapper.find('tr').at(1),
793+
ArrayTranslationEnum.down,
794+
{
795+
id: 'tooltip-down',
796+
},
797+
fixture2.data
798+
);
799+
});
800+
it('should have a translatable tooltip for down button', () => {
801+
wrapper = checkTooltipTranslation(
802+
fixture2.schema,
803+
fixture2.uischema,
804+
wrapper,
805+
(wrapper) => wrapper.find('tr').at(1),
806+
{
807+
id: 'tooltip-down',
808+
},
809+
fixture2.data
810+
);
811+
});
702812
});

0 commit comments

Comments
 (0)