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

@@ -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>
   );
 });

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;
+}

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={() => {