From 1909d3e03ac5d875a669625943481f8cfb889abb Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Tue, 5 Jan 2021 12:23:16 -0800 Subject: [PATCH 1/2] fix: add hover state for expand collapse button in tree-item --- .../src/tree-item/tree-item.styles.ts | 72 +++++++++++++++---- 1 file changed, 57 insertions(+), 15 deletions(-) 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 41a1c51044db6..27af38bea4af3 100644 --- a/packages/web-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/src/tree-item/tree-item.styles.ts @@ -1,5 +1,6 @@ import { css } from '@microsoft/fast-element'; import { + cssCustomPropertyBehaviorFactory, DirectionalStyleSheetBehavior, disabledCursor, display, @@ -7,6 +8,7 @@ import { 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,6 +252,7 @@ export const TreeItemStyles = css` neutralFocusInnerAccentBehavior, neutralForegroundActiveBehavior, neutralForegroundRestBehavior, + selectedExpandCollapseHoverBehavior, new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior( css` @@ -231,6 +260,7 @@ export const TreeItemStyles = css` 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}; + } `, ), ); From 2c5aa58a08395c26dbe8d56b6514d134d999a3db Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Tue, 5 Jan 2021 12:23:56 -0800 Subject: [PATCH 2/2] Change files --- ...05-12-23-56-users-jes-expand-collapse-hover-state.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/@fluentui-web-components-2021-01-05-12-23-56-users-jes-expand-collapse-hover-state.json diff --git a/change/@fluentui-web-components-2021-01-05-12-23-56-users-jes-expand-collapse-hover-state.json b/change/@fluentui-web-components-2021-01-05-12-23-56-users-jes-expand-collapse-hover-state.json new file mode 100644 index 0000000000000..30fe909f1d9e3 --- /dev/null +++ b/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" +}