From 6528d1a70765dd948decabb430ed380f0bfdf60a Mon Sep 17 00:00:00 2001
From: Thomas TALBOT <thomas.talbot@finastra.com>
Date: Sat, 30 Jul 2022 13:16:02 +0200
Subject: [PATCH] feat(textfield): allow custom radius with CSS var (#812)

---
 libs/web-components/textfield/src/styles.scss  | 6 ++----
 libs/web-components/textfield/src/textfield.ts | 1 +
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/libs/web-components/textfield/src/styles.scss b/libs/web-components/textfield/src/styles.scss
index cded6685b..613346299 100644
--- a/libs/web-components/textfield/src/styles.scss
+++ b/libs/web-components/textfield/src/styles.scss
@@ -5,10 +5,7 @@
 $textfield-icon-color: var(--fds-primary, #694ed6);
 $textfield-icon-trailing-color: var(--fds-on-surface-medium, color.change(#000, $alpha: 0.54));
 
-
-
 :host {
-  padding-top: 24px;
   display: block;
   @include fds.mdc(theme-primary, primary);
   @include fds.mdc(theme-error, error);
@@ -28,7 +25,7 @@ $textfield-icon-trailing-color: var(--fds-on-surface-medium, color.change(#000,
     max-width: 100%;
     border-style: solid;
     border-width: 1px;
-    border-radius: 4px;
+    border-radius: var(--fds-text-field-radius, 4px);
     pointer-events: none;
   }
 
@@ -79,6 +76,7 @@ $textfield-icon-trailing-color: var(--fds-on-surface-medium, color.change(#000,
 
   .mdc-text-field--outlined {
     @include fds.bg-color(surface);
+    border-radius: var(--fds-text-field-radius, 4px);
     height: 48px;
   }
 
diff --git a/libs/web-components/textfield/src/textfield.ts b/libs/web-components/textfield/src/textfield.ts
index e247648b5..ebc73e137 100644
--- a/libs/web-components/textfield/src/textfield.ts
+++ b/libs/web-components/textfield/src/textfield.ts
@@ -9,6 +9,7 @@ import { styles } from './styles.css';
  * @cssprop {color} [--fds-primary=#694ED6] - Textfield color
  * @cssprop {color} [--fds-icon-color=#694ED6] - Icon color.
  * @cssprop {color} [--fds-icon-trailing-color=#694ED6] - Icon trailing color.
+ * @cssprop {text} [--fds-text-field-radius=4px] - Border radius of the outline.
  * @attr [label='textfield'] - Sets floating label value.
  * @attr [placeholder='textfield'] - Sets placeholder value displayed when input is empty.
  * @attr [required=false] - Displays error state if value is empty and input is blurred.