Forward custom icon to undo/redo toolbar buttons

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 > Documentation: [draftail.org/docs/next/getting-started](https://www.draftail.org/docs/next/getting-started)
 
+### Fixed
+
+- Fix undo/redo button icons not being customisable ([#195](https://github.com/springload/draftail/issues/195), [#196](https://github.com/springload/draftail/pull/196)).
+
 ## [[v1.2.1]](https://github.com/springload/draftail/releases/tag/v1.2.1)
 
 > Documentation: [draftail.org/docs/getting-started](https://www.draftail.org/docs/getting-started)

examples/constants/ui.js

@@ -19,6 +19,10 @@ export const EMBED_ICON = <FontIcon icon="embed" />;
 
 export const BR_ICON =
   "M.436 633.471l296.897-296.898v241.823h616.586V94.117h109.517v593.796H297.333v242.456z";
+export const UNDO_ICON =
+  "M496.485 78c-137.092 0-261.213 55.575-351.046 145.439L.031 78v372.364h372.364L233.224 311.193c67.398-67.398 160.488-109.072 263.292-109.072 205.638 0 372.364 166.726 372.364 372.364 0 111.212-48.78 211.037-126.077 279.273l82.107 93.09C927.992 855.868 993 722.778 993 574.485 993 300.27 770.73 78 496.517 78h-.031z";
+export const REDO_ICON =
+  "M0 576c0 152.928 67.04 290.176 173.344 384l84.672-96C178.304 793.632 128 690.688 128 576c0-212.064 171.936-384 384-384 106.048 0 202.048 42.976 271.52 112.48L640 448h384V64L874.016 213.984C781.376 121.312 653.376 64 512 64 229.216 64 0 293.216 0 576z";
 
 export const INLINE_CONTROL = {
   BOLD: { type: INLINE_STYLE.BOLD, icon: "#icon-bold" },

examples/docs.story.js

@@ -13,6 +13,8 @@ import {
   ENTITY_CONTROL,
   REDACTED_STYLE,
   BR_ICON,
+  UNDO_ICON,
+  REDO_ICON,
 } from "./constants/ui";
 
 import EditorWrapper from "./components/EditorWrapper";
@@ -318,6 +320,12 @@ storiesOf("Docs", module)
         REDACTED_STYLE,
       ]}
       entityTypes={[ENTITY_CONTROL.EMBED]}
+      showUndoControl={{
+        icon: UNDO_ICON,
+      }}
+      showRedoControl={{
+        icon: REDO_ICON,
+      }}
     />
   ))
   .add("i18n", () => {

examples/examples.story.js

@@ -7,6 +7,8 @@ import {
   BLOCK_CONTROL,
   ENTITY_CONTROL,
   BR_ICON,
+  UNDO_ICON,
+  REDO_ICON,
   TINY_TEXT_BLOCK,
   REDACTED_STYLE,
 } from "./constants/ui";
@@ -106,9 +108,11 @@ storiesOf("Examples", module)
       }}
       showUndoControl={{
         description: "Undo last change",
+        icon: UNDO_ICON,
       }}
       showRedoControl={{
         description: "Redo last change",
+        icon: REDO_ICON,
       }}
       maxListNesting={6}
       blockTypes={Object.values(BLOCK_CONTROL)}

lib/components/ToolbarDefaults.js

@@ -185,6 +185,9 @@ class ToolbarDefaults extends PureComponent<ToolbarDefaultProps> {
             onClick={onUndoRedo}
             label={getButtonLabel(UNDO_TYPE, showUndoControl)}
             title={getButtonTitle(UNDO_TYPE, showUndoControl)}
+            icon={
+              typeof showUndoControl !== "boolean" ? showUndoControl.icon : null
+            }
           />
         ) : null}
 
@@ -194,6 +197,9 @@ class ToolbarDefaults extends PureComponent<ToolbarDefaultProps> {
             onClick={onUndoRedo}
             label={getButtonLabel(REDO_TYPE, showRedoControl)}
             title={getButtonTitle(REDO_TYPE, showRedoControl)}
+            icon={
+              typeof showRedoControl !== "boolean" ? showRedoControl.icon : null
+            }
           />
         ) : null}
       </ToolbarGroup>,

lib/components/__snapshots__/ToolbarDefaults.test.js.snap

@@ -768,7 +768,7 @@ exports[`ToolbarDefaults #showRedoControl control overrides 1`] = `
     >
       <ToolbarButton
         active={false}
-        icon={null}
+        icon="#icon-redo"
         label="Redo"
         name="redo"
         onClick={[Function]}
@@ -786,6 +786,25 @@ Ctrl + ⇧ + Z"
           tabIndex={-1}
           type="button"
         >
+          <Icon
+            className={null}
+            icon="#icon-redo"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-label={null}
+              className="Draftail-Icon "
+              height="16"
+              role={null}
+              viewBox="0 0 1024 1024"
+              width="16"
+            >
+              <use
+                xlinkHref="#icon-redo"
+              />
+            </svg>
+          </Icon>
           <span
             className="Draftail-ToolbarButton__label"
           >
@@ -910,7 +929,7 @@ exports[`ToolbarDefaults #showUndoControl control overrides 1`] = `
     >
       <ToolbarButton
         active={false}
-        icon={null}
+        icon="#icon-undo"
         label="Undo"
         name="undo"
         onClick={[Function]}
@@ -928,6 +947,25 @@ Ctrl + Z"
           tabIndex={-1}
           type="button"
         >
+          <Icon
+            className={null}
+            icon="#icon-undo"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-label={null}
+              className="Draftail-Icon "
+              height="16"
+              role={null}
+              viewBox="0 0 1024 1024"
+              width="16"
+            >
+              <use
+                xlinkHref="#icon-undo"
+              />
+            </svg>
+          </Icon>
           <span
             className="Draftail-ToolbarButton__label"
           >