[terra-folder-tree] Radio button hover updated

packages/terra-folder-tree/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated the radio button hover style to be distinct from row hover.
+
 ## 1.3.0 - (April 23, 2024)
 
 * Changed

packages/terra-folder-tree/src/clinical-lowlight-theme/FolderTree.module.scss

@@ -2,7 +2,8 @@
   .clinical-lowlight-theme {
     --terra-folder-tree-item-border-bottom: #181b1d;
     --terra-folder-tree-item-background: #1e3a49;
-    --terra-folder-tree-item-hover-background-color: #232a2d;
+    --terra-folder-tree-item-hover-background-color: rgb(203, 230, 247, 0.25);
+
     --terra-folder-tree-item-selected-background-color: #232a2d;
     --terra-folder-tree-focus-outline: 2px dashed #fff;
   }

packages/terra-folder-tree/src/orion-fusion-theme/FolderTree.module.scss

@@ -1,6 +1,6 @@
 :local {
   .orion-fusion-theme {
-    --terra-folder-tree-item-background-color-hover: #f4fafe;
+    --terra-folder-tree-item-hover-background-color: rgb(203, 230, 247, 0.5);
     --terra-folder-tree-focus-box-shadow: inset 0 0 1px 3px rgba(76, 178, 233, 0.5), inset 0 0 7px 4px rgba(76, 178, 233, 0.35);
     --terra-folder-tree-focus-outline: none;
     --terra-folder-tree-focus-outline-offset: 0;

packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { injectIntl } from 'react-intl';
@@ -103,6 +103,7 @@ const FolderTreeItem = ({
   const isFolder = subfolderItems?.length > 0;
   const itemNode = useRef();
   const subFolderNode = useRef();
+  const [radioButtonIsHovered, setRadioButtonIsHovered] = useState(false);
 
   const selectableAnnouncement = isSelectable
     ? intl.formatMessage({ id: 'Terra.folder-tree.item.selectable-announcement' })
@@ -138,6 +139,8 @@ const FolderTreeItem = ({
     <label
       className={cx('radio-target')}
       onClick={(e) => { e.stopPropagation(); }} // Prevent triggering expand/collapse during selection
+      onMouseEnter={() => setRadioButtonIsHovered(true)}
+      onMouseLeave={() => setRadioButtonIsHovered(false)}
     >
       <input
         type="radio"
@@ -156,6 +159,7 @@ const FolderTreeItem = ({
       'folder-tree-item',
       { selected: isSelectable ? isSelected : null },
       theme.className,
+      { 'hover-within': radioButtonIsHovered },
     ),
   );
 

packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss

@@ -14,8 +14,24 @@
     width: 100%;
 
     &:hover {
-      background-color: var(--terra-folder-tree-item-hover-background-color, #f4fafe);
       cursor: pointer;
+
+      &:not(.hover-within) {
+        background-color: var(--terra-folder-tree-item-hover-background-color,  rgb(203, 230, 247, 0.5));
+      }      
+    }
+
+    &.hover-within {
+      .radio-target::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        background-color: var(--terra-folder-tree-item-hover-background-color, rgb(203, 230, 247, 0.5));
+        border-radius: 50%;
+      }
     }
 
     &:focus {
@@ -39,6 +55,11 @@
     padding-left: 48px;
   }
 
+  .radio,
+  .radio-target {
+    position: relative;
+  }
+
   .radio:hover {
     cursor: pointer;
   }

packages/terra-folder-tree/tests/wdio/folder-tree-spec.js

@@ -194,4 +194,18 @@ Terra.describeViewports('FolderTree', ['medium'], () => {
       Terra.validates.screenshot('reload-focus', { selector: '#folder-tree-reload' });
     });
   });
+
+  describe('Hover styling', () => {
+    it('applied to the radio button', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/folder-tree/basic-folder-tree');
+      $('[class*="radio-target"]').moveTo();
+      Terra.validates.screenshot('hover-over-radio-button', { selector: '#basic-folder-tree' });
+    });
+
+    it('applied to the tree item', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/folder-tree/basic-folder-tree');
+      $('[role="treeitem"]:nth-of-type(1)').moveTo();
+      Terra.validates.screenshot('hover-over-tree-item', { selector: '#basic-folder-tree' });
+    });
+  });
 });