Remove :not([data-layout="bubble"]) pseudo class from mx_EventTile selector

[luixxiul]

Your use case

What would you like to do?

Remove :not([data-layout="bubble"]) pseudo class from mx_EventTile selector on _EventTile.pcss and _FilePanel.pcss.

Why would you like to do it?

The :not() pseudo-class is known to have a number of quirks, tricks, and unexpected results.

On the UI, the rules inside .mx_EventTile:not([data-layout="bubble"]) have been applied anywhere such as FilePanel even though .mx_EventTile has been specified with .mx_FilePanel. This means that .mx_FilePanel .mx_EventTile is in fact less specific than .mx_EventTile:not([data-layout="bubble"]). This is indeed confusing, and it is the exact reason why this change has been required.

This nature of :not() pseudo class has made it difficult to edit EventTile style rules or create a new layout, which have required to add a bunch of "hacks" to override the style rules with increased specificity due to the pseudo class.

How would you like to achieve it?

Most of the style rules inside mx_EventTile:not([data-layout=bubble]) have been moved out of the selector since the last year. After implementing E2E tests to cover FilePanel and MessageEditHistoryDialog (this dialog has a !important flag against a style rule of the selector), this selector itself should be finally able to be removed from _EventTile.pcss.

Have you considered any alternatives?

No response

Additional context

No response