From f8a41cee16081f1caac2bef13edea9e48b202216 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 1 Feb 2020 17:31:28 +0000
Subject: [PATCH] Add keybindings for shapes (#648)

* Add keybindings for shapes

I'm not 100% sure about this one. I feel like it's going to help people be a lot more productive to display the key bindings at all time. But it also clutters the UI...

* increase font-size

* fix shape keybindings for non-qwerty keyboards

* tweak position and color

Co-authored-by: David Luzar <luzar.david@gmail.com>
---
 src/components/ToolButton.tsx | 8 +++++++-
 src/components/ToolIcon.scss  | 9 +++++++++
 src/index.tsx                 | 2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/ToolButton.tsx b/src/components/ToolButton.tsx
index 6e401a02..120a3f83 100644
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -13,6 +13,7 @@ type ToolButtonBaseProps = {
   name?: string;
   id?: string;
   size?: ToolIconSize;
+  keyBindingLabel?: string;
 };
 
 type ToolButtonProps =
@@ -63,7 +64,12 @@ export const ToolButton = React.forwardRef(function(
         checked={props.checked}
         ref={innerRef}
       />
-      <div className="ToolIcon__icon">{props.icon}</div>
+      <div className="ToolIcon__icon">
+        {props.icon}
+        {props.keyBindingLabel && (
+          <span className="ToolIcon__keybinding">{props.keyBindingLabel}</span>
+        )}
+      </div>
     </label>
   );
 });
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 5f054504..c1281843 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -83,3 +83,12 @@
     box-shadow: none;
   }
 }
+
+.ToolIcon__keybinding {
+  position: absolute;
+  bottom: 2px;
+  right: 3px;
+  font-size: 0.5em;
+  color: #adb5bd; // OC GRAY 5
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 2d46022c..55cc28bc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -374,7 +374,6 @@ export class App extends React.Component<any, AppState> {
     } else if (
       shapesShortcutKeys.includes(event.key.toLowerCase()) &&
       !event.ctrlKey &&
-      !event.shiftKey &&
       !event.altKey &&
       !event.metaKey &&
       this.state.draggingElement === null
@@ -564,6 +563,7 @@ export class App extends React.Component<any, AppState> {
               title={`${capitalizeString(label)} — ${
                 capitalizeString(value)[0]
               }, ${index + 1}`}
+              keyBindingLabel={`${index + 1}`}
               aria-label={capitalizeString(label)}
               aria-keyshortcuts={`${label[0]} ${index + 1}`}
               onChange={() => {