Merged PR 25023: Adding the "new" icon to new features.

demo/v2-demo/images/new.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 40 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#B3D6F2" d="M36,24 L4,24 C1.8,24 0,22.2 0,20 L0,4 C0,1.8 1.8,0 4,0 L36,0 C38.2,0 40,1.8 40,4 L40,20 C40,22.2 38.2,24 36,24"/>
+    <path fill="#333" d="M14.609375,15.9941406 L13.6425781,15.9941406 L9.99804688,10.4804688 L9.93945312,10.4804688 L9.93945312,15.9941406 L8.88476562,15.9941406 L8.88476562,8.36523438 L9.84570312,8.36523438 L13.4960938,13.984375 L13.5546875,13.984375 L13.5546875,8.36523438 L14.609375,8.36523438 L14.609375,15.9941406 Z M20.7441406,12.6835938 L17.4335938,12.6835938 L17.4335938,15.0039062 L21.2890625,15.0039062 L21.2890625,16 L16.3789062,16 L16.3789062,8.36523438 L21.2890625,8.36523438 L21.2890625,9.3671875 L17.4335938,9.3671875 L17.4335938,11.6875 L20.7441406,11.6875 L20.7441406,12.6835938 Z M24.5410156,13.75 L24.6582031,13.75 L26.1640625,8.36523438 L26.9140625,8.36523438 L28.4199219,13.7617188 L28.5371094,13.7617188 L29.7675781,8.36523438 L30.8691406,8.36523438 L28.9707031,16 L28.0625,16 L26.5976562,10.4980469 L26.4804688,10.4980469 L25.015625,16 L24.1074219,16 L22.2089844,8.36523438 L23.3105469,8.36523438 L24.5410156,13.75 Z"/>
+  </g>
+</svg>

demo/v2-demo/scripts/report.js

@@ -141,8 +141,9 @@ function OpenInteractStep() {
             SetToggleHandler("events-operations-div");
             SetToggleHandler("editandsave-operations-div");
             LoadCodeArea("#embedCodeDiv", _Report_GetId);
+            AddImgToNewOperations();
         });
-    }
+      }
 }
 
 function setCodeArea(mode, entityType)

demo/v2-demo/scripts/utils.js

@@ -80,3 +80,20 @@ function CopyTextArea(textAreaSelector, buttonSelector) {
 function ClearTextArea(textAreaSelector) {
     $(textAreaSelector).val("");
 }
+
+function AddImgToNewOperations(){
+  var newListItems = $('.newOperation');
+  newListItems.each(function(index, value)
+  {
+      var spanElement = document.createElement("span");
+      spanElement.innerText = value.innerText;
+
+      var newImgElement = document.createElement("img");
+      newImgElement.src = "images\\new.svg";
+      
+      value.innerText = '';
+      value.appendChild(spanElement);
+      value.appendChild(newImgElement);
+      
+  });
+}

demo/v2-demo/settings_interact.html

@@ -32,8 +32,8 @@
                         <li class="" onclick="Report_UpdateSettings()">Update settings</li>
                         <li class="" onclick="Report_Reload()">Reload</li>
                         <li class="" onclick="Report_Refresh()">Refresh</li>
-                        <li class="" onclick="Report_Extensions_OptionsMenu()">Extend options menu</li>
-                        <li class="" onclick="Report_Extensions_ContextMenu()">Extend context menu</li>
+                        <li class="newOperation" onclick="Report_Extensions_OptionsMenu()">Extend options menu</li>
+                        <li class="newOperation" onclick="Report_Extensions_ContextMenu()">Extend context menu</li>
                         <li class="" onclick="Report_FullScreen()">Full screen</li>
                         <li class="" onclick="Report_ExitFullScreen()">Exit full screen</li>
                     </ul>

demo/v2-demo/step_authorize.html

@@ -11,10 +11,13 @@
     </div>
 
     <div id="sampleQna" class="pbi-line">
-      <div class="pageTitle">
-          <h3>Sample Q&A</h3>
-          <h8>You can embed a sample Q&A and interact with Power BI Embedded firsthand by clicking below.</h8>
-      </div>
+        <div class="pageTitle">
+            <div class="newItem">
+                <h3>Sample Q&A</h3>
+                <img src="images\new.svg"/>
+            </div>
+        <h8>You can embed a sample Q&A and interact with Power BI Embedded firsthand by clicking below.</h8>
+    </div>
       <div class="settings">
           <button id="GoToEmbedStepButton_Qna" class="blueButton" onclick="OpenEmbedStepWithSample('Qna')">Embed sample Q&A</button>
       </div>

demo/v2-demo/style/style.css

@@ -423,6 +423,14 @@ a {
     padding: 0px 20px 0px 0px;
 }
 
+.newOperation span {
+    padding-right: 10px;
+}
+
+.newOperation img {
+    vertical-align: center;
+}
+
 .function-ul li {
     width: 100%;
     clear: both;
@@ -470,6 +478,14 @@ a {
     font-weight: normal;
 }
 
+.newItem h3 {
+    display: inline-block;
+}
+
+.newItem img {
+    margin: 0 0 10px 5px;
+}
+
 .editorTitle {
     margin-bottom: 5px;
 }