Merge pull request #118 from zapier/fix-keyboard-hover

Send isHovering through renderTag
zapier · Feb 23, 2019 · 6d3bd9d · 6d3bd9d
2 parents fd8f757 + 1a0c75d
commit 6d3bd9d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/helpers/choices-item.js b/src/components/helpers/choices-item.js
@@ -33,7 +33,12 @@ export default createReactClass({
     }
 
     return (
-      <li renderWith={this.renderWith('ChoicesItem')} className={cx(classes)}>
+      <li
+        renderWith={this.renderWith('ChoicesItem', {
+          isHovering: this.props.isHovering,
+        })}
+        className={cx(classes)}
+      >
         {this.props.children}
       </li>
     );

diff --git a/src/plugins/css-plugin.js b/src/plugins/css-plugin.js
@@ -3,6 +3,9 @@ import cx from 'classnames';
 const plugin = config => {
   const { renderTag } = config;
   const classes = {
+    ChoicesItem: ({ isHovering }) => ({
+      'Formatic_ChoicesItem-isHovering': isHovering,
+    }),
     Field: ({ field }) => ({
       'Formatic_Field-IsReadOnly': config.fieldIsReadOnly(field),
     }),

diff --git a/static/css/formatic.css b/static/css/formatic.css
@@ -167,7 +167,8 @@
 
 .Formatic_PrettySelect_Choice:hover,
 .Formatic_PrettyBoolean_Choice:hover,
-.Formatic_PrettyText_Choice:hover {
+.Formatic_PrettyText_Choice:hover,
+.Formatic_ChoicesItem-isHovering {
   background-color: #eef0f2;
 }