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

[terra-folder-tree] Radio button hover updated #2152

Merged
merged 7 commits into from
May 3, 2024

Conversation

adoroshk
Copy link
Contributor

@adoroshk adoroshk commented May 1, 2024

Summary

This PR updates the radio button in folder tree item hover style to be distinct from the whole item hover:

  • Hovering the clickable area around a radio button highlights a circle behind the radio button.
    NOTE: the click area stays square.
  • Hovering an item/row that has a radio button highlights that item/row.
  • The background color for the radio button circle and list tree item is rgb(203, 230, 247, 0.5) (for #CBE6F7 with 50% opacity) for default and fusion themes, and rgb(203,230, 247, 0.25) (for #CBE6F7, 25% opacity) for lowlight theme.

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-10377

@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 1, 2024 21:15 Destroyed
@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 1, 2024 21:29 Destroyed
@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 1, 2024 21:46 Destroyed
@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 1, 2024 22:58 Destroyed
@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 2, 2024 14:28 Destroyed
@adoroshk adoroshk self-assigned this May 2, 2024
@adoroshk adoroshk changed the title Folder tree radio button hover updated [terra-folder-tree] Radio button hover updated May 2, 2024
…item css changed to match radio button circle
@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 3, 2024 14:11 Destroyed
@adoroshk adoroshk marked this pull request as ready for review May 3, 2024 14:12
@adoroshk adoroshk requested a review from a team May 3, 2024 14:13
Comment on lines 25 to 33
.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%;
Copy link
Contributor Author

@adoroshk adoroshk May 3, 2024

Choose a reason for hiding this comment

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

NOTE: The pseudo class is used to create a circle on hover, as the actual click area needs to stay square.

@github-actions github-actions bot temporarily deployed to preview-pr-2152 May 3, 2024 14:56 Destroyed
Copy link
Contributor

@eawww eawww left a comment

Choose a reason for hiding this comment

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

Love it! Nice job.

@adoroshk adoroshk added ⭐ UX Reviewed UX Reviewed and approved. and removed UX Review Required labels May 3, 2024
@adoroshk adoroshk merged commit 8968d8b into main May 3, 2024
22 checks passed
@adoroshk adoroshk deleted the folder-tree-radio-button-hover branch May 3, 2024 18:16
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants