[terra-folder-tree] Radio button hover updated (#2152)

cerner · May 3, 2024 · 8968d8b · 8968d8b
1 parent ab53c8f
commit 8968d8b
Show file tree

Hide file tree

Showing 18 changed files with 48 additions and 4 deletions.
diff --git a/packages/terra-folder-tree/CHANGELOG.md b/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

diff --git a/packages/terra-folder-tree/src/clinical-lowlight-theme/FolderTree.module.scss b/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-hover-before-background-color: rgb(203, 230, 247, 0.25);
     --terra-folder-tree-item-selected-background-color: #232a2d;
     --terra-folder-tree-focus-outline: 2px dashed #fff;
   }

diff --git a/packages/terra-folder-tree/src/orion-fusion-theme/FolderTree.module.scss b/packages/terra-folder-tree/src/orion-fusion-theme/FolderTree.module.scss
@@ -1,6 +1,7 @@
 :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-item-hover-before-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;

diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/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 },
     ),
   );
 

diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss b/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 {
+        background-color: var(--terra-folder-tree-item-hover-before-background-color, rgb(203, 230, 247, 0.5));
+        border-radius: 50%;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
     }
 
     &:focus {
@@ -39,6 +55,11 @@
     padding-left: 48px;
   }
 
+  .radio,
+  .radio-target {
+    position: relative;
+  }
+
   .radio:hover {
     cursor: pointer;
   }

diff --git a/.../clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/collapsed_folder.png b/.../clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/collapsed_folder.png
diff --git a/...ht-theme/en/chrome_medium/folder-tree-spec/expand_non-selectable_item_mouse.png b/...ht-theme/en/chrome_medium/folder-tree-spec/expand_non-selectable_item_mouse.png
diff --git a/...e/clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/expanded_folder.png b/...e/clinical-lowlight-theme/en/chrome_medium/folder-tree-spec/expanded_folder.png
diff --git a/...al-lowlight-theme/en/chrome_medium/folder-tree-spec/hover-over-radio-button.png b/...al-lowlight-theme/en/chrome_medium/folder-tree-spec/hover-over-radio-button.png
diff --git a/...nical-lowlight-theme/en/chrome_medium/folder-tree-spec/hover-over-tree-item.png b/...nical-lowlight-theme/en/chrome_medium/folder-tree-spec/hover-over-tree-item.png
diff --git a/...-lowlight-theme/en/chrome_medium/folder-tree-spec/non-selectable_item_mouse.png b/...-lowlight-theme/en/chrome_medium/folder-tree-spec/non-selectable_item_mouse.png
diff --git a/...rence/orion-fusion-theme/en/chrome_medium/folder-tree-spec/collapsed_folder.png b/...rence/orion-fusion-theme/en/chrome_medium/folder-tree-spec/collapsed_folder.png
diff --git a/...erence/orion-fusion-theme/en/chrome_medium/folder-tree-spec/expanded_folder.png b/...erence/orion-fusion-theme/en/chrome_medium/folder-tree-spec/expanded_folder.png
diff --git a/...rion-fusion-theme/en/chrome_medium/folder-tree-spec/hover-over-radio-button.png b/...rion-fusion-theme/en/chrome_medium/folder-tree-spec/hover-over-radio-button.png
diff --git a/...e/orion-fusion-theme/en/chrome_medium/folder-tree-spec/hover-over-tree-item.png b/...e/orion-fusion-theme/en/chrome_medium/folder-tree-spec/hover-over-tree-item.png
diff --git a/...rra-default-theme/en/chrome_medium/folder-tree-spec/hover-over-radio-button.png b/...rra-default-theme/en/chrome_medium/folder-tree-spec/hover-over-radio-button.png
diff --git a/.../terra-default-theme/en/chrome_medium/folder-tree-spec/hover-over-tree-item.png b/.../terra-default-theme/en/chrome_medium/folder-tree-spec/hover-over-tree-item.png
diff --git a/packages/terra-folder-tree/tests/wdio/folder-tree-spec.js b/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' });
+    });
+  });
 });