From 76e55f840a94642f436471b87b2d29a48dbf6b8a Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 27 Jun 2024 17:50:03 -0400
Subject: [PATCH] progress on vertical alignment of inline-block elements

---
 docs/docs/experimental/sandbox.md          | 122 ++++++++-------------
 src/components/checkbox/checkbox.styles.ts |   4 +-
 src/components/radio/radio.styles.ts       |   6 +-
 src/components/switch/switch.styles.ts     |   4 +-
 4 files changed, 54 insertions(+), 82 deletions(-)

diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
index 4884946f6..6a6ca8609 100644
--- a/docs/docs/experimental/sandbox.md
+++ b/docs/docs/experimental/sandbox.md
@@ -176,79 +176,51 @@ layout: page
 ## Tests
 
 ```html {.example}
-<wa-button size="medium" style="width: 100%;" caret>Medium</wa-button>
-<br /><br />
-<wa-select>
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-</wa-select>
-<br /><br />
-<wa-input placeholder="Small" size="small">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="small">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="medium">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-input placeholder="Large" size="large">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="large">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-button size="medium">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-</wa-button>
-<br /><br />
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="brand">Left</wa-button>
-  <wa-button appearance="outlined" variant="brand">Center</wa-button>
-  <wa-button appearance="outlined" variant="brand">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="success">Left</wa-button>
-  <wa-button appearance="outlined" variant="success">Center</wa-button>
-  <wa-button appearance="outlined" variant="success">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined">Left</wa-button>
-  <wa-button appearance="outlined">Center</wa-button>
-  <wa-button appearance="outlined">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="warning">Left</wa-button>
-  <wa-button appearance="outlined" variant="warning">Center</wa-button>
-  <wa-button appearance="outlined" variant="warning">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="danger">Left</wa-button>
-  <wa-button appearance="outlined" variant="danger">Center</wa-button>
-  <wa-button appearance="outlined" variant="danger">Right</wa-button>
-</wa-button-group>
+<style>
+  div.alignment {
+    position: relative;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+  div.alignment::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    width: 100%;
+    height: 2px;
+    background-color: red;
+  }
+</style>
+<div class="alignment">
+  <wa-switch size="small">OCBS</wa-switch>
+  <wa-checkbox size="small">OCBS</wa-checkbox>
+  <wa-radio value="1" size="small">OCBS</wa-radio>
+  <wa-button size="small">OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-switch>OCBS</wa-switch>
+  <wa-checkbox>OCBS</wa-checkbox>
+  <wa-radio value="1">OCBS</wa-radio>
+  <wa-button>OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-switch size="large">OCBS</wa-switch>
+  <wa-checkbox size="large">OCBS</wa-checkbox>
+  <wa-radio value="1" size="large">OCBS</wa-radio>
+  <wa-button size="large">OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-input size="small"></wa-input>
+  <wa-button size="small">OCBS</wa-button>
+</div>
+<div class="alignment">
+  <wa-badge>OCBS</wa-badge>
+  <wa-button>OCBS</wa-button>
+  <wa-avatar style="--size: var(--wa-form-control-height-m)"></wa-avatar>
+</div>
+<div class="alignment">
+  <wa-badge size="large">OCBS</wa-badge>
+  <wa-button size="large">OCBS</wa-button>
+</div>
 ```
\ No newline at end of file
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 0b8ec0c89..829eded88 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -20,7 +20,7 @@ export default css`
 
   .checkbox {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: flex-start;
     font: inherit;
     color: var(--wa-form-control-value-color);
@@ -43,7 +43,7 @@ export default css`
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     width: var(--toggle-size);
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 4d90d989e..b94df82d2 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -21,7 +21,7 @@ export default css`
   }
 
   .radio {
-    display: inline-flex;
+    display: flex;
     align-items: top;
     font: inherit;
     color: var(--wa-form-control-value-color);
@@ -42,7 +42,7 @@ export default css`
   }
 
   .radio__checked-icon {
-    display: inline-flex;
+    display: flex;
     fill: currentColor;
     width: var(--toggle-size);
     height: var(--toggle-size);
@@ -52,7 +52,7 @@ export default css`
   .radio__control {
     flex: 0 0 auto;
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     width: var(--toggle-size);
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index ed995abb7..151e0cd32 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -33,7 +33,7 @@ export default css`
 
   .switch {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     font: inherit;
     color: var(--wa-form-control-value-color);
@@ -44,7 +44,7 @@ export default css`
   .switch__control {
     flex: 0 0 auto;
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     width: var(--width);