feat(textfield): allow custom radius with CSS var (#812)

Finastra · Jul 30, 2022 · 6528d1a · 6528d1a
1 parent bb4d556
commit 6528d1a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git 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
@@ -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.