fix(web-components): add expand collapse hover state to tree view (#1…

…6375)

* fix: add hover state for expand collapse button in tree-item

* Change files

change/@fluentui-web-components-2021-01-05-12-23-56-users-jes-expand-collapse-hover-state.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: add hover state for expand collapse button in tree-item",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-05T20:23:56.895Z"
+}

packages/web-components/src/tree-item/tree-item.styles.ts

@@ -1,12 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import {
+  cssCustomPropertyBehaviorFactory,
   DirectionalStyleSheetBehavior,
   disabledCursor,
   display,
   focusVisible,
   forcedColorsStylesheetBehavior,
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
+import { neutralFillStealthHover, neutralFillStealthSelected } from '@microsoft/fast-components-styles-msft';
 import {
   accentForegroundRestBehavior,
   heightNumber,
@@ -20,6 +22,8 @@ import {
   neutralForegroundRestBehavior,
 } from '../styles/index';
 
+import { FluentDesignSystemProvider } from '../design-system-provider/index';
+
 const ltr = css`
   .expand-collapse-glyph {
     transform: rotate(-45deg);
@@ -50,6 +54,21 @@ const rtl = css`
   }
 `;
 
+export const expandCollapseButtonSize =
+  '((var(--base-height-multiplier) / 2) * var(--design-unit)) + ((var(--design-unit) * var(--density)) / 2)';
+
+const expandCollapseHoverBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-stealth-hover-over-hover',
+  x => neutralFillStealthHover(neutralFillStealthHover)(x),
+  FluentDesignSystemProvider.findProvider,
+);
+
+const selectedExpandCollapseHoverBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-stealth-hover-over-selected',
+  x => neutralFillStealthHover(neutralFillStealthSelected)(x),
+  FluentDesignSystemProvider.findProvider,
+);
+
 export const TreeItemStyles = css`
     ${display('block')} :host {
         contain: content;
@@ -82,7 +101,7 @@ export const TreeItemStyles = css`
         position: relative;
         box-sizing: border-box;
         border: transparent calc(var(--outline-width) * 1px) solid;
-        height: calc(${heightNumber} * 1px);
+        height: calc((${heightNumber} + 1) * 1px);
     }
 
     .positioning-region::before {
@@ -101,12 +120,12 @@ export const TreeItemStyles = css`
     }
 
     .content-region {
-        display: flex;
+        display: inline-flex;
         align-items: center;
         white-space: nowrap;
         width: 100%;
         height: calc(${heightNumber} * 1px);
-        margin-inline-start: calc(var(--design-unit) * 2px + 2px);
+        margin-inline-start: calc(var(--design-unit) * 2px + 8px);
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
         font-weight: 400;
@@ -127,13 +146,14 @@ export const TreeItemStyles = css`
         ${
           /* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
             update when density story is figured out */ ''
-        } width: var(--expand-collapse-button-size);
-        height: var(--expand-collapse-button-size);
+        } width: calc((${expandCollapseButtonSize} + (var(--design-unit) * 2)) * 1px);
+        height: calc((${expandCollapseButtonSize} + (var(--design-unit) * 2)) * 1px);
         padding: 0;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
+        margin: 0 6px;
     }
 
     .expand-collapse-glyph {
@@ -182,10 +202,27 @@ export const TreeItemStyles = css`
         cursor: ${disabledCursor};
     }
 
+    :host(.nested) .content-region {
+      position: relative;
+      margin-inline-start: var(--expand-collapse-button-size);
+    }
+
+    :host(.nested) .expand-collapse-button {
+        position: absolute;
+    }
+
+    :host(.nested) .expand-collapse-button:hover {
+        background: ${expandCollapseHoverBehavior.var};
+    }
+
     :host([selected]) .positioning-region {
         background: ${neutralFillStealthSelectedBehavior.var};
     }
 
+    :host([selected]) .expand-collapse-button:hover {
+      background: ${selectedExpandCollapseHoverBehavior.var};
+    }
+
     :host([selected])::after {
         content: "";
         display: block;
@@ -200,22 +237,13 @@ export const TreeItemStyles = css`
         border-radius: calc(var(--corner-radius) * 1px);
     }
 
-    :host(.nested) .content-region {
-        position: relative;
-        margin-inline-start: var(--expand-collapse-button-size);
-    }
-
-    :host(.nested) .expand-collapse-button {
-        position: absolute;
-        left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
-    }
-
     ::slotted(fluent-tree-item) {
         --tree-item-nested-width: 1em;
         --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);
     }
 `.withBehaviors(
   accentForegroundRestBehavior,
+  expandCollapseHoverBehavior,
   neutralFillStealthSelectedBehavior,
   neutralFillStealthActiveBehavior,
   neutralFillStealthHoverBehavior,
@@ -224,13 +252,15 @@ export const TreeItemStyles = css`
   neutralFocusInnerAccentBehavior,
   neutralForegroundActiveBehavior,
   neutralForegroundRestBehavior,
+  selectedExpandCollapseHoverBehavior,
   new DirectionalStyleSheetBehavior(ltr, rtl),
   forcedColorsStylesheetBehavior(
     css`
         :host {
             forced-color-adjust: none;
             border-color: transparent;
             background: ${SystemColors.Field};
+            color: ${SystemColors.FieldText};
         }
         :host .content-region {
             color: ${SystemColors.FieldText};
@@ -262,6 +292,7 @@ export const TreeItemStyles = css`
         :host(:${focusVisible}) .positioning-region {
             border-color: ${SystemColors.FieldText};
             box-shadow: 0 0 0 2px inset ${SystemColors.Field};
+            color: ${SystemColors.FieldText};
         }
         :host([disabled]) .content-region,
         :host([disabled]) .positioning-region:hover .content-region {
@@ -279,6 +310,17 @@ export const TreeItemStyles = css`
         :host([disabled]) .positioning-region:hover {
             background: ${SystemColors.Field};
         }
+        .expand-collapse-glyph,
+        .start,
+        .end {
+            fill: ${SystemColors.FieldText};
+        }
+        :host(.nested) .expand-collapse-button:hover {
+            background: ${SystemColors.Field};
+        }
+        :host(.nested) .expand-collapse-button:hover .expand-collapse-glyph {
+            fill: ${SystemColors.FieldText};
+        }
         `,
   ),
 );