Merged in feat/SW-1509-new-select-usage-in-forms (pull request #1787)

feat(SW-1509): simplified date of birth component to work with new select

Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Select/Select.tsx

@@ -15,6 +15,7 @@ import { SelectFilter } from './SelectFilter'
 import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
+import { useState } from 'react'
 
 export function Select({
   name,
@@ -25,6 +26,8 @@ export function Select({
   itemIcon,
   ...props
 }: SelectProps | SelectFilterProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
   if ('enableFiltering' in props) {
     return (
       <SelectFilter
@@ -45,6 +48,7 @@ export function Select({
       name={name}
       aria-label={label}
       isDisabled={isDisabled}
+      onOpenChange={setIsOpen}
       {...props}
     >
       <Button className={cx(styles.inner, styles.button)}>
@@ -62,18 +66,16 @@ export function Select({
               <>
                 <Typography
                   variant={
-                    selectedText
+                    selectedText || isOpen
                       ? 'Label/xsRegular'
                       : 'Body/Paragraph/mdRegular'
                   }
                 >
                   <span className={styles.label}>{label}</span>
                 </Typography>
-                {selectedText ? (
-                  <Typography variant="Body/Paragraph/mdRegular">
-                    <span>{selectedText}</span>
-                  </Typography>
-                ) : null}
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span className={styles.selectedText}>{selectedText}</span>
+                </Typography>
               </>
             )
           }}

packages/design-system/lib/components/Select/select.module.css

@@ -7,8 +7,14 @@
   &[data-required] .label::after {
     content: ' *';
   }
-  &[data-open] .chevron {
-    rotate: -90deg;
+  &[data-open] {
+    .chevron {
+      rotate: -90deg;
+    }
+
+    .selectedText {
+      min-height: 18px;
+    }
   }
   &[data-focused] {
     border-color: var(--Border-Interactive-Focus);
@@ -18,7 +24,7 @@
       outline: none;
     }
     .input {
-      position: unset;
+      min-height: 18px;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -66,14 +72,25 @@
 }
 
 .input {
-  position: absolute;
+  height: 0;
   padding: 0;
+  width: 100%;
 
   &[value]:not([value='']) {
-    position: unset;
+    min-height: 18px;
   }
 }
 
+.input,
+.selectedText {
+  min-height: 0;
+  transition: min-height 150ms ease;
+}
+
+.selectedText:not(:empty) {
+  min-height: 18px;
+}
+
 .displayText {
   display: flex;
   flex-direction: column;
@@ -81,6 +98,7 @@
   flex: 1;
   justify-content: center;
   height: 100%;
+  position: relative;
 
   &:has(.input) {
     cursor: text;
@@ -94,6 +112,8 @@
 
 .label {
   color: var(--Text-Interactive-Placeholder);
+  white-space: nowrap;
+  transition: font-size 150ms ease;
 }
 
 .popover {
@@ -107,6 +127,8 @@
   padding: var(--Space-x2);
   outline: none;
   min-width: 280px;
+  scrollbar-color: var(--Icon-Interactive-Disabled);
+  scrollbar-width: thin;
 }
 
 .listBox {