Update 'Themeable components' docs

jxom · Aug 5, 2020 · 480f2ce · 480f2ce
1 parent 1467e4e
commit 480f2ce
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/website/src/docs/styling-components.mdx b/packages/website/src/docs/styling-components.mdx
@@ -1,12 +1,17 @@
 ---
 breakpoint: tablet
-title: Themeable components
+title: Themeable & styled components
 path: /styling-components/
 ---
 
-# Themeable components
+# Themeable & styled components
 
-Bumbag comes with an `applyTheme` function which allows you to create components that have a customized theme attached to them. This allows you to **style components**, as well as set **default props** to them.
+Bumbag has two methods of styling components, via:
+
+- **[Themeable components](#creating-a-basic-themeable-component) (recommended)**: Allowing you to create components that have a customized theme/style attached to them. This allows you to **style components**, as well as set **default props**, **variants** and **modes** to them.
+- **[Styled components](#theming-external-components)**: Allowing you to create a standalone styled component.
+
+**Note: Themeable components are not supported with third-party components that do not belong to Bumbag. [You can use styled components instead](#theming-external-components).**
 
 ## Creating a basic themeable component
 

diff --git a/packages/website/src/layout/DocsLayout.tsx b/packages/website/src/layout/DocsLayout.tsx
@@ -112,7 +112,7 @@ export default function Docs(props: Props) {
     <React.Fragment>
       <SEO title={pageContext.frontmatter?.seoTitle || pageContext.frontmatter?.title} />
       <bumbag.PageWithHeader sticky header={<Header />}>
-        <bumbag.PageWithSidebar sidebar={<Sidebar path={path} />} sidebarPlacement="left">
+        <bumbag.PageWithSidebar sidebar={<Sidebar path={path} />} sidebarPlacement="left" sidebarWidth="270px">
           <TableOfContents
             breakpoint={pageContext.frontmatter.breakpoint || 'tablet'}
             isFluid={pageContext.frontmatter.isFluid}