[Dialog] make close button adjustable

src/dialog/Dialog.jsx

@@ -1,7 +1,19 @@
+import cx from 'classnames';
 import { Overlay } from '../overlay/Overlay.jsx';
 import style from './dialog.css';
 
-function Dialog ({closeOnEsc = true}, children) {
+function defaultRenderCloseButton () {
+    return '\u2715';
+}
+
+function Dialog (
+    {
+        closeOnEsc = true,
+        renderCloseButton = defaultRenderCloseButton,
+        closeButtonClassName
+    },
+    children
+) {
     function createHandlers (closeDialog) {
         function handleKeyDown ({which}) {
             (which === 27) && closeDialog();
@@ -28,9 +40,13 @@ function Dialog ({closeOnEsc = true}, children) {
         const elementHandlers = closeOnEsc ? createHandlers(closeDialog) : {};
         const {onCreate, onRemove} = elementHandlers;
 
+        const composedCloseButtonClassName = cx(style.close, closeButtonClassName);
+
         return (
             <Overlay oncreate={onCreate} onremove={onRemove} onBackgroundClick={closeDialog}>
-                <button className={style.close} onclick={closeDialog} />
+                <button className={composedCloseButtonClassName} onclick={closeDialog}>
+                    {renderCloseButton()}
+                </button>
 
                 <div className={style.content}>
                     {children}

src/dialog/dialog.css

@@ -15,11 +15,6 @@
     box-shadow: 0 0 3px #666;
 }
 
-.close:after {
-    content: 'x';
-    line-height: 0;
-}
-
 .content {
     overflow-y: auto;
     flex: 1;