From 081ddcd9f18d6e1e24049aec5c4441387b648879 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Tue, 26 Nov 2019 22:11:29 +0100 Subject: [PATCH] Replace hidden text in BooleanField by tooltip Closes #4047 --- docs/Fields.md | 6 +-- .../src/field/BooleanField.spec.js | 42 +++++++++---------- .../src/field/BooleanField.tsx | 42 ++++--------------- 3 files changed, 30 insertions(+), 60 deletions(-) diff --git a/docs/Fields.md b/docs/Fields.md index 195961b5631..2e8439df098 100644 --- a/docs/Fields.md +++ b/docs/Fields.md @@ -149,12 +149,12 @@ import { BooleanField } from 'react-admin'; ![BooleanField](./img/boolean-field.png) -The `BooleanField` also includes an hidden text for accessibility (or to query in end to end tests). By default, it includes the translated label and the translated value, for example `Published: false`. +The `BooleanField` also includes a tooltip text for accessibility (or to query in end to end tests). By default, it is the translated value ('true' or 'false' in English). -If you need to override it, you can use the `valueLabelTrue` and `valueLabelFalse` props which both accept a string. Those strings may be translation keys: +If you need to override it, you can use the `valueLabelTrue` and `valueLabelFalse` props, which both accept a string. These strings may be translation keys: ```jsx -// Simple texts +// English labels // Translation keys diff --git a/packages/ra-ui-materialui/src/field/BooleanField.spec.js b/packages/ra-ui-materialui/src/field/BooleanField.spec.js index fb58515993a..655de62f99b 100644 --- a/packages/ra-ui-materialui/src/field/BooleanField.spec.js +++ b/packages/ra-ui-materialui/src/field/BooleanField.spec.js @@ -13,54 +13,50 @@ const defaultProps = { describe('', () => { afterEach(cleanup); it('should display tick and truthy text if value is true', () => { - const { queryByText } = render(); - expect(queryByText('ra.boolean.true')).not.toBeNull(); - expect(queryByText('ra.boolean.true').nextSibling.dataset.testid).toBe( - 'true' - ); - expect(queryByText('ra.boolean.false')).toBeNull(); + const { queryByTitle } = render(); + expect(queryByTitle('ra.boolean.true')).not.toBeNull(); + expect(queryByTitle('ra.boolean.true').dataset.testid).toBe('true'); + expect(queryByTitle('ra.boolean.false')).toBeNull(); }); it('should use valueLabelTrue for custom truthy text', () => { - const { queryByText } = render( + const { queryByTitle } = render( ); - expect(queryByText('ra.boolean.true')).toBeNull(); - expect(queryByText('Has been published')).not.toBeNull(); + expect(queryByTitle('ra.boolean.true')).toBeNull(); + expect(queryByTitle('Has been published')).not.toBeNull(); }); it('should display cross and falsy text if value is false', () => { - const { queryByText } = render( + const { queryByTitle } = render( ); - expect(queryByText('ra.boolean.true')).toBeNull(); - expect(queryByText('ra.boolean.false')).not.toBeNull(); - expect(queryByText('ra.boolean.false').nextSibling.dataset.testid).toBe( - 'false' - ); + expect(queryByTitle('ra.boolean.true')).toBeNull(); + expect(queryByTitle('ra.boolean.false')).not.toBeNull(); + expect(queryByTitle('ra.boolean.false').dataset.testid).toBe('false'); }); it('should use valueLabelFalse for custom falsy text', () => { - const { queryByText } = render( + const { queryByTitle } = render( ); - expect(queryByText('ra.boolean.false')).toBeNull(); - expect(queryByText('Has not been published')).not.toBeNull(); + expect(queryByTitle('ra.boolean.false')).toBeNull(); + expect(queryByTitle('Has not been published')).not.toBeNull(); }); it('should not display anything if value is null', () => { - const { queryByText } = render( + const { queryByTitle } = render( ); - expect(queryByText('ra.boolean.true')).toBeNull(); - expect(queryByText('ra.boolean.false')).toBeNull(); + expect(queryByTitle('ra.boolean.true')).toBeNull(); + expect(queryByTitle('ra.boolean.false')).toBeNull(); }); it('should use custom className', () => { @@ -75,13 +71,13 @@ describe('', () => { }); it('should handle deep fields', () => { - const { queryByText } = render( + const { queryByTitle } = render( ); - expect(queryByText('ra.boolean.true')).not.toBeNull(); + expect(queryByTitle('ra.boolean.true')).not.toBeNull(); }); }); diff --git a/packages/ra-ui-materialui/src/field/BooleanField.tsx b/packages/ra-ui-materialui/src/field/BooleanField.tsx index e5dc85144d4..44a622554ba 100644 --- a/packages/ra-ui-materialui/src/field/BooleanField.tsx +++ b/packages/ra-ui-materialui/src/field/BooleanField.tsx @@ -4,37 +4,14 @@ import get from 'lodash/get'; import pure from 'recompose/pure'; import FalseIcon from '@material-ui/icons/Clear'; import TrueIcon from '@material-ui/icons/Done'; -import Typography, { TypographyProps } from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import { Tooltip, Typography } from '@material-ui/core'; +import { TypographyProps } from '@material-ui/core/Typography'; import compose from 'recompose/compose'; import { useTranslate } from 'ra-core'; import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types'; import sanitizeRestProps from './sanitizeRestProps'; -const useStyles = makeStyles( - { - label: { - // Move the text out of the flow of the container. - position: 'absolute', - - // Reduce its height and width to just one pixel. - height: 1, - width: 1, - - // Hide any overflowing elements or text. - overflow: 'hidden', - - // Clip the box to zero pixels. - clip: 'rect(0, 0, 0, 0)', - - // Text won't wrap to a second line. - whiteSpace: 'nowrap', - }, - }, - { name: 'RaBooleanField' } -); - interface Props extends FieldProps { valueLabelTrue?: string; valueLabelFalse?: string; @@ -51,7 +28,6 @@ export const BooleanField: FunctionComponent< valueLabelFalse, ...rest }) => { - const classes = useStyles({ classes: classesOverride }); const translate = useTranslate(); const value = get(record, source); let ariaLabel = value ? valueLabelTrue : valueLabelFalse; @@ -68,10 +44,9 @@ export const BooleanField: FunctionComponent< className={className} {...sanitizeRestProps(rest)} > - - {translate(ariaLabel, { _: ariaLabel })} - - + + + ); } @@ -84,10 +59,9 @@ export const BooleanField: FunctionComponent< className={className} {...sanitizeRestProps(rest)} > - - {translate(ariaLabel, { _: ariaLabel })} - - + + + ); }