@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "^2.2.5",
+    "@sanity/color": "3.0.0-beta.3",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.2",

package/src/components/dialog/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Left/right border offsets for header + footer components (in px).
+ */
+export const BORDER_OFFSET_X: number = 12

package/src/components/dialog/dialog.tsx

@@ -8,12 +8,13 @@ import {
   isHTMLElement,
 } from '../../helpers'
 import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
-import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
+import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
+import {BORDER_OFFSET_X} from './constants'
 import {
   dialogStyle,
   responsiveDialogPositionStyle,
@@ -71,6 +72,15 @@ interface DialogCardProps extends ResponsiveWidthProps {
   shadow: number | number[]
 }
 
+interface DialogHeaderProps extends CardProps {
+  $hasScrolledFromTop: boolean
+  $isContentScrollable: boolean
+}
+interface DialogFooterProps extends CardProps {
+  $hasScrolledToBottom: boolean
+  $isContentScrollable: boolean
+}
+
 function isTargetWithinScope(
   boundaryElement: HTMLElement | null,
   portalElement: HTMLElement | null,
@@ -118,7 +128,7 @@ const DialogLayout = styled(Flex)`
   width: 100%;
 `
 
-const DialogHeader = styled(Card)`
+const DialogHeader = styled(Card)<DialogHeaderProps>`
   position: relative;
   z-index: 2;
 
@@ -126,10 +136,13 @@ const DialogHeader = styled(Card)`
     content: '';
     display: block;
     position: absolute;
-    left: 0;
-    right: 0;
+    left: ${BORDER_OFFSET_X}px;
+    right: ${BORDER_OFFSET_X}px;
     bottom: -1px;
-    border-bottom: 1px solid var(--card-hairline-soft-color);
+    border-bottom: 1px solid var(--card-border-color);
+    width: auto;
+    opacity: ${(props) => (props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0)};
+    transition: opacity 200ms ease-in;
   }
 `
 
@@ -140,10 +153,22 @@ const DialogContent = styled(Box)`
   outline: none;
 `
 
-const DialogFooter = styled(Box)`
+const DialogFooter = styled(Box)<DialogFooterProps>`
   position: relative;
   z-index: 3;
-  border-top: 1px solid var(--card-hairline-soft-color);
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: ${BORDER_OFFSET_X}px;
+    right: ${BORDER_OFFSET_X}px;
+    top: -1px;
+    border-top: 1px solid var(--card-border-color);
+    width: auto;
+    opacity: ${(props) => (props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0)};
+    transition: opacity 200ms ease-in;
+  }
 `
 
 const DialogCard = forwardRef(function DialogCard(
@@ -180,6 +205,9 @@ const DialogCard = forwardRef(function DialogCard(
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton
+  const [isContentScrollable, setIsContentScrollable] = useState(false)
+  const [hasScrolledFromTop, setHasScrolledFromTop] = useState(false)
+  const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false)
 
   useEffect(() => {
     if (!autoFocus) return
@@ -248,16 +276,44 @@ const DialogCard = forwardRef(function DialogCard(
     [contentRef],
   )
 
+  const handleContentUpdate = useCallback(() => {
+    if (localContentRef.current) {
+      setIsContentScrollable(
+        localContentRef.current.clientHeight < localContentRef.current.scrollHeight,
+      )
+      setHasScrolledFromTop(localContentRef.current.scrollTop > 0)
+      setHasScrolledToBottom(
+        localContentRef.current.scrollTop >=
+          localContentRef.current.scrollHeight - localContentRef.current.clientHeight,
+      )
+    }
+  }, [])
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(handleContentUpdate)
+
+    if (localContentRef.current) {
+      resizeObserver.observe(localContentRef.current)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [contentRef, handleContentUpdate])
+
   return (
     <DialogContainer data-ui="DialogCard" width={width}>
       <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
         <DialogLayout direction="column">
           {showHeader && (
-            <DialogHeader>
+            <DialogHeader
+              $isContentScrollable={isContentScrollable}
+              $hasScrolledFromTop={hasScrolledFromTop}
+            >
               <Flex>
                 <Box flex={1} padding={4}>
                   {header && (
-                    <Text id={labelId} weight="semibold">
+                    <Text id={labelId} size={1} weight="medium">
                       {header}
                     </Text>
                   )}
@@ -278,11 +334,18 @@ const DialogCard = forwardRef(function DialogCard(
             </DialogHeader>
           )}
 
-          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1} onScroll={handleContentUpdate}>
             {children}
           </DialogContent>
 
-          {footer && <DialogFooter>{footer}</DialogFooter>}
+          {footer && (
+            <DialogFooter
+              $isContentScrollable={isContentScrollable}
+              $hasScrolledToBottom={hasScrolledToBottom}
+            >
+              {footer}
+            </DialogFooter>
+          )}
         </DialogLayout>
       </DialogCardRoot>
     </DialogContainer>

package/src/theme/studioTheme/tints.ts

@@ -4,7 +4,7 @@
  * e.g. for positive theme: `{"bg_base": "white", "bg_base_hover": "gray/50", "bg_base_active": "cyan/50"}
  * This is not possible in the previous configuration, as each ThemeColor uses only one tint.
  */
-import {ColorTintKey, ColorTints, ColorValue, black, hues, white} from '@sanity/color'
+import {ColorTintKey, ColorTint, ColorTints, black, hues, white} from '@sanity/color'
 import {ThemeColorName, ThemeColorSchemeKey} from '../lib/theme'
 
 export const colorKeys = [
@@ -27,7 +27,7 @@ export const colorKeys = [
 
 export type ColorKey = (typeof colorKeys)[number]
 
-type ColorTintsDictionary = Record<ColorKey, ColorTintKey | ColorValue>
+type ColorTintsDictionary = Record<ColorKey, ColorTint | ColorTintKey>
 const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
   light: {
     text_primary: '900',
@@ -132,7 +132,7 @@ export const getColorValue = (
   dark: boolean,
   tone: ThemeColorName,
   key: ColorKey,
-): ColorValue => {
+): ColorTint => {
   const value = colorTints[dark ? 'dark' : 'light'][tone][key]
 
   if (typeof value === 'string') {