From 0ed7a790f54180321e62c862a0f4ed02f4506121 Mon Sep 17 00:00:00 2001 From: Ryan Srofe Date: Wed, 17 Apr 2024 18:14:37 -0400 Subject: [PATCH 01/17] current update is saved when new log is created When a user creates a log without saving and then tries to create a new log, the first log will be cleared. This update fixes that issue by bringing back the stored values in updates. If a user cancels their update the changes will not be committed. --- widget-src/components/log/LogDisplay.tsx | 37 +++++++++++++++++++----- widget-src/components/log/LogEditing.tsx | 24 +++++++++++++++ 2 files changed, 54 insertions(+), 7 deletions(-) diff --git a/widget-src/components/log/LogDisplay.tsx b/widget-src/components/log/LogDisplay.tsx index d8a23ce..12a70f1 100644 --- a/widget-src/components/log/LogDisplay.tsx +++ b/widget-src/components/log/LogDisplay.tsx @@ -92,15 +92,38 @@ export const ChangeLogDisplay = ({ ...changeLog.state, editing: true, updates: { - createdDate: changeLog.createdDate, + createdDate: changeLog.state?.updates?.createdDate + ? changeLog.state?.updates?.createdDate + : changeLog.createdDate, createdDateTmp: { - date: { val: displayDate(changeLog.createdDate, 'date'), er: false }, - time: { val: displayDate(changeLog.createdDate, 'time'), er: false }, + date: { + val: displayDate( + changeLog.state?.updates?.createdDate + ? changeLog.state?.updates?.createdDate + : changeLog.createdDate, + 'date', + ), + er: false, + }, + time: { + val: displayDate( + changeLog.state?.updates?.createdDate + ? changeLog.state?.updates?.createdDate + : changeLog.createdDate, + 'time', + ), + er: false, + }, }, - links: changeLog.links, - link: { label: '', url: '', icon: '', key: '' }, - type: changeLog.type, - change: changeLog.change, + links: changeLog.state?.updates?.links ? changeLog.state?.updates?.links : changeLog.links, + link: { + label: changeLog.state?.updates?.link?.label ? changeLog.state?.updates?.link?.label : '', + url: changeLog.state?.updates?.link?.url ? changeLog.state?.updates?.link?.url : '', + icon: changeLog.state?.updates?.link?.icon ? changeLog.state?.updates?.link?.icon : '', + key: changeLog.state?.updates?.link?.key ? changeLog.state?.updates?.link?.key : '', + }, + type: changeLog.state?.updates?.type ? changeLog.state?.updates?.type : changeLog.type, + change: changeLog.state?.updates?.change ? changeLog.state?.updates?.change : changeLog.change, linkFormError: { label: false, url: false }, }, }); diff --git a/widget-src/components/log/LogEditing.tsx b/widget-src/components/log/LogEditing.tsx index 4fcfe7a..29054e7 100644 --- a/widget-src/components/log/LogEditing.tsx +++ b/widget-src/components/log/LogEditing.tsx @@ -8,6 +8,7 @@ import { TypeMenu } from './TypeMenu'; import { LinkForm } from './LinkForm'; import { AddLink } from './AddLink'; import { ActionCloseIcon } from '../../svgs/ActionCloseIcon'; +import { displayDate } from '../../utilities/Utils'; const { widget } = figma; const { AutoLayout, Text, Input, useEffect } = widget; @@ -167,6 +168,29 @@ export const ChangeLogEditing = ({ updateChangeState({ ...changeLog.state, editing: false, + updates: { + createdDate: changeLog.createdDate, + createdDateTmp: { + date: { + val: displayDate(changeLog.createdDate, 'date'), + er: false, + }, + time: { + val: displayDate(changeLog.createdDate, 'time'), + er: false, + }, + }, + links: changeLog.links, + link: { + label: '', + url: '', + icon: '', + key: '', + }, + type: changeLog.type, + change: changeLog.change, + linkFormError: { label: false, url: false }, + }, }); }} /> From d9538c96828920b94b9bd918a416cdf3917caa26 Mon Sep 17 00:00:00 2001 From: Ryan Srofe Date: Thu, 25 Apr 2024 04:37:45 -0400 Subject: [PATCH 02/17] Updated GAP values Added a new value for GAP, this required an adjustment of the other GAP values to accommodate for the new GAP.lg value. The number values should be the same, the reference is just updated. --- widget-src/components/Button.tsx | 4 ++-- widget-src/components/ChangeLogEmpty.tsx | 2 +- widget-src/components/ChangeLogRow.tsx | 4 ++-- widget-src/components/Footer.tsx | 6 +++--- widget-src/components/Header.tsx | 2 +- widget-src/components/header/Meta.tsx | 4 ++-- widget-src/components/header/MetaValue.tsx | 2 +- widget-src/components/header/Status.tsx | 2 +- widget-src/components/log/DateRangeDisplay.tsx | 2 +- widget-src/components/log/Link.tsx | 2 +- widget-src/components/log/Type.tsx | 2 +- widget-src/utilities/Styles.ts | 7 ++++--- 12 files changed, 20 insertions(+), 19 deletions(-) diff --git a/widget-src/components/Button.tsx b/widget-src/components/Button.tsx index 7b53e7e..b236e24 100644 --- a/widget-src/components/Button.tsx +++ b/widget-src/components/Button.tsx @@ -19,7 +19,7 @@ export const Button = ({ label, hideLabel = false, action, iconSrc, error = fals fill={COLOR.white} cornerRadius={RADIUS.sm} overflow="visible" - spacing={GAP.sm} + spacing={GAP.xs} padding={PADDING.xs} stroke={COLOR.red} strokeWidth={SPACE.one} @@ -72,7 +72,7 @@ export const Button = ({ label, hideLabel = false, action, iconSrc, error = fals onClick={() => { action(); }} - spacing={GAP.sm} + spacing={GAP.xs} padding={PADDING.xs} horizontalAlignItems="center" verticalAlignItems="center" diff --git a/widget-src/components/ChangeLogEmpty.tsx b/widget-src/components/ChangeLogEmpty.tsx index 31a7fa8..780747c 100644 --- a/widget-src/components/ChangeLogEmpty.tsx +++ b/widget-src/components/ChangeLogEmpty.tsx @@ -20,7 +20,7 @@ export const ChangeLogEmpty = ({ isLocked }: { isLocked: boolean }) => ( fill={COLOR.white} overflow="visible" direction="vertical" - spacing={GAP.md} + spacing={GAP.sm} padding={{ vertical: PADDING.xxl * 2, horizontal: PADDING.none, diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx index da6d8e1..f345f82 100644 --- a/widget-src/components/ChangeLogRow.tsx +++ b/widget-src/components/ChangeLogRow.tsx @@ -43,7 +43,7 @@ export const ChangeLogRow = ({ direction="vertical" width="fill-parent" > - + ); diff --git a/widget-src/components/Footer.tsx b/widget-src/components/Footer.tsx index 384d2ef..d6edf17 100644 --- a/widget-src/components/Footer.tsx +++ b/widget-src/components/Footer.tsx @@ -19,14 +19,14 @@ export const Footer = () => ( { openExternal('https://commerce.nearform.com/open-source/'); }} > - + ( { openExternal('https://commerce.nearform.com/'); diff --git a/widget-src/components/Header.tsx b/widget-src/components/Header.tsx index 56f4c9a..d0c574c 100644 --- a/widget-src/components/Header.tsx +++ b/widget-src/components/Header.tsx @@ -38,7 +38,7 @@ export const Header = ({ const [descriptionText, setDescriptionText] = useSyncedState('descriptionText', ''); return ( - + {/* STATUS */} {status !== '0' && } diff --git a/widget-src/components/header/Meta.tsx b/widget-src/components/header/Meta.tsx index 5c1ba02..cb06bf0 100644 --- a/widget-src/components/header/Meta.tsx +++ b/widget-src/components/header/Meta.tsx @@ -73,7 +73,7 @@ export const Meta = ({ cornerRadius={RADIUS.sm} fill={COLOR.white} overflow="visible" - spacing={GAP.md} + spacing={GAP.sm} padding={PADDING.xs} horizontalAlignItems="end" verticalAlignItems="center" @@ -91,7 +91,7 @@ export const Meta = ({ addChange(changeId); }} overflow="visible" - spacing={GAP.md} + spacing={GAP.sm} padding={PADDING.xs} horizontalAlignItems="end" verticalAlignItems="center" diff --git a/widget-src/components/header/MetaValue.tsx b/widget-src/components/header/MetaValue.tsx index b2ddfb4..addd025 100644 --- a/widget-src/components/header/MetaValue.tsx +++ b/widget-src/components/header/MetaValue.tsx @@ -16,7 +16,7 @@ export const MetaValue = ({ label, value, setValue, setUpdatedDate, locked }: Me { fill={COLOR.tan} cornerRadius={RADIUS.sm} overflow="visible" - spacing={GAP.md} + spacing={GAP.sm} padding={{ vertical: PADDING.sm, horizontal: PADDING.md, diff --git a/widget-src/components/log/DateRangeDisplay.tsx b/widget-src/components/log/DateRangeDisplay.tsx index 408e921..9f5c49b 100644 --- a/widget-src/components/log/DateRangeDisplay.tsx +++ b/widget-src/components/log/DateRangeDisplay.tsx @@ -12,7 +12,7 @@ interface DateRangeProps { export const DateRange = ({ timestamp, editedTimestamp, editCount }: DateRangeProps) => { return ( - + openExternal(url)} - spacing={GAP.sm} + spacing={GAP.xs} padding={{ vertical: PADDING.xs, left: PADDING.sm, diff --git a/widget-src/components/log/Type.tsx b/widget-src/components/log/Type.tsx index 6d81347..7dd035f 100644 --- a/widget-src/components/log/Type.tsx +++ b/widget-src/components/log/Type.tsx @@ -70,7 +70,7 @@ export const Type = ({ type, isActive = false }: TypeProps) => { spacing={SPACE.xxxs} positioning="auto" stroke={showStroke ? COLOR.grey : ''} - strokeDashPattern={showStroke ? [GAP.sm, GAP.sm] : []} + strokeDashPattern={showStroke ? [GAP.xs, GAP.xs] : []} > {isActive && } />} {type === ('none' || 'added') && ( diff --git a/widget-src/utilities/Styles.ts b/widget-src/utilities/Styles.ts index ccc49f9..1522aa8 100644 --- a/widget-src/utilities/Styles.ts +++ b/widget-src/utilities/Styles.ts @@ -79,9 +79,10 @@ export const COLOR = { export const GAP = { none: 0, - sm: 4, - md: 8, - lg: 16, + xs: 4, + sm: 8, + md: 16, + lg: 24, xl: 32, } as const; From 5f5d00fa34a603c2f9b9d74695e35a2b00fad561 Mon Sep 17 00:00:00 2001 From: Ryan Srofe Date: Thu, 25 Apr 2024 04:41:10 -0400 Subject: [PATCH 03/17] GAP and padding tweak Added a new value for GAP, this required an adjustment of the other GAP values to accommodate for the new GAP.lg value. The number values should be the same, the reference is just updated. The vertical padding has also been removed. The new GAP.lg value makes this padding not needed. --- widget-src/components/log/LinkList.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/widget-src/components/log/LinkList.tsx b/widget-src/components/log/LinkList.tsx index 8329008..d36be80 100644 --- a/widget-src/components/log/LinkList.tsx +++ b/widget-src/components/log/LinkList.tsx @@ -22,10 +22,7 @@ export const LinkList = ({ links, editing = false, deleteLink }: LinkListProps) height="hug-contents" direction="horizontal" wrap - padding={{ - vertical: PADDING.sm, - }} - spacing={GAP.md} + spacing={GAP.sm} > {links.map(link => ( Date: Thu, 25 Apr 2024 04:46:21 -0400 Subject: [PATCH 04/17] GAP and cornerRadius and padding tweaks Added a new value for GAP, this required an adjustment of the other GAP values to accommodate for the new GAP.lg value. The number values should be the same, the reference is just updated. The vertical padding has also been removed for last row. The new GAP.lg value makes this last row padding not needed. The radius tweak rounds the corners when avatars are hidden and squares off the top when shown to make it flush with the circle. --- widget-src/components/log/User.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/widget-src/components/log/User.tsx b/widget-src/components/log/User.tsx index 0335706..40ca9cc 100644 --- a/widget-src/components/log/User.tsx +++ b/widget-src/components/log/User.tsx @@ -20,14 +20,14 @@ export const User = ({ userName, userPhotoUrl, showAvatars, isLastRow }: UserPro padding={{ top: PADDING.xl, right: showAvatars ? PADDING.none : PADDING.sm, - bottom: isLastRow ? PADDING.xxs : PADDING.xl, + bottom: isLastRow ? PADDING.none : PADDING.xl, left: PADDING.none, }} height="fill-parent" horizontalAlignItems="center" > {showAvatars && ( - + {userPhotoUrl ? ( ) : ( @@ -53,7 +53,18 @@ export const User = ({ userName, userPhotoUrl, showAvatars, isLastRow }: UserPro )} - + ); }; From 12c3432bca62b5c5e7d4853bcf8d067461020b3f Mon Sep 17 00:00:00 2001 From: Ryan Srofe Date: Thu, 25 Apr 2024 16:44:04 -0400 Subject: [PATCH 05/17] Date Range Form padding adjustments and new error messaging. The date error text was breaking out of the widget bounds when avatars and log types are off. All errors messages have been condensed in this consistent format. --- widget-src/components/log/DateRangeForm.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/widget-src/components/log/DateRangeForm.tsx b/widget-src/components/log/DateRangeForm.tsx index 57c5802..c3ede38 100644 --- a/widget-src/components/log/DateRangeForm.tsx +++ b/widget-src/components/log/DateRangeForm.tsx @@ -116,7 +116,7 @@ export const DateRangeForm = ({ changeLog, timestamp, updateChangeState }: DateR }; return ( - + - A valid past date (MM/DD/YYYY format) is required. + Enter past date (MM/DD/YYYY). )} @@ -281,9 +281,9 @@ export const DateRangeForm = ({ changeLog, timestamp, updateChangeState }: DateR fontSize={FONT.size.xs} fontFamily={FONT.family} positioning="absolute" - y={{ type: 'top', offset: FONT.lineHeight.xs + PADDING.xs * 2 + PADDING.sm }} + y={{ type: 'top', offset: PADDING.xl + 4 }} > - A valid time (HH:MM:SS AM format) is required. + Enter time (HH:MM:SS AM/PM). )} From aaf49c9261f1f6dbcecf1207c73aa0b6f8ead7ff Mon Sep 17 00:00:00 2001 From: Ryan Srofe Date: Thu, 25 Apr 2024 16:50:32 -0400 Subject: [PATCH 06/17] Link Form - padding adjustments - font size +1 to match the date/time fields - new condensed error messaging in consistent format - separated error messages - removed extraneous autolayout --- widget-src/components/log/LinkForm.tsx | 39 +++++++++++++------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/widget-src/components/log/LinkForm.tsx b/widget-src/components/log/LinkForm.tsx index 33603a4..f33721f 100644 --- a/widget-src/components/log/LinkForm.tsx +++ b/widget-src/components/log/LinkForm.tsx @@ -118,23 +118,17 @@ export const LinkForm = ({ changeLog, updateChangeState, setUpdatedDate }: LinkF case labelError && urlError: return "A link label (40 character maximum) and valid url (including 'https://') are required."; case labelError: - return 'A link label (40 character maximum) is required.'; + return 'Enter label (1-40 characters).'; case urlError: - return "A valid url (including 'https://') is required."; + return 'Enter URL (https://, no spaces/specials).'; default: return ''; } }; return ( - - + + { @@ -171,6 +165,11 @@ export const LinkForm = ({ changeLog, updateChangeState, setUpdatedDate }: LinkF }); }} /> + + {!!changeLog.state?.updates?.linkFormError?.label ? 'Enter label (1-40 characters).' : ''} + + + { @@ -208,6 +207,11 @@ export const LinkForm = ({ changeLog, updateChangeState, setUpdatedDate }: LinkF }); }} /> + + {!!changeLog.state?.updates?.linkFormError?.url ? 'Enter URL (https://, no spaces/specials).' : ''} + + +