1.0.4

* Fixing missing className prop from Checkbox * Updating snapshot tests * Minor test enhancements to support bug fix
atomicpages · Jan 28, 2019 · dae83f4 · dae83f4
1 parent 973b63a
commit dae83f4
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 16 deletions.
diff --git a/docs/src/sections/FAQ.js b/docs/src/sections/FAQ.js
@@ -17,6 +17,7 @@ const scss = `// @import ...
 
 const jsx = `import { Checkbox } from 'pretty-checkbox-react';
 
+// pass a custom className to Checkbox, Radio, or Switch
 <Checkbox className="my-icon"
     icon={<i className="fas fas-question-circle" />}>
     Label
@@ -41,16 +42,14 @@ function FAQ() {
             <Title>FAQ</Title>
             <div className="content">
                 <ol>
-                    <QA title={<>Formik overrides <code>p-icon</code> styles</>}>
-                        If you are using Formik and adding a pretty-checkbox or pretty-checkbox-react component, then you might be seeing visual discrepancies.
-                        We can get around this by using the render prop or child render function exposed by <strong>pretty-react-checkbox</strong>.
+                    <QA title={<> Something is overriding <code>pretty-checkbox</code> styles!</>}>
+                        Sometimes things aren't perfect and styles get messed up. Thankfully, we can fix this easily!
                         The easiest way to get around this is to custom build pretty-checkbox <code>.scss</code> source files.
                         Once you have that in place we need to make a few tweaks.
                         <SyntaxHighlighter language="scss" style={darcula}>{scss}</SyntaxHighlighter>
                         With the magic of using Sass <code>@extends</code> we can essentially "copy" the pretty-checkbox base styles to our own selector.
                         After this, our usage becomes a bit different as well.
                         <SyntaxHighlighter language="jsx" style={darcula}>{jsx}</SyntaxHighlighter>
-                        Formik will still apply styles to <code>p-icon</code>, but the styles shouldn't clash anymore.
                     </QA>
                     <QA title="How can I customize pretty-checkbox state div?">
                         Good question! All components offer <code>render</code> prop and <code>children</code> render function support. It's as easy as this:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pretty-checkbox-react",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Quickly integrate pretty checkbox Components (checkbox, switch, radio) with React",
     "keywords": [
         "Pretty",

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
@@ -17,7 +17,7 @@ export type CheckboxProps = {
 };
 
 function Checkbox(props: CheckboxProps) {
-    const { animation } = props;
+    const { animation, className, ...rest } = props;
 
     if (animation
         && animation !== 'smooth'
@@ -28,11 +28,16 @@ function Checkbox(props: CheckboxProps) {
         throw new Error(`animation '${animation}' is incompatible with default checkbox styles. You must specify an icon, image, or a svg.`);
     }
 
-    return <Input className={classNames(
-        // $ExpectError
-        getBaseClassName(props, PREFIX),
-        props.indeterminate ? 'p-has-indeterminate' : null
-    )} type="checkbox" {...props} />;
+    return (
+        <Input type="checkbox"
+            className={classNames(
+                // $ExpectError
+                getBaseClassName(props, PREFIX),
+                props.indeterminate ? 'p-has-indeterminate' : null,
+                className
+            )}
+            {...rest} />
+    );
 }
 
 export default Checkbox;
diff --git a/src/components/Radio.js b/src/components/Radio.js
@@ -22,9 +22,13 @@ function Radio(props: RadioProps) {
     return (
         <Input
             type="radio"
-            className={classNames(
-                // $ExpectError
-                getBaseClassName(props, PREFIX), className)}
+            className={
+                classNames(
+                    // $ExpectError
+                    getBaseClassName(props, PREFIX),
+                    className
+                )
+            }
             inputProps={{ ...inputProps, name: name }}
             {...rest}
         />

diff --git a/src/components/__tests__/Checkbox.test.js b/src/components/__tests__/Checkbox.test.js
@@ -11,9 +11,12 @@ describe('Checkbox tests', function () {
     describe('Basic Checkbox usage', function () {
         it('should behave as a checkbox', function () {
             const handleChange = jest.fn();
-            const { container } = render(<Checkbox id="foo" onChange={handleChange} />);
+            const { container, debug } = render(<Checkbox className="dummy-selector" id="foo" onChange={handleChange} />);
+
+            debug();
 
             expect(getByTestId(container, 'pcr-input')).toHaveAttribute('type', 'checkbox');
+            expect(getByTestId(container, 'pcr-wrapper')).toHaveClass('dummy-selector');
 
             fireEvent.click(getByTestId(container, 'pcr-input'));
 

diff --git a/src/components/__tests__/__snapshots__/Checkbox.test.js.snap b/src/components/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox tests Basic Checkbox usage should behave as a checkbox 1`] = `
 <div>
   <div
-    class="pretty p-default"
+    class="pretty p-default dummy-selector"
     data-testid="pcr-wrapper"
   >
     <input