Merge remote-tracking branch 'origin/release-139' into apply-to-menu-…

…polish
tokens-studio · Jun 15, 2024 · 145f76c · 145f76c
2 parents 593ce18 + a66f761
commit 145f76c
Show file tree

Hide file tree

Showing 52 changed files with 921 additions and 449 deletions.
diff --git a/.changeset/few-buses-impress.md b/.changeset/few-buses-impress.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Using Select all in Inspect view when you were using a filtered view is now correctly only removing tokens that were selected, instead of all.
diff --git a/.changeset/metal-turkeys-matter.md b/.changeset/metal-turkeys-matter.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixed an issue where variable references weren't using references from the current theme but from another theme that was using the same token names. If you are creating multiple collections with the same token structure, it's recommended to create them one by one to avoid reference clashes. For the default scenario of where different theme groups don't share the same tokens (recommended), you can create all themes at once.
diff --git a/.changeset/polite-impalas-hug.md b/.changeset/polite-impalas-hug.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+When editing a border token and switching from reference to input mode we now populate the contents.
diff --git a/packages/tokens-studio-for-figma/src/app/components/ApplySelector.tsx b/packages/tokens-studio-for-figma/src/app/components/ApplySelector.tsx
@@ -3,10 +3,9 @@ import React from 'react';
 import { DotFilledIcon } from '@radix-ui/react-icons';
 import { useTranslation } from 'react-i18next';
 import {
-  Button, DropdownMenu, Stack, Box,
+  Button, DropdownMenu, Stack,
 } from '@tokens-studio/ui';
 import { Dispatch } from '../store';
-import { styled } from '@/stitches.config';
 import IconChevronDown from '@/icons/chevrondown.svg';
 import { settingsStateSelector } from '@/selectors';
 import { isEqual } from '@/utils/isEqual';
@@ -42,11 +41,6 @@ export default function ApplySelector() {
     setApplyVariablesStyleOrRawValue(ApplyVariablesStylesOrRawValues.RAW_VALUES);
   }, [setApplyVariablesStyleOrRawValue]);
 
