From 1e3fde05ab62a6dc7b88a420156c16106bd2c6fa Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 11 Sep 2020 10:52:07 -0700
Subject: [PATCH 1/2] fix(ComponentDemo): add padding to align dropdown labels

---
 src/components/ComponentDemo/ComponentDemo.js          | 10 ++++------
 src/components/ComponentDemo/ComponentDemo.module.scss |  4 ++++
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index f40b4e88f12..0d7a0fa5f79 100644
--- a/src/components/ComponentDemo/ComponentDemo.js
+++ b/src/components/ComponentDemo/ComponentDemo.js
@@ -101,8 +101,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
             }
             initialSelectedItem="White"
             id="theme-variant"
-            label="Theme variant selection"
-            titleText="Theme variant selection"
+            label="Theme selector"
+            titleText="Theme selector"
             items={Object.keys(themes)}
             size="xl"
           />
@@ -111,10 +111,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
             light
             initialSelectedItem={components[0]}
             id="component-variant"
-            titleText={
-              childrenArray.length === 1 ? '' : 'Component variant selection'
-            }
-            label="Component variant selection"
+            titleText={childrenArray.length === 1 ? '' : 'Variant selector'}
+            label="Variant selection"
             items={components}
             size="xl"
             className={cx(variantDropdown, {
diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss
index 0c790e05c1a..5d2c773fab6 100644
--- a/src/components/ComponentDemo/ComponentDemo.module.scss
+++ b/src/components/ComponentDemo/ComponentDemo.module.scss
@@ -256,6 +256,10 @@ fieldset.form-group:last-of-type {
   [class*='--list-box--light'][class*='--list-box--expanded'] {
     border-bottom-width: 1px;
   }
+
+  [class*='--label'] {
+    margin-left: 1rem;
+  }
 }
 
 .dropdownRow .variantDropdown {

From 1ff5d1d177e17ab33546901da7d1dea2b4dcbf5d Mon Sep 17 00:00:00 2001
From: TJ Egan <twegan@us.ibm.com>
Date: Fri, 11 Sep 2020 10:57:43 -0700
Subject: [PATCH 2/2] fix(typo): use correct word

Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com>
---
 src/components/ComponentDemo/ComponentDemo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
index 0d7a0fa5f79..5219f254fc9 100644
--- a/src/components/ComponentDemo/ComponentDemo.js
+++ b/src/components/ComponentDemo/ComponentDemo.js
@@ -112,7 +112,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
             initialSelectedItem={components[0]}
             id="component-variant"
             titleText={childrenArray.length === 1 ? '' : 'Variant selector'}
-            label="Variant selection"
+            label="Variant selector"
             items={components}
             size="xl"
             className={cx(variantDropdown, {