Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make test result labels more stylable #2460

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

noomorph
Copy link
Contributor

@noomorph noomorph commented Mar 29, 2024

Context

Adding a custom stylesheet to a generated Allure Report is not too complicated, especially if one uses plugins.

What is much more challenging, however, is to customize the core sections of the report, because they don't include enough HTML markup to target with custom CSS rules.

This pull request aims to standardize CSS class names across the Test Result section:

  • .pane__section-title – now used in each pane__section.
  • .pane__section-content – a new CSS class which wraps in a generic way all the content inside those panes: severity, categories, tags, owner, duration, etc.
Markup Screenshot
DOM fragment on a screenshot An actual screenshot of the refactored section, demonstrating that there are no visual changes

Note

There is a minor change to conciliate h3.pane__section-title and span.pane__section-title – the inline titles in span will have ::after pseudo-element with a colon. This way we ensure that the colon is easy to add or remove in custom CSS styles.

Checklist

  • Sign Allure CLA
  • Provide unit tests (not applicable to Handlebars changes, I guess)
  • Check manually that the generated report has no visual regressions

@noomorph noomorph marked this pull request as ready for review April 1, 2024 11:07
@baev baev added the type:improvement Change that improves some user experience but can't be considered as a new feature label Apr 8, 2024
Copy link

@A1exKH A1exKH left a comment

Choose a reason for hiding this comment

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

LGTM.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
theme:ui type:improvement Change that improves some user experience but can't be considered as a new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants