Merge branch 'feat/input' into feat/input-with-select-and-textarea

digdir · Oct 9, 2024 · dc8615a · dc8615a
2 parents eaaa617 + 45fce70
commit dc8615a
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 57 deletions.
diff --git a/packages/css/input.css b/packages/css/input.css
@@ -4,22 +4,20 @@
   --dsc-input-background--readonly: var(--ds-color-neutral-background-subtle);
   --dsc-input-background: var(--ds-color-neutral-background-default);
   --dsc-input-border-color--checked: var(--ds-color-accent-base-default);
-  --dsc-input-border-color--hover: var(--ds-color-accent-border-strong);
   --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-box-shadow--hover: 0 0 0 var(--ds-spacing-1) var(--ds-color-accent-surface-hover);
   --dsc-input-box-shadow--invalid: inset 0 0 0 var(--dsc-input-border-width) var(--dsc-input-border-color--invalid);
   --dsc-input-color: var(--ds-color-neutral-text-default);
   --dsc-input-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-  --dsc-input-size--switch: var(--ds-sizing-13);
+  --dsc-input-size--switch: var(--ds-sizing-8);
   --dsc-input-size--toggle: var(--ds-sizing-6);
   --dsc-input-size: var(--ds-sizing-12);
-  --dsc-input-url--checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M18.55 6.32a1 1 0 0 1 0 1.42l-7.97 7.97a1 1 0 0 1-1.41 0l-4.22-4.22a1 1 0 0 1 1.41-1.42l3.52 3.52 7.26-7.27a1 1 0 0 1 1.41 0'/%3E%3C/svg%3E");
+  --dsc-input-url--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M18.55 6.32a1 1 0 0 1 0 1.42l-7.97 7.97a1 1 0 0 1-1.41 0l-4.22-4.22a1 1 0 0 1 1.41-1.42l3.52 3.52 7.26-7.27a1 1 0 0 1 1.41 0'/%3E%3C/svg%3E");
+  --dsc-input-url--circle: radial-gradient(circle closest-side, black 45%, transparent 50%); /* Different percentage to acheive antialiasing */
   --dsc-input-url--indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12c0-1.1.9-2 2-2h12a2 2 0 1 1 0 4H6a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
-  --dsc-input-url--radio: radial-gradient(circle closest-side, black 45%, transparent 50%); /* Different percentage to acheive antialiasing */
 
   appearance: none;
   background: var(--dsc-input-background);
@@ -34,8 +32,7 @@
   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 */
-  transition-duration: 0.2s;
-  transition-property: background, border, box-shadow, mask;
+  transition: 0.2s mask;
 
   @composes ds-body-text--md from './utilities.css';
   @composes ds-focus from './utilities.css';
@@ -81,14 +78,6 @@
   /**
   * States
   */
