From cd1213ef04f47734ccc84e6eaea3569ea5330100 Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Mon, 18 Mar 2024 12:17:10 -0500
Subject: [PATCH] add POC for select (incomplete)

---
 core/src/components/select/select.scss | 20 ++----------
 core/src/components/select/select.tsx  | 43 ++++++++++++--------------
 2 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index 63701acb64..4eea73fd3a 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -229,7 +229,7 @@ button {
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.select-wrapper-inner {
+.select-wrapper-inner, .select-wrapper-inner-start {
   display: flex;
 
   align-items: center;
@@ -508,26 +508,12 @@ button {
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
  * from overlapping any placeholder value.
- *
- * TODO(FW-5592): Remove :not(.label-floating) piece
  */
-:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder {
+:host(.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 0;
 }
 
-/**
- * We don't use .label-floating here because that would
- * also include the case where the label is floating due
- * to content in the start/end slot. We want the opacity
- * to remain at the default in this case, since the select
- * isn't being actively interacted with.
- *
- * TODO(FW-5592): Change entire selector to:
- * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
- */
-:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
+:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }
 
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 740adad020..82fd0ca3d4 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -785,7 +785,7 @@ export class Select implements ComponentInterface {
    * Renders the border container
    * when fill="outline".
    */
-  private renderLabelContainer() {
+  private renderOutlineLabelContainer() {
     const mode = getIonMode(this);
     const hasOutlineFill = mode === 'md' && this.fill === 'outline';
 
@@ -811,16 +811,11 @@ export class Select implements ComponentInterface {
             </div>
           </div>
           <div class="select-outline-end"></div>
-        </div>,
-        this.renderLabel(),
+        </div>
       ];
     }
 
-    /**
-     * If not using the outline style,
-     * we can render just the label.
-     */
-    return this.renderLabel();
+    return null;
   }
 
   /**
@@ -932,7 +927,6 @@ export class Select implements ComponentInterface {
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
 
     const hasValue = this.hasValue();
-    const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
 
     renderHiddenInput(true, el, name, parseValue(value), disabled);
 
@@ -941,20 +935,12 @@ export class Select implements ComponentInterface {
      * For floating labels, the label should move above the select if
      * the select has a value, is open, or has anything in either
      * the start or end slot.
-     *
-     * If there is content in the start slot, the label would overlap
-     * it if not forced to float. This is also applied to the end slot
-     * because with the default or solid fills, the select is not
-     * vertically centered in the container, but the label is. This
-     * causes the slots and label to appear vertically offset from each
-     * other when the label isn't floating above the input. This doesn't
-     * apply to the outline fill, but this was not accounted for to keep
-     * things consistent.
-     *
-     * TODO(FW-5592): Remove hasStartEndSlots condition
      */
     const labelShouldFloat =
-      labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
+      labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded));
+
+    const startSlotEl = el.querySelector('[slot="start"]');
+    const startSlotWidth = startSlotEl ? startSlotEl.clientWidth + 16 : 0;
 
     return (
       <Host
@@ -976,11 +962,22 @@ export class Select implements ComponentInterface {
           [`select-shape-${shape}`]: shape !== undefined,
           [`select-label-placement-${labelPlacement}`]: true,
         })}
+        style={{
+          '--start-slot-adjustment': `-${startSlotWidth}px`
+        }}
       >
         <label class="select-wrapper" id="select-label">
-          {this.renderLabelContainer()}
-          <div class="select-wrapper-inner">
+          {/**
+           * Wrapping the start slot and label together ensures
+           * they sit on the same side of the container when using
+           * justify="space-between".
+           */}
+          <div class="select-wrapper-inner-start">
             <slot name="start"></slot>
+            {this.renderOutlineLabelContainer()}
+            {this.renderLabel()}
+          </div>
+          <div class="select-wrapper-inner">
             <div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)} part="container">
               {this.renderSelectText()}
               {this.renderListbox()}