From 3c70c44b8a1c3a6007452e6c33778181a1842e41 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Wed, 29 Jan 2025 09:56:09 -0500
Subject: [PATCH] Use flex columns for form controls, fixes #629 (#636)

* Use flex columns for form controls

* Touch up spacing in color picker example

* Use consistent `display` for related form controls
---
 docs/docs/components/color-picker.md         | 8 +++++---
 src/components/color-picker/color-picker.css | 2 --
 src/components/input/input.css               | 2 --
 src/components/select/select.css             | 4 ----
 src/components/switch/switch.css             | 2 +-
 src/components/textarea/textarea.css         | 1 -
 src/styles/shadow/form-control.css           | 5 +++++
 7 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md
index b002366d7..2bce6504d 100644
--- a/docs/docs/components/color-picker.md
+++ b/docs/docs/components/color-picker.md
@@ -66,9 +66,11 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
 Use the `size` attribute to change the color picker's trigger size.
 
 ```html {.example}
-<wa-color-picker size="small" label="Select a color"></wa-color-picker>
-<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
-<wa-color-picker size="large" label="Select a color"></wa-color-picker>
+<div class="wa-gap-m wa-align-items-baseline">
+  <wa-color-picker size="small" label="Select a color"></wa-color-picker>
+  <wa-color-picker size="medium" label="Select a color"></wa-color-picker>
+  <wa-color-picker size="large" label="Select a color"></wa-color-picker>
+</div>
 ```
 
 ### Disabled
diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index d1ce7a419..fa7e6ad18 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -15,8 +15,6 @@
   --swatch-border-radius: var(--wa-border-radius-m);
   --swatch-size: 1.5rem;
   --trigger-border-radius: var(--wa-border-radius-circle);
-
-  display: inline-block;
 }
 
 .color-picker {
diff --git a/src/components/input/input.css b/src/components/input/input.css
index 2b0c96392..15ad742e9 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -1,6 +1,4 @@
 :host {
-  display: flex;
-  flex-flow: column;
   border-width: 0;
 }
 
diff --git a/src/components/select/select.css b/src/components/select/select.css
index b0e45537a..7c6f166d2 100644
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -1,7 +1,3 @@
-:host {
-  display: block;
-}
-
 /** The popup */
 .select {
   flex: 1 1 auto;
diff --git a/src/components/switch/switch.css b/src/components/switch/switch.css
index 6a8107dce..7651f5cee 100644
--- a/src/components/switch/switch.css
+++ b/src/components/switch/switch.css
@@ -13,7 +13,7 @@
   --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
   --width: calc(var(--height) * 1.75);
 
-  display: inline-block;
+  display: inline-flex;
 }
 
 label {
diff --git a/src/components/textarea/textarea.css b/src/components/textarea/textarea.css
index 413e53aaf..338240a1b 100644
--- a/src/components/textarea/textarea.css
+++ b/src/components/textarea/textarea.css
@@ -1,5 +1,4 @@
 :host {
-  display: block;
   border-width: 0;
 }
 
diff --git a/src/styles/shadow/form-control.css b/src/styles/shadow/form-control.css
index ed8ebc08d..02ec67ce1 100644
--- a/src/styles/shadow/form-control.css
+++ b/src/styles/shadow/form-control.css
@@ -1,3 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Label */
 :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
   display: inline-block;