From 7b74ae16a6ebd6bdde291d2c3debf5d5fb261365 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Wed, 9 Oct 2024 17:06:12 +0200 Subject: [PATCH 01/21] add ellipsis to overflow labels --- packages/core/src/attachment/attachment.css | 21 +++++++++++++++++++++ packages/core/src/attachment/attachment.tsx | 8 ++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/core/src/attachment/attachment.css b/packages/core/src/attachment/attachment.css index 85f4673c..6234909c 100644 --- a/packages/core/src/attachment/attachment.css +++ b/packages/core/src/attachment/attachment.css @@ -65,6 +65,7 @@ } .f-attachment__text { + overflow: hidden; flex: 1; align-items: flex-start; } @@ -79,7 +80,27 @@ margin-top: -2.5px; } +.f-attachment__text-label { + max-width: 100%; +} + +.f-attachment__text-label span { + display: inline-block; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .f-attachment__text-meta { + max-width: 100%; +} + +.f-attachment__text-meta span { + display: inline-block; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; color: var(--f-color-text-weakest); } diff --git a/packages/core/src/attachment/attachment.tsx b/packages/core/src/attachment/attachment.tsx index b1804681..d7f56e11 100644 --- a/packages/core/src/attachment/attachment.tsx +++ b/packages/core/src/attachment/attachment.tsx @@ -254,14 +254,18 @@ export const Attachment = (props: AttachmentProps) => { size={size} color="currentColor" className="f-attachment__text-label"> - {label} + + {label} + {mime && ( - {MIME.DESCRIPTION[mime]} + + {MIME.DESCRIPTION[mime]} + )} {filesize && ( From 45662a23c7445d311bb9ff318acec3c2fdd35122 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Wed, 9 Oct 2024 17:08:50 +0200 Subject: [PATCH 02/21] remove className --- packages/core/src/attachment/attachment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/attachment/attachment.tsx b/packages/core/src/attachment/attachment.tsx index d7f56e11..4c2b3ec3 100644 --- a/packages/core/src/attachment/attachment.tsx +++ b/packages/core/src/attachment/attachment.tsx @@ -254,7 +254,7 @@ export const Attachment = (props: AttachmentProps) => { size={size} color="currentColor" className="f-attachment__text-label"> - + {label} From ad352950d9ddc173298987ca182c12242958b118 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 21 Oct 2024 07:22:10 +0200 Subject: [PATCH 03/21] convert className to React Hook --- packages/core/src/helpers/util.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts index 6d5a22a2..589a31cb 100644 --- a/packages/core/src/helpers/util.ts +++ b/packages/core/src/helpers/util.ts @@ -1,4 +1,4 @@ -import React, { ReactElement } from 'react' +import React, { ReactElement, useMemo } from 'react' export const plural = (number, str) => (number == 1 ? str : str + 's') @@ -304,7 +304,7 @@ export const renderWithProps = (children: any, props: any) => { }) } -export const classNames = (object: any, classes: string[] = []): string => { +export const classNamesOld = (object: any, classes: string[] = []): string => { const classList = classes.filter((c) => !!c) const classArray = [] for (const property in object) { @@ -314,6 +314,20 @@ export const classNames = (object: any, classes: string[] = []): string => { return !!allClasses ? allClasses : null } +export const classNames = (object: any, classes: string[] = []): string | null => { + return useMemo(() => { + const classList = classes.filter((c) => !!c) + const classArray: string[] = [] + + for (const property in object) { + if (object[property]) classArray.push(property) + } + + const allClasses = [...classList, ...classArray].join(' ') + return allClasses || '' + }, [object, classes]) +} + export const focusElementById = (id: string) => { const el: HTMLElement = documentObject.getElementById(id) el?.focus() From 8c8ee1b029f3d22856ecf2d63f4032b361fafcef Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 21 Oct 2024 07:23:44 +0200 Subject: [PATCH 04/21] fix: move Hook into parent scope --- packages/core/src/modal/modal.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/core/src/modal/modal.tsx b/packages/core/src/modal/modal.tsx index b49e0d98..b9a415c8 100644 --- a/packages/core/src/modal/modal.tsx +++ b/packages/core/src/modal/modal.tsx @@ -70,6 +70,15 @@ export const Modal = forwardRef((props: ModalProps, ref) => { } = props const contentRef: any = useRef() const { trapFocus } = useFocus() + const className = classNames( + { + 'f-modal__inner': true, + 'f-col': true, + 'is-borderless': borderless, + 'no-overlay': noOverlay, + }, + [props.className, getActionClass(anchor)] + ) const handleKeyDown = (e) => { const { isEscape } = getKey(e) @@ -100,15 +109,6 @@ export const Modal = forwardRef((props: ModalProps, ref) => { const renderModal = () => { const classNameOverlay = 'f-modal f-row' + (noOverlay ? ' no-overlay' : '') - const className = classNames( - { - 'f-modal__inner': true, - 'f-col': true, - 'is-borderless': borderless, - 'no-overlay': noOverlay, - }, - [props.className, getActionClass(anchor)] - ) return (
Date: Mon, 21 Oct 2024 07:41:05 +0200 Subject: [PATCH 05/21] remove null return type --- packages/core/src/helpers/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts index 589a31cb..b9417170 100644 --- a/packages/core/src/helpers/util.ts +++ b/packages/core/src/helpers/util.ts @@ -314,7 +314,7 @@ export const classNamesOld = (object: any, classes: string[] = []): string => { return !!allClasses ? allClasses : null } -export const classNames = (object: any, classes: string[] = []): string | null => { +export const classNames = (object: any, classes: string[] = []): string => { return useMemo(() => { const classList = classes.filter((c) => !!c) const classArray: string[] = [] From bf6cb2ae54dab9545fdf76422705d4401c1aba62 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Tue, 22 Oct 2024 06:46:04 +0200 Subject: [PATCH 06/21] use older classNames inside render method --- packages/core/src/select/select.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/select/select.tsx b/packages/core/src/select/select.tsx index 67bdd265..a6ecc5ed 100644 --- a/packages/core/src/select/select.tsx +++ b/packages/core/src/select/select.tsx @@ -20,6 +20,7 @@ import { } from '../' import { classNames, + classNamesOld, documentObject, executeLast, focusElement, @@ -506,7 +507,7 @@ export const SelectList = forwardRef((props: SelectListProps, ref) => { {isDefault && ( <> {options.map((option: SelectOption, index: number) => { - const className = classNames({ + const className = classNamesOld({ 'f-select-list-option-container': true, 'is-focused': cursor == index, }) @@ -539,7 +540,7 @@ export const SelectList = forwardRef((props: SelectListProps, ref) => { numItems={options.length} render={({ index, style }) => { const option: SelectOption = options[index] - const className = classNames({ + const className = classNamesOld({ 'f-select-list-option-container': true, 'is-focused': cursor == index, }) From 1837928bad328bdb3f9d578161a189e24aba42fd Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 27 Oct 2024 08:48:02 +0200 Subject: [PATCH 07/21] reduce medium button height --- packages/core/src/button/button.css | 2 +- packages/core/src/copy/copy.css | 2 +- packages/core/src/input/input.css | 8 ++++---- packages/core/src/option/option.css | 2 +- packages/design/tokens/color.json | 22 +++++++++++----------- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/core/src/button/button.css b/packages/core/src/button/button.css index c96924b1..f4d209b3 100644 --- a/packages/core/src/button/button.css +++ b/packages/core/src/button/button.css @@ -484,7 +484,7 @@ } .f-button.md { - height: var(--f-size-11); + height: var(--f-size-10); padding: 0 var(--f-space-3); } diff --git a/packages/core/src/copy/copy.css b/packages/core/src/copy/copy.css index 7e1502df..0856d76f 100644 --- a/packages/core/src/copy/copy.css +++ b/packages/core/src/copy/copy.css @@ -81,7 +81,7 @@ .f-copy.md { font-size: var(--f-font-size-md) !important; - min-height: var(--f-size-11); + min-height: var(--f-size-10); } .f-copy.lg { diff --git a/packages/core/src/input/input.css b/packages/core/src/input/input.css index 4023e28b..a69834ee 100644 --- a/packages/core/src/input/input.css +++ b/packages/core/src/input/input.css @@ -146,7 +146,7 @@ input.f-input:not([type="color"]).sm { input.f-input:not([type="color"]).md { font-size: var(--f-font-size-md); - height: var(--f-size-11); + height: var(--f-size-10); } input.f-input:not([type="color"]).lg { @@ -171,7 +171,7 @@ input.f-input:not([type="color"]).xl { } .f-input-control input.f-input:not([type="color"]).md { - height: calc(var(--f-size-11) - var(--f-input-border-width)); + height: calc(var(--f-size-10) - var(--f-input-border-width)); } .f-input-control input.f-input:not([type="color"]).lg { @@ -366,7 +366,7 @@ input.f-input[type=color].xl { .f-tag-input.md { font-size: var(--f-font-size-md); - min-height: var(--f-size-11); + min-height: var(--f-size-10); } .f-tag-input.lg { @@ -408,7 +408,7 @@ input.f-input[type=color].xl { } .f-input-number-control.md { - height: var(--f-size-11); + height: var(--f-size-10); } .f-input-number-control.lg { diff --git a/packages/core/src/option/option.css b/packages/core/src/option/option.css index 0323b3d9..77f2edc6 100644 --- a/packages/core/src/option/option.css +++ b/packages/core/src/option/option.css @@ -120,7 +120,7 @@ } .f-options.md { - height: var(--f-size-11); + height: var(--f-size-10); } .f-options.lg { diff --git a/packages/design/tokens/color.json b/packages/design/tokens/color.json index 535ae6a7..d5f73cf5 100644 --- a/packages/design/tokens/color.json +++ b/packages/design/tokens/color.json @@ -5,17 +5,17 @@ "overlay": { "value": "rgba(0, 0, 0, 0.4)" }, "accent": { - "50": { "value": "#D0E6FF" }, - "100": { "value": "#B9DAFF" }, - "200": { "value": "#A2CDFF" }, - "300": { "value": "#7AB8FF" }, - "400": { "value": "#2E90FF" }, - "500": { "value": "#0078FF" }, - "600": { "value": "#0063D1" }, - "700": { "value": "#0052AC" }, - "800": { "value": "#003C7E" }, - "900": { "value": "#002C5C" }, - "950": { "value": "#002252" } + "50": { "value": "#f8f5ff" }, + "100": { "value": "#e1d8fd" }, + "200": { "value": "#ccbcfa" }, + "300": { "value": "#a394f4" }, + "400": { "value": "#7e7aea" }, + "500": { "value": "#6c5ad5" }, + "600": { "value": "#5946c1" }, + "700": { "value": "#41337a" }, + "800": { "value": "#2f2659" }, + "900": { "value": "#171038" }, + "950": { "value": "#171038" } }, "base": { From 53cf85a27ceb4ab86ca9d3aa75de0485cc3a81a1 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 27 Oct 2024 08:50:09 +0200 Subject: [PATCH 08/21] update timezone list --- packages/core/src/helpers/util.ts | 292 ++++++++++++++++++++++++++++++ 1 file changed, 292 insertions(+) diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts index b9417170..9bc3822b 100644 --- a/packages/core/src/helpers/util.ts +++ b/packages/core/src/helpers/util.ts @@ -584,6 +584,15 @@ export const removeNullProperties = (obj: any) => { } export const timezones = [ + 'Europe/Andorra', + 'Asia/Dubai', + 'Asia/Kabul', + 'Europe/Tirane', + 'Asia/Yerevan', + 'Antarctica/Casey', + 'Antarctica/Davis', + 'Antarctica/DumontDUrville', // https://bugs.chromium.org/p/chromium/issues/detail?id=928068 + 'Antarctica/Mawson', 'Antarctica/Palmer', 'Antarctica/Rothera', 'Antarctica/Syowa', @@ -640,6 +649,289 @@ export const timezones = [ 'America/Manaus', 'America/Eirunepe', 'America/Rio_Branco', + 'America/Nassau', + 'Asia/Thimphu', + 'Europe/Minsk', + 'America/Belize', + 'America/St_Johns', + 'America/Halifax', + 'America/Glace_Bay', + 'America/Moncton', + 'America/Goose_Bay', + 'America/Blanc-Sablon', + 'America/Toronto', + 'America/Nipigon', + 'America/Thunder_Bay', + 'America/Iqaluit', + 'America/Pangnirtung', + 'America/Atikokan', + 'America/Winnipeg', + 'America/Rainy_River', + 'America/Resolute', + 'America/Rankin_Inlet', + 'America/Regina', + 'America/Swift_Current', + 'America/Edmonton', + 'America/Cambridge_Bay', + 'America/Yellowknife', + 'America/Inuvik', + 'America/Creston', + 'America/Dawson_Creek', + 'America/Fort_Nelson', + 'America/Vancouver', + 'America/Whitehorse', + 'America/Dawson', + 'Indian/Cocos', + 'Europe/Zurich', + 'Africa/Abidjan', + 'Pacific/Rarotonga', + 'America/Santiago', + 'America/Punta_Arenas', + 'Pacific/Easter', + 'Asia/Shanghai', + 'Asia/Urumqi', + 'America/Bogota', + 'America/Costa_Rica', + 'America/Havana', + 'Atlantic/Cape_Verde', + 'America/Curacao', + 'Indian/Christmas', + 'Asia/Nicosia', + 'Asia/Famagusta', + 'Europe/Prague', + 'Europe/Berlin', + 'Europe/Copenhagen', + 'America/Santo_Domingo', + 'Africa/Algiers', + 'America/Guayaquil', + 'Pacific/Galapagos', + 'Europe/Tallinn', + 'Africa/Cairo', + 'Africa/El_Aaiun', + 'Europe/Madrid', + 'Africa/Ceuta', + 'Atlantic/Canary', + 'Europe/Helsinki', + 'Pacific/Fiji', + 'Atlantic/Stanley', + 'Pacific/Chuuk', + 'Pacific/Pohnpei', + 'Pacific/Kosrae', + 'Atlantic/Faroe', + 'Europe/Paris', + 'Europe/London', + 'Asia/Tbilisi', + 'America/Cayenne', + 'Africa/Accra', + 'Europe/Gibraltar', + 'America/Godthab', + 'America/Danmarkshavn', + 'America/Scoresbysund', + 'America/Thule', + 'Europe/Athens', + 'Atlantic/South_Georgia', + 'America/Guatemala', + 'Pacific/Guam', + 'Africa/Bissau', + 'America/Guyana', + 'Asia/Hong_Kong', + 'America/Tegucigalpa', + 'America/Port-au-Prince', + 'Europe/Budapest', + 'Asia/Jakarta', + 'Asia/Pontianak', + 'Asia/Makassar', + 'Asia/Jayapura', + 'Europe/Dublin', + 'Asia/Jerusalem', + 'Asia/Kolkata', + 'Indian/Chagos', + 'Asia/Baghdad', + 'Asia/Tehran', + 'Atlantic/Reykjavik', + 'Europe/Rome', + 'America/Jamaica', + 'Asia/Amman', + 'Asia/Tokyo', + 'Africa/Nairobi', + 'Asia/Bishkek', + 'Pacific/Tarawa', + 'Pacific/Enderbury', + 'Pacific/Kiritimati', + 'Asia/Pyongyang', + 'Asia/Seoul', + 'Asia/Almaty', + 'Asia/Qyzylorda', + 'Asia/Qostanay', // https://bugs.chromium.org/p/chromium/issues/detail?id=928068 + 'Asia/Aqtobe', + 'Asia/Aqtau', + 'Asia/Atyrau', + 'Asia/Oral', + 'Asia/Beirut', + 'Asia/Colombo', + 'Africa/Monrovia', + 'Europe/Vilnius', + 'Europe/Luxembourg', + 'Europe/Riga', + 'Africa/Tripoli', + 'Africa/Casablanca', + 'Europe/Monaco', + 'Europe/Chisinau', + 'Pacific/Majuro', + 'Pacific/Kwajalein', + 'Asia/Yangon', + 'Asia/Ulaanbaatar', + 'Asia/Hovd', + 'Asia/Choibalsan', + 'Asia/Macau', + 'America/Martinique', + 'Europe/Malta', + 'Indian/Mauritius', + 'Indian/Maldives', + 'America/Mexico_City', + 'America/Cancun', + 'America/Merida', + 'America/Monterrey', + 'America/Matamoros', + 'America/Mazatlan', + 'America/Chihuahua', + 'America/Ojinaga', + 'America/Hermosillo', + 'America/Tijuana', + 'America/Bahia_Banderas', + 'Asia/Kuala_Lumpur', + 'Asia/Kuching', + 'Africa/Maputo', + 'Africa/Windhoek', + 'Pacific/Noumea', + 'Pacific/Norfolk', + 'Africa/Lagos', + 'America/Managua', + 'Europe/Amsterdam', + 'Europe/Oslo', + 'Asia/Kathmandu', + 'Pacific/Nauru', + 'Pacific/Niue', + 'Pacific/Auckland', + 'Pacific/Chatham', + 'America/Panama', + 'America/Lima', + 'Pacific/Tahiti', + 'Pacific/Marquesas', + 'Pacific/Gambier', + 'Pacific/Port_Moresby', + 'Pacific/Bougainville', + 'Asia/Manila', + 'Asia/Karachi', + 'Europe/Warsaw', + 'America/Miquelon', + 'Pacific/Pitcairn', + 'America/Puerto_Rico', + 'Asia/Gaza', + 'Asia/Hebron', + 'Europe/Lisbon', + 'Atlantic/Madeira', + 'Atlantic/Azores', + 'Pacific/Palau', + 'America/Asuncion', + 'Asia/Qatar', + 'Indian/Reunion', + 'Europe/Bucharest', + 'Europe/Belgrade', + 'Europe/Kaliningrad', + 'Europe/Moscow', + 'Europe/Simferopol', + 'Europe/Kirov', + 'Europe/Astrakhan', + 'Europe/Volgograd', + 'Europe/Saratov', + 'Europe/Ulyanovsk', + 'Europe/Samara', + 'Asia/Yekaterinburg', + 'Asia/Omsk', + 'Asia/Novosibirsk', + 'Asia/Barnaul', + 'Asia/Tomsk', + 'Asia/Novokuznetsk', + 'Asia/Krasnoyarsk', + 'Asia/Irkutsk', + 'Asia/Chita', + 'Asia/Yakutsk', + 'Asia/Khandyga', + 'Asia/Vladivostok', + 'Asia/Ust-Nera', + 'Asia/Magadan', + 'Asia/Sakhalin', + 'Asia/Srednekolymsk', + 'Asia/Kamchatka', + 'Asia/Anadyr', + 'Asia/Riyadh', + 'Pacific/Guadalcanal', + 'Indian/Mahe', + 'Africa/Khartoum', + 'Europe/Stockholm', + 'Asia/Singapore', + 'America/Paramaribo', + 'Africa/Juba', + 'Africa/Sao_Tome', + 'America/El_Salvador', + 'Asia/Damascus', + 'America/Grand_Turk', + 'Africa/Ndjamena', + 'Indian/Kerguelen', + 'Asia/Bangkok', + 'Asia/Dushanbe', + 'Pacific/Fakaofo', + 'Asia/Dili', + 'Asia/Ashgabat', + 'Africa/Tunis', + 'Pacific/Tongatapu', + 'Europe/Istanbul', + 'America/Port_of_Spain', + 'Pacific/Funafuti', + 'Asia/Taipei', + 'Europe/Kiev', + 'Europe/Uzhgorod', + 'Europe/Zaporozhye', + 'Pacific/Wake', + 'America/New_York', + 'America/Detroit', + 'America/Kentucky/Louisville', + 'America/Kentucky/Monticello', + 'America/Indiana/Indianapolis', + 'America/Indiana/Vincennes', + 'America/Indiana/Winamac', + 'America/Indiana/Marengo', + 'America/Indiana/Petersburg', + 'America/Indiana/Vevay', + 'America/Chicago', + 'America/Indiana/Tell_City', + 'America/Indiana/Knox', + 'America/Menominee', + 'America/North_Dakota/Center', + 'America/North_Dakota/New_Salem', + 'America/North_Dakota/Beulah', + 'America/Denver', + 'America/Boise', + 'America/Phoenix', + 'America/Los_Angeles', + 'America/Anchorage', + 'America/Juneau', + 'America/Sitka', + 'America/Metlakatla', + 'America/Yakutat', + 'America/Nome', + 'America/Adak', + 'Pacific/Honolulu', + 'America/Montevideo', + 'Asia/Samarkand', + 'Asia/Tashkent', + 'America/Caracas', + 'Asia/Ho_Chi_Minh', + 'Pacific/Efate', + 'Pacific/Wallis', + 'Pacific/Apia', + 'Africa/Johannesburg', ] export const waitForRender = (cb, t = 0) => setTimeout(cb, t) From 9a14d1bf722fb91e93adda3656ece87229affe0a Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Mon, 28 Oct 2024 07:24:58 +0200 Subject: [PATCH 09/21] add portal prop --- packages/core/src/alert/alert.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/src/alert/alert.tsx b/packages/core/src/alert/alert.tsx index e0102e85..9e93706e 100644 --- a/packages/core/src/alert/alert.tsx +++ b/packages/core/src/alert/alert.tsx @@ -1,9 +1,10 @@ -import React, { useContext } from 'react' +import React, { ReactPortal, useContext } from 'react' import { Button, Heading, IconLib, Modal, ModalClose, Text, useId } from '../' import { FoldContext } from '../contexts' export type AlertOptions = { icon?: string + portal?: any color?: string title?: string description?: string @@ -26,11 +27,12 @@ export const Alert = (props: AlertProps) => { const { onDismiss, alert } = props const titleId = useId() const descriptionId = useId() - const { icon, color, title, description, button = 'Okay', closeButton } = alert + const { portal, icon, color, title, description, button = 'Okay', closeButton } = alert return ( Date: Sun, 10 Nov 2024 21:05:02 +0200 Subject: [PATCH 10/21] revert accent --- packages/design/tokens/color.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/design/tokens/color.json b/packages/design/tokens/color.json index d5f73cf5..073ac94a 100644 --- a/packages/design/tokens/color.json +++ b/packages/design/tokens/color.json @@ -5,17 +5,17 @@ "overlay": { "value": "rgba(0, 0, 0, 0.4)" }, "accent": { - "50": { "value": "#f8f5ff" }, - "100": { "value": "#e1d8fd" }, - "200": { "value": "#ccbcfa" }, - "300": { "value": "#a394f4" }, - "400": { "value": "#7e7aea" }, - "500": { "value": "#6c5ad5" }, - "600": { "value": "#5946c1" }, - "700": { "value": "#41337a" }, - "800": { "value": "#2f2659" }, - "900": { "value": "#171038" }, - "950": { "value": "#171038" } + "50": { "value": "#D0E6FF" }, + "100": { "value": "#B9DAFF" }, + "200": { "value": "#A2CDFF" }, + "300": { "value": "#7AB8FF" }, + "400": { "value": "#2E90FF" }, + "500": { "value": "#0078FF" }, + "600": { "value": "#0063D1" }, + "700": { "value": "#0052AC" }, + "800": { "value": "#003C7E" }, + "900": { "value": "#002C5C" }, + "950": { "value": "#001732" } }, "base": { From 7fb1fd63b7adf52aab926d85c1fe0904f11285ca Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 17 Nov 2024 12:16:25 +0200 Subject: [PATCH 11/21] don't show avatar images with skeleton --- packages/core/src/skeleton/skeleton.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/core/src/skeleton/skeleton.css b/packages/core/src/skeleton/skeleton.css index d853dfb6..46120cc4 100644 --- a/packages/core/src/skeleton/skeleton.css +++ b/packages/core/src/skeleton/skeleton.css @@ -21,6 +21,10 @@ border-radius: var(--f-skeleton-border-radius); } +.f-skeleton .f-avatar img { + display: none; +} + .f-skeleton-circle { border-radius: 50%; } @keyframes f-skeleton-color { From dc721ea74d95df32d19af75e8792e3193edec94d Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 17 Nov 2024 13:57:51 +0200 Subject: [PATCH 12/21] check for focusable element --- packages/core/src/hooks/focus.hook.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/core/src/hooks/focus.hook.ts b/packages/core/src/hooks/focus.hook.ts index e6cac929..d603e74f 100644 --- a/packages/core/src/hooks/focus.hook.ts +++ b/packages/core/src/hooks/focus.hook.ts @@ -46,11 +46,13 @@ export const useFocus = (focusable = FOCUSABLE, arrowNavigation = false) => { const trapFocus = (el, preventScroll = false) => { shouldPreventScroll.current = preventScroll containerRef.current = el - focusableEls.current = containerRef.current.querySelectorAll(focusable.join(',')) - lastFocusableEl.current = focusableEls.current[focusableEls.current.length - 1] - firstFocusableEl.current = focusableEls.current[0] - firstFocusableEl.current?.focus({ preventScroll }) - containerRef.current.addEventListener('keydown', handleKeyDown) + focusableEls.current = containerRef.current?.querySelectorAll(focusable.join(',')) + if (focusableEls.current) { + lastFocusableEl.current = focusableEls.current[focusableEls.current.length - 1] + firstFocusableEl.current = focusableEls.current[0] + firstFocusableEl.current?.focus({ preventScroll }) + containerRef.current.addEventListener('keydown', handleKeyDown) + } } useEffect(() => { From b69d6e347c5515f18f1a5cc050717fbd0657bd3b Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 24 Nov 2024 13:05:08 +0200 Subject: [PATCH 13/21] check for same areaId --- packages/core/src/drag/drag.css | 6 ++++++ packages/core/src/drag/drag.util.ts | 10 ++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/core/src/drag/drag.css b/packages/core/src/drag/drag.css index 4011326d..a6925475 100644 --- a/packages/core/src/drag/drag.css +++ b/packages/core/src/drag/drag.css @@ -29,6 +29,12 @@ user-select: all !important; } +.f-drag-area.is-dragging .f-drag-element > *.drag-pe-all, +.f-drag-area.is-dragging .f-drag-area__element > *.drag-pe-all { + pointer-events: all !important; + user-select: all !important; +} + /* target groups */ .f-drag-area.is-dragging.no-origin-variant .f-drag-area.is-dragging:not(.no-origin-variant) { diff --git a/packages/core/src/drag/drag.util.ts b/packages/core/src/drag/drag.util.ts index a41a0040..d6b4f2ea 100644 --- a/packages/core/src/drag/drag.util.ts +++ b/packages/core/src/drag/drag.util.ts @@ -3,15 +3,13 @@ import { FOLD_DRAG_STATE } from './drag-manager' import { FOLD_GHOST_ELEMENT_ROTATION } from './drag.hook' export const getPreviousNextElements = (targetIndex, targetElement, moveDirection) => { - const { origin } = windowObject[FOLD_DRAG_STATE] - const originIndex = origin.index const parent = targetElement.parentNode let previous = parent.children[targetIndex - 1] let next = parent.children[targetIndex] if (!!next) { - if (moveDirection == 'down' && originIndex == +next.dataset.index) { + if (moveDirection == 'down' && windowObject[FOLD_DRAG_STATE].origin.index == +next.dataset.index) { next = parent.children[targetIndex + 1] } @@ -23,7 +21,11 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio } if (!!previous) { - if (moveDirection == 'up' && originIndex == +previous.dataset.index) { + // if it's the same object and the mouse is travelling up, then skip over it + if ( + moveDirection == 'up' + && windowObject[FOLD_DRAG_STATE].origin.index == +previous.dataset.index + && windowObject[FOLD_DRAG_STATE].origin.areaId == previous.dataset.areaid) { previous = parent.children[targetIndex - 2] } } else { From 881707c753d8093c5be0200f75c37d59356ecb8c Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sun, 24 Nov 2024 13:11:39 +0200 Subject: [PATCH 14/21] add origin & target to onstart event data --- packages/core/src/drag/drag.hook.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts index cbef153f..3ab29ef8 100644 --- a/packages/core/src/drag/drag.hook.ts +++ b/packages/core/src/drag/drag.hook.ts @@ -50,10 +50,10 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { return !!windowObject[FOLD_CUSTOM_GHOST_ELEMENT] } - const startDrag = () => { + const startDrag = (data = null) => { documentObject.body.dataset.dragging = 'yes' globalCursor.add('grabbing') - dispatchDragEvent('onstart', null) + dispatchDragEvent('onstart', data) } const endDrag = () => { @@ -207,7 +207,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { group, } - setOrigin({ + const origin = { targetVariant: finalTargetVariant, elementId, width, @@ -215,9 +215,9 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { areaId, index, group, - }) + } - setTarget({ + const target: any = { focus: false, moveDirection, index, @@ -229,9 +229,11 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { areaId, elementId, group, - }) + } - startDrag() + setOrigin(origin) + setTarget(target) + startDrag({ origin, target }) }) } }, 150) From 1de372482b9e1d220637c9bfd7201a9a8a170202 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Thu, 28 Nov 2024 06:55:48 +0200 Subject: [PATCH 15/21] check for buffer element --- packages/core/src/drag/drag.hook.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts index 3ab29ef8..808f5861 100644 --- a/packages/core/src/drag/drag.hook.ts +++ b/packages/core/src/drag/drag.hook.ts @@ -171,7 +171,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => { // cache the indentation parameters let targetIndent = indent const previous = el.previousSibling - const next = el.nextSibling + const next = el.nextSibling?.dataset.buffer ? null : el.nextSibling const previousIndent = previous ? +previous.dataset.indent : 0 const nextIndent = next ? +next.dataset.indent : 0 From 37f7b3e907c168df233a0f20e22db7ec9e095fd9 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Fri, 6 Dec 2024 08:33:30 +0200 Subject: [PATCH 16/21] use textContent --- packages/core/src/editable/editable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/editable/editable.tsx b/packages/core/src/editable/editable.tsx index 18d01551..273d070f 100644 --- a/packages/core/src/editable/editable.tsx +++ b/packages/core/src/editable/editable.tsx @@ -39,9 +39,9 @@ export const Editable = forwardRef((props: EditableProps, ref) => { case 'escape': return onCancel ? onCancel(cache.current) : null case 'enter': - return handleChange(target.innerHTML) + return handleChange(target.textContent) case 'focusout': - return handleChange(target.innerHTML) + return handleChange(target.textContent) } } @@ -92,7 +92,7 @@ export const Editable = forwardRef((props: EditableProps, ref) => { el.spellcheck = false el.addEventListener('keydown', handleKeyDown) el.addEventListener('focusout', handleFocusOut) - cache.current = el.innerHTML + cache.current = el.textContent setTimeout(() => { el.focus() if (cursorEnd) setCaretToTheEnd(el) From 3406bfd9f1ed46e3e0f233c9b6bc160adea836b6 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Fri, 6 Dec 2024 08:38:01 +0200 Subject: [PATCH 17/21] stop propagation on mouse down --- packages/core/src/editable/editable.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/core/src/editable/editable.tsx b/packages/core/src/editable/editable.tsx index 273d070f..9515f219 100644 --- a/packages/core/src/editable/editable.tsx +++ b/packages/core/src/editable/editable.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, useLayoutEffect, useRef } from 'react' import { View } from '..' -import { classNames, getKey, mergeRefs, selectElementContents, setCaretToTheEnd } from '../helpers' +import { classNames, getKey, mergeRefs, selectElementContents, setCaretToTheEnd, stopEvent } from '../helpers' import { CoreViewProps } from '../types' export type EditableProps = { @@ -28,11 +28,16 @@ export const Editable = forwardRef((props: EditableProps, ref) => { if (onChange) onChange(value) } + // disable drag + // TODO: find a better way to handle this + const noEvent = (e) => e.stopPropagation() + const deFocus = (target: HTMLElement, type: 'escape' | 'enter' | 'focusout') => { target.contentEditable = 'false' target.removeAttribute('tabindex') target.removeEventListener('keydown', handleKeyDown) target.removeEventListener('focusout', handleFocusOut) + target.removeEventListener('mousedown', noEvent) target.blur() keypressCache.current = false switch (type) { @@ -92,6 +97,7 @@ export const Editable = forwardRef((props: EditableProps, ref) => { el.spellcheck = false el.addEventListener('keydown', handleKeyDown) el.addEventListener('focusout', handleFocusOut) + el.addEventListener('mousedown', noEvent) cache.current = el.textContent setTimeout(() => { el.focus() From 7fef192d010a4d716a85dd5a7778eb6c96c45ac1 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Fri, 6 Dec 2024 20:52:04 +0200 Subject: [PATCH 18/21] add double click; remove timeout amount --- packages/core/src/editable/editable.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/core/src/editable/editable.tsx b/packages/core/src/editable/editable.tsx index 9515f219..4f5266fe 100644 --- a/packages/core/src/editable/editable.tsx +++ b/packages/core/src/editable/editable.tsx @@ -7,12 +7,13 @@ export type EditableProps = { selectOnFocus?: boolean cursorEnd?: boolean disabled?: boolean + useDoubleClick?: boolean onChange?: any onCancel?: any } & CoreViewProps export const Editable = forwardRef((props: EditableProps, ref) => { - const { onChange, onCancel, disabled, selectOnFocus, cursorEnd, ...rest } = props + const { onChange, onCancel, disabled, selectOnFocus, cursorEnd, useDoubleClick, ...rest } = props const elementRef = useRef(null) const childRef = useRef(null) const cache = useRef('') @@ -103,7 +104,7 @@ export const Editable = forwardRef((props: EditableProps, ref) => { el.focus() if (cursorEnd) setCaretToTheEnd(el) if (selectOnFocus) selectElementContents(el) - }, 150) + }) } useLayoutEffect(() => { @@ -114,7 +115,8 @@ export const Editable = forwardRef((props: EditableProps, ref) => { {props.children} From 5d2bcf17565d3b2f6fedde7b53d42a010e6e122d Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Sat, 14 Dec 2024 12:31:27 +0200 Subject: [PATCH 19/21] use any --- packages/core/src/accordion/accordion.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/accordion/accordion.tsx b/packages/core/src/accordion/accordion.tsx index 69c15422..8c2e09a9 100644 --- a/packages/core/src/accordion/accordion.tsx +++ b/packages/core/src/accordion/accordion.tsx @@ -61,9 +61,9 @@ export const AccordionItem = (props: AccordionItemProps) => { const id = useId() const [innerOpen, setInnerOpen] = useState(collapsed) const isOpen = uncontrolled ? uncontrolled && innerOpen : open - const { heading, panel } = useMemo(() => { - return React.Children.toArray(props.children).reduce((acc: any, val: ReactElement) => { - switch (val.type) { + const { heading, panel } = useMemo(() => { + return React.Children.toArray(props.children).reduce((acc, val) => { + switch ((val as any).type) { case AccordionHeading: return { ...acc, heading: val } case AccordionPanel: From b646954eb497e6fd976b2a72a1653240e1b974ca Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Thu, 2 Jan 2025 13:59:18 +0200 Subject: [PATCH 20/21] check for range & selection --- packages/core/src/helpers/util.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts index 9bc3822b..34928436 100644 --- a/packages/core/src/helpers/util.ts +++ b/packages/core/src/helpers/util.ts @@ -941,11 +941,13 @@ export const setCaretToTheEnd = (element) => { const [childNode] = element.childNodes const range = documentObject.createRange() const selection = windowObject.getSelection() - range.setStart(childNode, position) - range.setEnd(childNode, position) - range.collapse(true) - selection.removeAllRanges() - selection.addRange(range) + if (!!range && !!selection) { + range.setStart(childNode, position) + range.setEnd(childNode, position) + range.collapse(true) + selection.removeAllRanges() + selection.addRange(range) + } } export const selectElementContents = (el) => { From 02041e541920e1f38b9be73a5920d1d2441f61a4 Mon Sep 17 00:00:00 2001 From: Jo du Plessis Date: Thu, 2 Jan 2025 14:00:05 +0200 Subject: [PATCH 21/21] 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 d9acee7c..208c74a5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fold-dev", "title": "Fold", - "version": "0.14.0", + "version": "0.15.0", "description": "The UI component library for product teams.", "workspaces": { "packages": [ diff --git a/packages/core/package.json b/packages/core/package.json index 5373c202..9cdde62f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@fold-dev/core", "title": "Fold", - "version": "0.14.0", + "version": "0.15.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 4156cddd..cf330065 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -1,7 +1,7 @@ { "name": "@fold-dev/design", "title": "Design Tokens", - "version": "0.14.0", + "version": "0.15.0", "description": "The UI library for product teams.", "main": "", "module": "",