fix(studio): adding tooltip to read-only bool inputs (#6580)

* fix(studio): adding tooltip to read-only bool inputs * fix(studio): testing for tooltip on boolean read-only inputs * fix(studio): removing memoisation as it was useless
sanity-io · May 14, 2024 · 55153ac · 55153ac
1 parent db06da9
commit 55153ac
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/dev/test-studio/schema/standard/booleans.ts b/dev/test-studio/schema/standard/booleans.ts
@@ -20,11 +20,23 @@ export default defineType({
       title: 'Title',
     },
     {
-      name: 'switchTest',
+      name: 'switch_doesnt_exist',
       type: 'boolean',
       title: `I'm a switch`,
       description: 'Try toggling me! This is the new switch design',
     },
+    {
+      name: 'switchTest',
+      type: 'boolean',
+      title: `true & Read only`,
+      readOnly: true,
+    },
+    {
+      name: 'switch',
+      type: 'boolean',
+      title: `false & Read only`,
+      readOnly: true,
+    },
     {
       name: 'switchIndeterminate2',
       type: 'boolean',
@@ -42,12 +54,6 @@ export default defineType({
         layout: 'checkbox',
       },
     },
-    {
-      name: 'switch',
-      type: 'boolean',
-      description: 'Should be either true or false',
-      title: 'Check me?',
-    },
     {
       name: 'checkbox',
       type: 'boolean',

diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.test.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.test.tsx
@@ -1,5 +1,6 @@
 import {describe, expect, it} from '@jest/globals'
 import {defineField} from '@sanity/types'
+import {fireEvent, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import {renderBooleanInput} from '../../../../test/form/renderBooleanInput'
@@ -171,6 +172,18 @@ describe('readOnly property', () => {
     expect(input).not.toHaveFocus()
   })
 
+  it('renders a tooltip on the switch', async () => {
+    const {container} = await renderBooleanInput({
+      fieldDefinition: defs.booleanReadOnly,
+      render: (inputProps) => <BooleanInput {...inputProps} readOnly />,
+    })
+
+    const input = container.querySelector('input[id="booleanReadOnly"]')
+    fireEvent.mouseEnter(input!)
+
+    await waitFor(() => screen.getByText('Disabled'))
+  })
+
   it('does not make field read-only with callback', async () => {
     const {onChange, result} = await renderBooleanInput({
       fieldDefinition: defs.readOnlyCallback,

diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
@@ -1,6 +1,8 @@
 import {Box, Card, type CardTone, Checkbox, Flex, Switch} from '@sanity/ui'
 import {styled} from 'styled-components'
 
+import {Tooltip} from '../../../ui-components'
+import {useTranslation} from '../../i18n/hooks/useTranslation'
 import {FormFieldHeaderText} from '../components/formField/FormFieldHeaderText'
 import {FormFieldStatus} from '../components/formField/FormFieldStatus'
 import {type BooleanInputProps} from '../types'
@@ -23,6 +25,7 @@ const ZeroLineHeightBox = styled(Box)`
  * @beta
  */
 export function BooleanInput(props: BooleanInputProps) {
+  const {t} = useTranslation()
   const {id, value, schemaType, readOnly, elementProps, validation} = props
   const layout = schemaType.options?.layout || 'switch'
 
@@ -33,19 +36,23 @@ export function BooleanInput(props: BooleanInputProps) {
 
   const tone: CardTone | undefined = readOnly ? 'transparent' : undefined
 
+  const input = (
+    <ZeroLineHeightBox padding={3}>
+      <LayoutSpecificInput
+        label={schemaType.title}
+        {...elementProps}
+        checked={checked}
+        readOnly={readOnly}
+        indeterminate={indeterminate}
+        style={{margin: -4}}
+      />
+    </ZeroLineHeightBox>
+  )
+
   return (
     <Root border data-testid="boolean-input" radius={2} tone={tone}>
       <Flex>
-        <ZeroLineHeightBox padding={3}>
-          <LayoutSpecificInput
-            label={schemaType.title}
-            {...elementProps}
-            checked={checked}
-            disabled={readOnly}
-            indeterminate={indeterminate}
-            style={{margin: -4}}
-          />
-        </ZeroLineHeightBox>
+        {readOnly ? <Tooltip content={t('inputs.boolean.disabled')}>{input}</Tooltip> : input}
         <Box flex={1} paddingY={2}>
           <FormFieldHeaderText
             deprecated={schemaType.deprecated}

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -506,6 +506,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.array.read-only-label': 'This field is read-only',
   /** Label for when the array input is resolving the initial value for the item */
   'inputs.array.resolving-initial-value': 'Resolving initial value…',
+  /** Tooltip content when boolean input is disabled */
+  'inputs.boolean.disabled': 'Disabled',
   /** Placeholder value for datetime input */
   'inputs.datetime.placeholder': 'e.g. {{example}}',
   /** Acessibility label for button to open file options menu */