2.0: Polish UI bugs (#2685)

### Why does this PR exist? Fixes a bunch of UI polish issues Fixes #2646 Fixes #2584 Fixes #2647 Fixes #2650 Fixes #2682 ### What does this pull request do? Decided to introduce a variant: danger to our `useConfirm` Decided to show disabled options in a disabled state when right clicking token set groups Fixed a bunch of the visual issues like Portal and spacing of a few items | Feature | Before | After | |------------------------|--------|-------| | Inspect view | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/6fde8e2f-4884-49b7-8166-7a5ea7090cab) | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/e16a1880-b37c-4fd2-b164-4295b27ec619) | | Right click token set group | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/792485a5-1805-4359-9e3a-931520167015) | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/2de41f26-1cac-4e26-a4bb-1e5fa232c45f) | | Duplicate token group | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/c4c66df6-c59e-44c4-8939-bb8c514b0cd4) | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/a9998551-db28-4206-b778-44e273e01a13) | | Delete token group | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/d855d5ce-610f-45aa-8b79-ef7deb1bdec4) | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/d634a900-673a-47e3-9357-fe76161ea7b3) | | Downshift Input | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/240887ca-d6ae-4b3a-a6c1-a627d45d2877) | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/5918ac9c-65f9-4cd1-893a-ae5cc21945cf) | | Mentions Input | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/300ba5e0-fcb4-4524-aa74-8970d8977d7e) | ![](https://github.com/tokens-studio/figma-plugin/assets/4548309/e8779162-ca3f-44f5-98dc-ac85388d503c) |
tokens-studio · Apr 26, 2024 · cf16c39 · cf16c39
1 parent c702b2f
commit cf16c39
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 44 deletions.
diff --git a/packages/tokens-studio-for-figma/src/app/components/AnnotationBuilder.tsx b/packages/tokens-studio-for-figma/src/app/components/AnnotationBuilder.tsx
@@ -31,12 +31,12 @@ export default function AnnotationBuilder() {
   }, [uiState]);
 
   return Object.entries(uiState.mainNodeSelectionValues).length > 0 ? (
-    <Box css={{ borderBottom: '1px solid $borderDefault', paddingBottom: '$4', marginBottom: '$4' }}>
+    <Box css={{ borderBottom: '1px solid $borderMuted', paddingBottom: '$4', marginBottom: '$4' }}>
       <Stack direction="row" align="center" justify="between">
         <Text bold>{t('addAnnotation')}</Text>
-        <Stack direction="row" align="center" gap={0}>
+        <Stack direction="row" align="center" gap={2}>
           <IconButton onClick={createAnnotationLeft} icon="←" />
-          <Stack direction="column">
+          <Stack direction="column" gap={2}>
             <IconButton onClick={createAnnotationTop} icon="↑" />
             <IconButton onClick={createAnnotationBottom} icon="↓" />
           </Stack>

diff --git a/packages/tokens-studio-for-figma/src/app/components/ConfirmDialog.tsx b/packages/tokens-studio-for-figma/src/app/components/ConfirmDialog.tsx
@@ -82,6 +82,8 @@ function ConfirmDialog() {
     }
   }, [confirmState.show, confirmButton, confirmState.choices, firstInput]);
 
+  const isDangerVariant = confirmState?.variant === 'danger';
+
   return confirmState.show ? (
     <Modal isOpen close={onCancel} title={confirmState?.text && confirmState.text}>
       <form onSubmit={handleConfirm}>
@@ -120,11 +122,11 @@ function ConfirmDialog() {
               </Stack>
             ) : null}
           </Stack>
-          <Stack direction="row" gap={3} justify="end">
+          <Stack direction="row" gap={3} justify={isDangerVariant ? 'between' : 'end'}>
             <Button variant="secondary" onClick={onCancel}>
               {confirmState?.cancelAction}
             </Button>
