refactor: use mixins for texbox value sizing

nl-design-system · May 19, 2024 · c06bfb2 · c06bfb2
1 parent ef56849
commit c06bfb2
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 56 deletions.
diff --git a/components/textbox/_iban.md b/components/textbox/_iban.md
@@ -1,11 +1,10 @@
 <!-- @license CC0-1.0 -->
 <!-- markdownlint-disable MD041 -->
 
-In 2024 hebben we het opgezocht: Wat de langste iban is in de wereld en die is van Rusland, die is 33 tekens lang.
+In 2024 hebben we het opgezocht, de langste IBAN in de wereld is in Rusland: 33 tekens.
 
-Gebruik voor als maximumlengte 41 characters voor het invoer van de internationale iban. Dat is omdat als je een iban leesbaar invuld je na elke 4 tekens een spatie toevoegd.
+Gebruik daarom als maximumlengte 41 tekens voor de invoer van de internationale IBAN,r dan heb je genoeg ruimte voor de langste IBAN en spaties voor leesbaarheid, die helpen met de invoer controleren.
 
-Bij een Nederlandse iban invoer veld wil je 22 tekens gebruiken.
+Gebruik voor een Nederlandse IBAN invoer 22 tekens gebruiken: 18 tekens plus 4 spaties.
 
