From 8e7300b92c06b22b03cc3ae0c7eb39d7aec2d003 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 8 Mar 2024 17:14:27 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20add=20border-radius=20tra?=
 =?UTF-8?q?nsition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This transition was not working, now this provides are smoother effect.

Closes #112
---
 .changeset/smooth-starfishes-suffer.md                     | 5 +++++
 packages/react/src/components/Forms/DatePicker/_index.scss | 2 +-
 packages/react/src/components/Forms/Input/_index.scss      | 2 +-
 packages/react/src/components/Forms/Select/_index.scss     | 2 +-
 packages/react/src/components/Forms/TextArea/index.scss    | 2 +-
 5 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/smooth-starfishes-suffer.md

diff --git a/.changeset/smooth-starfishes-suffer.md b/.changeset/smooth-starfishes-suffer.md
new file mode 100644
index 0000000..3cc5187
--- /dev/null
+++ b/.changeset/smooth-starfishes-suffer.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add border-radius transition
diff --git a/packages/react/src/components/Forms/DatePicker/_index.scss b/packages/react/src/components/Forms/DatePicker/_index.scss
index 041cb7f..33d8377 100644
--- a/packages/react/src/components/Forms/DatePicker/_index.scss
+++ b/packages/react/src/components/Forms/DatePicker/_index.scss
@@ -11,7 +11,7 @@
     border-color: var(--c--components--forms-datepicker--border-color);
     border-style: var(--c--components--forms-datepicker--border-style);
     display: flex;
-    transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
     box-sizing: border-box;
diff --git a/packages/react/src/components/Forms/Input/_index.scss b/packages/react/src/components/Forms/Input/_index.scss
index 8f68142..944d66a 100644
--- a/packages/react/src/components/Forms/Input/_index.scss
+++ b/packages/react/src/components/Forms/Input/_index.scss
@@ -5,7 +5,7 @@
   border-style: var(--c--components--forms-input--border-style);
   background-color: var(--c--components--forms-input--background-color);
   display: flex;
-  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
   padding: 0 1rem;
   gap: 1rem;
   cursor: text;
diff --git a/packages/react/src/components/Forms/Select/_index.scss b/packages/react/src/components/Forms/Select/_index.scss
index 987911c..b579853 100644
--- a/packages/react/src/components/Forms/Select/_index.scss
+++ b/packages/react/src/components/Forms/Select/_index.scss
@@ -9,7 +9,7 @@
     border-color: var(--c--components--forms-select--border-color);
     border-style: var(--c--components--forms-select--border-style);
     display: flex;
-    transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
     box-sizing: border-box;
diff --git a/packages/react/src/components/Forms/TextArea/index.scss b/packages/react/src/components/Forms/TextArea/index.scss
index 9df8c54..36da5a7 100644
--- a/packages/react/src/components/Forms/TextArea/index.scss
+++ b/packages/react/src/components/Forms/TextArea/index.scss
@@ -13,7 +13,7 @@
   border-color: var(--c--components--forms-textarea--border-color);
   border-style: var(--c--components--forms-textarea--border-style);
   background-color: var(--c--components--forms-textarea--background-color);
-  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
   overflow: hidden;
 
   .labelled-box__label {