Merged in fix/pixel-push-input-select-label (pull request #2369)

fix: make use of design system label component in select

Approved-by: Arvid Norlin

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

@@ -1,3 +1,6 @@
+@value globals: "../../styles/globals.css";
+@value inputContainerHeight, inputExpandedHeight from globals;
+
 .container {
   align-content: center;
   background-color: var(--Surface-Primary-Default);
@@ -5,8 +8,8 @@
   border-radius: var(--Corner-radius-md);
   display: grid;
   min-width: 0; /* allow shrinkage */
-  height: 56px;
-  padding: var(--Space-x15);
+  height: inputContainerHeight;
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
   cursor: text;
 
@@ -43,7 +46,7 @@
   &:focus,
   &:placeholder-shown,
   &[value]:not([value='']) {
-    height: 18px;
+    height: inputExpandedHeight;
     outline: none;
   }
 
@@ -54,7 +57,7 @@
 
 @media (hover: hover) {
   .input:active:not(:disabled) {
-    height: 18px;
+    height: inputExpandedHeight;
     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:placeholder-shown,
-input[value]:not([value='']),
-textarea:focus,
-textarea:placeholder-shown,
-textarea[value]:not([value='']) {
-  & ~ .label {
-    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
-    font-size: var(--Label-Size);
-    font-weight: var(--Label-Font-weight);
-    letter-spacing: var(--Label-Letter-spacing);
-    text-transform: unset;
-    line-height: 1.5;
-    text-decoration: none;
+input:focus ~ .label,
+input:placeholder-shown ~ .label,
+input[value]:not([value='']) ~ .label,
+textarea:focus ~ .label,
+textarea:placeholder-shown ~ .label,
+textarea[value]:not([value='']) ~ .label,
+.selected {
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Label-Size);
+  font-weight: var(--Label-Font-weight);
+  letter-spacing: var(--Label-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  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
-                  variant={
-                    selectedText || isOpen
-                      ? 'Label/xsRegular'
-                      : 'Body/Paragraph/mdRegular'
-                  }
+                <Label
+                  className={styles.label}
+                  selected={Boolean(selectedText || isOpen)}
                 >
-                  <span className={styles.label}>{label}</span>
-                </Typography>
+                  {label}
+                </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
-              variant={
-                focus || value ? 'Label/xsRegular' : 'Body/Paragraph/mdRegular'
-              }
-            >
-              <span className={styles.label}>{label}</span>
-            </Typography>
+            <Label className={styles.label} selected={Boolean(focus || value)}>
+              {label}
+            </Label>
             <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

@@ -1,9 +1,13 @@
+@value globals: "../../styles/globals.css";
+@value inputContainerHeight, inputExpandedHeight from globals;
+
 .select {
   position: relative;
   background-color: var(--Surface-UI-Fill-Default);
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
-  height: 56px;
+  height: inputContainerHeight;
+  box-sizing: border-box;
 
   &[data-required] .label::after {
     content: ' *';
@@ -14,7 +18,7 @@
     }
 
     .selectedText {
-      min-height: 18px;
+      min-height: inputExpandedHeight;
     }
   }
   &[data-focused] {
@@ -26,7 +30,7 @@
       outline: none;
     }
     .input {
-      min-height: 18px;
+      min-height: inputExpandedHeight;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -58,8 +62,8 @@
   align-items: center;
   gap: var(--Space-x1);
   width: 100%;
-  height: 56px;
-  padding: var(--Space-x15);
+  height: 100%;
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
 
   .button {
@@ -83,7 +87,7 @@
   width: 100%;
 
   &[value]:not([value='']) {
-    min-height: 18px;
+    min-height: inputExpandedHeight;
   }
 }
 
@@ -94,13 +98,12 @@
 }
 
 .selectedText:not(:empty) {
-  min-height: 18px;
+  min-height: inputExpandedHeight;
 }
 
 .displayText {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--Space-x05) / 2);
   flex: 1;
   justify-content: center;
   height: 100%;

packages/design-system/lib/styles/globals.css

@@ -1,3 +1,6 @@
+@value inputContainerHeight: 56px;
+@value inputExpandedHeight: 24px;
+
 * {
   margin: 0;
 }