Apply to menu polish (#2834)

* wip content and translations

* bump ui package

---------

Co-authored-by: Luke Finch <hey@lukefinch.co.uk>
Co-authored-by: Jan Six <six.jan@gmail.com>

packages/tokens-studio-for-figma/package.json

@@ -58,7 +58,7 @@
     "@tokens-studio/graph-engine": "^0.17.5",
     "@tokens-studio/sdk": "1.1.5",
     "@tokens-studio/tokens": "0.1.4",
-    "@tokens-studio/ui": "0.6.3",
+    "@tokens-studio/ui": "0.6.4",
     "@types/chroma-js": "^2.1.4",
     "@types/color": "^3.0.3",
     "@types/file-saver": "^2.0.5",

packages/tokens-studio-for-figma/src/app/components/ApplySelector.tsx

@@ -3,7 +3,7 @@ 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 IconChevronDown from '@/icons/chevrondown.svg';
@@ -50,7 +50,7 @@ export default function ApplySelector() {
         css={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
         onClick={handleUpdate}
       >
-        {t('applyTo.applyTo')}
+        {t('applyTo.button')}
         {' '}
         {updateMode}
       </Button>
@@ -79,8 +79,7 @@ export default function ApplySelector() {
 
         <DropdownMenu.Portal>
           <DropdownMenu.Content side="top" css={{ maxWidth: '350px' }}>
-            {/* TODO: Use DropdownMenu.Label - first add that to `ds` */}
-            <DropdownMenu.Item disabled>{t('applyTo.applyTo')}</DropdownMenu.Item>
+            <DropdownMenu.Label>{t('applyTo.applyCurrentTokensTo')}</DropdownMenu.Label>
             <DropdownMenu.RadioGroup value={updateMode}>
               <DropdownMenu.RadioItem
                 data-testid="apply-to-selection"
@@ -91,18 +90,12 @@ export default function ApplySelector() {
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
                 {t('applyTo.selection.title')}
-                <Box css={{ color: '$contextMenuFgMuted', fontSize: '$xxsmall' }}>
-                  {t('applyTo.selection.description')}
-                </Box>
               </DropdownMenu.RadioItem>
               <DropdownMenu.RadioItem data-testid="apply-to-page" value={UpdateMode.PAGE} onSelect={handleApplyPage}>
                 <DropdownMenu.ItemIndicator>
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
                 {t('applyTo.page.title')}
-                <Box css={{ color: '$contextMenuFgMuted', fontSize: '$xxsmall' }}>
-                  {t('applyTo.page.description')}
-                </Box>
               </DropdownMenu.RadioItem>
               <DropdownMenu.RadioItem
                 data-testid="apply-to-document"
@@ -112,15 +105,11 @@ export default function ApplySelector() {
                 <DropdownMenu.ItemIndicator>
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
-                {t('applyTo.doc.title')}
-                <Box css={{ color: '$contextMenuFgMuted', fontSize: '$xxsmall' }}>
-                  {t('applyTo.doc.description')}
-                </Box>
+                {t('applyTo.document.title')}
               </DropdownMenu.RadioItem>
             </DropdownMenu.RadioGroup>
             <DropdownMenu.Separator />
-            {/* TODO: Use DropdownMenu.Label - first add that to `ds` */}
-            <DropdownMenu.Item disabled>{t('applyTo.applyAs')}</DropdownMenu.Item>
+            <DropdownMenu.Label>{t('applyTo.applyCurrentTokensAs')}</DropdownMenu.Label>
             <DropdownMenu.RadioGroup value={applyVariablesStylesOrRawValue}>
               <DropdownMenu.RadioItem
                 data-testid="apply-variables-styles"
@@ -131,9 +120,6 @@ export default function ApplySelector() {
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
                 {t('applyTo.variablesStyles.title')}
-                <Box css={{ color: '$contextMenuFgMuted', fontSize: '$xxsmall' }}>
-                  {t('applyTo.variablesStyles.description')}
-                </Box>
               </DropdownMenu.RadioItem>
               <DropdownMenu.RadioItem
                 data-testid="apply-raw-values"
@@ -144,9 +130,6 @@ export default function ApplySelector() {
                   <DotFilledIcon />
                 </DropdownMenu.ItemIndicator>
                 {t('applyTo.rawValues.title')}
-                <Box css={{ color: '$contextMenuFgMuted', fontSize: '$xxsmall' }}>
-                  {t('applyTo.rawValues.description')}
-                </Box>
               </DropdownMenu.RadioItem>
             </DropdownMenu.RadioGroup>
           </DropdownMenu.Content>

packages/tokens-studio-for-figma/src/i18n/lang/en/tokens.json

@@ -31,27 +31,23 @@
   "noThemes": "No themes",
   "manageThemes": "Manage themes",
   "applyTo": {
-    "applyTo": "Apply to",
-    "applyAs": "Apply as",
+    "button": "Apply to",
+    "applyCurrentTokensTo": "Apply current tokens to:",
+    "applyCurrentTokensAs": "Apply current tokens as:",
     "selection": {
-      "title": "Apply to selection",
-      "description": "Applies current tokens to current selection (fast!)"
+      "title": "Current selection (fast)"
     },
     "page": {
-      "title": "Apply to page",
-      "description": "Applies current tokens to the current page"
+      "title": "Current page"
     },
-    "doc": {
-      "title": "Apply to document",
-      "description": "Applies current tokens to the whole document (slow!)"
+    "document": {
+      "title": "Whole document (slow)"
     },
     "variablesStyles": {
-      "title": "Apply as variables & styles",
-      "description": "If a token is connected to a variable or style, the connected variable or style will be applied to the property"
+      "title": "Variables & styles"
     },
     "rawValues": {
-      "title": "Resolved value",
-      "description": "The resolved value of the token will be applied to the property"
+      "title": "Raw values without variables or styles"
     }
   },
   "update": {