radio button circle fixed to keep click area square, hover over tree …

…item css changed to match radio button circle
cerner · May 3, 2024 · 304c9f6 · 304c9f6
1 parent 8761f6e
commit 304c9f6
Show file tree

Hide file tree

Showing 16 changed files with 36 additions and 10 deletions.
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,8 +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-radio-button-hover-background-color: rgb(203, 230, 247, 0.25);
+    --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;
   }

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,7 +1,6 @@
 :local {
   .orion-fusion-theme {
-    --terra-folder-tree-item-background-color-hover: #f4fafe;
-    --terra-folder-tree-item-radio-button-hover-background-color: rgb(203, 230, 247, 0.5);
+    --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;

diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss
@@ -17,20 +17,28 @@
       cursor: pointer;
 
       &:not(.hover-within) {
-        background-color: var(--terra-folder-tree-item-hover-background-color, #f4fafe);
+        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 {
       box-shadow: var(--terra-folder-tree-focus-box-shadow, none);
       outline: var(--terra-folder-tree-focus-outline, 2px dashed #000);
       outline-offset: var(--terra-folder-tree-focus-outline-offset, -4px);
     }
-
-    .radio-target:hover {
-      background-color: var(--terra-folder-tree-item-radio-button-hover-background-color, rgb(203, 230, 247, 0.5));
-      border-radius: 50%;
-    }
   }
 
   .selected {
@@ -47,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' });
+    });
+  });
 });