@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/tree-item/tree-item.styles.js

@@ -2,9 +2,9 @@ import { css, cssPartial } from '@microsoft/fast-element';
 import { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { accentForegroundRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillRecipe, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 const ltr = css `
-  .expand-collapse-glyph {
+  .expand-collapse-button svg {
     transform: rotate(0deg);
   }
   :host(.nested) .expand-collapse-button {
@@ -13,12 +13,12 @@ const ltr = css `
   :host([selected])::after {
     left: calc(${focusStrokeWidth} * 1px);
   }
-  :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(45deg);
+  :host([expanded]) > .positioning-region .expand-collapse-button svg {
+    transform: rotate(90deg);
   }
 `;
 const rtl = css `
-  .expand-collapse-glyph {
+  .expand-collapse-button svg {
     transform: rotate(180deg);
   }
   :host(.nested) .expand-collapse-button {
@@ -27,17 +27,17 @@ const rtl = css `
   :host([selected])::after {
     right: calc(${focusStrokeWidth} * 1px);
   }
-  :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(135deg);
+  :host([expanded]) > .positioning-region .expand-collapse-button svg {
+    transform: rotate(90deg);
   }
 `;
 export const expandCollapseButtonSize = cssPartial `((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;
-const expandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-hover').withDefault((target) => {
+const expandCollapseHover = DesignToken.create('tree-item-expand-collapse-hover').withDefault((target) => {
     const recipe = neutralFillStealthRecipe.getValueFor(target);
     return recipe.evaluate(target, recipe.evaluate(target).hover).hover;
 });
-const selectedExpandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault((target) => {
-    const baseRecipe = neutralFillRecipe.getValueFor(target);
+const selectedExpandCollapseHover = DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault((target) => {
+    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
     const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
     return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
 });
@@ -47,7 +47,7 @@ export const treeItemStyles = (context, definition) => css `
       position: relative;
       outline: none;
       color: ${neutralForegroundRest};
-      background: ${neutralFillStealthRest};
+      fill: currentcolor;
       cursor: pointer;
       font-family: ${bodyFont};
       --expand-collapse-button-size: calc(${heightNumber} * 1px);
@@ -66,14 +66,15 @@ export const treeItemStyles = (context, definition) => css `
       display: flex;
       position: relative;
       box-sizing: border-box;
+      background: ${neutralFillStealthRest};
       border: calc(${strokeWidth} * 1px) solid transparent;
+      border-radius: calc(${controlCornerRadius} * 1px);
       height: calc((${heightNumber} + 1) * 1px);
     }
 
     :host(:${focusVisible}) .positioning-region {
-      border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      color: ${neutralForegroundRest};
+      border-color: ${focusStrokeOuter};
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset;
     }
 
     .positioning-region::before {
@@ -83,11 +84,11 @@ export const treeItemStyles = (context, definition) => css `
       flex-shrink: 0;
     }
 
-    .positioning-region:hover {
+    :host(:not([disabled])) .positioning-region:hover {
       background: ${neutralFillStealthHover};
     }
 
-    .positioning-region:active {
+    :host(:not([disabled])) .positioning-region:active {
       background: ${neutralFillStealthActive};
     }
 
@@ -113,6 +114,7 @@ export const treeItemStyles = (context, definition) => css `
     .expand-collapse-button {
       background: none;
       border: none;
+      border-radius: calc(${controlCornerRadius} * 1px);
       outline: none;
       ${
 /* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
@@ -126,25 +128,14 @@ export const treeItemStyles = (context, definition) => css `
       margin: 0 6px;
     }
 
-    .expand-collapse-glyph {
-      width: 16px;
-      height: 16px;
+    .expand-collapse-button svg {
       transition: transform 0.1s linear;
       pointer-events: none;
-      fill: ${neutralForegroundRest};
     }
 
     .start,
     .end {
       display: flex;
-      fill: currentcolor;
-    }
-
-    ::slotted(svg) {
-      ${
-/* Glyph size is temporary -
-    replace when glyph-size var is added */ ''} width: 16px;
-      height: 16px;
     }
 
     .start {
@@ -161,7 +152,7 @@ export const treeItemStyles = (context, definition) => css `
       display: block;
     }
 
-    :host([disabled]) .content-region {
+    :host([disabled]) {
       opacity: ${disabledOpacity};
       cursor: ${disabledCursor};
     }
@@ -176,15 +167,15 @@ export const treeItemStyles = (context, definition) => css `
     }
 
     :host(.nested) .expand-collapse-button:hover {
-      background: ${expandCollapseHoverBehavior};
+      background: ${expandCollapseHover};
     }
 
-    :host([selected]) .positioning-region {
-      background: ${neutralFillRest};
+    :host(:not([disabled])[selected]) .positioning-region {
+      background: ${neutralFillSecondaryRest};
     }
 
-    :host([selected]) .expand-collapse-button:hover {
-      background: ${selectedExpandCollapseHoverBehavior};
+    :host(:not([disabled])[selected]) .expand-collapse-button:hover {
+      background: ${selectedExpandCollapseHover};
     }
 
     :host([selected])::after {
@@ -196,7 +187,7 @@ export const treeItemStyles = (context, definition) => css `
       height: calc((${heightNumber} / 2) * 1px);
       ${
 /* The french fry background needs to be calculated based on the selected background state for this control.
-    We currently have no way of chaning that, so setting to accent-foreground-rest for the time being */ ''} background: ${accentForegroundRest};
+    We currently have no way of changing that, so setting to accent-foreground-rest for the time being */ ''} background: ${accentFillRest};
       border-radius: calc(${controlCornerRadius} * 1px);
     }
 
@@ -206,68 +197,42 @@ export const treeItemStyles = (context, definition) => css `
     }
   `.withBehaviors(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};
+          color: ${SystemColors.ButtonText};
         }
-        :host .content-region .expand-collapse-glyph,
-        :host .content-region .start,
-        :host .content-region .end {
-          fill: ${SystemColors.FieldText};
+        .positioning-region {
+          border-color: ${SystemColors.ButtonFace};
+          background: ${SystemColors.ButtonFace};
         }
-        :host .positioning-region:hover,
-        :host([selected]) .positioning-region {
+        :host(:not([disabled])) .positioning-region:hover,
+        :host(:not([disabled])) .positioning-region:active,
+        :host(:not([disabled])[selected]) .positioning-region {
           background: ${SystemColors.Highlight};
         }
         :host .positioning-region:hover .content-region,
         :host([selected]) .positioning-region .content-region {
+          forced-color-adjust: none;
           color: ${SystemColors.HighlightText};
         }
-        :host .positioning-region:hover .content-region .expand-collapse-glyph,
-        :host .positioning-region:hover .content-region .start,
-        :host .positioning-region:hover .content-region .end,
-        :host([selected]) .content-region .expand-collapse-glyph,
-        :host([selected]) .content-region .start,
-        :host([selected]) .content-region .end {
-          fill: ${SystemColors.HighlightText};
+        :host([disabled][selected]) .positioning-region .content-region {
+          color: ${SystemColors.GrayText};
         }
         :host([selected])::after {
-          background: ${SystemColors.Field};
+          background: ${SystemColors.HighlightText};
         }
         :host(:${focusVisible}) .positioning-region {
-          border-color: ${SystemColors.FieldText};
-          box-shadow: 0 0 0 2px inset ${SystemColors.Field};
-          color: ${SystemColors.FieldText};
+          forced-color-adjust: none;
+          border-color: ${SystemColors.ButtonText};
+          box-shadow: 0 0 0 2px inset ${SystemColors.ButtonFace};
         }
+        :host([disabled]),
         :host([disabled]) .content-region,
         :host([disabled]) .positioning-region:hover .content-region {
           opacity: 1;
           color: ${SystemColors.GrayText};
         }
-        :host([disabled]) .content-region .expand-collapse-glyph,
-        :host([disabled]) .content-region .start,
-        :host([disabled]) .content-region .end,
-        :host([disabled]) .positioning-region:hover .content-region .expand-collapse-glyph,
-        :host([disabled]) .positioning-region:hover .content-region .start,
-        :host([disabled]) .positioning-region:hover .content-region .end {
-          fill: ${SystemColors.GrayText};
-        }
-        :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};
+        :host(.nested) .expand-collapse-button:hover,
+        :host(:not([disabled])[selected]) .expand-collapse-button:hover {
+          background: ${SystemColors.ButtonFace};
+          fill: ${SystemColors.ButtonText};
         }
       `));

package/dist/esm/tree-view/tree-view.stories.js

@@ -3,31 +3,44 @@ export default {
     title: 'Components/Tree View',
     component: fluentTreeView,
     argTypes: {
-        disabled: {
-            control: { type: 'boolean' },
-        },
         renderCollapsedNodes: {
             control: { type: 'boolean' },
         },
     },
 };
-const TreeViewTemplate = ({ disabled, renderCollapsedNodes }) => `
+const TreeViewTemplate = ({ renderCollapsedNodes }) => `
 <style>
 div.docs-story>div:first-child {
-  height: 22em !important;
+  height: 26em !important;
 }
 </style>
 <fluent-tree-view
-  ${disabled ? 'disabled' : ''}
   ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
 ">
   <fluent-tree-item>
     Root item 1
     <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
+      Root item 1
+      <fluent-tree-item>
+        Flowers
+        <fluent-tree-item disabled>Daisy</fluent-tree-item>
+        <fluent-tree-item>
+          Sunflower
+          <svg slot="start" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
+            />
+          </svg>
+          <svg slot="end" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
+            />
+          </svg>
+        </fluent-tree-item>
+        <fluent-tree-item>Rose</fluent-tree-item>
+      </fluent-tree-item>
+      <fluent-tree-item>Nested item 2</fluent-tree-item>
+      <fluent-tree-item>Nested item 3</fluent-tree-item>
     </fluent-tree-item>
     <fluent-tree-item>Nested item 2</fluent-tree-item>
     <fluent-tree-item>Nested item 3</fluent-tree-item>
@@ -48,7 +61,6 @@ div.docs-story>div:first-child {
 </fluent-tree-view>`;
 export const TreeView = TreeViewTemplate.bind({});
 TreeView.args = {
-    disabled: false,
     renderCollapsedNodes: false,
 };
 const example = `