From 34b24305fac6b0c45f6382e99a996b2e4430b98c Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 14 Dec 2025 17:16:02 +0200 Subject: [PATCH 1/8] reduce font sizes --- packages/core/src/copy/copy.css | 10 +++++----- packages/core/src/stat/stat.tsx | 2 +- packages/design/tokens/font-size.json | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/core/src/copy/copy.css b/packages/core/src/copy/copy.css index d6587c75..8bd9507a 100644 --- a/packages/core/src/copy/copy.css +++ b/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); } diff --git a/packages/core/src/stat/stat.tsx b/packages/core/src/stat/stat.tsx index 16f4f954..fca8a598 100644 --- a/packages/core/src/stat/stat.tsx +++ b/packages/core/src/stat/stat.tsx @@ -44,7 +44,7 @@ export const Stat = (props: StatProps) => {
{icon && } {descriptionTool} - {description && {description}} + {description && {description}}
)} {footer} diff --git a/packages/design/tokens/font-size.json b/packages/design/tokens/font-size.json index e8b90bf3..9f67a4cd 100644 --- a/packages/design/tokens/font-size.json +++ b/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" }, From 61f65deb38bdc8ef191cd1d46789b17ec3d76201 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 14 Dec 2025 17:16:31 +0200 Subject: [PATCH 2/8] bump version --- package.json | 2 +- packages/core/package.json | 2 +- packages/design/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0e55ad54..8cdbcb7f 100644 --- a/package.json +++ b/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": [ diff --git a/packages/core/package.json b/packages/core/package.json index dbc6e0e5..7f085a54 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/design/package.json b/packages/design/package.json index 66faf075..005561a6 100644 --- a/packages/design/package.json +++ b/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": "", From 846641cac9c71196d38e25042af9a02716ee7d20 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Tue, 16 Dec 2025 20:24:27 +0200 Subject: [PATCH 3/8] make unavailable dates greyed out --- packages/core/src/date-picker/date-picker.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/date-picker/date-picker.css b/packages/core/src/date-picker/date-picker.css index 6729c90d..82f55e94 100644 --- a/packages/core/src/date-picker/date-picker.css +++ b/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; From 1f87c7fccc7de9419f2e23aafd8756cc5653a393 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Wed, 17 Dec 2025 13:29:26 +0200 Subject: [PATCH 4/8] add scrollSensitivityDelay prop --- packages/core/src/view/view.tsx | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/core/src/view/view.tsx b/packages/core/src/view/view.tsx index 853fb950..48aedbf2 100644 --- a/packages/core/src/view/view.tsx +++ b/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,20 @@ 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(() => { + 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 }) => { From 0696b4e51b2e392297c214d32cb28f30bb266cd0 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Fri, 19 Dec 2025 07:02:49 +0200 Subject: [PATCH 5/8] check for div being mounted --- packages/core/src/view/view.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/src/view/view.tsx b/packages/core/src/view/view.tsx index 48aedbf2..846f8ef1 100644 --- a/packages/core/src/view/view.tsx +++ b/packages/core/src/view/view.tsx @@ -83,6 +83,9 @@ export const ScrollView = forwardRef((props: ScrollViewProps, ref) => { // 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 From fa35035b8ecfb102fe5b31fc20ee6089f8dabcb9 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 22 Dec 2025 15:07:52 +0200 Subject: [PATCH 6/8] remove fit-content --- packages/core/src/alert/alert.tsx | 4 ++-- packages/core/src/heading/heading.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/alert/alert.tsx b/packages/core/src/alert/alert.tsx index 9e93706e..7aecf3b5 100644 --- a/packages/core/src/alert/alert.tsx +++ b/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 ( Date: Fri, 26 Dec 2025 09:06:49 +0200 Subject: [PATCH 7/8] Drag: add restrictDualMovement property --- packages/core/src/drag/drag-manager.tsx | 14 ++++++++++++-- packages/core/src/drag/drag.hook.ts | 7 +++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/core/src/drag/drag-manager.tsx b/packages/core/src/drag/drag-manager.tsx index 77ffb7fc..b36d8c00 100644 --- a/packages/core/src/drag/drag-manager.tsx +++ b/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 diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts index 39723621..1f56ef52 100644 --- a/packages/core/src/drag/drag.hook.ts +++ b/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, From 94328a9a6fd831cb1f012a4fecf9b665171d897f Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Fri, 26 Dec 2025 20:02:38 +0200 Subject: [PATCH 8/8] increase padding --- packages/core/src/menu/menu.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/menu/menu.css b/packages/core/src/menu/menu.css index a4821880..254a9501 100644 --- a/packages/core/src/menu/menu.css +++ b/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; }