refactor(form-builder): refactor and improve styles of date input

sanity-io · Mar 16, 2021 · 735b50c · 735b50c
1 parent 05e6555
commit 735b50c
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 169 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/DateInputs/base/DateTimeInput.tsx b/packages/@sanity/form-builder/src/inputs/DateInputs/base/DateTimeInput.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react'
 import FocusLock from 'react-focus-lock'
-import {Box, Button, Layer, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
+import {Box, Button, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
 import {CalendarIcon} from '@sanity/icons'
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
@@ -53,9 +53,8 @@ export const DateTimeInput = React.forwardRef(function DateTimeInput(
       value={inputValue}
       onChange={onInputChange}
       suffix={
-        <Layer zOffset={1000}>
+        <LayerProvider zOffset={1000}>
           <Popover
-            ref={setPopoverRef}
             content={
               <FocusLock onDeactivation={handleDeactivation}>
                 <DatePicker
@@ -67,9 +66,10 @@ export const DateTimeInput = React.forwardRef(function DateTimeInput(
                 />
               </FocusLock>
             }
-            padding={1}
-            placement="bottom-end"
             open={isPickerOpen}
+            placement="bottom-end"
+            ref={setPopoverRef}
+            radius={2}
           >
             <Box padding={1}>
               <Button
@@ -82,7 +82,7 @@ export const DateTimeInput = React.forwardRef(function DateTimeInput(
               />
             </Box>
           </Popover>
-        </Layer>
+        </LayerProvider>
       }
     />
   )