Skip to content

Commit

Permalink
fix(tree-item): move focus outline to item label area (#7581)
Browse files Browse the repository at this point in the history
**Related Issue:** #6481 

## Summary

This updates `tree-item`'s focus outline to be on the content's area
excluding slotted `tree`/`tree-item` children.

![tree-alt-focus](https://user-images.githubusercontent.com/197440/221788706-00d254bc-f3da-4526-838b-7da83e554e91.gif)

### before

<img width="276" alt="Screenshot 2023-02-27 at 11 54 45 PM"
src="https://user-images.githubusercontent.com/197440/221790180-830cf977-515f-4b88-8684-c7aca0232565.png">

### after

<img width="282" alt="Screenshot 2023-02-27 at 11 59 26 PM"
src="https://user-images.githubusercontent.com/197440/221790154-92e4340d-8a98-4f33-826e-58ed43724a60.png">
  • Loading branch information
jcfranco authored Aug 23, 2023
1 parent 8a575e4 commit 1327cef
Showing 1 changed file with 13 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}

.node-actions-container {
@apply flex justify-between;
@apply flex;
}

@include calciteHydratedHidden();
Expand Down Expand Up @@ -104,15 +104,23 @@

// focus styles
:host {
@apply focus-base;
@apply outline-none;

.node-container {
@apply focus-base;
}
&:focus,
&:active {
@apply focus-inset outline-none;
.node-container {
@apply focus-inset;
}
}
}

:host(:focus:not([disabled])) {
@apply focus-inset outline-none;
.node-container {
@apply focus-inset outline-none;
}
}

.actions-end {
Expand Down Expand Up @@ -146,7 +154,7 @@
}

.node-container {
@apply relative flex items-center min-w-0;
@apply relative flex grow items-center min-w-0;

.checkmark,
.bullet-point {
Expand Down

0 comments on commit 1327cef

Please sign in to comment.