-            <Button type="submit" variant="primary" ref={confirmButton}>
+            <Button type="submit" variant={isDangerVariant ? 'danger' : 'primary'} ref={confirmButton}>
               {confirmState?.confirmAction}
             </Button>
           </Stack>

diff --git a/packages/tokens-studio-for-figma/src/app/components/DownshiftInput/DownshiftInput.tsx b/packages/tokens-studio-for-figma/src/app/components/DownshiftInput/DownshiftInput.tsx
@@ -226,7 +226,7 @@ export const DownshiftInput: React.FunctionComponent<React.PropsWithChildren<Rea
                 <Popover.Content side="bottom" align="end" sideOffset={4} style={{ pointerEvents: 'all', width: 'var(--radix-popover-trigger-width)' }}>
                   <Box
                     css={{
-                      backgroundColor: '$bgDefault',
+                      backgroundColor: '$bgCanvas',
                       border: '1px solid',
                       borderColor: '$borderSubtle',
                       borderRadius: '$medium',

diff --git a/packages/tokens-studio-for-figma/src/app/components/DownshiftInput/StyledDownshiftInput.tsx b/packages/tokens-studio-for-figma/src/app/components/DownshiftInput/StyledDownshiftInput.tsx
@@ -34,7 +34,7 @@ export const StyledList = styled(List as ComponentType<any>, {
   zIndex: '10',
   maxHeight: '30vh',
   overflowY: 'auto',
-  backgroundColor: '$bgDefault',
+  backgroundColor: '$bgCanvas',
   cursor: 'pointer',
   padding: '$2',
 });

diff --git a/packages/tokens-studio-for-figma/src/app/components/DownshiftInput/mentions.css b/packages/tokens-studio-for-figma/src/app/components/DownshiftInput/mentions.css
@@ -71,7 +71,7 @@
   border: 1px solid var(--colors-borderSubtle);
   border-radius: var(--radii-medium);
   box-shadow: var(--shadows-contextMenu);
-  background: var(--colors-bgDefault);
+  background: var(--colors-bgCanvas);
   cursor: pointer;
   z-index: 10;
 }
@@ -99,7 +99,7 @@
 
 /* Track */
 .rc-mentions-dropdown-menu::-webkit-scrollbar-track {
-  background: var(--bgDefault);
+  background: var(--colors-bgCanvas);
 }
 
 /* Handle */

diff --git a/packages/tokens-studio-for-figma/src/app/components/InspectorDebugView.tsx b/packages/tokens-studio-for-figma/src/app/components/InspectorDebugView.tsx
@@ -16,8 +16,9 @@ import { styled } from '@/stitches.config';
 
 const StyledCode = styled('code', {
   display: 'flex',
+  alignItems: 'center',
   flexWrap: 'wrap',
-  gap: '$2',
+  gap: '$3',
 });
 
 export default function InspectorDebugView({ resolvedTokens }: { resolvedTokens: SingleToken[] }) {
@@ -56,21 +57,20 @@ export default function InspectorDebugView({ resolvedTokens }: { resolvedTokens:
 
         {uiState.selectedLayers === 1 && Object.entries(uiState.mainNodeSelectionValues).length > 0
           ? (
-            <Stack direction="column" gap={1}>
+            <Stack direction="column" gap={5}>
               {Object.entries(uiState.mainNodeSelectionValues)
                 .filter(([key, value]) => !StyleIdBackupKeys.includes(key) && value !== 'delete')
                 .map(([property, value]) => (
-                  <Stack key={property} direction="row" align="start" justify="between">
-                    <StyledCode>
-                      <Text bold>{property}</Text>
-                      :
-                      {' '}
-                      <StyledInspectBadge>
-                        {typeof value === 'string' && value.split('.').join('-')}
-                      </StyledInspectBadge>
-                      <Text size="xsmall" muted css={{ wordBreak: 'break-all' }}>{`/* ${getResolvedValue(property, value)} */`}</Text>
-                    </StyledCode>
-                  </Stack>
+                  <StyledCode key={property}>
+                    <Text bold>
+                      {property}
+                      {': '}
+                    </Text>
+                    <StyledInspectBadge>
+                      {typeof value === 'string' && value.split('.').join('-')}
+                    </StyledInspectBadge>
+                    <Text size="xsmall" muted css={{ wordBreak: 'break-all' }}>{`/* ${getResolvedValue(property, value)} */`}</Text>
+                  </StyledCode>
                 ))}
             </Stack>
           )

diff --git a/packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ManageThemesModal.tsx b/packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ManageThemesModal.tsx
@@ -80,7 +80,7 @@ export const ManageThemesModal: React.FC<React.PropsWithChildren<React.PropsWith
 
   const handleDeleteTheme = useCallback(async () => {
     if (typeof themeEditorOpen === 'string') {
-      const confirmDelete = await confirm({ text: 'Are you sure you want to delete this theme?' });
+      const confirmDelete = await confirm({ text: 'Are you sure you want to delete this theme?', confirmAction: 'Delete', variant: 'danger' });
       if (confirmDelete) {
         track('Delete theme', { id: themeEditorOpen });
         dispatch.tokenState.deleteTheme(themeEditorOpen);

diff --git a/packages/tokens-studio-for-figma/src/app/components/MultiSelectDropdown.tsx b/packages/tokens-studio-for-figma/src/app/components/MultiSelectDropdown.tsx
@@ -33,16 +33,18 @@ export const MultiSelectDropdown: React.FunctionComponent<React.PropsWithChildre
 
   return (
     <DropdownMenu>
-      <DropdownMenu.Trigger asChild css={{ width: '100%' }}>
+      <DropdownMenu.Trigger asChild>
         <Button asDropdown>
           {selectedItemsString}
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content side="bottom" className="content content-dark scroll-container" css={{ maxHeight: '$dropdownMaxHeight' }}>
-        {
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content side="bottom" className="content scroll-container" css={{ maxHeight: 'clamp(100px, 30vh, 500px)' }}>
+          {
           menuItems.map((menuItem, index) => <MultiSelectCheckboxItem key={`multi_checkbox_${seed(index)}`} item={menuItem} isSelected={selectedItems.includes(menuItem)} onItemSelected={handleSelectedItem} />)
         }
-      </DropdownMenu.Content>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
     </DropdownMenu>
   );
 };
diff --git a/packages/tokens-studio-for-figma/src/app/components/TokenSetItem/TokenSetItem.tsx b/packages/tokens-studio-for-figma/src/app/components/TokenSetItem/TokenSetItem.tsx
@@ -159,18 +159,14 @@ export function TokenSetItem({
         )}
         <ContextMenu.Portal>
           <ContextMenu.Content>
-            {canEdit && <ContextMenu.Item onSelect={handleRename}>{t('rename')}</ContextMenu.Item>}
+            <ContextMenu.Item onSelect={handleRename} disabled={!canEdit}>{t('rename')}</ContextMenu.Item>
             {item.isLeaf && (
               <>
-                {canEdit && (
-                  <>
-                    <ContextMenu.Item disabled={!canDuplicate} onSelect={handleDuplicate}>{t('duplicate')}</ContextMenu.Item>
-                    <ContextMenu.Item disabled={!canDelete} onSelect={handleDelete}>
-                      {t('delete')}
-                    </ContextMenu.Item>
-                    <ContextMenu.Separator />
-                  </>
-                )}
+                <ContextMenu.Item disabled={!canEdit || !canDuplicate} onSelect={handleDuplicate}>{t('duplicate')}</ContextMenu.Item>
+                <ContextMenu.Item disabled={!canEdit || !canDelete} onSelect={handleDelete}>
+                  {t('delete')}
+                </ContextMenu.Item>
+                <ContextMenu.Separator />
                 <ContextMenu.CheckboxItem
                   checked={tokenSetStatus === TokenSetStatus.SOURCE}
                   onSelect={handleTreatAsSource}

diff --git a/packages/tokens-studio-for-figma/src/app/components/modals/DuplicateTokenGroupModal.tsx b/packages/tokens-studio-for-figma/src/app/components/modals/DuplicateTokenGroupModal.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@tokens-studio/ui';
+import { Button, TextInput, Stack } from '@tokens-studio/ui';
 import Modal from '../Modal';
-import Stack from '../Stack';
-import Input from '../Input';
 import { MultiSelectDropdown } from '../MultiSelectDropdown';
 import { activeTokenSetSelector, tokensSelector } from '@/selectors';
 import useManageTokens from '@/app/store/useManageTokens';
@@ -58,16 +56,16 @@ export default function DuplicateTokenGroupModal({
         </form>
     )}
     >
-      <Stack direction="column" gap={4} css={{ justifyContent: 'center' }}>
-        <Input
+      <Stack direction="column" justify="center" align="start" gap={4}>
+        <TextInput
           form="duplicateTokenGroup"
-          full
           onChange={handleNewTokenGroupNameChange}
           type="text"
           name="tokengroupname"
           value={newName}
-          autofocus
+          autoFocus
           required
+          css={{ width: '100%' }}
         />
         <MultiSelectDropdown menuItems={Object.keys(tokens)} selectedItems={selectedTokenSets} handleSelectedItemChange={handleSelectedItemChange} />
       </Stack>

diff --git a/packages/tokens-studio-for-figma/src/app/hooks/useConfirm.tsx b/packages/tokens-studio-for-figma/src/app/hooks/useConfirm.tsx
@@ -25,6 +25,7 @@ function useConfirm<C = any>() {
       cancelAction,
       choices,
       input,
+      variant,
     } = opts;
 
     dispatch.uiState.setShowConfirm({
@@ -34,6 +35,7 @@ function useConfirm<C = any>() {
       cancelAction,
       text: text ?? '',
       choices: choices ?? [],
+      variant,
     });
 
     return new Promise<ResolveCallbackPayload<C>>((res) => {

diff --git a/packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx b/packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx
@@ -27,6 +27,7 @@ export type ConfirmProps = {
   choices?: { key: string; label: string; enabled?: boolean, unique?: boolean }[];
   confirmAction?: string;
   cancelAction?: string;
+  variant?: 'danger';
   input?: {
     type: 'text';
     placeholder: string;
@@ -169,6 +170,7 @@ export const uiState = createModel<RootModel>()({
         choices: { key: string; label: string; enabled?: boolean; unique?: boolean }[];
         confirmAction?: string;
         cancelAction?: string;
+        variant?: 'danger';
         input?: {
           type: 'text';
           placeholder: string;
@@ -184,6 +186,7 @@ export const uiState = createModel<RootModel>()({
         confirmAction: data.confirmAction || defaultConfirmState.confirmAction,
         cancelAction: data.cancelAction || defaultConfirmState.cancelAction,
         input: data.input,
+        variant: data.variant,
       },
     }),
     setSelectedLayers: (state, data: number) => ({

diff --git a/packages/tokens-studio-for-figma/src/app/store/useManageTokens.tsx b/packages/tokens-studio-for-figma/src/app/store/useManageTokens.tsx
@@ -140,6 +140,8 @@ export default function useManageTokens() {
       text: 'Delete token?',
       description: 'Are you sure you want to delete this token?',
       choices,
+      confirmAction: 'Delete',
+      variant: 'danger',
     });
     if (userConfirmation) {
       dispatch.uiState.startJob({
@@ -160,6 +162,8 @@ export default function useManageTokens() {
     const userConfirmation = await confirm({
       text: 'Delete group?',
       description: 'Are you sure you want to delete this group?',
+      variant: 'danger',
+      confirmAction: 'Delete',
     });
     if (userConfirmation) {
       const activeTokenSet = activeTokenSetSelector(store.getState());