1278-120-rc1-renaming-token-groups-causes-them-to-collapse (#1281)

tokens-studio · Sep 16, 2022 · e3d457a · e3d457a
1 parent 742e8fe
commit e3d457a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 38 deletions.
diff --git a/src/app/components/TokenGroup/TokenGroup.test.tsx b/src/app/components/TokenGroup/TokenGroup.test.tsx
@@ -75,8 +75,8 @@ describe('TokenGroup', () => {
       schema={schema as TokenTypeSchema}
     />);
 
-    await fireEvent.click(getByTestId('tokenlisting-group-size.font'));
-    await fireEvent.click(getByTestId('tokenlisting-group-color'));
+    await fireEvent.click(getByTestId('group-heading-size.font-font-listing'));
+    await fireEvent.click(getByTestId('group-heading-color-color-listing'));
 
     const { collapsedTokens } = store.getState().tokenState;
     expect(collapsedTokens).toEqual(['size.font', 'color']);
@@ -90,9 +90,9 @@ describe('TokenGroup', () => {
       schema={schema as TokenTypeSchema}
     />);
 
-    await fireEvent.click(getByTestId('tokenlisting-group-size.font'));
-    await fireEvent.click(getByTestId('tokenlisting-group-size.font'));
-    await fireEvent.click(getByTestId('tokenlisting-group-color'));
+    await fireEvent.click(getByTestId('group-heading-size.font-font-listing'));
+    await fireEvent.click(getByTestId('group-heading-size.font-font-listing'));
+    await fireEvent.click(getByTestId('group-heading-color-color-listing'));
 
     const { collapsedTokens } = store.getState().tokenState;
     expect(collapsedTokens).toEqual(['color']);

diff --git a/src/app/components/TokenGroup/TokenGroupHeading.tsx b/src/app/components/TokenGroup/TokenGroupHeading.tsx
@@ -91,11 +91,10 @@ export function TokenGroupHeading({
         data-cy={`tokenlisting-group-${path}`}
         data-testid={`tokenlisting-group-${path}`}
         type="button"
-        onClick={handleToggleCollapsed}
       >
         {collapsed.includes(path) ? <IconCollapseArrow /> : <IconExpandArrow />}
         <ContextMenu>
-          <ContextMenuTrigger id={`group-heading-${path}-${label}-${id}`}>
+          <ContextMenuTrigger data-testid={`group-heading-${path}-${label}-${id}`} onClick={handleToggleCollapsed}>
             <Heading muted size="small">{label}</Heading>
           </ContextMenuTrigger>
           <ContextMenuContent>
@@ -110,39 +109,39 @@ export function TokenGroupHeading({
             </ContextMenuItem>
           </ContextMenuContent>
         </ContextMenu>
-        <Modal
-          title={`Rename ${oldTokenGroupName}`}
-          isOpen={showNewGroupNameField}
-          close={handleSetNewTokenGroupNameFileClose}
-          footer={(
-            <form id="renameTokenGroup" onSubmit={handleRenameTokenGroupSubmit}>
-              <Stack direction="row" gap={4}>
-                <Button variant="secondary" size="large" onClick={handleSetNewTokenGroupNameFileClose}>
-                  Cancel
-                </Button>
-                <Button type="submit" variant="primary" size="large" disabled={oldTokenGroupName === newTokenGroupName}>
-                  Change
-                </Button>
-              </Stack>
-            </form>
-        )}
-        >
-          <Stack direction="column" justify="center" gap={4} css={{ textAlign: 'center' }}>
-            <Heading size="small">Renaming only affects tokens of the same type</Heading>
-            <Stack direction="column" gap={4}>
-              <Input
-                form="renameTokenGroup"
-                full
-                onChange={handleNewTokenGroupNameChange}
-                type="text"
-                name="tokengroupname"
-                value={newTokenGroupName}
-                required
-              />
+      </StyledTokenGroupHeadingCollapsable>
+      <Modal
+        title={`Rename ${oldTokenGroupName}`}
+        isOpen={showNewGroupNameField}
+        close={handleSetNewTokenGroupNameFileClose}
+        footer={(
+          <form id="renameTokenGroup" onSubmit={handleRenameTokenGroupSubmit}>
+            <Stack direction="row" gap={4}>
+              <Button variant="secondary" size="large" onClick={handleSetNewTokenGroupNameFileClose}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="primary" size="large" disabled={oldTokenGroupName === newTokenGroupName}>
+                Change
+              </Button>
             </Stack>
+          </form>
+        )}
+      >
+        <Stack direction="column" justify="center" gap={4} css={{ textAlign: 'center' }}>
+          <Heading size="small">Renaming only affects tokens of the same type</Heading>
+          <Stack direction="column" gap={4}>
+            <Input
+              form="renameTokenGroup"
+              full
+              onChange={handleNewTokenGroupNameChange}
+              type="text"
+              name="tokengroupname"
+              value={newTokenGroupName}
+              required
+            />
           </Stack>
-        </Modal>
-      </StyledTokenGroupHeadingCollapsable>
+        </Stack>
+      </Modal>
       <StyledTokenGroupAddIcon
         icon={<IconAdd />}
         tooltip="Add a new token"