feat: avoid ligatures in URL input

nl-design-system · Oct 16, 2021 · 4120e05 · 4120e05
1 parent 54e3e1e
commit 4120e05
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/components/textbox/bem.scss b/components/textbox/bem.scss
@@ -127,6 +127,10 @@
   font-variant-numeric: slashed-zero;
 }
 
+.utrecht-textbox--url {
+  font-variant-ligatures: none;
+}
+
 .utrecht-textbox--html-input {
   &:disabled {
     @extend .utrecht-textbox--disabled;

diff --git a/components/textbox/html.scss b/components/textbox/html.scss
@@ -28,6 +28,10 @@
     @extend .utrecht-textbox--password;
   }
 
+  input[type="url" i] {
+    @extend .utrecht-textbox--url;
+  }
+
   input[autocomplete~="bday" i],
   input[autocomplete~="bday-day" i],
   input[autocomplete~="bday-month" i],

diff --git a/components/textbox/html.stories.mdx b/components/textbox/html.stories.mdx
@@ -204,6 +204,20 @@ Styling via the `<input>` element:
   </Story>
 </Canvas>
 
+## URL input
+
+<Canvas>
+  <Story
+    name="URL input"
+    args={{
+      type: "url",
+      value: "https://example.fi/",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ## Placeholder
 
 <Canvas>