COMPASS-1319: Backport COMPASS-1318 Make EditableElement expand button hit box larger (#1119) (#1122)

* 🐛 COMPASS-1318 Make EditableElement expand button hit box larger

By using padding instead of margins, as margins are not clickable, but padding is.

* 🐛 Add onClick handler to document keys

From review feedback:

> Quick question though: would it be easy to include the field name as a clickable area? I believe this got lost at some point. if it's a small change, can you just add it here?

Tested against both view mode and editing mode. AFAICT it seems to still respond intuitively, e.g. I can still double-click to select text independent of mode, single click to select a specific part of the key in edit mode, click and drag to select a part of the key in edit mode, etc.

More importantly, if I attempt to move the handler upwards into renderExpandable, then in edit mode, clicking on the editable key does NOT toggle the dropdown, which is an easy mistake I nearly made :)

* 🔥 Remove unused renderStyle function

* 🐛 Increase padding

The part between the arrow button and document key also should be clickable.

Author: pzrq

src/internal-packages/crud/lib/component/editable-element.jsx

@@ -282,21 +282,6 @@ class EditableElement extends React.Component {
     return (<span className={SEPARATOR}>:</span>);
   }
 
-  /**
-   * Render the style with the provided base style.
-   *
-   * @param {String} base - The base style.
-   *
-   * @returns {String} The style.
-   */
-  renderStyle(base) {
-    let style = base;
-    if (this.props.rootFieldIndex > FIELD_LIMIT) {
-      style = `${style} hidden`;
-    }
-    return style;
-  }
-
   /**
    * Render the types column.
    *
@@ -320,7 +305,7 @@ class EditableElement extends React.Component {
     }
     const onDoubleClick = this.element.isKeyEditable() ? null : this.focusEditKey.bind(this);
     return (
-      <div className={FIELD_CLASS} onDoubleClick={onDoubleClick}>
+      <div className={FIELD_CLASS} onClick={this.toggleExpandable.bind(this)} onDoubleClick={onDoubleClick}>
         {this.element.parent.currentType === 'Array' ? this.props.index : this.element.currentKey}
       </div>
     );
@@ -344,7 +329,7 @@ class EditableElement extends React.Component {
   }
 
   /**
-   * Render the expanable label column.
+   * Render the expandable label column.
    *
    * @returns {Component} The component.
    */

src/internal-packages/crud/styles/editable-element.less

@@ -13,7 +13,7 @@
 
   &-expand-button {
     position: absolute;
-    margin: 2px 0px 0px 5px;
+    padding: 2px 6px 0px 5px;
   }
 
   &-separator {