From a712d19f8b73ea33406cfa5c51bb3e338599087a Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 6 Jul 2021 10:57:52 -0700 Subject: [PATCH] removes duplicate styles for expand-collapse-glyph on tree item causing specificity and ordering issues (#18828) * removes duplicate styles for expand-collapse-glyph on tree item causing specificity/ordering issues * Change files --- ...eb-components-6f977179-43de-4a13-82d5-d68f7fee4453.json | 7 +++++++ packages/web-components/src/tree-item/tree-item.styles.ts | 6 +----- 2 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 change/@fluentui-web-components-6f977179-43de-4a13-82d5-d68f7fee4453.json diff --git a/change/@fluentui-web-components-6f977179-43de-4a13-82d5-d68f7fee4453.json b/change/@fluentui-web-components-6f977179-43de-4a13-82d5-d68f7fee4453.json new file mode 100644 index 00000000000000..3f2b150200b5e4 --- /dev/null +++ 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 index 2e6c78356580af..1a04d34682f11e 100644 --- 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; }