From efcd32d2ac2fbd98f1047b4261d8f1647e3e452f Mon Sep 17 00:00:00 2001 From: sycombs Date: Wed, 6 Dec 2023 09:55:34 -0600 Subject: [PATCH 1/4] [terra-folder-tree] Update cursor style for interactable regions --- package-lock.json | 2 +- packages/terra-folder-tree/CHANGELOG.md | 3 +++ .../src/subcomponents/FolderTreeItem.jsx | 14 +++++++++--- .../subcomponents/FolderTreeItem.module.scss | 9 ++++---- .../tests/jest/FolderTree.test.jsx | 22 +++++++++++++++++++ packages/terra-framework-docs/CHANGELOG.md | 3 +++ .../Examples.2/ExpandCollapseFolderTree.jsx | 12 ++++++---- .../ExpandCollapseFolderTree.test.jsx | 12 ++++++---- 8 files changed, 61 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 69e1d1d44de..2d1c20759ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44234,7 +44234,7 @@ } }, "packages/terra-table": { - "version": "5.2.1", + "version": "5.3.0", "license": "Apache-2.0", "dependencies": { "classnames": "^2.2.5", diff --git a/packages/terra-folder-tree/CHANGELOG.md b/packages/terra-folder-tree/CHANGELOG.md index ce3e7b22f16..d9fb575c9f2 100644 --- a/packages/terra-folder-tree/CHANGELOG.md +++ b/packages/terra-folder-tree/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Updated cursor style to pointer for clickable regions. + ## 1.0.0-alpha.2 - (December 5, 2023) * Added diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx index 137a0632a3e..3127f64c2e4 100644 --- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx +++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx @@ -98,11 +98,17 @@ const FolderTreeItem = ({ cx( 'folder-tree-item', { selected: isSelected }, - { folder: isFolder }, theme.className, ), ); + const handleRadioButtonClick = (event) => { + // Stop click propagation to prevent triggering expand/collapse when selecting folders + event.stopPropagation(); + + onClick(); + }; + return ( <>
  • {/* eslint-disable-next-line react/forbid-dom-props */} diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss index 072a65373e7..61b8dd2f156 100644 --- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss +++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss @@ -15,12 +15,9 @@ &:hover { background-color: var(--terra-folder-tree-item-hover-background-color, #f4fafe); + cursor: pointer; } } - - .folder:hover { - cursor: pointer; - } .selected { background-color: var(--terra-folder-tree-item-selected-background-color, darken(#ebf6fd, 2%)); @@ -31,4 +28,8 @@ margin: 0; padding: 0; } + + .radio:hover { + cursor: pointer; + } } diff --git a/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx b/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx index 085b10c3d15..24ef2931811 100644 --- a/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx +++ b/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx @@ -82,4 +82,26 @@ describe('basic folder tree', () => { expect(expandedFolder.find('.folder-tree-item').prop('aria-expanded')).toBe(true); expect(expandedFolder.find('.subfolder').prop('hidden')).toBe(false); }); + + it('does not trigger expand/collapse on folder selection', () => { + const onClick = jest.fn(); + const onToggle = jest.fn(); + + const wrapper = shallowWithIntl( + ), + ]} + />, + ).dive(); + + const radioButton = wrapper.find('.radio'); + radioButton.simulate('click', { stopPropagation: () => {} }); + + expect(onClick).toHaveBeenCalled(); + expect(onToggle).not.toHaveBeenCalled(); + }); }); diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index 3706d427fdf..2ae617bde41 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Updated examples and tests for `terra-folder-tree`. + ## 1.50.0 - (December 5, 2023) * Added diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx index 06efa0758e1..7d9a4bc470a 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx @@ -16,6 +16,10 @@ const ExpandCollapseFolderTree = () => { 'projects-4': false, }); + const handleSelect = (key) => { + setSelectedKey(key); + }; + const handleExpandCollapseKeys = (key) => { const newExpandedKeys = { ...expandedKeys, @@ -35,7 +39,7 @@ const ExpandCollapseFolderTree = () => { key="projects" isSelected={selectedKey === 'projects'} isExpanded={expandedKeys.projects} - onClick={() => { setSelectedKey('projects'); }} + onClick={() => { handleSelect('projects'); }} onToggle={() => { handleExpandCollapseKeys('projects'); }} subfolderItems={[ { key="projects-2" isSelected={selectedKey === 'projects-2'} isExpanded={expandedKeys['projects-2']} - onClick={() => { setSelectedKey('projects-2'); handleExpandCollapseKeys('projects-2'); }} + onClick={() => { handleSelect('projects-2'); }} onToggle={() => { handleExpandCollapseKeys('projects-2'); }} subfolderItems={[ { key="projects-3" isSelected={selectedKey === 'projects-3'} isExpanded={expandedKeys['projects-3']} - onClick={() => { setSelectedKey('projects-3'); handleExpandCollapseKeys('projects-3'); }} + onClick={() => { handleSelect('projects-3'); }} onToggle={() => { handleExpandCollapseKeys('projects-3'); }} subfolderItems={[ { key="projects-4" isSelected={selectedKey === 'projects-4'} isExpanded={expandedKeys['projects-4']} - onClick={() => { setSelectedKey('projects-4'); handleExpandCollapseKeys('projects-4'); }} + onClick={() => { handleSelect('projects-4'); }} onToggle={() => { handleExpandCollapseKeys('projects-4'); }} subfolderItems={[ { 'projects-4': false, }); + const handleSelect = (key) => { + setSelectedKey(key); + }; + const handleExpandCollapseKeys = (key) => { const newExpandedKeys = { ...expandedKeys, @@ -29,7 +33,7 @@ const ExpandCollapseFolderTree = () => { key="projects" isSelected={selectedKey === 'projects'} isExpanded={expandedKeys.projects} - onClick={() => { setSelectedKey('projects'); }} + onClick={() => { handleSelect('projects'); }} onToggle={() => { handleExpandCollapseKeys('projects'); }} subfolderItems={[ { key="projects-2" isSelected={selectedKey === 'projects-2'} isExpanded={expandedKeys['projects-2']} - onClick={() => { setSelectedKey('projects-2'); handleExpandCollapseKeys('projects-2'); }} + onClick={() => { handleSelect('projects-2'); }} onToggle={() => { handleExpandCollapseKeys('projects-2'); }} subfolderItems={[ { key="projects-3" isSelected={selectedKey === 'projects-3'} isExpanded={expandedKeys['projects-3']} - onClick={() => { setSelectedKey('projects-3'); handleExpandCollapseKeys('projects-3'); }} + onClick={() => { handleSelect('projects-3'); }} onToggle={() => { handleExpandCollapseKeys('projects-3'); }} subfolderItems={[ { key="projects-4" isSelected={selectedKey === 'projects-4'} isExpanded={expandedKeys['projects-4']} - onClick={() => { setSelectedKey('projects-4'); handleExpandCollapseKeys('projects-4'); }} + onClick={() => { handleSelect('projects-4'); }} onToggle={() => { handleExpandCollapseKeys('projects-4'); }} subfolderItems={[ Date: Thu, 7 Dec 2023 12:27:52 -0600 Subject: [PATCH 2/4] Add check for if onClick is defined --- .../terra-folder-tree/src/subcomponents/FolderTreeItem.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx index 3127f64c2e4..158cd5abd4e 100644 --- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx +++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx @@ -106,7 +106,9 @@ const FolderTreeItem = ({ // Stop click propagation to prevent triggering expand/collapse when selecting folders event.stopPropagation(); - onClick(); + if (onClick) { + onClick(); + } }; return ( From ccdc63e3b8594b45b7e4d111070b6707dac7135d Mon Sep 17 00:00:00 2001 From: sycombs Date: Thu, 7 Dec 2023 13:40:16 -0600 Subject: [PATCH 3/4] Temporarily disable lint --- .../terra-folder-tree/src/subcomponents/FolderTreeItem.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx index 158cd5abd4e..ddbc47c5203 100644 --- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx +++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx @@ -113,13 +113,14 @@ const FolderTreeItem = ({ return ( <> + {/* TODO: Re-enable this eslint rule once keyboard handling is implemented */} + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
  • Date: Thu, 7 Dec 2023 15:34:07 -0600 Subject: [PATCH 4/4] Use onChange --- .../src/subcomponents/FolderTreeItem.jsx | 14 +++++++------- .../tests/jest/FolderTree.test.jsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx index ddbc47c5203..0343606266a 100644 --- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx +++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx @@ -102,12 +102,13 @@ const FolderTreeItem = ({ ), ); - const handleRadioButtonClick = (event) => { - // Stop click propagation to prevent triggering expand/collapse when selecting folders - event.stopPropagation(); + const handleToggle = (event) => { + if (event.target.nodeName === 'INPUT') { + return; + } - if (onClick) { - onClick(); + if (onToggle) { + onToggle(); } }; @@ -120,13 +121,12 @@ const FolderTreeItem = ({ role="treeitem" aria-expanded={isFolder ? isExpanded : null} aria-selected={isSelected} - onClick={isFolder ? onToggle : onClick} + onClick={isFolder ? handleToggle : onClick} > { ).dive(); const radioButton = wrapper.find('.radio'); - radioButton.simulate('click', { stopPropagation: () => {} }); + radioButton.simulate('change'); expect(onClick).toHaveBeenCalled(); expect(onToggle).not.toHaveBeenCalled();