feat: input with select and textbox (#2571)

- Adds `select` and `textarea` to #2550 
- Part of #2311
- Select chevron adjustments are verified by Lasse

Author: eirikbacker

.changeset/smooth-wombats-grab.md

@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Select + Textarea:
+- Remove `label`, `hideLabel`, `description`, `characterLimit` and `error` as these will be part of `Field` API

apps/theme/components/Previews/Components/Components.tsx

@@ -10,6 +10,7 @@ import {
   Fieldset,
   Heading,
   HelpText,
+  Label,
   Link,
   Pagination,
   Paragraph,
@@ -95,7 +96,7 @@ export const Components = () => {
         </Heading>
         <div className={classes.tableHeader}>
           <div className={classes.tableAction}>
-            <Select label='Velg handling' size='sm' hideLabel>
+            <Select size='sm' aria-label='Velg handling'>
               <Select.Option value='blank'>Velg handling</Select.Option>
               <Select.Option value='everest'>Dupliser</Select.Option>
               <Select.Option value='aconcagua'>Slett</Select.Option>
@@ -299,15 +300,13 @@ export const Components = () => {
           <Combobox.Option value='bergen'>Bergen</Combobox.Option>
           <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
         </Combobox>
+        <Label htmlFor='my-textarea'>Ekstra informasjon</Label>
         <Textarea
+          className={classes.textarea}
           cols={40}
+          id='my-textarea'
           rows={3}
-          description=''
-          placeholder='Skriv her...'
-          error=''
-          label='Ekstra informasjon'
           size='sm'
-          className={classes.textarea}
         />
       </div>
       <div className={cl(classes.card, classes.tabs)}>

apps/theme/components/ThemeToolbar/ThemeToolbar.tsx

@@ -1,5 +1,5 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import { Button, Select, Tooltip } from '@digdir/designsystemet-react';
+import { Button, Label, Select, Tooltip } from '@digdir/designsystemet-react';
 import type {
   ColorError,
   ContrastMode,
@@ -107,8 +107,9 @@ export const ThemeToolbar = ({
         />
 
         <div className={classes.dropdown}>
+          <Label htmlFor='select-contrast'>Kontrastnivå</Label>
           <Select
-            label='Kontrastnivå'
+            id='select-contrast'
             size='md'
             className={classes.contrastSelect}
             value={contrastMode}
@@ -121,8 +122,9 @@ export const ThemeToolbar = ({
           </Select>
         </div>
         <div className={classes.borderRadii}>
+          <Label htmlFor='select-border-radius'>Border radius</Label>
           <Select
-            label='Border radius'
+            id='select-border-radius'
             size='md'
             className={classes.borderRadiiSelect}
             value={borderRadius}

packages/css/index.css

@@ -18,10 +18,8 @@
 @import url('./checkbox.css') layer(ds.components);
 @import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
-@import url('./select.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
 @import url('./input.css') layer(ds.components);
-@import url('./textarea.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
 @import url('./modal.css') layer(ds.components);
 @import url('./list.css') layer(ds.components);

packages/css/input.css

@@ -1,42 +1,34 @@
 .ds-input {
-  --dsc-input-border-color--checked: var(--ds-color-accent-base-default);
-  --dsc-input-border-color--invalid: var(--ds-color-danger-border-default);
-  --dsc-input-border-color--readonly: var(--ds-color-neutral-border-subtle);
-  --dsc-input-border-color: var(--ds-color-neutral-border-default);
   --dsc-input-background--checked: var(--dsc-input-border-color--checked);
   --dsc-input-background--invalid: var(--dsc-input-border-color--invalid);
   --dsc-input-background--readonly: var(--ds-color-neutral-background-subtle);
   --dsc-input-background--switch: var(--ds-color-neutral-border-default);
   --dsc-input-background: var(--ds-color-neutral-background-default);
+  --dsc-input-border-color--checked: var(--ds-color-accent-base-default);
+  --dsc-input-border-color--invalid: var(--ds-color-danger-border-default);
+  --dsc-input-border-color--readonly: var(--ds-color-neutral-border-subtle);
+  --dsc-input-border-color: var(--ds-color-neutral-border-default);
   --dsc-input-border-width--toggle: 2px;
   --dsc-input-border-width: 1px;
   --dsc-input-color--checked: var(--ds-color-accent-contrast-default);
   --dsc-input-color--invalid: var(--ds-color-danger-contrast-default);
   --dsc-input-color--readonly: var(--ds-color-neutral-border-default);
   --dsc-input-color: var(--ds-color-neutral-text-default);
-  --dsc-input-stroke: 0.05em;
   --dsc-input-padding: var(--ds-spacing-2) var(--ds-spacing-3);
   --dsc-input-size--switch: var(--ds-sizing-7);
   --dsc-input-size--toggle: var(--ds-sizing-6);
   --dsc-input-size: var(--ds-sizing-12);
+  --dsc-input-stroke: 0.05em;
 
   /* Checkmark with antialiasing is achieved by percentages 48% / 50% / 52% */
+  --diagonal-1: transparent calc(50% - var(--dsc-input-stroke));
+  --diagonal-2: currentcolor calc(48% - var(--dsc-input-stroke));
+  --diagonal-3: currentcolor calc(50% + var(--dsc-input-stroke));
+  --diagonal-4: transparent calc(52% + var(--dsc-input-stroke));
   --check-left: calc(var(--dsc-input-stroke) / 2) calc(66.66% + var(--dsc-input-stroke) / 2) / 33.33% 33.33% no-repeat content-box
-    linear-gradient(
-      45deg,
-      transparent calc(50% - var(--dsc-input-stroke)),
-      currentcolor calc(48% - var(--dsc-input-stroke)),
-      currentcolor calc(50% + var(--dsc-input-stroke)),
-      transparent calc(52% + var(--dsc-input-stroke))
-    );
+    linear-gradient(45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4));
   --check-right: calc(100% - var(--dsc-input-stroke) / 2) / 66.66% 66.66% no-repeat content-box
-    linear-gradient(
-      -45deg,
-      transparent calc(50% - var(--dsc-input-stroke)),
-      currentcolor calc(48% - var(--dsc-input-stroke)),
-      currentcolor calc(50% + var(--dsc-input-stroke)),
-      transparent calc(52% + var(--dsc-input-stroke))
-    );
+    linear-gradient(-45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4));
 
   appearance: none;
   background: var(--dsc-input-background);
@@ -46,7 +38,9 @@
   box-sizing: border-box;
   color: var(--dsc-input-color);
   font-family: inherit;
+  height: var(--dsc-input-size);
   margin: 0; /* Reset native margin on checkbox and radio */
+  max-width: 100%; /* Ensure input does not grow outside bounds even with a high value in size="" or cols="" */
   padding: var(--dsc-input-padding);
   position: relative; /* Ensure foucs outline renders on top */
 
@@ -58,21 +52,34 @@
     --dsc-input-background: var(--dsc-input-background--switch);
   }
 
-  &:not(textarea) {
-    height: var(--dsc-input-size);
+  &:is(select) {
+    padding-right: 2.4em;
+    background: linear-gradient(45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)) calc(100% - 1.2em + var(--dsc-input-stroke))
+      / 0.4em 0.4em no-repeat, linear-gradient(-45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)) calc(100% - 0.8em) / 0.4em
+      0.4em no-repeat, var(--dsc-input-background);
   }
 
-  &:not([size]) {
+  &:is(textarea) {
+    height: auto; /* Allow rows="" to set height */
+    min-height: calc(var(--dsc-input-size) * 1.5); /* Set a min-height to indicate this is a <textarea> and not an <input> */
+    resize: vertical; /* Allow resizing vertically only */
+
+    &:not([rows]) {
+      field-sizing: content;
+    }
+  }
+
+  &:not([size], [cols], select) {
     width: 100%;
   }
 
   /**
    * States
    */
   &:checked,
-  &:indeterminate {
-    --dsc-input-border-color: var(--dsc-input-border-color--checked);
+  &:indeterminate:where([type='checkbox']) {
     --dsc-input-background: var(--dsc-input-background--checked);
+    --dsc-input-border-color: var(--dsc-input-border-color--checked);
     --dsc-input-color: var(--dsc-input-color--checked);
   }
 
@@ -83,15 +90,15 @@
   }
 
   &[aria-invalid='true'] {
-    --dsc-input-border-color: var(--dsc-input-border-color--invalid);
     --dsc-input-background--checked: var(--dsc-input-background--invalid);
+    --dsc-input-border-color: var(--dsc-input-border-color--invalid);
     --dsc-input-color--checked: var(--dsc-input-color--invalid);
   }
 
   /* Using attribute [readonly] since pseudo selector :read-only is always true for checkbox, radio and select */
   &[readonly] {
-    --dsc-input-border-color: var(--dsc-input-border-color--readonly);
     --dsc-input-background: var(--dsc-input-background--readonly);
+    --dsc-input-border-color: var(--dsc-input-border-color--readonly);
     --dsc-input-color: var(--dsc-input-color--readonly);
   }
 
@@ -192,13 +199,12 @@ label:has(input:is([type='checkbox'], [type='radio']):not(:disabled, [aria-disab
  * Affix
  */
 .ds-input-affix {
-  --dsc-input-affix-border-radius: var(--ds-border-radius-md);
   --dsc-input-affix-border: 1px solid var(--ds-color-neutral-border-default);
   --dsc-input-affix-padding-inline: var(--ds-spacing-4);
 
   align-items: center;
   background: var(--ds-color-neutral-background-subtle);
-  border-radius: var(--dsc-input-affix-border-radius);
+  border-radius: var(--ds-border-radius-md);
   box-sizing: border-box;
   color: var(--ds-color-neutral-text-subtle);
   display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */