fix(date-time-input): correct button padding formula and width tokens

Jeffrey Lauwers · claude · Jeffrey Lauwers · commit b992cb7e85a9 · 2026-02-19T13:03:19.000+01:00
Button position:
- inset-inline-end: form-control-padding-inline-end (12px) → space-inline.sm (4px)
- New token: --dsn-*-input-button-inset-inline-end = space-inline.sm

Padding formula corrected:
- Was: icon-size-md + icon-gap + form-control-padding-inline-end
- Now: (button-icon-only-padding × 2) + icon-size-sm + button-inset + icon-gap
- Icon size aligned to actual small button icon (icon-size-sm, not md)

Width tokens widened to prevent text clipping:
- xs: 8ch → 10ch (postcode, year, CVV)
- sm: 12ch → 14ch (time input, short codes)

Docs updated with new ch values.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/components-react/src/DateInput/DateInput.css b/packages/components-react/src/DateInput/DateInput.css
@@ -14,11 +14,11 @@
   max-inline-size: var(--dsn-form-control-width-md);
 }
 
-/* Calendar button — centered vertically, positioned at inline-end */
+/* Calendar button — centered vertically, positioned at inline-end with reduced margin */
 .dsn-date-input__button {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: var(--dsn-form-control-padding-inline-end);
+  inset-inline-end: var(--dsn-date-input-button-inset-inline-end);
   transform: translateY(-50%);
 }
 
diff --git a/packages/components-react/src/TimeInput/TimeInput.css b/packages/components-react/src/TimeInput/TimeInput.css
@@ -14,11 +14,11 @@
   max-inline-size: var(--dsn-form-control-width-sm);
 }
 
-/* Clock button — centered vertically, positioned at inline-end */
+/* Clock button — centered vertically, positioned at inline-end with reduced margin */
 .dsn-time-input__button {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: var(--dsn-form-control-padding-inline-end);
+  inset-inline-end: var(--dsn-time-input-button-inset-inline-end);
   transform: translateY(-50%);
 }
 
diff --git a/packages/design-tokens/src/tokens/components/date-input.json b/packages/design-tokens/src/tokens/components/date-input.json
@@ -2,19 +2,24 @@
   "dsn": {
     "date-input": {
       "icon-size": {
-        "value": "{dsn.icon.size.md}",
+        "value": "{dsn.button.size.small.icon-size}",
         "type": "dimension",
-        "comment": "Date input icon size"
+        "comment": "Calendar icon size — matches the small button icon size"
       },
       "icon-gap": {
         "value": "{dsn.space.text.md}",
         "type": "dimension",
-        "comment": "Gap between calendar icon and input text"
+        "comment": "Gap between calendar button and input text"
+      },
+      "button-inset-inline-end": {
+        "value": "{dsn.space.inline.sm}",
+        "type": "dimension",
+        "comment": "Distance from the inline-end border to the calendar button (4px)"
       },
       "padding-inline-end-with-icon": {
-        "value": "calc({dsn.date-input.icon-size} + {dsn.date-input.icon-gap} + {dsn.form-control.padding-inline-end})",
+        "value": "calc(({dsn.button.size.small.icon-only-padding} * 2) + {dsn.date-input.icon-size} + {dsn.date-input.button-inset-inline-end} + {dsn.date-input.icon-gap})",
         "type": "dimension",
-        "comment": "Right padding when icon is present"
+        "comment": "Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap"
       }
     }
   }
diff --git a/packages/design-tokens/src/tokens/components/time-input.json b/packages/design-tokens/src/tokens/components/time-input.json
@@ -2,19 +2,24 @@
   "dsn": {
     "time-input": {
       "icon-size": {
-        "value": "{dsn.icon.size.md}",
+        "value": "{dsn.button.size.small.icon-size}",
         "type": "dimension",
-        "comment": "Time input icon size"
+        "comment": "Clock icon size — matches the small button icon size"
       },
       "icon-gap": {
         "value": "{dsn.space.text.md}",
         "type": "dimension",
-        "comment": "Gap between clock icon and input text"
+        "comment": "Gap between clock button and input text"
+      },
+      "button-inset-inline-end": {
+        "value": "{dsn.space.inline.sm}",
+        "type": "dimension",
+        "comment": "Distance from the inline-end border to the clock button (4px)"
       },
       "padding-inline-end-with-icon": {
-        "value": "calc({dsn.time-input.icon-size} + {dsn.time-input.icon-gap} + {dsn.form-control.padding-inline-end})",
+        "value": "calc(({dsn.button.size.small.icon-only-padding} * 2) + {dsn.time-input.icon-size} + {dsn.time-input.button-inset-inline-end} + {dsn.time-input.icon-gap})",
         "type": "dimension",
-        "comment": "Right padding when icon is present"
+        "comment": "Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap"
       },
       "icon-color": {
         "value": "{dsn.color.action-2.color-default}",
diff --git a/packages/design-tokens/src/tokens/themes/start/base.json b/packages/design-tokens/src/tokens/themes/start/base.json
@@ -440,12 +440,12 @@
       },
       "width": {
         "xs": {
-          "value": "8ch",
+          "value": "10ch",
           "type": "dimension",
           "comment": "Extra small width - for very short inputs (e.g., postal code, year, CVV)"
         },
         "sm": {
-          "value": "12ch",
+          "value": "14ch",
           "type": "dimension",
           "comment": "Small width - for short inputs (e.g., time HH:MM, short codes)"
         },
diff --git a/packages/storybook/src/TextInput.docs.md b/packages/storybook/src/TextInput.docs.md
@@ -23,8 +23,8 @@ De TextInput component is een gestandaardiseerd invoerveld voor single-line teks
 ## Best practices
 
 - **Kies de juiste width.** Gebruik `width` om de breedte aan te passen aan het type data:
-  - `xs` (8ch) - Zeer korte codes (postcode, jaar, CVV)
-  - `sm` (12ch) - Korte invoer (tijdstip, korte codes)
+  - `xs` (10ch) - Zeer korte codes (postcode, jaar, CVV)
+  - `sm` (14ch) - Korte invoer (tijdstip, korte codes)
   - `md` (20ch) - Medium invoer (datum, telefoonnummer)
   - `lg` (32ch) - Standaard (naam, email) - **DEFAULT**
   - `xl` (48ch) - Langere tekst (URL)
@@ -39,8 +39,8 @@ De TextInput component is een gestandaardiseerd invoerveld voor single-line teks
 
 | Variant | Width | Gebruik                                            |
 | ------- | ----- | -------------------------------------------------- |
-| `xs`    | 8ch   | Zeer korte codes (postcode "1234 AB", CVV "123")   |
-| `sm`    | 12ch  | Korte invoer (tijdstip "14:30", korte codes)       |
+| `xs`    | 10ch  | Zeer korte codes (postcode "1234 AB", CVV "123")   |
+| `sm`    | 14ch  | Korte invoer (tijdstip "14:30", korte codes)       |
 | `md`    | 20ch  | Medium invoer (datum "15-03-2025", telefoonnummer) |
 | `lg`    | 32ch  | **Standaard** - naam, email, etc.                  |
 | `xl`    | 48ch  | Langere tekst (URL "https://example.com")          |
@@ -78,8 +78,8 @@ De TextInput component is een gestandaardiseerd invoerveld voor single-line teks
 | `--dsn-text-input-invalid-color`              | Invalid text color                      |
 | `--dsn-text-input-invalid-background-color`   | Invalid background color                |
 | `--dsn-text-input-invalid-border-color`       | Invalid border color                    |
-| `--dsn-form-control-width-xs`                 | Extra small width (8ch)                 |
-| `--dsn-form-control-width-sm`                 | Small width (12ch)                      |
+| `--dsn-form-control-width-xs`                 | Extra small width (10ch)                |
+| `--dsn-form-control-width-sm`                 | Small width (14ch)                      |
 | `--dsn-form-control-width-md`                 | Medium width (20ch)                     |
 | `--dsn-form-control-width-lg`                 | Large width (32ch)                      |
 | `--dsn-form-control-width-xl`                 | Extra large width (48ch)                |
diff --git a/packages/storybook/src/TextInput.stories.tsx b/packages/storybook/src/TextInput.stories.tsx
@@ -77,8 +77,8 @@ export const Widths: Story = {
   name: 'Width variants',
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <TextInput width="xs" placeholder="xs — 8ch (postcode, CVV)" />
-      <TextInput width="sm" placeholder="sm — 12ch (tijdstip, korte codes)" />
+      <TextInput width="xs" placeholder="xs — 10ch (postcode, CVV)" />
+      <TextInput width="sm" placeholder="sm — 14ch (tijdstip, korte codes)" />
       <TextInput width="md" placeholder="md — 20ch (datum, telefoonnummer)" />
       <TextInput width="lg" placeholder="lg — 32ch (naam, email)" />
       <TextInput width="xl" placeholder="xl — 48ch (URL)" />
diff --git a/packages/storybook/src/TimeInput.docs.md b/packages/storybook/src/TimeInput.docs.md
@@ -4,7 +4,7 @@ Een invoerveld voor tijden met een interactieve klokknop aan de rechterkant.
 
 ## Doel
 
-De TimeInput component is een gespecialiseerd invoerveld voor het invoeren van een tijdstip. Een interactieve klokknop staat rechts in het veld (`inline-end`) en opent de native tijdkiezer van de browser of het mobiele apparaat bij klikken. De `padding-inline-end` van het invoerveld wordt automatisch vergroot zodat tekst nooit achter de knop terechtkomt. Het veld heeft een vaste `sm`-breedte (12ch) — tijdvelden hebben een voorspelbare inhoudsbreedte waarvoor dit altijd voldoende is.
+De TimeInput component is een gespecialiseerd invoerveld voor het invoeren van een tijdstip. Een interactieve klokknop staat rechts in het veld (`inline-end`) en opent de native tijdkiezer van de browser of het mobiele apparaat bij klikken. De `padding-inline-end` van het invoerveld wordt automatisch vergroot zodat tekst nooit achter de knop terechtkomt. Het veld heeft een vaste `sm`-breedte (14ch) — tijdvelden hebben een voorspelbare inhoudsbreedte waarvoor dit altijd voldoende is.
 
 <!-- VOORBEELD -->
 

Original file line number	Diff line number	Diff line change
`@@ -14,11 +14,11 @@`
`14`	`14`	`max-inline-size: var(--dsn-form-control-width-md);`
`15`	`15`	`}`
`16`	`16`
`17`		`-/* Calendar button — centered vertically, positioned at inline-end */`
	`17`	`+/* Calendar button — centered vertically, positioned at inline-end with reduced margin */`
`18`	`18`	`.dsn-date-input__button {`
`19`	`19`	`position: absolute;`
`20`	`20`	`inset-block-start: 50%;`
`21`		`- inset-inline-end: var(--dsn-form-control-padding-inline-end);`
	`21`	`+ inset-inline-end: var(--dsn-date-input-button-inset-inline-end);`
`22`	`22`	`transform: translateY(-50%);`
`23`	`23`	`}`
`24`	`24`