fix: make use of design system label component in select

minor tweaks to make sure input and select behaves consistently

packages/design-system/lib/components/Input/input.module.css

@@ -6,7 +6,7 @@
   display: grid;
   min-width: 0; /* allow shrinkage */
   height: 56px;
-  padding: var(--Space-x15);
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
   cursor: text;
 
@@ -43,7 +43,7 @@
   &:focus,
   &:placeholder-shown,
   &[value]:not([value='']) {
-    height: 18px;
+    height: 24px;
     outline: none;
   }
 
@@ -54,7 +54,7 @@
 
 @media (hover: hover) {
   .input:active:not(:disabled) {
-    height: 18px;
+    height: 24px;
     outline: none;
   }
 }

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

@@ -2,11 +2,18 @@ import { labelVariants } from './variants'
 
 import type { LabelProps } from './types'
 
-export function Label({ children, className, required, size }: LabelProps) {
+export function Label({
+  children,
+  className,
+  selected,
+  required,
+  size,
+}: LabelProps) {
   const classNames = labelVariants({
     className,
     size,
     required,
+    selected,
   })
 
   return <span className={classNames}>{children}</span>

packages/design-system/lib/components/Label/label.module.css

@@ -43,23 +43,22 @@
   content: ' *';
 }
 
-input:focus,
+input:focus ~ .label,
-input:placeholder-shown,
+input:placeholder-shown ~ .label,
-input[value]:not([value='']),
+input[value]:not([value='']) ~ .label,
-textarea:focus,
+textarea:focus ~ .label,
-textarea:placeholder-shown,
+textarea:placeholder-shown ~ .label,
-textarea[value]:not([value='']) {
+textarea[value]:not([value='']) ~ .label,
-  & ~ .label {
+.selected {
-    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
-    font-size: var(--Label-Size);
+  font-size: var(--Label-Size);
-    font-weight: var(--Label-Font-weight);
+  font-weight: var(--Label-Font-weight);
-    letter-spacing: var(--Label-Letter-spacing);
+  letter-spacing: var(--Label-Letter-spacing);
-    text-transform: unset;
+  text-transform: unset;
-    line-height: 1.5;
+  line-height: 1.5;
-    text-decoration: none;
+  text-decoration: none;
 
-    margin-bottom: var(--Space-x05);
+  margin-bottom: var(--Space-x025);
-  }
 }
 
 input:disabled,
@@ -79,7 +78,7 @@ textarea:disabled {
     line-height: 1.5;
     text-decoration: none;
 
-    margin-bottom: var(--Space-x05);
+    margin-bottom: var(--Space-x025);
   }
 }
 

packages/design-system/lib/components/Label/variants.ts

@@ -12,6 +12,9 @@ export const labelVariants = cva(styles.label, {
     required: {
       true: styles.required,
     },
+    selected: {
+      true: styles.selected,
+    },
   },
   defaultVariants: {
     size: 'regular',

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

@@ -16,6 +16,7 @@ import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
 import { useState } from 'react'
+import { Label } from '../Label'
 
 export function Select({
   name,
@@ -64,15 +65,12 @@ export function Select({
           {({ selectedText }) => {
             return (
               <>
-                <Typography
+                <Label
-                  variant={
+                  className={styles.label}
-                    selectedText || isOpen
+                  selected={Boolean(selectedText || isOpen)}
-                      ? 'Label/xsRegular'
-                      : 'Body/Paragraph/mdRegular'
-                  }
                 >
-                  <span className={styles.label}>{label}</span>
+                  {label}
-                </Typography>
+                </Label>
                 <Typography variant="Body/Paragraph/mdRegular">
                   <span className={styles.selectedText}>{selectedText}</span>
                 </Typography>

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

@@ -7,7 +7,7 @@ import {
   Key,
   ListBox,
   Popover,
-  Label,
+  Label as AriaLabel,
   ComboBoxStateContext,
 } from 'react-aria-components'
 import {
@@ -26,6 +26,7 @@ import { SelectItem } from './SelectItem'
 import type { SelectFilterProps } from './types'
 
 import styles from './select.module.css'
+import { Label } from '../Label'
 
 /**
  * ComboBoxInner
@@ -124,7 +125,7 @@ export function SelectFilter({
       {...props}
     >
       <ComboBoxInner inputRef={inputRef}>
-        <Label>
+        <AriaLabel>
           {icon ? (
             <MaterialIcon
               icon={icon}
@@ -135,13 +136,9 @@ export function SelectFilter({
           ) : null}
 
           <span className={styles.displayText}>
-            <Typography
+            <Label className={styles.label} selected={Boolean(focus || value)}>
-              variant={
+              {label}
-                focus || value ? 'Label/xsRegular' : 'Body/Paragraph/mdRegular'
+            </Label>
-              }
-            >
-              <span className={styles.label}>{label}</span>
-            </Typography>
             <Typography variant="Body/Paragraph/mdRegular">
               <Input
                 ref={inputRef}
@@ -151,7 +148,7 @@ export function SelectFilter({
               />
             </Typography>
           </span>
-        </Label>
+        </AriaLabel>
         <Button className={styles.button}>
           <MaterialIcon
             icon="chevron_right"

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

@@ -4,6 +4,7 @@
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   height: 56px;
+  box-sizing: border-box;
 
   &[data-required] .label::after {
     content: ' *';
@@ -14,7 +15,7 @@
     }
 
     .selectedText {
-      min-height: 18px;
+      min-height: 24px;
     }
   }
   &[data-focused] {
@@ -26,7 +27,7 @@
       outline: none;
     }
     .input {
-      min-height: 18px;
+      min-height: 24px;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -58,8 +59,8 @@
   align-items: center;
   gap: var(--Space-x1);
   width: 100%;
-  height: 56px;
+  height: 100%;
-  padding: var(--Space-x15);
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
 
   .button {
@@ -83,7 +84,7 @@
   width: 100%;
 
   &[value]:not([value='']) {
-    min-height: 18px;
+    min-height: 24px;
   }
 }
 
@@ -94,13 +95,12 @@
 }
 
 .selectedText:not(:empty) {
-  min-height: 18px;
+  min-height: 24px;
 }
 
 .displayText {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--Space-x05) / 2);
   flex: 1;
   justify-content: center;
   height: 100%;