Uploaded image for project: 'Stripes'
  1. Stripes
  2. STRIPES-559

Keyboard shortcut/command system.



    • New Feature
    • Status: Closed (View Workflow)
    • P3
    • Resolution: Done
    • None
    • None
    • None
    • stripes force Sprint 49


      Shortcuts and commands in stripes

      Facilitate creation of efficient UI's by providing facilities for developers to declaratively add keyboard shortcuts to their FOLIO modules.

      The good part

      They're a satisfying layer of efficiency that any desktop application needs. Keyboard commands in js are as simple as callbacks. Any relevant javascript function can be called.

      The problems

      Keyboard commands in js are as simple as callbacks. In ui with branching workflow paths, they could potentially be a mess to track and maintain.
      Since there's a sizeable keyboard footprint that's already taken up by web browsers, operating systems, and screen-readers, web apps are at a mild disadvantage for establishing their own hotkey combinations.
      Shortcuts for web-apps can be a challenge to learn, since their reference is often kept out of the way - this can make it difficult for new users and for users of assistive technology to discover how to use modules in the most efficient way.
      As shortcuts are added to deeper workflows, there's a threat that shortcuts overlap, which could create usability issues.


      <CommandRegister> component that can register multiple shortcuts with the core of stripes that leverages the rendering context of react - setting up commands when pages or sections of a workflow mount and tearing them down when the section dismounts. Debug output for registering commands can assist developers by warning them if their hopeful shortcut key is already in use by another command or overlaps with the shortcuts of the browser.
      Centralized <CommandPanel> modal that allows for users to see all of the currently available commands (most with shortcut keys involved). Putting these items all in one place can amp up the discoverability of advanced controls. Ideally, this modal is summoned with a single shortcut (tentatively ctrl+space) - so all current shortcuts can be discovered through this single gateway shortcut. (see attached gif for a command panel POC in action)
      <CommandLabel> and <CommandKey> components that access the central shortcut registry and render the labels and commands associated with a particular shortcut's id. This provides more facility for discoverability when ui-module authors can declaratively place their labels and corresponding hotkey combinations without needing them to be in nearby scope within their code.

      Once there are systems in place for tenants/users to edit and define custom hotkey combinations, such a system of fetching dynamic shortcut combinations or labels from the system would be ideal.

      Questions/decision points

      Best place to house/export these components (this may be mute as we move towards a framework structure.) The centralized structure makes me think stripes-core at the moment.

      TestRail: Results


          Issue Links



                kgambrell Khalilah Gambrell
                JohnC John Coburn
                0 Vote for this issue
                5 Start watching this issue



                  TestRail: Runs

                    TestRail: Cases