Change files

microsoft · May 24, 2021 · 146a915 · 146a915
1 parent 5c7aaad
commit 146a915
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 22 deletions.
diff --git a/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json b/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "add directional stylesheet, css partials, and default slotted content for vNext components",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
-    "@microsoft/fast-element": "^1.3.0",
+    "@microsoft/fast-element": "^1.4.0",
     "@microsoft/fast-foundation": "2.0.0-1",
     "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"

diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts
@@ -409,7 +409,7 @@ export const neutralFillSelected = create<SwatchRGB>('neutral-fill-selected').wi
 // Neutral Focus
 export const NeutralFocus = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-focus', builder =>
   builder.instance((element: HTMLElement) =>
-    neutralFocusAlgorithm(accentPalette.getValueFor(element), fillColor.getValueFor(element)),
+    neutralFocusAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
   ),
 );
 export const neutralFocus = create<SwatchRGB>('neutral-focus').withDefault((element: HTMLElement) =>

diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -15,6 +15,7 @@ import {
   neutralFillStealthHover,
   neutralFillStealthActive,
   disabledOpacity,
+  focusOutlineWidth,
 } from '../design-tokens';
 
 export const menuItemStyles = (context, definition) =>
@@ -77,7 +78,7 @@ export const menuItemStyles = (context, definition) =>
 
     :host(:${focusVisible}) {
         border: calc(${outlineWidth} * 1px) solid ${neutralFocus};
-        box-shadow: 0 0 0 calc((${outlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus};
+        box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus};
     }
 
     :host(:hover) {

diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -33,31 +33,31 @@ import { SwatchRGB } from '../color-vNext/swatch';
 
 const ltr = css`
   .expand-collapse-glyph {
-    transform: rotate(-45deg);
+    transform: rotate(0deg);
   }
   :host(.nested) .expand-collapse-button {
     left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
   }
   :host([selected])::after {
-    left: calc(${focusOutlineWidth} * 1px);
+    left: calc(var(--focus-outline-width) * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(0deg);
+    transform: rotate(45deg);
   }
 `;
 
 const rtl = css`
   .expand-collapse-glyph {
-    transform: rotate(135deg);
+    transform: rotate(180deg);
   }
   :host(.nested) .expand-collapse-button {
     right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
   }
   :host([selected])::after {
-    right: calc(${focusOutlineWidth} * 1px);
+    right: calc(var(--focus-outline-width) * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(90deg);
+    transform: rotate(135deg);
   }
 `;
 
@@ -99,20 +99,20 @@ export const treeItemStyles = (context, definition) =>
         outline: none;
     }
 
+    .positioning-region {
+      display: flex;
+      position: relative;
+      box-sizing: border-box;
+      border: calc(${outlineWidth} * 1px) solid transparent;
+      height: calc((${heightNumber} + 1) * 1px);
+    }
+
     :host(:${focusVisible}) .positioning-region {
-        border: ${neutralFocus} calc(${outlineWidth} * 1px) solid;
+        border: calc(${outlineWidth} * 1px) solid ${neutralFocus};
         border-radius: calc(${cornerRadius} * 1px);
         color: ${neutralForegroundRest};
     }
 
-    .positioning-region {
-        display: flex;
-        position: relative;
-        box-sizing: border-box;
-        border: transparent calc(${outlineWidth} * 1px) solid;
-        height: calc((${heightNumber} + 1) * 1px);
-    }
-
     .positioning-region::before {
         content: "";
         display: block;

diff --git a/yarn.lock b/yarn.lock
@@ -3218,10 +3218,10 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.0.tgz#f62ce25a800e6b413d3aa562e8416cdc1ed9131c"
   integrity sha512-u4R/sfF4SoKSAyDWJaBSDuVo4aGf1BXntlEWukC+1ubH36C6JmmdLSyyip5TQZiTqjQIy3uctcbepPi7oGI0Rw==
 
-"@microsoft/fast-element@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.3.0.tgz#152cc70a8e391b03602ab429da714edcda8a90fd"
-  integrity sha512-AcgUT3TG7HM3Ts9tKGR4Geobz4scbApSQvJidR3JDpl8J4G5jvhj8qSwM8jT5eN5Z2L7u9l5gDThioCWzQsy7A==
+"@microsoft/fast-element@^1.3.0", "@microsoft/fast-element@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.4.0.tgz#761b5ebdde1a271c5f96f7c15fab9f5a2a10657f"
+  integrity sha512-7BC/juFc7S4HMGt/tNCP9bjwtUslheGiPM2jtIibe1bj+PO34woUfH5TxaklOT6sRStig/0fODX4R5oqY4DYLA==
 
 "@microsoft/fast-foundation@2.0.0-1":
   version "2.0.0-1"