Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-folder-tree] Add the ability to expand/collapse folders #1915

Merged
merged 15 commits into from
Dec 5, 2023

Conversation

sycombs
Copy link
Contributor

@sycombs sycombs commented Nov 27, 2023

Summary

This PR adds the ability to expand and collapse folders so that users of terra-folder-tree can show and hide items in the folder tree.

Screenshots

Collapsed:
image

Expanded:
image

Testing

This change was tested using:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

This PR resolves:

UXPLATFORM-9680


Thank you for contributing to Terra.
@cerner/terra

@sycombs sycombs self-assigned this Nov 27, 2023
@sycombs sycombs marked this pull request as ready for review November 29, 2023 16:03
@sycombs sycombs requested a review from a team November 29, 2023 16:13
@cm9361
Copy link
Contributor

cm9361 commented Nov 30, 2023

The background color for non-selected elements does not appear to be correct in the lowlight theme

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overflow-wrap style still needs to be corrected. You wouldn't want to use anywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if you saw my reply on the last PR since it's been closed, but long strings without spaces don't wrap with break-word, or do we not expect consumers to have long strings without spaces?

image

#1888 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, they do. Break word will break anywhere when you run out of room.

Copy link
Contributor

@sdadn sdadn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a minor comment but approving since it doesn't impact functionality.

Comment on lines 5 to +6
import FolderTree from '../../src/FolderTree';
import FolderTreeItem from '../../src/subcomponents/FolderTreeItem';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we import these from index.js? This way, the usage would be more in line with how a consumer would utilize it.

onClick={onClick}
onChange={onClick}
aria-hidden // Hiding the radio button from assistive technology since they cannot be grouped correctly
tabIndex={-1} // Prevent tabbing to the button since it should not be read or acknowledged by assistive technology
Copy link
Contributor

@cm9361 cm9361 Dec 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will allow the control to get focus when you click though. Is that what you want? Also, is this a composite widget? Will you actually have higher level logic controlling this similar to the WorklistDataGrid?

Copy link
Contributor Author

@sycombs sycombs Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want the radio button to be clickable (per the UXPLATFORM-9679 AC) but we need to hide it from screenreaders so that they aren't reading radio buttons out of the tree hierarchy.

@github-actions github-actions bot temporarily deployed to preview-pr-1915 December 5, 2023 19:02 Destroyed
@sycombs sycombs merged commit c3efad6 into main Dec 5, 2023
21 checks passed
@sycombs sycombs deleted the folder-tree_expand-collapse branch December 5, 2023 19:18
@sycombs
Copy link
Contributor Author

sycombs commented Dec 5, 2023

Merged so we can get a release out for expand/collapse, a follow-up Jira will be logged to address remaining comments.

@eawww
Copy link
Contributor

eawww commented Dec 5, 2023

The background color for non-selected elements does not appear to be correct in the lowlight theme

@cm9361 @sycombs there are no current lowlight callouts for this component. I've logged UXPLATFORM-9972 so we make sure to sync with Design and address this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants