From 7187b219828c46826426ecd4838f62d95575b995 Mon Sep 17 00:00:00 2001
From: Maxime Da Silva <maximed@poool.fr>
Date: Thu, 13 Oct 2022 17:55:00 +0200
Subject: [PATCH] feat(radio-field): add dirty/pristine classes and use it

---
 packages/react/lib/RadioField/index.js        |  1 +
 .../react/lib/RadioField/index.test.js.snap   | 50 +++++++++----------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/react/lib/RadioField/index.js b/packages/react/lib/RadioField/index.js
index 671976173..bc20de700 100644
--- a/packages/react/lib/RadioField/index.js
+++ b/packages/react/lib/RadioField/index.js
@@ -116,6 +116,7 @@ const RadioField = forwardRef(({
           disabled,
           invalid: !state.valid,
         },
+        state.dirty ? 'dirty' : 'pristine',
         className,
       )}
       ref={wrapperRef}
diff --git a/packages/react/lib/RadioField/index.test.js.snap b/packages/react/lib/RadioField/index.test.js.snap
index 9134e9aec..b517117e1 100644
--- a/packages/react/lib/RadioField/index.test.js.snap
+++ b/packages/react/lib/RadioField/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<RadioField /> should add box if boxed class has been passed to Radio 1`] = `
 <div>
   <div
-    class="junipero radio-field boxed"
+    class="junipero radio-field pristine boxed"
   >
     <label
       class="checked"
@@ -57,7 +57,7 @@ exports[`<RadioField /> should add box if boxed class has been passed to Radio 1
 exports[`<RadioField /> should change options if options props change accross the time: firm options 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class=""
@@ -158,7 +158,7 @@ exports[`<RadioField /> should change options if options props change accross th
 exports[`<RadioField /> should change options if options props change accross the time: fruits options 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class=""
@@ -236,7 +236,7 @@ exports[`<RadioField /> should change options if options props change accross th
 exports[`<RadioField /> should change value if value prop change accross the time: orange checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class=""
@@ -315,7 +315,7 @@ exports[`<RadioField /> should change value if value prop change accross the tim
 exports[`<RadioField /> should change value if value prop change accross the time: peach checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -394,7 +394,7 @@ exports[`<RadioField /> should change value if value prop change accross the tim
 exports[`<RadioField /> should check if provided value is in options 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -448,7 +448,7 @@ exports[`<RadioField /> should check if provided value is in options 1`] = `
 exports[`<RadioField /> should not display description if parseDescription return empty string 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class=""
@@ -479,7 +479,7 @@ exports[`<RadioField /> should not display description if parseDescription retur
 exports[`<RadioField /> should not set error state if field is not required with default validate function: valid 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field dirty"
   >
     <label
       class="checked"
@@ -510,7 +510,7 @@ exports[`<RadioField /> should not set error state if field is not required with
 exports[`<RadioField /> should not trigger onChange if a radio if just this option is disabled: option 1 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -566,7 +566,7 @@ exports[`<RadioField /> should not trigger onChange if a radio if just this opti
 exports[`<RadioField /> should not trigger onChange if a radio if just this option is disabled: option 1 checked again 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -622,7 +622,7 @@ exports[`<RadioField /> should not trigger onChange if a radio if just this opti
 exports[`<RadioField /> should not trigger onChange if a radio is clicked but its disabled: option 1 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field disabled"
+    class="junipero radio-field disabled pristine"
   >
     <label
       class="checked disabled"
@@ -676,7 +676,7 @@ exports[`<RadioField /> should not trigger onChange if a radio is clicked but it
 exports[`<RadioField /> should not trigger onChange if a radio is clicked but its disabled: option 1 checked again 1`] = `
 <div>
   <div
-    class="junipero radio-field disabled"
+    class="junipero radio-field disabled pristine"
   >
     <label
       class="checked disabled"
@@ -730,7 +730,7 @@ exports[`<RadioField /> should not trigger onChange if a radio is clicked but it
 exports[`<RadioField /> should render 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   />
 </div>
 `;
@@ -738,7 +738,7 @@ exports[`<RadioField /> should render 1`] = `
 exports[`<RadioField /> should render as many options as provided 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class=""
@@ -835,7 +835,7 @@ exports[`<RadioField /> should render as many options as provided 1`] = `
 exports[`<RadioField /> should set error state if field is required with default validate function: invalid 1`] = `
 <div>
   <div
-    class="junipero radio-field invalid"
+    class="junipero radio-field invalid dirty"
   >
     <label
       class="checked"
@@ -866,7 +866,7 @@ exports[`<RadioField /> should set error state if field is required with default
 exports[`<RadioField /> should set error state if onValidate function fails: invalid 1`] = `
 <div>
   <div
-    class="junipero radio-field invalid"
+    class="junipero radio-field invalid dirty"
   >
     <label
       class=""
@@ -922,7 +922,7 @@ exports[`<RadioField /> should set error state if onValidate function fails: inv
 exports[`<RadioField /> should set error state if onValidate function fails: option 1 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -978,7 +978,7 @@ exports[`<RadioField /> should set error state if onValidate function fails: opt
 exports[`<RadioField /> should set error state if onValidate function fails: valid 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field dirty"
   >
     <label
       class="checked"
@@ -1034,7 +1034,7 @@ exports[`<RadioField /> should set error state if onValidate function fails: val
 exports[`<RadioField /> should toggle check if a radio is clicked: option 1 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -1088,7 +1088,7 @@ exports[`<RadioField /> should toggle check if a radio is clicked: option 1 chec
 exports[`<RadioField /> should toggle check if a radio is clicked: option 2 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field dirty"
   >
     <label
       class=""
@@ -1142,7 +1142,7 @@ exports[`<RadioField /> should toggle check if a radio is clicked: option 2 chec
 exports[`<RadioField /> should trigger onChange when user hit enter and radio is focused: option 1 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -1196,7 +1196,7 @@ exports[`<RadioField /> should trigger onChange when user hit enter and radio is
 exports[`<RadioField /> should trigger onChange when user hit enter and radio is focused: option 2 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field dirty"
   >
     <label
       class=""
@@ -1250,7 +1250,7 @@ exports[`<RadioField /> should trigger onChange when user hit enter and radio is
 exports[`<RadioField /> should trigger onChange when user hit space and radio is focused: option 1 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"
@@ -1304,7 +1304,7 @@ exports[`<RadioField /> should trigger onChange when user hit space and radio is
 exports[`<RadioField /> should trigger onChange when user hit space and radio is focused: option 2 checked 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field dirty"
   >
     <label
       class=""
@@ -1358,7 +1358,7 @@ exports[`<RadioField /> should trigger onChange when user hit space and radio is
 exports[`<RadioField /> should use given parse title, description and value if function are provided 1`] = `
 <div>
   <div
-    class="junipero radio-field"
+    class="junipero radio-field pristine"
   >
     <label
       class="checked"