-  const StyledDropdownOptionDescription = styled(Box, {
-    fontSize: '$xxsmall',
-    color: '$fgMuted',
-  });
-
   return (
     <Stack direction="row">
       <Button
@@ -84,7 +78,7 @@ export default function ApplySelector() {
         </DropdownMenu.Trigger>
 
         <DropdownMenu.Portal>
-          <DropdownMenu.Content side="top">
+          <DropdownMenu.Content side="top" css={{ maxWidth: '350px' }}>
             <DropdownMenu.Label>{t('applyTo.applyCurrentTokensTo')}</DropdownMenu.Label>
             <DropdownMenu.RadioGroup value={updateMode}>
               <DropdownMenu.RadioItem
@@ -126,9 +120,6 @@ export default function ApplySelector() {
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
                 {t('applyTo.variablesStyles.title')}
-                <StyledDropdownOptionDescription>
-                  {t('applyTo.variablesStyles.description')}
-                </StyledDropdownOptionDescription>
               </DropdownMenu.RadioItem>
               <DropdownMenu.RadioItem
                 data-testid="apply-raw-values"
@@ -139,9 +130,6 @@ export default function ApplySelector() {
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
                 {t('applyTo.rawValues.title')}
-                <StyledDropdownOptionDescription>
-                  {t('applyTo.rawValues.description')}
-                </StyledDropdownOptionDescription>
               </DropdownMenu.RadioItem>
             </DropdownMenu.RadioGroup>
           </DropdownMenu.Content>

diff --git a/packages/tokens-studio-for-figma/src/app/components/BorderTokenDownShiftInput.tsx b/packages/tokens-studio-for-figma/src/app/components/BorderTokenDownShiftInput.tsx
@@ -4,14 +4,8 @@ import { ResolveTokenValuesResult } from '@/utils/tokenHelpers';
 import DownshiftInput from './DownshiftInput';
 import { getLabelForProperty } from '@/utils/getLabelForProperty';
 import { styled } from '@/stitches.config';
-
-const StyledButton = styled('button', {
-  display: 'block',
-  width: '1.5rem',
-  height: '1.5rem',
-  borderRadius: '$small',
-  cursor: 'pointer',
-});
+import { getAliasValue } from '@/utils/alias';
+import { ColorPickerTrigger } from './ColorPickerTrigger';
 
 export default function BorderTokenDownShiftInput({
   name,
@@ -23,16 +17,30 @@ export default function BorderTokenDownShiftInput({
   handleToggleInputHelper,
   onSubmit,
 }: {
-  name: string,
+  name: string;
   value: string;
   type: string;
   resolvedTokens: ResolveTokenValuesResult[];
   handleChange: (property: string, value: string) => void;
   setInputValue: (newInputValue: string, property: string) => void;
   handleToggleInputHelper?: () => void;
-  onSubmit: () => void
+  onSubmit: () => void;
 }) {
-  const handleBorderDownShiftInputChange = React.useCallback((newInputValue: string) => setInputValue(newInputValue, name), [name, setInputValue]);
+  const [resolvedColor, setResolvedColor] = React.useState<string>(value ? String(value) : '');
+
+  React.useEffect(() => {
+    if (name === 'color' && value && value.startsWith('{')) {
+      const aliasValue = getAliasValue(value, resolvedTokens);
+      setResolvedColor(aliasValue ? String(aliasValue) : '');
+    } else {
+      setResolvedColor(typeof value === 'string' ? value : '');
+    }
+  }, [value, resolvedTokens, name]);
+
+  const handleBorderDownShiftInputChange = React.useCallback(
+    (newInputValue: string) => setInputValue(newInputValue, name),
+    [name, setInputValue],
+  );
   const getIconComponent = React.useMemo(() => getLabelForProperty(name), [name]);
 
   const { t } = useTranslation(['tokens']);
@@ -55,13 +63,7 @@ export default function BorderTokenDownShiftInput({
       placeholder={mapTypeToPlaceHolder[name as keyof typeof mapTypeToPlaceHolder] as unknown as string}
       prefix={
         name === 'color' && (
-          <StyledButton
-            type="button"
-            style={{ background: value ?? '#000000', fontSize: 0 }}
-            onClick={handleToggleInputHelper}
-          >
-            {value}
-          </StyledButton>
+          <ColorPickerTrigger onClick={handleToggleInputHelper} background={resolvedColor} />
         )
       }
       suffix

diff --git a/packages/tokens-studio-for-figma/src/app/components/BorderTokenForm.tsx b/packages/tokens-studio-for-figma/src/app/components/BorderTokenForm.tsx
@@ -4,7 +4,7 @@ import get from 'just-safe-get';
 import { TokensIcon, LinkBreak2Icon } from '@radix-ui/react-icons';
 import { useTranslation } from 'react-i18next';
 import { IconButton, Heading } from '@tokens-studio/ui';
-import { EditTokenObject } from '@/types/tokens';
+import { EditTokenObject, SingleBorderToken } from '@/types/tokens';
 import { TokenTypes } from '@/constants/TokenTypes';
 import { ResolveTokenValuesResult } from '@/utils/tokenHelpers';
 import Stack from './Stack';
@@ -28,6 +28,7 @@ export default function BorderTokenForm({
   handleBorderValueDownShiftInputChange,
   handleBorderAliasValueChange,
   handleDownShiftInputChange,
+  setBorderValue,
   onSubmit,
 }: {
   internalEditToken: Extract<EditTokenObject, { type: TokenTypes.BORDER }>;
@@ -36,61 +37,65 @@ export default function BorderTokenForm({
   handleBorderValueDownShiftInputChange: (newInputValue: string, property: string) => void;
   handleBorderAliasValueChange: (property: string, value: string) => void;
   handleDownShiftInputChange: (newInputValue: string) => void;
-  onSubmit: () => void
+  setBorderValue: (newBorderValue: SingleBorderToken['value']) => void;
+  onSubmit: () => void;
 }) {
   const seed = useUIDSeed();
-  const isAliasMode = (internalEditToken.value && typeof internalEditToken.value === 'string');
+  const isAliasMode = internalEditToken.value && typeof internalEditToken.value === 'string';
   const [mode, setMode] = useState(isAliasMode ? 'alias' : 'input');
   const [alias, setAlias] = useState('');
   const { t } = useTranslation(['tokens']);
   const [inputHelperOpen, setInputHelperOpen] = useState<boolean>(false);
 
-  const selectedToken = React.useMemo(() => {
+  const selectedToken = React.useMemo<SingleBorderToken | null>(() => {
     const search = findReferences(String(internalEditToken.value));
     if (search && search.length > 0) {
       const foundToken = resolvedTokens.find((t) => t.name === search[0]);
-      if (foundToken) return foundToken;
+      if (foundToken) return foundToken as SingleBorderToken;
     }
     return null;
   }, [internalEditToken, resolvedTokens]);
 
   const handleToggleInputHelper = React.useCallback(() => setInputHelperOpen(!inputHelperOpen), [inputHelperOpen]);
-  const onColorChange = React.useCallback((color: string) => {
-    handleBorderValueDownShiftInputChange(color, 'color');
-  }, [handleBorderValueDownShiftInputChange]);
+  const onColorChange = React.useCallback(
+    (color: string) => {
+      handleBorderValueDownShiftInputChange(color, 'color');
+    },
+    [handleBorderValueDownShiftInputChange],
+  );
 
   const handleMode = React.useCallback(() => {
-    const changeMode = (mode === 'input') ? 'alias' : 'input';
-    setMode(changeMode);
+    if (mode === 'alias' && typeof internalEditToken.value === 'string') {
+      setBorderValue(selectedToken?.rawValue ?? {});
+    }
+    setMode(mode === 'input' ? 'alias' : 'input');
     setAlias('');
-  }, [mode]);
+  }, [mode, selectedToken, internalEditToken, setBorderValue]);
 
   return (
     <Stack direction="column" gap={2}>
       <Stack direction="row" gap={2} justify="between" align="center">
         <Heading>{t('value')}</Heading>
-        {
-          mode === 'input' ? (
-            <IconButton
-              tooltip={t('reference-mode')}
-              data-testid="mode-change-button"
-              onClick={handleMode}
-              icon={<TokensIcon />}
-            />
-          ) : (
-            <IconButton
-              tooltip={t('input-mode')}
-              data-testid="mode-change-button"
-              onClick={handleMode}
-              icon={<LinkBreak2Icon />}
-            />
-          )
-        }
+        {mode === 'input' ? (
+          <IconButton
+            tooltip={t('reference-mode')}
+            data-testid="mode-change-button"
+            onClick={handleMode}
+            icon={<TokensIcon />}
+          />
+        ) : (
+          <IconButton
+            tooltip={t('input-mode')}
+            data-testid="mode-change-button"
+            onClick={handleMode}
+            icon={<LinkBreak2Icon />}
+          />
+        )}
       </Stack>
-      {(mode === 'input' && internalEditToken.schema.schemas.value.type === 'object') ? (
+      {mode === 'input' && internalEditToken.schema.schemas.value.type === 'object' ? (
         <Stack gap={2} direction="column">
           {Object.entries(internalEditToken.schema.schemas.value.properties ?? {}).map(([key], keyIndex) => (
-            <>
+            <React.Fragment key={`border-input-fragment-${seed(keyIndex)}`}>
               <BorderTokenDownShiftInput
                 name={key}
                 key={`border-input-${seed(keyIndex)}`}
@@ -103,9 +108,12 @@ export default function BorderTokenForm({
                 onSubmit={onSubmit}
               />
               {inputHelperOpen && key === 'color' && (
-                <ColorPicker value={typeof internalEditToken.value === 'object' && get(internalEditToken.value, key, '')} onChange={onColorChange} />
+                <ColorPicker
+                  value={typeof internalEditToken.value === 'object' && get(internalEditToken.value, key, '')}
+                  onChange={onColorChange}
+                />
               )}
-            </>
+            </React.Fragment>
           ))}
         </Stack>
       ) : (
@@ -124,12 +132,11 @@ export default function BorderTokenForm({
             onSubmit={onSubmit}
           />
 
-          {isAliasMode && typeof internalEditToken.value === 'string' && checkIfContainsAlias(internalEditToken.value) && (
-            <ResolvedTokenDisplay
-              alias={alias}
-              selectedToken={selectedToken}
-            />
-          )}
+          {isAliasMode &&
+            typeof internalEditToken.value === 'string' &&
+            checkIfContainsAlias(internalEditToken.value) && (
+              <ResolvedTokenDisplay alias={alias} selectedToken={selectedToken} />
+            )}
         </Stack>
       )}
     </Stack>