From c0f0c9991746d9a5add859407f9a5d138be3018c Mon Sep 17 00:00:00 2001 From: myxvisual Date: Fri, 30 Jun 2017 16:47:53 +0800 Subject: [PATCH] docs: Update component examples style --- docs/src/components/DocsTreeView/index.tsx | 2 +- docs/src/routes/Components/Animate/SimpleExample.tsx | 2 +- docs/src/routes/Components/Animate/index.tsx | 2 ++ .../Components/AutoSuggestBox/ListSourceExample.tsx | 4 ++-- docs/src/routes/Components/AutoSuggestBox/index.tsx | 4 ++++ docs/src/routes/Components/ColorPicker/index.tsx | 1 + docs/src/routes/Components/DropDownMenu/index.tsx | 1 + docs/src/routes/Components/FloatNav/index.tsx | 1 + docs/src/routes/Components/Flyout/index.tsx | 1 + docs/src/routes/Components/Tabs/index.tsx | 1 + docs/src/routes/Components/Theme/index.tsx | 1 + docs/src/routes/Components/Toast/index.tsx | 1 + docs/src/routes/Components/Tooltip/index.tsx | 1 + docs/src/routes/Layout/index.tsx | 8 +------- docs/src/routes/Styles/Acrylic/README1.md | 1 - docs/src/routes/Styles/Acrylic/README2.md | 1 - docs/src/routes/Styles/Colors/AccentColor.tsx | 2 +- docs/src/routes/Styles/CustomTheme/README.md | 2 -- docs/src/routes/Styles/StylingComponents/README.md | 2 -- 19 files changed, 20 insertions(+), 18 deletions(-) diff --git a/docs/src/components/DocsTreeView/index.tsx b/docs/src/components/DocsTreeView/index.tsx index 0ba69bc7..d5fd77d0 100644 --- 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 diff --git a/docs/src/routes/Components/Animate/index.tsx b/docs/src/routes/Components/Animate/index.tsx index 7d876884..c907e04e 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Components/AutoSuggestBox/ListSourceExample.tsx b/docs/src/routes/Components/AutoSuggestBox/ListSourceExample.tsx index 249c15bb..f2e2a000 100644 --- 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 index 05737cf9..14a91a2f 100644 --- 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 { title="Simple Examples" code={SimpleExampleCode as any} description={SimpleExampleDesc as any} + useSingleTheme > @@ -55,6 +56,7 @@ export default class AutoSuggestBox extends React.Component { title="ListSource Examples" code={ListSourceExampleCode as any} description={ListSourceExampleDesc as any} + useSingleTheme > @@ -63,6 +65,7 @@ export default class AutoSuggestBox extends React.Component { title="ListSource Complex Examples" code={ListSourceComplexExampleCode as any} description={ListSourceComplexExampleDesc as any} + useSingleTheme > @@ -71,6 +74,7 @@ export default class AutoSuggestBox extends React.Component { title="Search Examples" code={SearchExampleCode as any} description={SearchExampleDesc as any} + useSingleTheme > diff --git a/docs/src/routes/Components/ColorPicker/index.tsx b/docs/src/routes/Components/ColorPicker/index.tsx index 4d020bfa..32e8b9b7 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: "40px 0" }} + useSingleTheme > diff --git a/docs/src/routes/Components/DropDownMenu/index.tsx b/docs/src/routes/Components/DropDownMenu/index.tsx index a1f2652d..c0234d2f 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Components/FloatNav/index.tsx b/docs/src/routes/Components/FloatNav/index.tsx index fd945982..516ed73b 100644 --- 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 { description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} useChromeColor + useSingleTheme > diff --git a/docs/src/routes/Components/Flyout/index.tsx b/docs/src/routes/Components/Flyout/index.tsx index 77c5d232..a46df6c8 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Components/Tabs/index.tsx b/docs/src/routes/Components/Tabs/index.tsx index 59babd54..3bc8cdc2 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Components/Theme/index.tsx b/docs/src/routes/Components/Theme/index.tsx index 0596e2dc..f437bba3 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Components/Toast/index.tsx b/docs/src/routes/Components/Toast/index.tsx index db18773b..088642ae 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Components/Tooltip/index.tsx b/docs/src/routes/Components/Tooltip/index.tsx index 6624b7a6..cfae7d02 100644 --- 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 { code={SimpleExampleCode as any} description={SimpleExampleDesc as any} doubleThemeStyle={{ padding: 20 }} + useSingleTheme > diff --git a/docs/src/routes/Layout/index.tsx b/docs/src/routes/Layout/index.tsx index a6db12cf..89db80ed 100644 --- 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 {} -export interface LayoutState {} - -export default class Layout extends React.Component { - static defaultProps: LayoutProps = {}; - - state: LayoutState = {}; - +export default class Layout extends React.Component { 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 index f548a3d8..46f89b0e 100644 --- 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 index fd83b6a4..c595cc98 100644 --- 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 index 3278805c..b44a40b1 100644 --- 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 { height: 70 }} > - black + white #ffffff diff --git a/docs/src/routes/Styles/CustomTheme/README.md b/docs/src/routes/Styles/CustomTheme/README.md index 64038ba3..c106c147 100644 --- 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 index cc1951f9..45a14b0d 100644 --- 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