Merge branch 'main' into bug-2250

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "3.0.1"
+  ".": "3.1.0"
 }

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -70,8 +70,9 @@ export const withCodeEditor = makeDecorator({
   skipIfNoParametersOrOptions: false,
   wrapper: (getStory, context, { options }) => {
     const forOptions = options ? options.disableThemeToggle : false;
-    const forContext =
-      context && (context.name === 'Custom CSS Properties' || context.title.toLowerCase().includes('templating'));
+    const title =
+      ['Custom CSS Properties', 'Theme'].includes(context.name) || context.title.toLowerCase().includes('templating');
+    const forContext = context && title;
     const disableThemeToggle = forOptions || forContext;
     let story = getStory(context);
 

.storybook/preview.js

@@ -47,7 +47,12 @@ addParameters({
     inlineStories: false,
     page: noArgsDocsPage
   },
-  version: versionInfo
+  version: versionInfo,
+  options: {
+    storySort: {
+      order: ['stories']
+    }
+  }
 });
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.1.0](https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v3.0.1...v3.1.0) (2023-07-28)
+
+
+### Features
+
+* add canary url to allowed endpoints for graph ([#2635](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2635)) ([ec621cd](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/ec621cd37a8eb7f91356944fb29ad85699ee89fa))
+
+
+### Bug Fixes
+
+* **a11y:** add distinct name definitions for copy code buttons in storybook overview ([#2622](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2622)) ([4e52f41](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/4e52f41398b1a5771ada9fe54a67dba4e4b84397))
+* add a title text if displaying images only. ([#2625](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2625)) ([28703c9](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/28703c96dd5366b8543fab2a160994db34a9c13b))
+* check the file type being uploaded before performing upload ([#2584](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2584)) ([7fb265c](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/7fb265c744cbbf53d49fe6d5c3d45bc8493eb2fd))
+* remove agenda tooltip ([#2621](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2621)) ([27e1fc9](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/27e1fc9c61e1957dd8addacb3b667de9546fb358))
+
 ## [3.0.1](https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v3.0.0...v3.0.1) (2023-07-18)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "root",
   "private": true,
-  "version": "3.0.1",
+  "version": "3.1.0",
   "workspaces": {
     "packages": [
       "packages/*",

packages/mgt-element/src/IGraph.ts

@@ -75,26 +75,23 @@ export type GraphEndpoint =
   | 'https://graph.microsoft.us'
   | 'https://dod-graph.microsoft.us'
   | 'https://graph.microsoft.de'
-  | 'https://microsoftgraph.chinacloudapi.cn';
-
-/**
- * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
- */
-export const MICROSOFT_GRAPH_ENDPOINTS: Set<GraphEndpoint> = new Set<GraphEndpoint>();
+  | 'https://microsoftgraph.chinacloudapi.cn'
+  | 'https://canary.graph.microsoft.com';
 
 /**
  * MICROSOFT_GRAPH_DEFAULT_ENDPOINT is the default Graph endpoint that is silently set on
  * the providers as the baseURL.
  */
 export const MICROSOFT_GRAPH_DEFAULT_ENDPOINT: GraphEndpoint = 'https://graph.microsoft.com';
 
-(() => {
-  const endpoints: GraphEndpoint[] = [
-    MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
-    'https://graph.microsoft.us',
-    'https://dod-graph.microsoft.us',
-    'https://graph.microsoft.de',
-    'https://microsoftgraph.chinacloudapi.cn'
-  ];
-  endpoints.forEach(endpoint => MICROSOFT_GRAPH_ENDPOINTS.add(endpoint));
-})();
+/**
+ * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
+ */
+export const MICROSOFT_GRAPH_ENDPOINTS: Set<GraphEndpoint> = new Set<GraphEndpoint>([
+  MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
+  'https://graph.microsoft.us',
+  'https://dod-graph.microsoft.us',
+  'https://graph.microsoft.de',
+  'https://microsoftgraph.chinacloudapi.cn',
+  'https://canary.graph.microsoft.com'
+]);

stories/samples/general.stories.a.js → stories/samples/general.stories.js

@@ -172,3 +172,54 @@ clearCacheButton.addEventListener('click', onClearCacheButtonClick);
 // };
   </script>
 `;
+
+export const theme = () => html`
+<div>
+  <p>This demonstrates how to set the theme globally without using a theme toggle and customize styling within specific scopes</p>
+  <p>Please refer to the JS and CSS tabs in the editor for implentation details</p>
+  <mgt-login></mgt-login>
+  <p>This picker shows the custom focus ring color</p>
+  <div class="custom-focus">
+    <mgt-people-picker></mgt-people-picker>
+  </div>
+  <article>
+    <p>I use the theme set on the body</p>
+    <mgt-teams-channel-picker></mgt-teams-channel-picker>
+  </article>
+  <p>I am custom themed, take care to ensure that your customizations maintain accessibility standards</p>
+  <mgt-teams-channel-picker class="custom1"></mgt-teams-channel-picker>
+</div>
+<script>
+import { applyTheme } from '@microsoft/mgt';
+const body = document.querySelector('body');
+if(body) applyTheme('dark', body);
+</script>
+<style>
+body {
+  background-color: var(--fill-color);
+  color: var(--neutral-foreground-rest);
+  font-family: var(--body-font);
+}
+.custom-focus {
+  --focus-ring-color: red;
+  --focus-ring-style: solid;
+}
+.custom1 {
+  --channel-picker-input-border: 2px solid teal;
+  --channel-picker-input-background-color: black;
+  --channel-picker-input-background-color-hover: #1a1a1a;
+  --channel-picker-search-icon-color: yellow;
+  --channel-picker-close-icon-color: yellow;
+  --channel-picker-down-chevron-color: yellow;
+  --channel-picker-up-chevron-color: yellow;
+  --channel-picker-input-placeholder-text-color: white;
+  --channel-picker-input-placeholder-text-color-focus: yellow;
+  --channel-picker-input-placeholder-text-color-hover: chartreuse;
+  --channel-picker-dropdown-background-color: #008383;
+  --channel-picker-dropdown-item-background-color-hover: #006363;
+  --channel-picker-font-color: white;
+  --channel-picker-placeholder-default-color: white;
+  --channel-picker-placeholder-focus-color: #441540;
+}
+</style>
+`;