From 0304027d0de6628ebe6025d768eef37ead86f210 Mon Sep 17 00:00:00 2001 From: Jan Six Date: Tue, 29 Aug 2023 20:29:31 +0200 Subject: [PATCH 1/5] fixes rename choices --- src/app/components/ConfirmDialog.tsx | 17 +++++++---------- src/app/components/EditTokenForm.tsx | 15 ++++++++------- src/app/store/useTokens.tsx | 10 ++++++---- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/app/components/ConfirmDialog.tsx b/src/app/components/ConfirmDialog.tsx index 3e3e343c6..c6785a3b7 100644 --- a/src/app/components/ConfirmDialog.tsx +++ b/src/app/components/ConfirmDialog.tsx @@ -79,16 +79,13 @@ function ConfirmDialog() { }, [chosen, inputValue, confirmState, onConfirm]); React.useEffect(() => { - const timeoutId = setTimeout(() => { - if (confirmState.choices) setChosen(confirmState.choices.filter((c) => c.enabled).map((c) => c.key)); - if (firstInput.current) { - firstInput.current.focus(); - } else if (confirmButton.current) { - confirmButton.current.focus(); - } - }, 50); - return () => clearTimeout(timeoutId); - }, [confirmState.show, confirmButton, confirmState.choices]); + if (confirmState.choices) setChosen(confirmState.choices.filter((c) => c.enabled).map((c) => c.key)); + if (firstInput.current) { + firstInput.current.focus(); + } else if (confirmButton.current) { + confirmButton.current.focus(); + } + }, [confirmState.show, confirmButton, confirmState.choices, firstInput]); return confirmState.show ? ( diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx index 8330e1aaf..16fdd2be0 100644 --- a/src/app/components/EditTokenForm.tsx +++ b/src/app/components/EditTokenForm.tsx @@ -16,7 +16,7 @@ import { import { checkIfAlias, checkIfContainsAlias, getAliasValue } from '@/utils/alias'; import { ResolveTokenValuesResult } from '@/utils/tokenHelpers'; import { - activeTokenSetSelector, updateModeSelector, editTokenSelector, themesListSelector, tokensSelector, + activeTokenSetSelector, editTokenSelector, themesListSelector, tokensSelector, } from '@/selectors'; import { TokenTypes } from '@/constants/TokenTypes'; import TypographyInput from './TypographyInput'; @@ -40,6 +40,8 @@ import { MultiSelectDropdown } from './MultiSelectDropdown'; import { tokenTypesToCreateVariable } from '@/constants/VariableTypes'; import { ModalOptions } from '@/constants/ModalOptions'; +let lastUsedRenameOption: UpdateMode = UpdateMode.SELECTION; + type Props = { resolvedTokens: ResolveTokenValuesResult[]; }; @@ -53,7 +55,6 @@ function EditTokenForm({ resolvedTokens }: Props) { const tokens = useSelector(tokensSelector); const editToken = useSelector(editTokenSelector); const themes = useSelector(themesListSelector); - const updateMode = useSelector(updateModeSelector); const [selectedTokenSets, setSelectedTokenSets] = React.useState([activeTokenSet]); const { editSingleToken, createSingleToken, duplicateSingleToken, renameTokensAcrossSets, @@ -341,18 +342,18 @@ function EditTokenForm({ resolvedTokens }: Props) { ...($extensions ? { $extensions } : {}), }); } - // When users change token names references are still pointing to the old name, ask user to remap + // When users change token names the applied tokens on layers are still pointing to the old name, ask user to remap if (oldName && oldName !== newName) { track('Edit token', { renamed: true, type: internalEditToken.type }); const choices: Choice[] = [ { - key: UpdateMode.SELECTION, label: 'Selection', unique: true, enabled: UpdateMode.SELECTION === updateMode, + key: UpdateMode.SELECTION, label: 'Selection', unique: true, enabled: UpdateMode.SELECTION === lastUsedRenameOption, }, { - key: UpdateMode.PAGE, label: 'Page', unique: true, enabled: UpdateMode.PAGE === updateMode, + key: UpdateMode.PAGE, label: 'Page', unique: true, enabled: UpdateMode.PAGE === lastUsedRenameOption, }, { - key: UpdateMode.DOCUMENT, label: 'Document', unique: true, enabled: UpdateMode.DOCUMENT === updateMode, + key: UpdateMode.DOCUMENT, label: 'Document', unique: true, enabled: UpdateMode.DOCUMENT === lastUsedRenameOption, }, ]; if (themes.length > 0 && [TokenTypes.COLOR, TokenTypes.TYPOGRAPHY, TokenTypes.BOX_SHADOW].includes(internalEditToken.type)) { @@ -384,7 +385,7 @@ function EditTokenForm({ resolvedTokens }: Props) { if (confirmData && confirmData.result) { if (confirmData.data.some((data: string) => [UpdateMode.DOCUMENT, UpdateMode.PAGE, UpdateMode.SELECTION].includes(data as UpdateMode))) { remapToken(oldName, newName, confirmData.data[0]); - dispatch.settings.setUpdateMode(confirmData.data[0]); + lastUsedRenameOption = confirmData.data[0] as UpdateMode; } if (confirmData.data.includes(ModalOptions.RENAME_ACROSS_SETS)) { renameTokensAcrossSets(oldName, newName, type, tokenSetsContainsSameToken); diff --git a/src/app/store/useTokens.tsx b/src/app/store/useTokens.tsx index 1a6d8ff8a..0378149f4 100644 --- a/src/app/store/useTokens.tsx +++ b/src/app/store/useTokens.tsx @@ -49,6 +49,8 @@ type GetFormattedTokensOptions = { type RemoveTokensByValueData = { property: Properties; nodes: NodeInfo[] }[]; +let lastUsedRenameOption: UpdateMode = UpdateMode.SELECTION; + export type SyncOption = 'removeStyle' | 'renameStyle'; export type SyncVariableOption = 'removeVariable' | 'renameVariable'; @@ -198,13 +200,13 @@ export default function useTokens() { description: 'This will change all layers that used the old token name. This could take a while.', choices: [ { - key: UpdateMode.SELECTION, label: 'Selection', unique: true, enabled: UpdateMode.SELECTION === settings.updateMode, + key: UpdateMode.SELECTION, label: 'Selection', unique: true, enabled: UpdateMode.SELECTION === lastUsedRenameOption, }, { - key: UpdateMode.PAGE, label: 'Page', unique: true, enabled: UpdateMode.PAGE === settings.updateMode, + key: UpdateMode.PAGE, label: 'Page', unique: true, enabled: UpdateMode.PAGE === lastUsedRenameOption, }, { - key: UpdateMode.DOCUMENT, label: 'Document', unique: true, enabled: UpdateMode.DOCUMENT === settings.updateMode, + key: UpdateMode.DOCUMENT, label: 'Document', unique: true, enabled: UpdateMode.DOCUMENT === lastUsedRenameOption, }, { key: 'rename-variable-token-group', label: 'Rename variable', @@ -214,7 +216,7 @@ export default function useTokens() { if (confirmData && confirmData.result) { if (Array.isArray(confirmData.data) && confirmData.data.some((data: string) => [UpdateMode.DOCUMENT, UpdateMode.PAGE, UpdateMode.SELECTION].includes(data as UpdateMode))) { await handleBulkRemap(newGroupName, oldGroupName, confirmData.data[0]); - dispatch.settings.setUpdateMode(confirmData.data[0] as UpdateMode); + lastUsedRenameOption = confirmData.data[0] as UpdateMode; } if (confirmData.data.includes('rename-variable-token-group')) { track('renameVariablesInTokenGroup', { newGroupName, oldGroupName }); From a3ab23970123bf3c210ddd81a50902eaeb05f617 Mon Sep 17 00:00:00 2001 From: Jan Six Date: Tue, 29 Aug 2023 20:29:41 +0200 Subject: [PATCH 2/5] fixes input focus --- src/app/components/Input.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx index 1cccfcb12..785b490cd 100644 --- a/src/app/components/Input.tsx +++ b/src/app/components/Input.tsx @@ -184,9 +184,7 @@ const Input = React.forwardRef(({ React.useEffect(() => { if (autofocus && htmlInputRef && htmlInputRef.current) { - setTimeout(() => { - htmlInputRef.current?.focus(); - }, 50); + htmlInputRef.current.focus(); } }, [autofocus, htmlInputRef]); From ba2cb34d0cbd435fc490579a17914a18bb5df611 Mon Sep 17 00:00:00 2001 From: Jan Six Date: Tue, 29 Aug 2023 20:30:52 +0200 Subject: [PATCH 3/5] add changeset --- .changeset/curly-ravens-prove.md | 5 +++++ .changeset/young-kangaroos-brake.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/curly-ravens-prove.md create mode 100644 .changeset/young-kangaroos-brake.md diff --git a/.changeset/curly-ravens-prove.md b/.changeset/curly-ravens-prove.md new file mode 100644 index 000000000..9b3c308e4 --- /dev/null +++ b/.changeset/curly-ravens-prove.md @@ -0,0 +1,5 @@ +--- +'@tokens-studio/figma-plugin': patch +--- + +Fixes an issue where renaming a token or token group would cause `Apply to` to be changed diff --git a/.changeset/young-kangaroos-brake.md b/.changeset/young-kangaroos-brake.md new file mode 100644 index 000000000..35df8f030 --- /dev/null +++ b/.changeset/young-kangaroos-brake.md @@ -0,0 +1,5 @@ +--- +'@tokens-studio/figma-plugin': patch +--- + +Fixes an issue with token edit inputs being focused after a timeout From 603644ad97b1bac063e269a2360d9810defb9ea9 Mon Sep 17 00:00:00 2001 From: Jan Six Date: Wed, 30 Aug 2023 08:13:01 +0200 Subject: [PATCH 4/5] keep rename styles and proper focus --- src/app/components/EditTokenForm.tsx | 4 +++- src/app/components/TokenTooltip/TokenTooltip.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx index 16fdd2be0..e42a39225 100644 --- a/src/app/components/EditTokenForm.tsx +++ b/src/app/components/EditTokenForm.tsx @@ -41,6 +41,7 @@ import { tokenTypesToCreateVariable } from '@/constants/VariableTypes'; import { ModalOptions } from '@/constants/ModalOptions'; let lastUsedRenameOption: UpdateMode = UpdateMode.SELECTION; +let lastUsedRenameStyles = false; type Props = { resolvedTokens: ResolveTokenValuesResult[]; @@ -358,7 +359,7 @@ function EditTokenForm({ resolvedTokens }: Props) { ]; if (themes.length > 0 && [TokenTypes.COLOR, TokenTypes.TYPOGRAPHY, TokenTypes.BOX_SHADOW].includes(internalEditToken.type)) { choices.push({ - key: StyleOptions.RENAME, label: 'Rename styles', + key: StyleOptions.RENAME, label: 'Rename styles', enabled: lastUsedRenameStyles, }); } if (themes.length > 0 && tokenTypesToCreateVariable.includes(internalEditToken.type)) { @@ -392,6 +393,7 @@ function EditTokenForm({ resolvedTokens }: Props) { } if (confirmData.data.includes(StyleOptions.RENAME)) { renameStylesFromTokens({ oldName, newName, parent: activeTokenSet }); + lastUsedRenameStyles = true; } if (confirmData.data.includes(ModalOptions.RENAME_VARIABLE)) { renameVariablesFromToken({ oldName, newName }); diff --git a/src/app/components/TokenTooltip/TokenTooltip.tsx b/src/app/components/TokenTooltip/TokenTooltip.tsx index 1f5e91196..23cda4d83 100644 --- a/src/app/components/TokenTooltip/TokenTooltip.tsx +++ b/src/app/components/TokenTooltip/TokenTooltip.tsx @@ -1,7 +1,9 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import { SingleToken } from '@/types/tokens'; import Tooltip from '../Tooltip'; import { TokenTooltipContent } from './TokenTooltipContent'; +import { showEditFormSelector } from '@/selectors'; type Props = { token: SingleToken; @@ -11,6 +13,9 @@ export const TokenTooltip: React.FC = ({ children, token, }) => { + // When we open the token edit form we don't want tooltips to show through, which is happening sometimes + const showEditForm = useSelector(showEditFormSelector); + if (!children || !React.isValidElement(children)) { return null; } @@ -18,7 +23,7 @@ export const TokenTooltip: React.FC = ({ return ( From 8e84e9b9e802a6ea6cd1bf939c280936c807c5eb Mon Sep 17 00:00:00 2001 From: Jan Six Date: Wed, 30 Aug 2023 08:16:28 +0200 Subject: [PATCH 5/5] add changeset --- .changeset/rare-cups-join.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rare-cups-join.md diff --git a/.changeset/rare-cups-join.md b/.changeset/rare-cups-join.md new file mode 100644 index 000000000..cdb60a8ed --- /dev/null +++ b/.changeset/rare-cups-join.md @@ -0,0 +1,5 @@ +--- +'@tokens-studio/figma-plugin': patch +--- + +Fixes an issue where the choice of `Rename styles` was not remembered per session