Skip to content
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

Merged
merged 19 commits into from
Jun 16, 2023
Merged

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented May 27, 2023

For element-hq/element-web#25269

This PR intends to conform selectors of mx_AppTileBody for 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_AppTileBody
  • mx_AppTileBody_mini
  • mx_AppTile_loading

All of them are used to style AppTileBody. Both mx_AppTileBody_mini and mx_AppTile_loading are not a child element defined by AppTileBody, but a variant of it.

The class name mx_AppTile_loading is misleading as it is not a child element of AppTile. 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 which mx_AppTileBody had specified)
  • mx_AppTileBody--mini (for Element Call PiP widget)
  • mx_AppTileBody--loading (for widgets being loaded)
Screenshot
Normal widget 1 normal
WidgetPiP 1_1 Screenshot from 2023-05-27 20-00-53
(Elliptic avatar is a known issue: element-hq/element-web#24601)
Widget being loaded 1 Screenshot from 2023-05-27 19-59-39

type: task

Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

This change is marked as an internal change (Task), so will not be included in the changelog.

@github-actions github-actions bot added Z-Community-PR Issue is solved by a community member's PR T-Task Refactoring, enabling or disabling functionality, other engineering tasks labels May 27, 2023
@luixxiul luixxiul marked this pull request as ready for review May 27, 2023 12:33
@luixxiul luixxiul requested a review from a team as a code owner May 27, 2023 12:33
Comment on lines -599 to -600
mx_AppTileBody: !this.props.miniMode,
mx_AppTileBody_mini: this.props.miniMode,
Copy link
Contributor Author

@luixxiul luixxiul May 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@robintown robintown left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, this will definitely spare future developers looking at these class names some confusion. I have some questions though:

src/components/views/elements/AppTile.tsx Outdated Show resolved Hide resolved
res/css/views/rooms/_AppsDrawer.pcss Outdated Show resolved Hide resolved
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.
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.
Copy link
Member

@robintown robintown left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry that I've taken a while to get back to you on this, I think this is fine to merge now

@robintown
Copy link
Member

Ah, well, there is one snapshot test that still needs to be updated

@robintown robintown added this pull request to the merge queue Jun 16, 2023
Merged via the queue into matrix-org:develop with commit 2972219 Jun 16, 2023
@luixxiul luixxiul deleted the AppTileBody2 branch June 17, 2023 02:06
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Task Refactoring, enabling or disabling functionality, other engineering tasks Z-Community-PR Issue is solved by a community member's PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants