removes duplicate styles for expand-collapse-glyph on tree item causi…

…ng specificity and ordering issues (#18828) * removes duplicate styles for expand-collapse-glyph on tree item causing specificity/ordering issues * Change files
microsoft · Jul 6, 2021 · a712d19 · a712d19
1 parent 9babbdb
commit a712d19
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/change/@fluentui-web-components-6f977179-43de-4a13-82d5-d68f7fee4453.json b/change/@fluentui-web-components-6f977179-43de-4a13-82d5-d68f7fee4453.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "removes duplicate styles for expand-collapse-glyph on tree item causing specificity/ordering issues",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -174,10 +174,10 @@ export const treeItemStyles: (context: ElementDefinitionContext, definition: Tre
       width: 16px;
       height: 16px;
       transition: transform 0.1s linear;
-      transform: rotate(-45deg);
       pointer-events: none;
       fill: ${neutralForegroundRest};
     }
+
     .start,
     .end {
       display: flex;
@@ -202,10 +202,6 @@ export const treeItemStyles: (context: ElementDefinitionContext, definition: Tre
       } margin-inline-start: calc(${designUnit} * 2px + 2px);
     }
 
-    :host(.expanded) > .positioning-region .expand-collapse-glyph {
-      ${/* transform needs to be localized */ ''} transform: rotate(0deg);
-    }
-
     :host(.expanded) > .items {
       display: block;
     }