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..0343606266a 100644 --- a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx +++ b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx @@ -98,20 +98,30 @@ const FolderTreeItem = ({ cx( 'folder-tree-item', { selected: isSelected }, - { folder: isFolder }, theme.className, ), ); + const handleToggle = (event) => { + if (event.target.nodeName === 'INPUT') { + return; + } + + if (onToggle) { + onToggle(); + } + }; + return ( <> + {/* TODO: Re-enable this eslint rule once keyboard handling is implemented */} + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
  • {/* 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..82d17bdbf2a 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('change'); + + 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={[