Merge 21d1cd6 into 30e1d59

src/tag/tag.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import type { DOMComponent } from '../bem-helper-types';
-import { pick } from '../utils';
+import { pick, stringifyBooleanProps } from '../utils';
 
 const KNOWN_KEYS = ['key', 'className', 'children'];
 
@@ -17,7 +17,7 @@ export function tag(tagName: string): <Attrs: {}>(attrs?: Attrs) => DOMComponent
         const Tag = props =>
             React.createElement(tagName, {
                 ...attrs,
-                ...prune(props),
+                ...prune(stringifyBooleanProps(props)),
             });
         Tag.displayName = `tag(${tagName})`;
         return Tag;

src/utils/index.js

@@ -5,3 +5,4 @@ export { decapitalize } from './decapitalize';
 export { kebabCase } from './kebab-case';
 export { kebabToCamelCase } from './kebab-to-camel-case';
 export { classNamesList } from './class-names-list';
+export { stringifyBooleanProps } from './stringify-boolean-props';

src/utils/stringify-boolean-props.js

@@ -0,0 +1,13 @@
+// @flow
+
+const BOOLEAN_DOM_ATTRIBUTES = ['checked', 'selected', 'disabled', 'readonly', 'multiple', 'ismap'];
+
+export function stringifyBooleanProps(obj?: {} = {}): { [string]: mixed } {
+    return Object.entries(obj).reduce(
+        (acc, [key, value]) =>
+            (typeof obj[key] === 'boolean' && !BOOLEAN_DOM_ATTRIBUTES.includes(key)
+                ? { ...acc, [key]: String(value) }
+                : { ...acc, [key]: value }),
+        {},
+    );
+}

src/utils/stringify-boolean-props.spec.jsx

@@ -0,0 +1,25 @@
+// @flow
+import { stringifyBooleanProps } from './stringify-boolean-props';
+
+describe('stringifyBooleanProps', () => {
+    it('should transform boolean properties to string', () => {
+        expect(stringifyBooleanProps({ foo: true })).toEqual({ foo: 'true' });
+        expect(stringifyBooleanProps({ foo: true, bar: 1 })).toEqual({
+            foo: 'true',
+            bar: 1,
+        });
+    });
+
+    it('should NOT transform standard boolean DOM attributes', () => {
+        expect(stringifyBooleanProps({ foo: true, checked: true, disabled: false })).toEqual({
+            foo: 'true',
+            checked: true,
+            disabled: false,
+        });
+    });
+
+    it('should return object literal if null provided', () => {
+        expect(stringifyBooleanProps(undefined)).toEqual({});
+        expect(stringifyBooleanProps({})).toEqual({});
+    });
+});