Part 2 of 3: DetailsList css-in-js conversion - DetailsHeader edition#5490
Part 2 of 3: DetailsList css-in-js conversion - DetailsHeader edition#5490kenotron merged 10 commits intomicrosoft:masterfrom
Conversation
| selectors: { | ||
| [`.${IsFocusVisibleClassName} &`]: { | ||
| opacity: 1 | ||
| } |
There was a problem hiding this comment.
Isn't this redundant with line 50? Based on the deleted code, I'm wondering if this should be outside the logic block starting at line 49...
There was a problem hiding this comment.
It is - I just had to remove this rule.
| } | ||
| .ms-Fabric--isFocusVisible & { | ||
| opacity: 1; | ||
| } |
There was a problem hiding this comment.
Should this appear somewhere else in the snapshot output?
There was a problem hiding this comment.
Nah - it's not needed apparently.
There was a problem hiding this comment.
But in some other snapshots it is reappearing in a different place...
There was a problem hiding this comment.
That's from getFocusStyles() that adds a ::after thing. It is quite a different selector altogether... This one is not necessary (been testing it all day)
| ...cellSizerFadeInStyles, | ||
| ...{ | ||
| boxShadow: '0 0 5px 0 0 rgba(0, 0, 0, 0.4)' | ||
| } |
There was a problem hiding this comment.
Could this just be an array of objects instead of spreading two objects into one?
There was a problem hiding this comment.
Apparently not for styles listed inside a "selectors" part...
| opacity: 1, | ||
| paddingLeft: 8, | ||
| selectors: { | ||
| '&$sortIcon': { |
There was a problem hiding this comment.
I noticed some places are like this while others on line 283 are just the name without quotes. Is there a reason for the difference?
There was a problem hiding this comment.
$foo$bar is legal identifier in JS whereas &$sortIcon isn't but it is a legal key for an object.
2 participants
Pull request checklist
$ npm run changeDescription of changes
I'm breaking up the conversion one more part, so to keep the number of files changed small™️. This change includes the following:
Focus areas to test
(optional)
Microsoft Reviewers: Open in CodeFlow