fixing normalize to account to for upppercase normalization of tag names

Author: gavinbarron

packages/mgt-element/src/components/customElementHelper.ts

@@ -63,7 +63,9 @@ class CustomElementHelper {
    * @memberof CustomElementHelper
    */
   public normalize(tagName: string): string {
-    return this.isDisambiguated ? tagName.replace(this.prefix, this.defaultPrefix) : tagName;
+    return this.isDisambiguated
+      ? tagName.toUpperCase().replace(this.prefix.toUpperCase(), this.defaultPrefix.toUpperCase())
+      : tagName;
   }
 }
 

samples/react-app/src/App.tsx

@@ -43,8 +43,6 @@ class App extends Component {
 
         <PeoplePicker type={PersonType.any} />
 
-        <People showPresence={true} groupId='02bd9fd6-8f93-4758-87c3-1fb73740a315' />
-
         <Todo />
 
         <TeamsChannelPicker />

samples/react-app/src/index.tsx

@@ -2,14 +2,16 @@
 import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { customElementHelper, Providers, MockProvider } from '@microsoft/mgt-element';
+// import { MsalProvider } from '@microsoft/mgt-msal-provider';
+// import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
 
 customElementHelper.withDisambiguation('contoso');
 
 // uncomment to use MSAL provider with your own ClientID (also comment out mock provider below)
-// import { MsalProvider } from '@microsoft/mgt-msal-provider';
 // Providers.globalProvider = new MsalProvider({ clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a' });
+// Providers.globalProvider = new Msal2Provider({ clientId: '2dfea037-938a-4ed8-9b35-c05708a1b241' });
 
 Providers.globalProvider = new MockProvider(true);
 
 const App = lazy(() => import('./App'));
-ReactDOM.render(<Suspense fallback="..."><App /></Suspense>, document.getElementById('root'));
+ReactDOM.render(<Suspense fallback='...'><App /></Suspense>, document.getElementById('root'));