-  @media (hover: hover) and (pointer: fine) {
-    /* Using [readonly] since checkbox and radio is always :read-only */
-    &:not(:focus-visible, :disabled, [aria-disabled='true'], [readonly]):hover {
-      --dsc-input-border-color: var(--dsc-input-border-color--hover);
-      --dsc-input-box-shadow: var(--dsc-input-box-shadow--hover);
-    }
-  }
-
   &:checked,
   &:indeterminate {
     --dsc-input-background: var(--dsc-input-background--checked);
@@ -122,25 +111,25 @@
   &[data-size='sm'] {
     @composes ds-body-text--sm from './utilities.css';
 
+    --dsc-input-padding: var(--ds-spacing-1) var(--ds-spacing-2);
+    --dsc-input-size--switch: var(--ds-sizing-7);
     --dsc-input-size--toggle: var(--ds-sizing-5);
-    --dsc-input-size--switch: var(--ds-sizing-11);
     --dsc-input-size: var(--ds-sizing-10);
-    --dsc-input-padding: var(--ds-spacing-1) var(--ds-spacing-2);
   }
 
   &[data-size='lg'] {
     @composes ds-body-text--lg from './utilities.css';
 
+    --dsc-input-padding: var(--ds-spacing-3) var(--ds-spacing-4);
+    --dsc-input-size--switch: var(--ds-sizing-9);
     --dsc-input-size--toggle: var(--ds-sizing-7);
-    --dsc-input-size--switch: var(--ds-sizing-14);
     --dsc-input-size: var(--ds-sizing-14);
-    --dsc-input-padding: var(--ds-spacing-3) var(--ds-spacing-4);
   }
 
   /**
   * Toggle inputs
   */
-  &:read-only:not([readonly]) {
+  &:read-only:not([readonly], [aria-disabled='true'], :disabled) {
     cursor: pointer;
   }
 
@@ -153,45 +142,46 @@
   }
 
   &[type='radio'] {
-    --dsc-input-url: var(--dsc-input-url--radio);
+    --dsc-input-url: var(--dsc-input-url--circle);
 
     border-radius: var(--ds-border-radius-full);
   }
 
   &[type='checkbox'] {
-    --dsc-input-url: var(--dsc-input-url--checkbox);
+    --dsc-input-url: var(--dsc-input-url--check);
   }
 
   &[type='checkbox']:indeterminate {
     --dsc-input-url: var(--dsc-input-url--indeterminate);
   }
 
   &[role='switch']:where([type='radio'], [type='checkbox']) {
-    --inner-size: calc(var(--dsc-input-size--toggle) - var(--dsc-input-border-width--toggle) * 2);
+    --inner-size: calc(var(--dsc-input-size--switch) - var(--dsc-input-border-width--toggle) * 2);
 
     border-radius: var(--ds-border-radius-full);
-    height: var(--dsc-input-size--toggle);
-    width: var(--dsc-input-size--switch);
+    height: var(--dsc-input-size--switch);
+    width: calc(var(--dsc-input-size--switch) * 2);
     mask:
-      content-box left/0 no-repeat var(--dsc-input-url--checkbox) exclude,
+      content-box left/0 no-repeat var(--dsc-input-url--check) exclude,
       linear-gradient(black, black) no-clip exclude,
       content-box radial-gradient(circle closest-side, currentcolor 95%, transparent 100%) left/var(--inner-size) no-repeat;
 
     &:checked {
       mask-position: right;
       mask-size: contain, cover, var(--inner-size); /* right align radial-gradient */
     }
-
-    &:indeterminate {
-      mask-position: center;
-    }
   }
 }
 
+/* Change cursor on wrapping <label> */
+label:has(input:is([type='checkbox'], [type='radio']):not(:disabled, [aria-disabled], [readonly])) {
+  cursor: pointer;
+}
+
 /**
-  * Addons
+  * Affix
   */
-.ds-input-addons {
+.ds-input-affix {
   --dsc-input-addons-border-radius: var(--ds-border-radius-md);
   --dsc-input-addons-border: 1px solid var(--ds-color-neutral-border-default);
   --dsc-input-addons-padding: var(--ds-spacing-4);
@@ -201,23 +191,26 @@
   border-radius: var(--dsc-input-addons-border-radius);
   box-sizing: border-box;
   color: var(--ds-color-neutral-text-subtle);
-  display: flex;
+  display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
   gap: var(--dsc-input-addons-padding);
   padding-inline: var(--dsc-input-addons-padding);
   position: relative;
   white-space: nowrap;
+  width: fit-content;
 
   /* Using ::before to make input border overlap addons border */
   &::before {
-    position: absolute;
-    inset: 0;
-    content: '';
-    border: var(--dsc-input-addons-border);
     border-radius: inherit;
+    border: var(--dsc-input-addons-border);
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
   }
 
   @composes ds-body-text--md from './utilities.css';
 
+  /* Using double selector to ensure we win specificity */
   .ds-input.ds-input {
     border-radius: 0;
     flex: 0 1 auto;