Skip to content

MudText: Ability to control which HTML tag is used#8916

Merged
henon merged 5 commits intoMudBlazor:devfrom
danielchalmers:text-htmltag
May 8, 2024
Merged

MudText: Ability to control which HTML tag is used#8916
henon merged 5 commits intoMudBlazor:devfrom
danielchalmers:text-htmltag

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented May 8, 2024

Description

Rewrites the MudText component and adds a new property that lets you control which type of element is created to aid in accessibility and SEO. See the original discussion in #8865.

How Has This Been Tested?

unit, visually

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@danielchalmers
MudText: Ability to control which HTML tag is used
12acaba 
Resolves MudBlazor#8898 by adding HtmlTag.

Resolves MudBlazor#5535 by removing the `Inline` tag and making consumers use our more flexible and explicit CSS utility classes: https://mudblazor.com/utilities/display. E.g. `<MudText Typo="Typo.caption" Class="d-inline">`. This simplifies the library by removing an underused property.

WARNING: If the removal of `Inline` is accepted I still need to go back and adjust the few texts in the docs that use it.

Adds comprehrensive documentation to the component and plenty to the docs.

Adds comprehensive tests as there were none before.

I could have used `MudElement` but that seemed too DRY. This gives us more flexibility and keeps the code simple as it is a fundamental component on the same level. Spaghetti be gone.
@github-actions github-actions bot added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label May 8, 2024
@danielchalmers
Copy link
Member Author

danielchalmers commented May 8, 2024

@henon @ScarletKuro

If the removal of Inline is accepted I still need to go back and adjust the few texts in the docs that use it.
I would recommend removing it because it is underused and we have far more flexible CSS utility classes.

I could have used MudElement but that seemed too DRY. This gives us more flexibility and keeps the code simple as it is a fundamental component on the same level. Spaghetti be gone 👉 🚪 .

@meenzen FYI

@danielchalmers danielchalmers added the accessibility Accessibility concerns (ARIA, keyboard, focus, screen readers, contrast) label May 8, 2024
@ScarletKuro ScarletKuro requested review from ScarletKuro and henon May 8, 2024 08:24
@henon
Copy link
Contributor

henon commented May 8, 2024

I could have used MudElement but that seemed too DRY.

I don't see what is the problem with

<MudElement HtmlTag="@GetTagName(Typo)" Class="@Classname" Style="@Stylename" UserAttributes="@UserAttributes">
   @ChildContent
</MudElement>

We always wanted to avoid using RenderBuilder throughout the library so we added MudElement and used it everywhere instead. If you search for MudElement usage in the library you'll find at least a dozen usages just like this. This here shouldn't be an exception.

@henon
Copy link
Contributor

henon commented May 8, 2024 •
edited
Loading

OK to the removal of Inline your argument makes sense. We'll add it to the migration guide. Please add it to the illegal parameter detection

@danielchalmers danielchalmers marked this pull request as ready for review May 8, 2024 09:25
@danielchalmers
Copy link
Member Author

danielchalmers commented May 8, 2024

@henon I think ready. Surprise!

@codecov
Copy link

codecov bot commented May 8, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.25%. Comparing base (28bc599) to head (eff8de9).
Report is 169 commits behind head on dev.

Additional details and impacted files 
@@            Coverage Diff             @@
##              dev    #8916      +/-   ##
==========================================
+ Coverage   89.82%   90.25%   +0.42%     
==========================================
  Files         412      424      +12     
  Lines       11878    12280     +402     
  Branches     2364     2410      +46     
==========================================
+ Hits        10670    11083     +413     
+ Misses        681      667      -14     
- Partials      527      530       +3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@henon henon merged commit 31c0a2e into MudBlazor:dev May 8, 2024
@henon henon mentioned this pull request May 8, 2024
Closed
@henon henon added breaking change This change will require consumer code updates v7 API change Modifies the public API surface labels May 8, 2024
@henon
Copy link
Contributor

henon commented May 8, 2024

Thanks Daniel!

Added to v7.0.0 Migration Guide #8447

@henon
Copy link
Contributor

henon commented May 26, 2024

The Inline parameter was re-added in #9065

@henon henon mentioned this pull request May 26, 2024
Merged
7 tasks
@ScarletKuro ScarletKuro mentioned this pull request Aug 7, 2024
Closed
4 tasks
@dependabot dependabot bot mentioned this pull request Aug 7, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@henon henon henon approved these changes

@ScarletKuro ScarletKuro ScarletKuro approved these changes

Assignees

No one assigned

Labels

accessibility Accessibility concerns (ARIA, keyboard, focus, screen readers, contrast) API change Modifies the public API surface breaking change This change will require consumer code updates enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

MudText: Render as block element when Inline is false MudText: Ability to control which HTML tag is used

3 participants

@danielchalmers @henon @ScarletKuro