addressed PR comments

microsoft · Feb 4, 2019 · 9045460 · 9045460
1 parent 95b5b76
commit 9045460
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/fast-components-styles-msft/src/context-menu-item/index.ts b/packages/fast-components-styles-msft/src/context-menu-item/index.ts
@@ -15,6 +15,7 @@ import {
 import { applyFocusVisible } from "@microsoft/fast-jss-utilities";
 import { applyTypeRampConfig } from "../utilities/typography";
 import typographyPattern from "../patterns/typography";
+import { toPx } from "@microsoft/fast-jss-utilities";
 
 const styles: ComponentStyles<ContextMenuItemClassNameContract, DesignSystem> = {
     contextMenuItem: {
@@ -32,7 +33,11 @@ const styles: ComponentStyles<ContextMenuItemClassNameContract, DesignSystem> =
         cursor: "default",
         ...applyTypeRampConfig("t7"),
         background: backgroundColor,
-        borderRadius: "2px",
+        borderRadius: (config: DesignSystem): string => {
+            const designSystem: DesignSystem = withDesignSystemDefaults(config);
+
+            return toPx(designSystem.cornerRadius);
+        },
         border: "2px solid transparent",
         ...applyFocusVisible({
             borderColor: ensureForegroundNormal,

diff --git a/packages/fast-components-styles-msft/src/context-menu/index.ts b/packages/fast-components-styles-msft/src/context-menu/index.ts
@@ -6,6 +6,7 @@ import { ComponentStyles, ComponentStyleSheet } from "@microsoft/fast-jss-manage
 import { ContextMenuClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
 import { foregroundLarge } from "../utilities/colors";
 import { elevation, ElevationMultiplier } from "../utilities/elevation";
+import { toPx } from "@microsoft/fast-jss-utilities";
 
 const styles: ComponentStyles<ContextMenuClassNameContract, DesignSystem> = (
     config: DesignSystem
@@ -21,7 +22,7 @@ const styles: ComponentStyles<ContextMenuClassNameContract, DesignSystem> = (
             padding: "4px 0",
             maxWidth: "368px",
             minWidth: "64px",
-            borderRadius: "4px",
+            borderRadius: toPx(designSystem.cornerRadius * 2),
         },
     };
 };