diff --git a/packages/terra-folder-tree/CHANGELOG.md b/packages/terra-folder-tree/CHANGELOG.md index a35fd150207..ee7ea5aa676 100644 --- 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 index 54af4bd1fd8..8778486ad2d 100644 --- 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 index 6af9fbaa2d4..aa1ff4e8202 100644 --- 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 index 5d7712e22c2..d2db768a264 100644 --- 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 = ({