Update the documentation to use 'GlobalStyles' along with 'ThemeProvider' (#850)

Author: xuesichao

CHANGELOG.md

@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+* Update the documentation to use `GlobalStyles` along with `ThemeProvider`.
+
 ## [3.4.0] - 2022-09-13
 
 ### Added

integration/app/test-demo/README.md

@@ -33,13 +33,14 @@ If there is already an existing Mini Test App for the features that you are work
     ```tsx
     import React from 'react';
     import { BrowserRouter, Route, Routes } from 'react-router-dom';
-    import { lightTheme } from 'amazon-chime-sdk-component-library-react';
+    import { lightTheme, GlobalStyles } from 'amazon-chime-sdk-component-library-react';
     import { ThemeProvider } from 'styled-components';
     import { Home } from './pages/Home';
     import { RosterTestApp } from './pages/RosterTestApp';
 
     const App: React.FC = () => (
       <ThemeProvider theme={lightTheme}>
+        <GlobalStyles />
         <BrowserRouter>
           <Routes>
             <Route path={routes.HOME} element={<Home />} />

integration/app/test-demo/src/app.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { lightTheme } from 'amazon-chime-sdk-component-library-react';
+import { lightTheme, GlobalStyles } from 'amazon-chime-sdk-component-library-react';
 import { ThemeProvider } from 'styled-components';
 import { Home } from './pages/Home';
 import { RosterTestApp } from './pages/RosterTestApp';
@@ -9,6 +9,7 @@ import { VideoFilterTestApp } from './pages/VideoFilterTestApp';
 
 const App: React.FC = () => (
   <ThemeProvider theme={lightTheme}>
+    <GlobalStyles />
     <BrowserRouter>
       <Routes>
         <Route path={routes.HOME} element={<Home />} />

src/components/introduction.stories.mdx

@@ -31,7 +31,7 @@ The server application and client application could be hosted either locally or
 npm install --save amazon-chime-sdk-component-library-react amazon-chime-sdk-js styled-components styled-system
 ```
 
-2. Render a `ThemeProvider` and a `MeetingProvider` in the root of your application
+2. Render a `ThemeProvider`, `GlobalStyles` a `MeetingProvider` in the root of your application. Place the `GlobalStyles` under `ThemeProvider` to reset default global CSS styles.
 
 - You can pass a default theme that we provide, or a customized theme that adheres to our theme's structure.
 
@@ -40,10 +40,12 @@ import { ThemeProvider } from 'styled-components';
 import {
   MeetingProvider,
   lightTheme,
+  GlobalStyles,
 } from 'amazon-chime-sdk-component-library-react';
 
 const Root = () => (
   <ThemeProvider theme={lightTheme}>
+    <GlobalStyles />
     <MeetingProvider>
       <MyApp />
     </MeetingProvider>

src/components/sdk/introduction.stories.mdx

@@ -14,7 +14,7 @@ SDK components are aimed at accelerating your Amazon Chime SDK application devel
 npm install --save amazon-chime-sdk-component-library-react amazon-chime-sdk-js styled-components styled-system
 ```
 
-2. Render a `ThemeProvider` and a `MeetingProvider` in the root of your application
+2. Render a `ThemeProvider`, `GlobalStyles` a `MeetingProvider` in the root of your application. Place the `GlobalStyles` under `ThemeProvider` to reset default global CSS styles.
 
 - You can pass a default theme that we provide, or a customized theme that adheres to our theme's structure.
 
@@ -23,10 +23,12 @@ import { ThemeProvider } from 'styled-components';
 import {
   lightTheme,
   MeetingProvider,
+  GlobalStyles,
 } from 'amazon-chime-sdk-component-library-react';
 
 const Root = () => (
   <ThemeProvider theme={lightTheme}>
+    <GlobalStyles />
     <MeetingProvider>
       <MyApp />
     </MeetingProvider>
@@ -53,7 +55,7 @@ const MyApp = () => {
     const response = await fetch('/my-server');
     const data = await response.json();
 
-    // Initalize the `MeetingSessionConfiguration`
+    // Initialize the `MeetingSessionConfiguration`
     const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);
 
     // Use the join API to create a meeting session using the MeetingSessionConfiguration

src/components/ui/Badge/Badge.mdx

@@ -6,29 +6,27 @@ import { lightTheme } from '../../../theme/';
 import { GlobalStyles } from '../../../theme/GlobalStyles';
 
 # Badge
+
 Badge contains a numeric value and indicates a running tally, such as the number of unread messages in a room.
 
 ## Importing
+
 ```javascript
 import { Badge } from 'amazon-chime-sdk-component-library-react';
 ```
 
 ## Example
+
 <ThemeProvider theme={lightTheme}>
-  <GlobalStyles/>
+  <GlobalStyles />
   <Preview>
-    <div style={{ 'alignItems': 'center', 'display': 'flex'}}>
-      <span style={{ 'marginRight': '0.5rem' }}>Number of new messages</span>
-      <Badge
-        value="50+"
-        status="default"
-      />
+    <div style={{ alignItems: 'center', display: 'flex' }}>
+      <span style={{ marginRight: '0.5rem' }}>Number of new messages</span>
+      <Badge value="50+" status="default" />
     </div>
-    <div style={{ 'marginLeft': '1rem', 'display': 'flex' }}>
-      <span style={{ 'marginRight': '0.5rem' }}>Lock badge</span>
-      <Badge
-        value={<Lock />}
-      />
+    <div style={{ marginLeft: '1rem', display: 'flex' }}>
+      <span style={{ marginRight: '0.5rem' }}>Lock badge</span>
+      <Badge value={<Lock />} />
     </div>
   </Preview>
 </ThemeProvider>
@@ -47,20 +45,17 @@ import { Badge } from 'amazon-chime-sdk-component-library-react';
 ```
 
 ### Using Alert Status
+
 <ThemeProvider theme={lightTheme}>
+  <GlobalStyles />
   <Preview>
-    <div style={{ 'alignItems': 'center', 'display': 'flex'}}>
-      <span style={{ 'marginRight': '0.5rem' }}>Number of new messages</span>
-      <Badge
-        value="50+"
-        status="alert"
-      />
+    <div style={{ alignItems: 'center', display: 'flex' }}>
+      <span style={{ marginRight: '0.5rem' }}>Number of new messages</span>
+      <Badge value="50+" status="alert" />
     </div>
-    <div style={{ 'marginLeft': '1rem', 'display': 'flex' }}>
-      <span style={{ 'marginRight': '0.5rem' }}>Lock badge</span>
-      <Badge
-        value={<Lock />}
-      />
+    <div style={{ marginLeft: '1rem', display: 'flex' }}>
+      <span style={{ marginRight: '0.5rem' }}>Lock badge</span>
+      <Badge value={<Lock />} />
     </div>
   </Preview>
 </ThemeProvider>
@@ -79,4 +74,5 @@ import { Badge } from 'amazon-chime-sdk-component-library-react';
 ```
 
 ## Props
-<Props of={Badge} />
+
+<Props of={Badge} />

src/components/ui/Flex/Flex.mdx

@@ -23,7 +23,7 @@ import { Flex } from 'amazon-chime-sdk-component-library-react';
 With layout `fill-space`
 
 <ThemeProvider theme={lightTheme}>
-  <GlobalStyles/>
+  <GlobalStyles />
   <Preview>
     <Flex layout="fill-space">
       <Title>fill-space</Title>
@@ -40,7 +40,7 @@ With layout `fill-space`
 With Layout `fill-space-centered`
 
 <ThemeProvider theme={lightTheme}>
-  <GlobalStyles/>
+  <GlobalStyles />
   <Preview>
     <Flex layout="fill-space-centered">
       <Title>fill-space-centered</Title>
@@ -57,6 +57,7 @@ With Layout `fill-space-centered`
 With Layout `equal-columns`
 
 <ThemeProvider theme={lightTheme}>
+  <GlobalStyles />
   <Preview>
     <Flex layout="equal-columns">
       <Block tag="article" />
@@ -79,7 +80,7 @@ With Layout `equal-columns`
 With Layout `stack`
 
 <ThemeProvider theme={lightTheme}>
-  <GlobalStyles/>
+  <GlobalStyles />
   <Preview>
     <Flex layout="stack">
       <Block tag="article" />
@@ -102,7 +103,7 @@ With Layout `stack`
 With container `true`
 
 <ThemeProvider theme={lightTheme}>
-  <GlobalStyles/>
+  <GlobalStyles />
   <Preview>
     <Flex container>
       <Title>placeholder</Title>

src/components/ui/Navbar/Navbar.mdx

@@ -9,7 +9,6 @@ import Flex from '../Flex';
 import { lightTheme } from '../../../theme/';
 import { GlobalStyles } from '../../../theme/GlobalStyles';
 
-
 # Navbar
 
 The Navbar component displays a vertical menu with navigation icon buttons and labels. Navbar is constructed using the NavbarHeader and NavbarItem components.
@@ -22,31 +21,28 @@ The Navbar component displays a vertical menu with navigation icon buttons and l
 import {
   Navbar,
   NavbarHeader,
-  NavbarItem
+  NavbarItem,
 } from 'amazon-chime-sdk-component-library-react';
 ```
 
 ## Example
 
 ### Navbar Component
+
 <ThemeProvider theme={lightTheme}>
-  <GlobalStyles/>
+  <GlobalStyles />
   <Preview>
     <Navbar flexDirection="column" container css="height: 50vh">
-      <NavbarHeader onClose={() => {}}/>
+      <NavbarHeader onClose={() => {}} />
       <Flex>
         <NavbarItem
           icon={<Information />}
           onClick={() => {}}
           label="Bridge Information"
         />
-        <NavbarItem
-          icon={<Attendees />}
-          onClick={() => {}}
-          label="Attendees"
-        />
+        <NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
       </Flex>
-      <Flex marginTop='auto'>
+      <Flex marginTop="auto">
         <NavbarItem
           icon={<LeaveMeeting />}
           onClick={() => {}}
@@ -59,21 +55,17 @@ import {
 </ThemeProvider>
 
 ```jsx
-<Navbar flexDirection="column" container height='10%'>
-  <NavbarHeader onClose={() => {}}/>
+<Navbar flexDirection="column" container height="10%">
+  <NavbarHeader onClose={() => {}} />
   <Flex>
     <NavbarItem
       icon={<Information />}
       onClick={() => {}}
       label="Bridge Information"
     />
-    <NavbarItem
-      icon={<Attendees />}
-      onClick={() => {}}
-      label="Attendees"
-    />
+    <NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
   </Flex>
-  <Flex marginTop='auto'>
+  <Flex marginTop="auto">
     <NavbarItem
       icon={<LeaveMeeting />}
       onClick={() => {}}
@@ -86,6 +78,7 @@ import {
 ## Props
 
 ### Navbar Props
+
 <Props of={Navbar} />
 
 # NavbarHeader
@@ -97,10 +90,11 @@ It gives a title to Navbar and also a close icon button to close the Navbar in m
 # Example
 
 ```javascript
-<NavbarHeader title="Menu" onClose={() => {}}/>
+<NavbarHeader title="Menu" onClose={() => {}} />
 ```
 
 ### NavbarHeader Props
+
 <Props of={NavbarHeader} />
 
 # NavbarItem
@@ -114,6 +108,7 @@ The label is displayed only on smaller screens with width defined by `theme.medi
 ### NavbarItem component
 
 <ThemeProvider theme={lightTheme}>
+  <GlobalStyles />
   <NavbarItem
     icon={<Information />}
     onClick={() => {}}
@@ -130,4 +125,5 @@ The label is displayed only on smaller screens with width defined by `theme.medi
 ```
 
 ### NavbarItem Props
+
 <Props of={NavbarItem} />

src/components/ui/Portal/Portal.stories.mdx

@@ -9,7 +9,7 @@ import Flex from '../Flex';
 
 # Portal
 
-The Portal component is used to render children into any DOM node that exists outside the DOM hierarchy of the portal's container. 
+The Portal component is used to render children into any DOM node that exists outside the DOM hierarchy of the portal's container.
 
 ## Importing
 
@@ -21,11 +21,13 @@ import { Portal } from 'amazon-chime-sdk-component-library-react';
 
 ```jsx
 <Flex layout="fill-space-centered">
-  <div id='root-div'>Root Div</div>
-  <Portal rootId='root-div'><div>Portal content</div></Portal>
+  <div id="root-div">Root Div</div>
+  <Portal rootId="root-div">
+    <div>Portal content</div>
+  </Portal>
 </Flex>
 ```
 
 ## Props
 
-<Props of={Portal} />
+<Props of={Portal} />