Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Simplify the CSS around the tree's expand and focus icons

See original GitHub issue

Several issues and things to make better:

simplify the selectors themselves by removing the > * > * > * things
use a transform instead of a sprite to control the expand icon change when expanded. Likely transform-origin will be needed too.
Bonus point to use a nice transition.
(maybe) use a filter instead of a sprite to control color changes. MDN says this doesn’t work well on SVG images (works in Firefox only) so maybe we won’t want to use this actually.
(maybe) add a :hover style, or replace the :active style by a :hover style.

Things to take care:

different states: the row is expanded / collapsed, the row is selected but the tree is not focused, the row is selected and the tree is focused, the icon is clicked.
(I can’t find anything else at the moment)

Issue Analytics

State:
Created 5 years ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

mstangecommented, Apr 22, 2018

I’d prefer to go back to toggling on mouseup instead of mousedown. It looks like the _onClick method got changed from an onClick handler to an onMouseDownCapture handler in #223 which added a context menu. It doesn’t seem like a very intentional change.

0reactions

zoepagecommented, Apr 26, 2018

For context: On Monday in our standup, @mstange raised concerns about splitting up the SVG sprite of the twisty as it might flicker. After discussing the issue yesterday again, Markus had the idea to use borders and replace the SVG, which I agree with. This should solve @julienw concers about the CSS code and remove the positioning of the sprites. This way we can also add transitions as well as make the code more generic. 😃

https://codepen.io/zoepage/pen/bMezvY

Top Results From Across the Web

Having a Little Fun With Custom Focus Styles | CSS-Tricks

This works best for elements that can be filled, such as buttons. Select the focused state of the element and apply a contrasting...

Overview of accessibility testing using DevTools

When you expand this section and then click the Open in Elements link, the Elements tool opens, with the element highlighted in the...

How To Remove Contenteditable Border - W3Schools

Tip: Go to our HTML contenteditable Attribute Reference to learn more about the global contenteditable attribute. Tip: Go to our CSS [attribute] Selector...

A Complete Guide To Accessible Front-End Components

An up-to-date collection of accessible front-end components: accordions, form styles, dark mode, data charts, date pickers, form styles, ...

How can I inspect html element that disappears from DOM on ...

How can I do it to don't lost focus while I move to another window (the inspector)?. html · css · dom ·...