use :hover CSS selector

facebook · Aug 3, 2022 · f87197f · f87197f
1 parent d280ce0
commit f87197f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 12 deletions.
diff --git a/packages/lexical-devtools/src/panel/components/Chevron/index.css b/packages/lexical-devtools/src/panel/components/Chevron/index.css
@@ -8,7 +8,7 @@
   text-decoration: none;
 }
 
-.hover > .chevron-button {
+.tree-node:hover > .chevron-button {
   background: #77b6ff;
   color: #222;
 }
diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.css b/packages/lexical-devtools/src/panel/components/TreeNode/index.css
@@ -1,8 +1,3 @@
-.hover {
-  background: #77b6ff;
-  color: #222;
-}
-
 .indentation {
   background: #222;
   border: none;
@@ -13,6 +8,11 @@
   user-select: none;
 }
 
+.tree-node:hover {
+  background: #77b6ff;
+  color: #222;
+}
+
 .tree-node-wrapper {
   cursor: pointer;
   white-space: nowrap;

diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx
@@ -23,19 +23,16 @@ function TreeNode({
   lexicalKey,
 }: DevToolsNode): JSX.Element {
   const [isExpanded, setIsExpanded] = useState(true);
-  const [isHovered, setIsHovered] = useState(false);
 
   const handleChevronClick = () => {
     setIsExpanded(!isExpanded);
   };
 
   const handleMouseEnter: React.MouseEventHandler = (event) => {
-    setIsHovered(true);
     highlightDOMNode(lexicalKey);
   };
 
   const handleMouseLeave: React.MouseEventHandler = (event) => {
-    setIsHovered(false);
     deHighlightDOMNode(lexicalKey);
   };
 
@@ -53,14 +50,12 @@ function TreeNode({
       ''
     );
 
-  const hoverClassName = isHovered ? ' hover' : '';
-  const treeNodeClassName = 'tree-node' + hoverClassName;
   const leftIndent = depth * 1.2 + 'em';
 
   return (
     <div className="tree-node-wrapper" key={lexicalKey}>
       <div
-        className={treeNodeClassName}
+        className="tree-node"
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         style={{paddingLeft: leftIndent}}>