fix: make CSS show triangles in project tree

Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx

@@ -18,35 +18,22 @@ type Props = {
   isActive?: boolean;
 };
 
-const summaryStyle = (depth: number, isActive: boolean) => css`
+const summaryStyle = (depth: number, isActive: boolean, isOpen: boolean) => css`
   label: summary;
-  display: flex;
   padding-left: ${depth * INDENT_PER_LEVEL + 12}px;
   padding-top: 6px;
+  display: list-item;
   :hover {
     background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
   }
   background: ${isActive ? NeutralColors.gray30 : NeutralColors.white};
+  ${isOpen ? 'list-style-type: "⏷";' : 'list-style-type: "⏵";'}
 `;
 
 const nodeStyle = css`
   margin-top: 2px;
 `;
 
-const TRIANGLE_SCALE = 0.6;
-
-const detailsStyle = css`
-  &:not([open]) > summary::-webkit-details-marker {
-    transform: scaleX(${TRIANGLE_SCALE});
-    min-width: 10px;
-  }
-
-  &[open] > summary::-webkit-details-marker {
-    transform: scaleY(${TRIANGLE_SCALE});
-    min-width: 10px;
-  }
-`;
-
 export const ExpandableNode = ({
   children,
   summary,
@@ -75,21 +62,19 @@ export const ExpandableNode = ({
   }
 
   return (
-    <div css={nodeStyle} data-testid="dialog">
-      <details ref={detailsRef} css={detailsStyle} open={isExpanded}>
-        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
-        <summary
-          css={summaryStyle(depth, isActive)}
-          data-testid={'summaryTag'}
-          role="button"
-          tabIndex={0}
-          onClick={handleClick}
-          onKeyUp={handleKey}
-        >
-          {summary}
-        </summary>
-        {children}
-      </details>
-    </div>
+    <details ref={detailsRef} css={nodeStyle} data-testid="dialog" open={isExpanded}>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
+      <summary
+        css={summaryStyle(depth, isActive, isExpanded)}
+        data-testid={'summaryTag'}
+        role="button"
+        tabIndex={0}
+        onClick={handleClick}
+        onKeyUp={handleKey}
+      >
+        {summary}
+      </summary>
+      {children}
+    </details>
   );
 };

Composer/packages/client/src/components/ProjectTree/treeItem.tsx

@@ -88,41 +88,53 @@ export const moreButton = (isActive: boolean): IButtonStyles => {
   };
 };
 
-const navContainer = (isAnyMenuOpen: boolean, isActive: boolean, menuOpenHere: boolean, textWidth: number) => css`
+const navContainer = (
+  isAnyMenuOpen: boolean,
+  isActive: boolean,
+  menuOpenHere: boolean,
+  textWidth: number,
+  isBroken: boolean,
+  padLeft: number,
+  marginLeft: number
+) => css`
   ${isAnyMenuOpen
     ? ''
-    : `&:hover {
-  background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
+    : `
+    &:hover {
+        background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
+
+        .dialog-more-btn {
+          visibility: visible;
+        }
+        .action-btn {
+          visibility: visible;
+        }
+        .treeItem-text {
+          max-width: ${textWidth}px;
+        }
+        }`};
 
-  .dialog-more-btn {
-    visibility: visible;
-  }
-  .action-btn {
-    visibility: visible;
-  }
-  .treeItem-text {
-    max-width: ${textWidth}px;
-  }
-  }`};
   background: ${isActive ? NeutralColors.gray30 : menuOpenHere ? '#f2f2f2' : 'transparent'};
-`;
 
-const navItem = (isBroken: boolean, padLeft: number, marginLeft: number, isActive: boolean) => css`
+  display: inline-flex;
+  flex-direction: row;
+
   label: navItem;
-  position: relative;
+
   height: 24px;
   font-size: 12px;
   padding-left: ${padLeft}px;
   margin-left: ${marginLeft}px;
+  min-width: calc(100% - ${padLeft + 24}px);
   opacity: ${isBroken ? 0.5 : 1};
-  display: flex;
-  flex-direction: row;
   align-items: center;
 
+  position: relative;
+  top: -4px;
+
   :hover {
     background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
   }
-  background: ${isActive ? NeutralColors.gray30 : NeutralColors.white};
 
   &:focus {
     outline: none;
@@ -155,7 +167,7 @@ export const overflowSet = (isBroken: boolean) => css`
   height: 100%;
   box-sizing: border-box;
   justify-content: space-between;
-  display: flex;
+  display: inline-flex;
   i {
     color: ${isBroken ? SharedColors.red20 : 'inherit'};
   }
@@ -496,57 +508,56 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 
   return (
     <div
+      aria-label={a11yLabel}
       css={navContainer(
         isMenuOpen,
         isActive,
         thisItemSelected,
-        textWidth - spacerWidth + extraSpace - overflowIconWidthOnHover
+        textWidth - spacerWidth + extraSpace - overflowIconWidthOnHover,
+        isBroken,
+        padLeft,
+        marginLeft
       )}
-    >
-      <div
-        aria-label={a11yLabel}
-        css={navItem(isBroken, padLeft, marginLeft, isActive)}
-        data-testid={a11yLabel}
-        role="gridcell"
-        tabIndex={0}
-        onClick={() => {
+      data-testid={a11yLabel}
+      role="treeitem"
+      tabIndex={0}
+      onClick={() => {
+        onSelect?.(link);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
           onSelect?.(link);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            onSelect?.(link);
-          }
-        }}
-      >
-        <div style={{ minWidth: `${spacerWidth}px` }}></div>
-        <OverflowSet
-          //In 8.0 the OverflowSet will no longer be wrapped in a FocusZone
-          //remove this at that time
-          doNotContainWithinFocusZone
-          css={overflowSet(isBroken)}
-          data-testid={linkString}
-          items={[
-            {
-              key: linkString,
-              icon: isBroken ? 'RemoveLink' : icon,
-              ...link,
-            },
-          ]}
-          overflowItems={overflowMenu}
-          role="row"
-          styles={{ item: { flex: 1 } }}
-          onRenderItem={onRenderItem(
-            textWidth - spacerWidth + extraSpace - overflowIconWidthActiveOrChildSelected,
-            showErrors
-          )}
-          onRenderOverflowButton={onRenderOverflowButton(
-            !!isActive,
-            isChildSelected,
-            menuOpenCallback,
-            setThisItemSelected
-          )}
-        />
-      </div>
+        }
+      }}
+    >
+      <div style={{ minWidth: `${spacerWidth}px` }}></div>
+      <OverflowSet
+        //In 8.0 the OverflowSet will no longer be wrapped in a FocusZone
+        //remove this at that time
+        doNotContainWithinFocusZone
+        css={overflowSet(isBroken)}
+        data-testid={linkString}
+        items={[
+          {
+            key: linkString,
+            icon: isBroken ? 'RemoveLink' : icon,
+            ...link,
+          },
+        ]}
+        overflowItems={overflowMenu}
+        role="row"
+        styles={{ item: { flex: 1 } }}
+        onRenderItem={onRenderItem(
+          textWidth - spacerWidth + extraSpace - overflowIconWidthActiveOrChildSelected,
+          showErrors
+        )}
+        onRenderOverflowButton={onRenderOverflowButton(
+          !!isActive,
+          isChildSelected,
+          menuOpenCallback,
+          setThisItemSelected
+        )}
+      />
     </div>
   );
 };