Replace hidden text in BooleanField by tooltip

Closes #4047
marmelab · Nov 26, 2019 · 081ddcd · 081ddcd
1 parent 5c38c08
commit 081ddcd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 60 deletions.
diff --git 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
 <BooleanField source="published" valueLabelTrue="Has been published" valueLabelFalse="Has not been published yet" />
 
 // Translation keys

diff --git 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('<BooleanField />', () => {
     afterEach(cleanup);
     it('should display tick and truthy text if value is true', () => {
-        const { queryByText } = render(<BooleanField {...defaultProps} />);
-        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(<BooleanField {...defaultProps} />);
+        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(
             <BooleanField
                 {...defaultProps}
                 valueLabelTrue="Has been published"
             />
         );
-        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(
             <BooleanField {...defaultProps} record={{ published: false }} />
         );
-        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(
             <BooleanField
                 {...defaultProps}
                 record={{ published: false }}
                 valueLabelFalse="Has not been published"
             />
         );
-        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(
             <BooleanField {...defaultProps} record={{ published: null }} />
         );
-        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('<BooleanField />', () => {
     });
 
     it('should handle deep fields', () => {
-        const { queryByText } = render(
+        const { queryByTitle } = render(
             <BooleanField
                 {...defaultProps}
                 record={{ foo: { bar: true } }}
                 source="foo.bar"
             />
         );
-        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
@@ -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)}
             >
-                <span className={classes.label}>
-                    {translate(ariaLabel, { _: ariaLabel })}
-                </span>
-                <FalseIcon data-testid="false" />
+                <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
+                    <FalseIcon data-testid="false" />
+                </Tooltip>
             </Typography>
         );
     }
@@ -84,10 +59,9 @@ export const BooleanField: FunctionComponent<
                 className={className}
                 {...sanitizeRestProps(rest)}
             >
-                <span className={classes.label}>
-                    {translate(ariaLabel, { _: ariaLabel })}
-                </span>
-                <TrueIcon data-testid="true" />
+                <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
+                    <TrueIcon data-testid="true" />
+                </Tooltip>
             </Typography>
         );
     }