chore: v0.20.0 release

package.json

@@ -1,7 +1,7 @@
 {
     "name": "fold-dev",
     "title": "Fold",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "The UI component library for product teams.",
     "workspaces": {
         "packages": [

packages/core/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/core",
     "title": "Fold",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

packages/core/src/alert/alert.tsx

@@ -1,5 +1,5 @@
 import React, { ReactPortal, useContext } from 'react'
-import { Button, Heading, IconLib, Modal, ModalClose, Text, useId } from '../'
+import { Button, Heading, IconLib, Modal, ModalClose, Portal, Text, useId } from '../'
 import { FoldContext } from '../contexts'
 
 export type AlertOptions = {
@@ -27,7 +27,7 @@ export const Alert = (props: AlertProps) => {
     const { onDismiss, alert } = props
     const titleId = useId()
     const descriptionId = useId()
-    const { portal, icon, color, title, description, button = 'Okay', closeButton } = alert
+    const { portal = Portal, icon, color, title, description, button = 'Okay', closeButton } = alert
 
     return (
         <Modal

packages/core/src/copy/copy.css

@@ -71,26 +71,26 @@
 /* size */
 
 .f-copy.xs {
-    font-size: var(--f-font-size-xs) !important;
+    font-size: var(--f-font-size-2xs) !important;
     min-height: var(--f-size-7);
 }
 
 .f-copy.sm {
-    font-size: var(--f-font-size-sm) !important;
+    font-size: var(--f-font-size-xs) !important;
     min-height: var(--f-size-8);
 }
 
 .f-copy.md {
-    font-size: var(--f-font-size-md) !important;
+    font-size: var(--f-font-size-sm) !important;
     min-height: var(--f-size-9); 
 }
 
 .f-copy.lg {
-    font-size: var(--f-font-size-lg) !important;
+    font-size: var(--f-font-size-md) !important;
     min-height: var(--f-size-11); 
 }
 
 .f-copy.xl {
-    font-size: var(--f-font-size-xl) !important;
+    font-size: var(--f-font-size-lg) !important;
     min-height: var(--f-size-13); 
 }

packages/core/src/date-picker/date-picker.css

@@ -125,8 +125,8 @@
     animation-timing-function: ease-in;
 }
 
-.f-date-cell.is-start::after,
-.f-date-cell.is-end::after {
+.f-date-cell:not(.is-unavailable).is-start::after,
+.f-date-cell:not(.is-unavailable).is-end::after {
     border-radius: var(--f-radius);
     content: ' ';
     display: block;

packages/core/src/drag/drag-manager.tsx

@@ -20,6 +20,7 @@ import { globalCursor, windowObject } from '../helpers'
 export const FOLD_DRAG_CACHE = 'FOLD_DRAG_CACHE'
 export const FOLD_DRAG_STATE = 'FOLD_DRAG_STATE'
 export const FOLD_DRAG_LOCK = 'FOLD_DRAG_LOCK'
+export const FOLD_RESTRICT_DUAL_MOVEMENT = 'FOLD_RESTRICT_DUAL_MOVEMENT'
 
 windowObject[FOLD_DRAG_CACHE] = {
     locked: false,
@@ -92,8 +93,17 @@ export const DragManager = (props: DragManagerProps) => {
                 // calculate normal mouse movement
                 if (mouseX < cache.mouse.x - moveThreshold) moveDirection = 'left'
                 if (mouseX > cache.mouse.x + moveThreshold) moveDirection = 'right'
-                if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up'
-                if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down'
+
+                // if there is dual movement - restrict the direction
+                if (window[FOLD_RESTRICT_DUAL_MOVEMENT]) {
+                    if (moveDirection != 'left' && moveDirection != 'right') {
+                        if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up'
+                        if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down'
+                    }
+                } else {
+                    if (mouseY < cache.mouse.y - moveThreshold) moveDirection = 'up'
+                    if (mouseY > cache.mouse.y + moveThreshold) moveDirection = 'down'
+                }
 
                 // calculate indent mouse movement (jerking)
                 // TODO: extend to accommodate vertical directions

packages/core/src/drag/drag.hook.ts

@@ -5,6 +5,7 @@ import {
     FOLD_DRAG_CACHE,
     FOLD_DRAG_LOCK,
     FOLD_DRAG_STATE,
+    FOLD_RESTRICT_DUAL_MOVEMENT,
     getBoundingClientRect,
     getPreviousNextElements,
     globalCursor,
@@ -22,6 +23,10 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
     const ghostRef = useRef(null)
     const { indentDelay } = args
 
+    const restrictDualMovement = (val = true) => window[FOLD_RESTRICT_DUAL_MOVEMENT] = val
+
+    const forceLockDragMovement = (val = true) => window[FOLD_DRAG_LOCK] = val
+
     const getStaticState = (): any => windowObject[FOLD_DRAG_STATE]
 
     const getCache = (): any => windowObject[FOLD_DRAG_CACHE]
@@ -420,6 +425,8 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
 
     return {
         getStaticState,
+        forceLockDragMovement,
+        restrictDualMovement,
         getCache,
         getGhostElement,
         setGhostElement,

packages/core/src/heading/heading.css

@@ -7,7 +7,7 @@ h1, h2, h3, h4, h5, h6, .f-heading {
     color: var(--f-heading-color);
     background-color: var(--f-heading-background-color);
     font-family: var(--f-font-heading);
-    width: fit-content;
+    /* width: fit-content; */
     /* line-height: normal; */
 }
 

packages/core/src/menu/menu.css

@@ -67,7 +67,7 @@
     --f-menu-item-color-active: var(--f-color-accent);
     --f-menu-item-color-system-active: var(--f-color-surface-stronger);
     --f-menu-item-color-disabled: var(--f-color-text-weakest);
-    --f-menu-item-padding: 0.3rem 0.75rem;
+    --f-menu-item-padding: 0.4rem 0.75rem;
     --f-menu-item-margin: 0 0.2rem;
     --f-menu-item-height: fit-content;
 }

packages/core/src/stat/stat.tsx

@@ -44,7 +44,7 @@ export const Stat = (props: StatProps) => {
                 <div className="f-row f-stat-footer">
                     {icon && <IconLib icon={icon} />}
                     {descriptionTool}
-                    {description && <Text as="span">{description}</Text>}
+                    {description && <Text size="sm" as="span">{description}</Text>}
                 </div>
             )}
             {footer}

packages/core/src/view/view.tsx

@@ -21,6 +21,7 @@ export type ScrollViewProps = {
     onScrollToBottom?: any
     onScrollToTop?: any
     instanceId?: string
+    scrollSensitivityDelay?: number
 } & CoreViewProps
 
 export const ScrollView = forwardRef((props: ScrollViewProps, ref) => {
@@ -34,6 +35,7 @@ export const ScrollView = forwardRef((props: ScrollViewProps, ref) => {
         onScrollToTop,
         style = {},
         instanceId,
+        scrollSensitivityDelay = 50,
         ...rest
     } = props
     const scrollRef = useRef(null)
@@ -79,17 +81,23 @@ export const ScrollView = forwardRef((props: ScrollViewProps, ref) => {
     const handleWheelEvent = (e) => {
         if (freeze) return
 
-        const offsetHeight = scrollRef.current.scrollHeight - scrollRef.current.scrollTop - 1
-        const isBottom = scrollRef.current.offsetHeight >= offsetHeight
-        const isTop = scrollRef.current.scrollTop == 0
-
-        if (isTop && stickToTop) {
-            userIsScrolling.current = false
-        } else if (isBottom && stickToBottom) {
-            userIsScrolling.current = false
-        } else {
-            userIsScrolling.current = true
-        }
+        // give the browser time to repaint the scroll
+        setTimeout(() => {
+            // maybe unmounted now
+            if (!scrollRef.current) return
+
+            const offsetHeight = scrollRef.current.scrollHeight - scrollRef.current.scrollTop
+            const isBottom = scrollRef.current.offsetHeight >= offsetHeight
+            const isTop = scrollRef.current.scrollTop == 0
+
+            if (isTop && stickToTop) {
+                userIsScrolling.current = false
+            } else if (isBottom && stickToBottom) {
+                userIsScrolling.current = false
+            } else {
+                userIsScrolling.current = true
+            }
+        }, scrollSensitivityDelay)
     }
 
     const handleCustomEvent = ({ detail }) => {

packages/design/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/design",
     "title": "Design Tokens",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "The UI library for product teams.",
     "main": "",
     "module": "",

packages/design/tokens/font-size.json

@@ -1,5 +1,6 @@
 {
     "font-size": {
+        "2xs": { "value": "0.45rem" },
         "xs": { "value": "0.6rem" },
         "sm": { "value": "0.8rem" },
         "md": { "value": "1rem" },