Users/jes/expand collapse hover state

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};
+ }
  `,
  ),
 );