Skip to content

Commit

Permalink
feat(radio-field): add dirty/pristine classes and use it
Browse files Browse the repository at this point in the history
  • Loading branch information
maximedasilva committed Oct 19, 2022
1 parent 15872e3 commit 7187b21
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 25 deletions.
1 change: 1 addition & 0 deletions packages/react/lib/RadioField/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ const RadioField = forwardRef(({
disabled,
invalid: !state.valid,
},
state.dirty ? 'dirty' : 'pristine',
className,
)}
ref={wrapperRef}
Expand Down
50 changes: 25 additions & 25 deletions packages/react/lib/RadioField/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -730,15 +730,15 @@ 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>
`;

exports[`<RadioField /> should render as many options as provided 1`] = `
<div>
<div
class="junipero radio-field"
class="junipero radio-field pristine"
>
<label
class=""
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 7187b21

Please sign in to comment.