docs: Update component examples style

myxvisual · Jun 30, 2017 · c0f0c99 · c0f0c99
1 parent 664b91d
commit c0f0c99
Show file tree

Hide file tree

Showing 19 changed files with 20 additions and 18 deletions.
diff --git a/docs/src/components/DocsTreeView/index.tsx b/docs/src/components/DocsTreeView/index.tsx
@@ -152,7 +152,7 @@ export default class DocsTreeView extends React.Component<DocsTreeViewProps, Doc
         style={theme.prepareStyles({
           width: 320,
           padding: "10px 0",
-          background: theme.useFluentDesign ? theme.acrylicTexture40.background : theme.listLow,
+          background: theme.useFluentDesign ? theme.acrylicTexture40.background : theme.chromeLow,
           ...style
         })}
         {...attributes}

diff --git a/docs/src/routes/Components/Animate/SimpleExample.tsx b/docs/src/routes/Components/Animate/SimpleExample.tsx
@@ -10,7 +10,7 @@ export default class SimpleExample extends React.Component {
 
   render() {
     const baseStyle: React.CSSProperties = {
-      margin: "0 10px"
+      margin: 10
     };
     return (
       <div>

diff --git a/docs/src/routes/Components/Animate/index.tsx b/docs/src/routes/Components/Animate/index.tsx
@@ -38,12 +38,14 @@ export default class CustomAnimate extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>
         <CodeExample
           title="Complex Example"
           code={AnimationCode as any}
+          useSingleTheme
         >
           <Animation />
         </CodeExample>

diff --git a/docs/src/routes/Components/AutoSuggestBox/ListSourceExample.tsx b/docs/src/routes/Components/AutoSuggestBox/ListSourceExample.tsx
@@ -9,8 +9,8 @@ export interface ListSourceExampleState {
 const colors = ["Blue", "Red", "Green", "Grey", "Black", "Yellow", "Purple", "Brown", "White", "Orange", "Pink", "Violet", "Olive", "Cyan", "Magenta", "Gold", "Lavender", "Indigo", "Maroon", "Turquoise", "Chartreuse", "Coral", "Beige", "Azure", "Lime", "Teal", "Sky Blue", "Forest Green", "Silver", "Tan", "Salmon (color)", "Midnight blue", "Cornflower blue", "Fuchsia", "Ivory", "Khaki", "Steel blue", "Aquamarine", "Goldenrod", "Crimson", "Royal blue", "Slate gray", "Plum", "Spring green", "Powder blue", "Alice blue", "Orchid", "Dodger blue", "Lemon chiffon", "Light blue", "Navajo white"];
 
 const autoSuggestBoxStyle: React.CSSProperties = {
-  width: "100%",
-  margin: "20px 0"
+  display: "block",
+  margin: "20px auto"
 };
 
 export default class ListSourceExample extends React.Component<{}, ListSourceExampleState> {

diff --git a/docs/src/routes/Components/AutoSuggestBox/index.tsx b/docs/src/routes/Components/AutoSuggestBox/index.tsx
@@ -47,6 +47,7 @@ export default class AutoSuggestBox extends React.Component<any> {
           title="Simple Examples"
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>
@@ -55,6 +56,7 @@ export default class AutoSuggestBox extends React.Component<any> {
           title="ListSource Examples"
           code={ListSourceExampleCode as any}
           description={ListSourceExampleDesc as any}
+          useSingleTheme
         >
           <ListSourceExample />
         </CodeExample>
@@ -63,6 +65,7 @@ export default class AutoSuggestBox extends React.Component<any> {
           title="ListSource Complex Examples"
           code={ListSourceComplexExampleCode as any}
           description={ListSourceComplexExampleDesc as any}
+          useSingleTheme
         >
           <ListSourceComplexExample />
         </CodeExample>
@@ -71,6 +74,7 @@ export default class AutoSuggestBox extends React.Component<any> {
           title="Search Examples"
           code={SearchExampleCode as any}
           description={SearchExampleDesc as any}
+          useSingleTheme
         >
           <SearchExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/ColorPicker/index.tsx b/docs/src/routes/Components/ColorPicker/index.tsx
@@ -35,6 +35,7 @@ export default class ColorPicker extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: "40px 0" }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/DropDownMenu/index.tsx b/docs/src/routes/Components/DropDownMenu/index.tsx
@@ -35,6 +35,7 @@ export default class DropDownMenu extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/FloatNav/index.tsx b/docs/src/routes/Components/FloatNav/index.tsx
@@ -37,6 +37,7 @@ export default class FloatNav extends React.Component<any> {
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
           useChromeColor
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/Flyout/index.tsx b/docs/src/routes/Components/Flyout/index.tsx
@@ -37,6 +37,7 @@ export default class Flyout extends React.Component<any> {
             code={SimpleExampleCode as any}
             description={SimpleExampleDesc as any}
             doubleThemeStyle={{ padding: 20 }}
+            useSingleTheme
           >
             <SimpleExample />
           </CodeExample>

diff --git a/docs/src/routes/Components/Tabs/index.tsx b/docs/src/routes/Components/Tabs/index.tsx
@@ -35,6 +35,7 @@ export default class Tabs extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/Theme/index.tsx b/docs/src/routes/Components/Theme/index.tsx
@@ -35,6 +35,7 @@ export default class Theme extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/Toast/index.tsx b/docs/src/routes/Components/Toast/index.tsx
@@ -35,6 +35,7 @@ export default class Toast extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Components/Tooltip/index.tsx b/docs/src/routes/Components/Tooltip/index.tsx
@@ -35,6 +35,7 @@ export default class Tooltip extends React.Component<any> {
           code={SimpleExampleCode as any}
           description={SimpleExampleDesc as any}
           doubleThemeStyle={{ padding: 20 }}
+          useSingleTheme
         >
           <SimpleExample />
         </CodeExample>

diff --git a/docs/src/routes/Layout/index.tsx b/docs/src/routes/Layout/index.tsx
@@ -8,13 +8,7 @@ export interface DataProps {}
 
 export interface LayoutProps extends DataProps, React.HTMLAttributes<HTMLDivElement> {}
 
-export interface LayoutState {}
-
-export default class Layout extends React.Component<LayoutProps, LayoutState> {
-  static defaultProps: LayoutProps = {};
-
-  state: LayoutState = {};
-
+export default class Layout extends React.Component<LayoutProps> {
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
 

diff --git a/docs/src/routes/Styles/Acrylic/README1.md b/docs/src/routes/Styles/Acrylic/README1.md
@@ -1,6 +1,5 @@
 ## Acrylic
 
-----
 You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.
 
 `(Note: Noise Texture still in experimental stage)`

diff --git a/docs/src/routes/Styles/Acrylic/README2.md b/docs/src/routes/Styles/Acrylic/README2.md
@@ -1,5 +1,4 @@
 ### How to Generate Acrylic Textures ?
----
 
 ``` jsx
 import * as React from "react";

diff --git a/docs/src/routes/Styles/Colors/AccentColor.tsx b/docs/src/routes/Styles/Colors/AccentColor.tsx
@@ -142,7 +142,7 @@ export default class AccentColor extends React.Component<AccentColorProps> {
                 height: 70
               }}
             >
-              <span>black</span>
+              <span>white</span>
               <span style={{ float: "right" }}>#ffffff</span>
             </li>
           </ul>

diff --git a/docs/src/routes/Styles/CustomTheme/README.md b/docs/src/routes/Styles/CustomTheme/README.md
@@ -1,5 +1,3 @@
 ## Custom Theme
 
-----
-
 ### Examples
diff --git a/docs/src/routes/Styles/StylingComponents/README.md b/docs/src/routes/Styles/StylingComponents/README.md
@@ -1,7 +1,5 @@
 ## Styling Components
 
-----
-
 All React-UWP components construct by **inline-style**.
 
 ### Overriding with Inline Styles