From 2af01f67160d28d70538d6a0b55bfc037a39b8e8 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Fri, 26 Oct 2018 14:35:36 -0700
Subject: [PATCH 1/2] docs: add transparent button to examples

---
 .../ComponentControls/ComponentControls.tsx   | 17 +++++++++++++---
 .../ComponentControlsMaximize.tsx             |  4 ++--
 .../ComponentControlsShowTransparent.tsx      | 19 ++++++++++++++++++
 .../ComponentExample/ComponentExample.tsx     | 20 ++++++++++++++++++-
 4 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowTransparent.tsx

diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
index f88b57aade..194df1d9ad 100644
--- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
+++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
@@ -7,6 +7,7 @@ import ComponentControlsShowCode from './ComponentControlsShowCode'
 import ComponentControlsCopyLink from './ComponentControlsCopyLink'
 import ComponentControlsShowVariables from './ComponentControlsShowVariables'
 import ComponentControlsMaximize from './ComponentControlsMaximize'
+import ComponentControlsShowTransparent from './ComponentControlsShowTransparent'
 import ComponentControlsRtl from './ComponentControlsRtl'
 
 const ComponentControls: any = props => {
@@ -15,10 +16,12 @@ const ComponentControls: any = props => {
     examplePath,
     showCode,
     showRtl,
+    showTransparent,
     showVariables,
     onCopyLink,
     onShowCode,
     onShowRtl,
+    onShowTransparent,
     onShowVariables,
   } = props
 
@@ -26,6 +29,7 @@ const ComponentControls: any = props => {
     <Menu color="green" icon="labeled" size="tiny" compact text>
       <ComponentControlsShowCode active={showCode} onClick={onShowCode} />
       <ComponentControlsShowVariables active={showVariables} onClick={onShowVariables} />
+      <ComponentControlsShowTransparent active={showTransparent} onClick={onShowTransparent} />
       <ComponentControlsRtl active={showRtl} onClick={onShowRtl} />
       <ComponentControlsMaximize examplePath={examplePath} />
       <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
@@ -39,13 +43,20 @@ ComponentControls.propTypes = {
   onCopyLink: PropTypes.func,
   onShowCode: PropTypes.func,
   onShowRtl: PropTypes.func,
+  onShowTransparent: PropTypes.func,
   onShowVariables: PropTypes.func,
   showCode: PropTypes.bool,
   showRtl: PropTypes.bool,
+  showTransparent: PropTypes.bool,
   showVariables: PropTypes.bool,
   visible: PropTypes.bool,
 }
 
-export default updateForKeys(['examplePath', 'showRtl', 'showCode', 'showVariables', 'visible'])(
-  ComponentControls,
-)
+export default updateForKeys([
+  'examplePath',
+  'showRtl',
+  'showCode',
+  'showTransparent',
+  'showVariables',
+  'visible',
+])(ComponentControls)
diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx
index acb154afd2..4b1ca4834c 100644
--- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx
+++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx
@@ -13,8 +13,8 @@ const ComponentControlsMaximize: any = ({ examplePath }) => (
     target="_blank"
     rel="noopener noreferrer"
   >
-    <Icon color="grey" fitted name="window maximize" size="large" />
-    Maximize
+    <Icon color="grey" fitted name="external alternate" size="large" />
+    Popout
   </Menu.Item>
 )
 
diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowTransparent.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowTransparent.tsx
new file mode 100644
index 0000000000..771c896f90
--- /dev/null
+++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowTransparent.tsx
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import * as React from 'react'
+import { Icon, Menu } from 'semantic-ui-react'
+
+import { updateForKeys } from 'docs/src/hoc'
+
+const ComponentControlsShowTransparent: React.SFC = ({ active, onClick }: any) => (
+  <Menu.Item active={active} onClick={onClick}>
+    <Icon color={active ? 'green' : 'grey'} size="large" name="adjust" fitted />
+    Transparent
+  </Menu.Item>
+)
+
+ComponentControlsShowTransparent.propTypes = {
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+}
+
+export default updateForKeys(['active'])(ComponentControlsShowTransparent)
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 3b93d4c2df..febab227f4 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -40,6 +40,7 @@ interface ComponentExampleState {
   showCode: boolean
   showHTML: boolean
   showRtl: boolean
+  showTransparent: boolean
   showVariables: boolean
   isHovering: boolean
   copiedCode: boolean
@@ -75,6 +76,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     showCode: false,
     showHTML: false,
     showRtl: false,
+    showTransparent: false,
     showVariables: false,
     isHovering: false,
     copiedCode: false,
@@ -239,6 +241,14 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     this.setState({ showVariables: !showVariables }, this.updateHash)
   }
 
+  private handleShowTransparentClick = e => {
+    e.preventDefault()
+
+    const { showTransparent } = this.state
+
+    this.setState({ showTransparent: !showTransparent })
+  }
+
   private handlePass = () => {
     const { title } = this.props
 
@@ -607,6 +617,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       showCode,
       showHTML,
       showRtl,
+      showTransparent,
       showVariables,
     } = this.state
 
@@ -658,9 +669,11 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   onCopyLink={this.handleDirectLinkClick}
                   onShowRtl={this.handleShowRtlClick}
                   onShowVariables={this.handleShowVariablesClick}
+                  onShowTransparent={this.handleShowTransparentClick}
                   showCode={showCode}
                   showHTML={showHTML}
                   showRtl={showRtl}
+                  showTransparent={showTransparent}
                   showVariables={showVariables}
                   visible
                 />
@@ -684,8 +697,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   className={`rendered-example ${this.getKebabExamplePath()}`}
                   style={{
                     padding: '2rem',
-                    backgroundColor: siteVariables.bodyBackground,
                     color: siteVariables.bodyColor,
+                    backgroundColor: siteVariables.bodyBackground,
+                    ...(showTransparent && {
+                      backgroundImage:
+                        'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
+                      backgroundRepeat: 'repeat',
+                    }),
                   }}
                 >
                   {exampleElement}

From 759913c65d6eaf868feb4511c8981b96fb5a55f2 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Fri, 26 Oct 2018 14:36:10 -0700
Subject: [PATCH 2/2] docs: add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6583b9c2d6..74d46fdc75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Documentation
 - Add `Provider` examples @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))
+- Add transparent button to examples @levithomason ([#407](https://github.com/stardust-ui/react/pull/407))
 
 ### Documentation
 - Add component descriptions and fix accessibility errors @levithomason ([#387](https://github.com/stardust-ui/react/pull/387))