Update input move boxes for better UX experience

• Type: Bug
• Status: Closed
• Resolution: Won't Fix
• Affects Version/s: 7.0.X, 7.1.X, Master
• Fix Version/s: Master
• Component/s: Frontend Infrastructure
• Labels:
  • QUARANTINE_TEST
• Fix Priority: 3
• Epic Link: Lexicon Components
• Sprint: Track 4 - Babe I’m Gonna Leave, Track 5 - Good Times Bad Times
• Git Pull Request: https://github.com/jbalsas/liferay-portal/pull/1762

Activate and Assign Priority Component needs to reinforce the feedback for the end user.

Here are the changes that Lexicon wants to do in this pattern

General Changes:

1. Arrow buttons must always stay visible.
2. Arrow buttons must be active only when the focus is set in the list
   1. On Left List Focus 
      1.  Left arrow button
         1. Always disabled
      2. Right arrow button
         1. list.count > 0  -> enabled
         2. otherwise disabled
      3.  Up arrow button
         1. list.count > 1 && list.item != first -> enabled
         2. otherwise disabled
      4.  Down arrow button
         1. list.count > 1 && list.item != last -> enabled
         2. otherwise disabled 
   2. On Right List Focus
      1. Left arrow button
         1. list.count > 0  -> enabled
         2. otherwise disabled
      2. Right arrow button
         1. Always disabled
3. Mobile
   1. Maintain the look and feel as it is.
   2. Drag and drop action is hard right now. Can we make the whole cell draggable?
   3. As a convention, we are trying to standardize a 500ms press before dragstart is triggered so there is enough difference with scroll.