-- [Iban volgens iban.com](https://www.iban.com/structure).
-- [Iban volgens wikipedia](https://en.wikipedia.org/wiki/International_Bank_Account_Number).
+Zie ook: [IBAN op Wikipedia](https://en.wikipedia.org/wiki/International_Bank_Account_Number).
diff --git a/components/textbox/css/_mixin.scss b/components/textbox/css/_mixin.scss
@@ -9,9 +9,28 @@
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
 /* stylelint-disable order/properties-alphabetical-order */
 @mixin utrecht-textbox {
-  --_utrecht-textbox-max-inline-size: var(
-    --utrecht-textbox-max-inline-size,
-    var(--utrecht-form-control-max-inline-size)
+  /* The average character inline-size is an approximation, with a default that works for Dutch text.
+   * The average might need to be configured specifically, for other scripts (CJK characters)
+   * and very wide or very narrow fonts.
+   * For monospace fonts it can be set to `1ch`.
+   */
+  --_utrecht-textbox-value-char: 0.667em + 0.334ch;
+
+  /* Because this element uses `border-box` box-sizing, we need to manually add up the
+    * border width, padding width and the content width.
+    * 
+    * Browsers and browser addons can add buttons inside the content box, for example
+    * for autocomplete. To avoid overlap between the UI and the text, we reserve
+    * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
+    * 
+    * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
+    */
+  --_utrecht-textbox-max-inline-size: calc(
+    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
+      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
+      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
+      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
+      var(--utrecht-textbox-autocomplete-ui-size, 44px)
   );
 
   background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
@@ -33,7 +52,10 @@
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-pointer-target-min-size, 44px);
   min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
-  max-inline-size: var(--_utrecht-textbox-max-inline-size);
+  max-inline-size: min(
+    var(--_utrecht-textbox-max-inline-size, 100%),
+    var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size))
+  );
   padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(
@@ -243,3 +265,50 @@
     @include utrecht-textbox__placeholder;
   }
 }
+
+@mixin utrecht-textbox--postal-code-nl-size {
+  /* Dutch postal code: 4 numbers, 1 space and 2 letters */
+  --utrecht-textbox-value-max-length: 7;
+}
+
+@mixin utrecht-textbox--house-number-size {
+  /* Dutch house number is 99999 at most: 5 numbers */
+  --utrecht-textbox-value-max-length: 5;
+}
+
+@mixin utrecht-textbox--house-letter-size {
+  /* Dutch house letter is 1 letter */
+  --utrecht-textbox-value-max-length: 1;
+}
+
+@mixin utrecht-textbox--house-addition-size {
+  /* Dutch house addition is optional, between 1 and 4 alphanumeric characters */
+  --utrecht-textbox-value-max-length: 4;
+}
+
+@mixin utrecht-textbox--voorvoegsel-size {
+  /* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
+   * of all allowed values. The longest value is 10 characters.
+   * The class name is in Dutch because it is a Dutch concept. */
+  --utrecht-textbox-value-max-length: 10;
+}
+
+@mixin utrecht-textbox--tel-size {
+  /* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
+  --utrecht-textbox-value-max-length: 19;
+}
+
+@mixin utrecht-textbox--tel-nl-size {
+  /* Dutch telephone number: 10 number, typically with at most 3 spaces */
+  --utrecht-textbox-value-max-length: 13;
+}
+
+@mixin utrecht-textbox--iban-size {
+  /* Maximum IBAN: 33 characters, plus 8 spaces (one space after every 4 characters) */
+  --utrecht-textbox-value-max-length: 41;
+}
+
+@mixin utrecht-textbox--iban-nl-size {
+  /* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
+  --utrecht-textbox-value-max-length: 22;
+}
diff --git a/components/textbox/css/index.scss b/components/textbox/css/index.scss
@@ -43,64 +43,40 @@
   @include utrecht-textbox--password;
 }
 
-.utrecht-textbox--size {
-  --_utrecht-textbox-max-inline-size: calc(
-    calc(var(--utrecht-textbox-max-length) * 0.667em + 0.334ch) +
-      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
-      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
-      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0))
-  );
-}
-
-.utrecht-textbox--postal-code-size {
-  @extend .utrecht-textbox--size;
-
-  --utrecht-textbox-max-length: 7;
+.utrecht-textbox--postal-code-nl-size {
+  @include utrecht-textbox--postal-code-nl-size;
 }
 
 .utrecht-textbox--house-number-size {
-  @extend .utrecht-textbox--size;
-
-  --utrecht-textbox-max-length: 5;
+  @include utrecht-textbox--house-number-size;
 }
 
 .utrecht-textbox--house-letter-size {
-  @extend .utrecht-textbox--size;
-
-  --utrecht-textbox-max-length: 1;
+  @include utrecht-textbox--house-letter-size;
 }
 
 .utrecht-textbox--house-addition-size {
-  @extend .utrecht-textbox--size;
-
-  --utrecht-textbox-max-length: 4;
+  @include utrecht-textbox--house-addition-size;
 }
 
-.utrecht-textbox--prefix-name-size {
-  @extend .utrecht-textbox--size;
-
-  --utrecht-textbox-max-length: 12;
+.utrecht-textbox--voorvoegsel-size {
+  @include utrecht-textbox--voorvoegsel-size;
 }
-.utrecht-textbox--phone-number-size {
-  @extend .utrecht-textbox--size;
 
-  --utrecht-textbox-max-length: 16;
+.utrecht-textbox--tel-size {
+  @include utrecht-textbox--tel-size;
 }
 
-.utrecht-textbox--phone-number-nl-size {
-  @extend .utrecht-textbox--size;
-
-  --utrecht-textbox-max-length: 13;
+.utrecht-textbox--tel-nl-size {
+  @include utrecht-textbox--tel-nl-size;
 }
-.utrecht-textbox--iban-size {
-  @extend .utrecht-textbox--size;
 
-  --utrecht-textbox-max-length: 41;
+.utrecht-textbox--iban-size {
+  @include utrecht-textbox--iban-size;
 }
-.utrecht-textbox--iban-nl-size {
-  @extend .utrecht-textbox--size;
 
-  --utrecht-textbox-max-length: 22;
+.utrecht-textbox--iban-nl-size {
+  @include utrecht-textbox--iban-nl-size;
 }
 
 /**

diff --git a/packages/storybook-css/src/Textbox.stories.tsx b/packages/storybook-css/src/Textbox.stories.tsx
@@ -267,7 +267,7 @@ export const AutocompleteVoorvoegsel: Story = {
     autoComplete: 'name-prefix',
     spellCheck: 'false',
     value: 'van der',
-    className: 'utrecht-textbox--prefix-name-size',
+    className: 'utrecht-textbox--voorvoegsel-size',
   },
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -285,7 +285,7 @@ export const AutocompletePostcode: Story = {
     autoComplete: 'postal-code',
     spellCheck: 'false',
     value: '3521 AZ',
-    className: 'utrecht-textbox--postal-code-size',
+    className: 'utrecht-textbox--postal-code-nl-size',
   },
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -304,7 +304,7 @@ export const AutocompleteTelefoonnummer: Story = {
     type: 'tel',
     spellCheck: 'false',
     value: '+31 30 286 00 00',
-    className: 'utrecht-textbox--phone-number-size',
+    className: 'utrecht-textbox--tel-size',
   },
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -319,11 +319,11 @@ export const AutocompleteTelefoonnummer: Story = {
 export const AutocompleteTelefoonnummerNational: Story = {
   name: 'Telefoonnummer (in Nederland)',
   args: {
-    autoComplete: 'tel',
-    type: 'tel-national',
+    autoComplete: 'tel-national',
+    type: 'tel',
     spellCheck: 'false',
     value: '030 286 00 00',
-    className: 'utrecht-textbox--phone-number-nl-size',
+    className: 'utrecht-textbox--tel-nl-size',
   },
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -531,7 +531,7 @@ export const StraatnaamInNederland: Story = {
 };
 
 export const Iban: Story = {
-  name: 'Iban (Internationaal)',
+  name: 'IBAN (Internationaal)',
   args: {
     value: 'NL02 ABNA 0123 4567 89',
     className: 'utrecht-textbox--iban-size',
@@ -549,7 +549,7 @@ export const Iban: Story = {
   },
 };
 export const IbanNederland: Story = {
-  name: 'Iban (in Nederland)',
+  name: 'IBAN (in Nederland)',
   args: {
     value: 'NL02 ABNA 0123 4567 89',
     className: 'utrecht-textbox--iban-nl-size',