This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy
#11002
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Z-Community-PR
3 tasks
luixxiul
commented
May 27, 2023
Comment on lines
-599
to
-600
| mx_AppTileBody: !this.props.miniMode, | ||
| mx_AppTileBody_mini: this.props.miniMode, |
There was a problem hiding this comment.
These have not really been efficient, as it was impossible to specify common declarations to a single selector.
Also, the class name mx_AppTileBody had been misleading as it did not indicate by itself that the style rules added to the selector were in fact not applied to AppTileBody on mini mode.
3 tasks
Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default
robintown
reviewed
Jun 2, 2023
When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.
Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default
When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.
robintown
approved these changes
Jun 15, 2023
|
Ah, well, there is one snapshot test that still needs to be updated |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
For element-hq/element-web#25269
This PR intends to conform selectors of
mx_AppTileBodyfor a widget to our naming policy, in order to increase understandability and maintainability of the style rules, preventing a visual regression code-wise.Currently there are three class names for
AppTileBody, two of which do not follow our naming policy:mx_AppTileBodymx_AppTileBody_minimx_AppTile_loadingAll of them are used to style
AppTileBody. Bothmx_AppTileBody_miniandmx_AppTile_loadingare not a child element defined byAppTileBody, but a variant of it.The class name
mx_AppTile_loadingis misleading as it is not a child element ofAppTile. It is my mistake with aed5fcf#diff-a94695056f674ec44233ef1dd8163588d10278cadaa3258d0a1112b32ec17d7eR382 (#10783).This PR suggests to replace them with these:
mx_AppTileBody(for common declarations)mx_AppTileBody--large(for normal size widgets; this selector manages the style rules whichmx_AppTileBodyhad specified)mx_AppTileBody--mini(for Element Call PiP widget)mx_AppTileBody--loading(for widgets being loaded)(Elliptic avatar is a known issue: element-hq/element-web#24601)
type: task
Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com
Checklist
This change is marked as an internal change (Task), so will not be included in the changelog.