From 84f555f048c88bce6c5d8cbef7841db5cfc8fd9a Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Wed, 3 Aug 2016 18:27:31 -0700
Subject: [PATCH 1/4] Update example icons, change selected item bg

---
 .../ContextualMenu/ContextualMenu.scss        |  2 +-
 .../examples/ContextualMenu.Basic.Example.tsx | 18 ++++----
 .../ContextualMenu.Checkmarks.Example.tsx     | 12 ++---
 .../ContextualMenu.Customization.Example.tsx  | 46 +++++++++----------
 .../ContextualMenu.Directional.Example.tsx    | 12 ++---
 5 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss
index fd66561a750c06..2ba4196fb678cd 100644
--- a/src/components/ContextualMenu/ContextualMenu.scss
+++ b/src/components/ContextualMenu/ContextualMenu.scss
@@ -2,7 +2,7 @@
 
 $ContextualMenu-background: $ms-color-white;
 $ContextualMenu-itemHover: $ms-color-neutralLight;
-$ContextualMenu-expandedItemBackground: $ms-color-themeLight;
+$ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt;
 $ContextualMenu-itemHeight: 40px;
 $ContextualMenu-iconWidth: 24px;
 
diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
index 2f24a49662a4f8..7cfff47aecde7b 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Basic.Example.tsx
@@ -26,7 +26,7 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
               [
                 {
                   key: 'newItem',
-                  icon: 'circlePlus',
+                  icon: 'CirclePlus',
                   items: [
                     {
                       key: 'emailMessage',
@@ -41,7 +41,7 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
                 },
                 {
                   key: 'upload',
-                  icon: 'upload',
+                  icon: 'Upload',
                   name: 'Upload'
                 },
                 {
@@ -67,12 +67,12 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
                 },
                 {
                   key: 'share',
-                  icon: 'share',
+                  icon: 'Share',
                   items: [
                     {
                       key: 'sharetoemail',
                       name: 'Share to Email',
-                      icon: 'mail'
+                      icon: 'Mail'
                     },
                     {
                       key: 'sharetofacebook',
@@ -81,12 +81,12 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
                     {
                       key: 'sharetotwitter',
                       name: 'Share to Twitter',
-                      icon: 'share',
+                      icon: 'Share',
                       items: [
                         {
                           key: 'sharetoemail_1',
                           name: 'Share to Email',
-                          icon: 'mail'
+                          icon: 'Mail'
                         },
                         {
                           key: 'sharetofacebook_1',
@@ -95,7 +95,7 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
                         {
                           key: 'sharetotwitter_1',
                           name: 'Share to Twitter',
-                          icon: 'share'
+                          icon: 'Share'
                       },
                   ],
                     },
@@ -104,12 +104,12 @@ export class ContextualMenuBasicExample extends React.Component<any, any> {
                 },
                 {
                   key: 'print',
-                  icon: 'print',
+                  icon: 'Print',
                   name: 'Print'
                 },
                 {
                   key: 'music',
-                  icon: 'music',
+                  icon: 'MusicInCollectionFill',
                   name: 'Music',
                 },
                 {
diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx
index 31daeb39ef727a..c9dcd1f12051e8 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx
@@ -40,7 +40,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
             [
               {
                 key: keys[0],
-                icon: 'circlePlus',
+                icon: 'CirclePlus',
                 name: 'New',
                 canCheck: true,
                 isChecked: selection[keys[0]],
@@ -48,7 +48,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
               },
               {
                 key: keys[1],
-                icon: 'share',
+                icon: 'Share',
                 name: 'Share',
                 canCheck: true,
                 isChecked: selection[keys[1]],
@@ -56,7 +56,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
               },
               {
                 key: keys[2],
-                icon: 'mobile',
+                icon: 'CellPhone',
                 name: 'Mobile',
                 canCheck: true,
                 isChecked: selection[keys[2]],
@@ -69,7 +69,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
 
               {
                 key: keys[3],
-                icon: 'print',
+                icon: 'Print',
                 name: 'Print',
                 canCheck: true,
                 isChecked: selection[keys[3]],
@@ -77,7 +77,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
               },
               {
                 key: keys[4],
-                icon: 'music',
+                icon: 'MusicInCollectionFill',
                 name: 'Music',
                 canCheck: true,
                 isChecked: selection[keys[4]],
@@ -85,7 +85,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<any, IConte
               },
               {
                 key: keys[5],
-                icon: 'circlePlus',
+                icon: 'CirclePlus',
                 items: [
                   {
                     key: keys[6],
diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Customization.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Customization.Example.tsx
index dd9c868906fde4..6f38a589bbf526 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Customization.Example.tsx
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Customization.Example.tsx
@@ -35,7 +35,7 @@ export class ContextualMenuCustomizationExample extends React.Component<any, ICo
               [
                 {
                   key: 'newItem',
-                  icon: 'circlePlus',
+                  icon: 'CirclePlus',
                   items: [
                     {
                       key: 'emailMessage',
@@ -50,7 +50,7 @@ export class ContextualMenuCustomizationExample extends React.Component<any, ICo
                 },
                 {
                   key: 'upload',
-                  icon: 'upload',
+                  icon: 'Upload',
                   name: 'Upload'
                 },
                 {
@@ -67,86 +67,86 @@ export class ContextualMenuCustomizationExample extends React.Component<any, ICo
                       name: 'None'
                     },
                     {
-                      key: 'cat',
-                      name: 'cat',
+                      key: 'bulb',
+                      name: 'Lightbulb',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
-                      key: 'dog',
-                      name: 'dog',
+                      key: 'run',
+                      name: 'Running',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'plane',
-                      name: 'plane',
+                      name: 'Airplane',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'page',
-                      name: 'page',
+                      name: 'Page',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
-                      key: 'firstAid',
-                      name: 'firstAid',
+                      key: 'cake',
+                      name: 'Cake',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
-                      key: 'trophy',
-                      name: 'trophy',
+                      key: 'soccer',
+                      name: 'Soccer',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'home',
-                      name: 'home',
+                      name: 'Home',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
-                      key: 'pill',
-                      name: 'pill',
+                      key: 'emoji',
+                      name: 'Emoji2',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
-                      key: 'briefcase',
-                      name: 'briefcase',
+                      key: 'work',
+                      name: 'Work',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'coffee',
-                      name: 'coffee',
+                      name: 'Coffee',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'people',
-                      name: 'people',
+                      name: 'People',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'stopwatch',
-                      name: 'stopwatch',
+                      name: 'Stopwatch',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
                       key: 'music',
-                      name: 'music',
+                      name: 'MusicInCollectionFill',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     },
                     {
-                      key: 'bag',
-                      name: 'bag',
+                      key: 'lock',
+                      name: 'Lock',
                       onRender: this._renderCharmMenuItem,
                       className: 'ms-ContextualMenu-customizationExample-item'
                     }
diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Directional.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Directional.Example.tsx
index d65c84b12f312b..ca4d6cd5b3c62f 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Directional.Example.tsx
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Directional.Example.tsx
@@ -88,7 +88,7 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
               {
                 key: 'newItem',
                 name: 'New',
-                icon: 'circlePlus',
+                icon: 'CirclePlus',
                 items: [
                   {
                     key: 'emailMessage',
@@ -103,7 +103,7 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
               {
                 key: 'upload',
                 name: 'Upload',
-                icon: 'upload'
+                icon: 'Upload'
               },
               {
                 key: 'rename',
@@ -116,12 +116,12 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
               {
                 key: 'share',
                 name: 'Share',
-                icon: 'share',
+                icon: 'Share',
                 items: [
                   {
                     key: 'sharetoemail',
                     name: 'Share to Email',
-                    icon: 'mail'
+                    icon: 'Mail'
                   },
                   {
                     key: 'sharetofacebook',
@@ -130,14 +130,14 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
                   {
                     key: 'sharetotwitter',
                     name: 'Share to Twitter',
-                    icon: 'share'
+                    icon: 'Share'
                   },
                 ]
               },
               {
                 key: 'print',
                 name: 'Print',
-                icon: 'print'
+                icon: 'Print'
               },
             ]
           }

From b4451ef0b1d93d51138e4c3174c8cf54f1be6abd Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Wed, 3 Aug 2016 18:53:45 -0700
Subject: [PATCH 2/4] aligning icons

---
 src/components/ContextualMenu/ContextualMenu.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss
index 2ba4196fb678cd..76ead49458c771 100644
--- a/src/components/ContextualMenu/ContextualMenu.scss
+++ b/src/components/ContextualMenu/ContextualMenu.scss
@@ -72,6 +72,8 @@ $ContextualMenu-iconWidth: 24px;
   min-height: 1px;
   width: $ContextualMenu-iconWidth;
   text-align: center;
+  padding-top: 12px;
+  vertical-align: top;
 }
 
 .ms-ContextualMenu-itemText {

From 216d4a90948950b60271fde1923a49d192997305 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Wed, 3 Aug 2016 19:06:40 -0700
Subject: [PATCH 3/4] Fix example

---
 .../ContextualMenuPage/examples/ContextualMenuExample.scss     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenuExample.scss b/src/demo/pages/ContextualMenuPage/examples/ContextualMenuExample.scss
index 83762b9af212f2..5925a430314502 100644
--- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenuExample.scss
+++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenuExample.scss
@@ -14,13 +14,12 @@
     position: absolute;
     vertical-align: top;
     width: 300px;
-    top: 85px;
+    top: 108px;
     margin: 0 100px;
     text-align: center;
 }
 
 .ms-ContextualMenuDirectionalExample-buttonArea .ms-Button {
-    top: 80px;
     text-align: center;
     width: 100%;
 }

From 16f21e5f30f015502bad7d55972a7c446cf91abc Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Wed, 3 Aug 2016 19:33:38 -0700
Subject: [PATCH 4/4] Using semantic variables

---
 src/components/ContextualMenu/ContextualMenu.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss
index 76ead49458c771..85bf5d3d2db706 100644
--- a/src/components/ContextualMenu/ContextualMenu.scss
+++ b/src/components/ContextualMenu/ContextualMenu.scss
@@ -72,7 +72,7 @@ $ContextualMenu-iconWidth: 24px;
   min-height: 1px;
   width: $ContextualMenu-iconWidth;
   text-align: center;
-  padding-top: 12px;
+  padding-top: ($ContextualMenu-itemHeight - $ms-font-size-m) / 2;
   vertical-align: top;
 }