[KED-2385] Refactor row toggle/label CSS, and fix row hover icon bug

[richardwestenra]

Description

1. Instead of having just the _row.scss file and then filter overrides in _filter.scss, instead create one file for all the text label scss (both toggle/filter kinds), and one for the toggle-icon scss (both kinds)
2. Fix toggle-icon--kind-filter parent row-hover bug: The toggle-all icon would decrease in opacity on row hover.
3. Rename node-list row toggle --kind-toggle to --kind-element to make the distinction between the two elements a bit more clear. We can rename them again later if necessary but I think this makes things a lot easier to understand.
4. Refactor node-list group creation selector to improve readability

Development notes

I discussed the naming of the two node-list row item kinds with @bru5 at length while working on this PR. We want to strike a balance between intuitiveness and extensibility, which is why we've avoided being too specific in the names of the two kinds (e.g. calling filters 'category', which might not work with future usages, or calling them 'blue-dot' and 'eye-icon', which is too dependent on the presentation).

QA notes

Please double-check the node-list hover/focus/selection states and see that nothing has changed (except for the blue dot checked parent row-hover state, which has been fixed).

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

Legal notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

• I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.

• I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorised to submit this contribution on behalf of the original creator(s) or their licensees.

• I certify that the use of this contribution as authorised by the Apache 2.0 license does not violate the intellectual property rights of anyone else.

[studioswong]

Thanks for the refactor, code looks good to me 👍

One thing to confirm - I notice that you mentioned that the 'toggle-all' icon would decrease in opacity on hover, however it looks like it is currently set at opacity 0 and only shows up on hover of the toggle button ( see below), which is very different from the existing behaviour of the filter all row on hover.

This is what we previously have:

Is this new change something intended, as it seems to deviate from the behaviour of the toggle all icon for the eye ( where the 'toggle-all' eye icon would still show up on toggle of the entire row, and only increase in opacity on hover of the toggle button?) @GabrielComymQB

[richardwestenra]

@studioswong Good catch, thanks! 🙌

Fixed 😅

[studioswong]

optional: I noticed that we use em in some places ( for fonts and margins) and px in others, do we normally have any preference on which to use?

[richardwestenra]

I would typically use em where we want it to be related/relative to font-size, and px where it should be absolute.

[studioswong]

thanks for fixing - LGTF 👍