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

Yomodo · May 8, 2024 · 31c0a2e · 31c0a2e
1 parent a6153b6
commit 31c0a2e
Show file tree

Hide file tree

Showing 22 changed files with 338 additions and 191 deletions.
diff --git a/src/MudBlazor.Docs/Pages/Components/Overview/OverviewPage.razor b/src/MudBlazor.Docs/Pages/Components/Overview/OverviewPage.razor
@@ -4,8 +4,8 @@
 <DocsPage DisplayFooter="true">
     <DocsPageHeader Title="Explore MudBlazor">
         <SpecialHeaderContent>
-            <MudText Typo="Typo.h2" Inline="true" Class="docs-title">Explore&nbsp;</MudText>
-            <MudText Typo="Typo.h2" Inline="true" Color="Color.Primary" Class="docs-title">MudBlazor</MudText>
+            <MudText Typo="Typo.h2" Class="docs-title d-inline">Explore&nbsp;</MudText>
+            <MudText Typo="Typo.h2" Class="docs-title d-inline" Color="Color.Primary">MudBlazor</MudText>
             <br>
             <MudText Typo="Typo.subtitle1" Class="docs-title-description">Discover our library and all its components to power your next project.</MudText>
         </SpecialHeaderContent>

diff --git a/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableExample.razor b/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableExample.razor
@@ -35,7 +35,7 @@
     <MudSwitch @bind-Value="bordered" Color="Color.Warning">Bordered</MudSwitch>
     <MudSpacer />
     <div style="min-width:200px;">
-        <MudText Inline="true" Class="align-self-center">Selected1: @selectedItem1?.Name</MudText>
+        <MudText Class="align-self-center d-inline">Selected1: @selectedItem1?.Name</MudText>
     </div>
 </div>
 

diff --git a/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableInlineEditExample.razor b/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableInlineEditExample.razor
@@ -97,7 +97,7 @@
     </MudItem>
 </MudGrid>
 
-<MudText Inline="true">Selected1: @selectedItem1?.Name</MudText>
+<MudText HtmlTag="span">Selected1: @selectedItem1?.Name</MudText>
 
 <MudExpansionPanels Style="flex: 1;">
     <MudExpansionPanel Text="Show inline-edit event log">

diff --git a/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableMultiSelectExample.razor b/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableMultiSelectExample.razor
@@ -4,7 +4,7 @@
 @inject HttpClient httpClient
 
 <MudSwitch @bind-Value="_selectOnRowClick">SelectOnRowClick: @_selectOnRowClick</MudSwitch>
-<MudText Inline="true">Item: @_selectedItemText</MudText>
+<MudText HtmlTag="span">Item: @_selectedItemText</MudText>
 <MudText>Selected items (@selectedItems?.Count): @(selectedItems == null ? "" : string.Join(", ", selectedItems.OrderBy(x => x.Sign).Select(x => x.Sign)))</MudText>
 
 

diff --git a/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableRecordComparerExample.razor b/src/MudBlazor.Docs/Pages/Components/Table/Examples/TableRecordComparerExample.razor
@@ -27,7 +27,7 @@
     </FooterContent>
 </MudTable>
 
-<MudText Inline="true">Selected items: @(selectedItems1 == null ? "" : string.Join(", ", selectedItems1.OrderBy(x => x.Sign).Select(x => x.Sign)))</MudText>
+<MudText HtmlTag="span">Selected items: @(selectedItems1 == null ? "" : string.Join(", ", selectedItems1.OrderBy(x => x.Sign).Select(x => x.Sign)))</MudText>
 
 @code {
     private HashSet<Element> selectedItems1 = new HashSet<Element>();

diff --git a/src/MudBlazor.Docs/Pages/Components/Typography/Examples/TextGeneralExample.razor b/src/MudBlazor.Docs/Pages/Components/Typography/Examples/TextGeneralExample.razor
@@ -13,4 +13,6 @@
 <MudText Typo="Typo.input">input. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText>
 <MudText Typo="Typo.button">BUTTON TEXT</MudText>
 <MudText Typo="Typo.caption">caption text</MudText>
-<MudText Typo="Typo.overline">OVERLINE TEXT</MudText>
+<MudText Typo="Typo.overline">OVERLINE TEXT</MudText>
+<MudText Typo="Typo.button" HtmlTag="h3">button typo but the element is h3</MudText>
+<MudText Typo="Typo.body2" HtmlTag="strong">body2 typo but the element is strong</MudText>
diff --git a/src/MudBlazor.Docs/Pages/Components/Typography/TypographyPage.razor b/src/MudBlazor.Docs/Pages/Components/Typography/TypographyPage.razor
@@ -6,7 +6,17 @@
 
         <DocsPageSection>
             <SectionHeader Title="General">
-                <Description>MudBlazor's default font is Roboto and is not loaded automatically. The installation instructions include how to load the font. But in general, the fastest and easiest way is to load it from Google Fonts, as in the example below.</Description>
+                <Description>
+                    <p>
+                        MudBlazor's default font is Roboto which is not loaded automatically.
+                        The installation instructions include how to load the font, but generally the easiest way is to load it from Google Fonts, as in the example below.
+                    </p>
+                    <br />
+                    <p>
+                        The type of element that's created depends on the typo used and can be overridden with the <CodeInline>@nameof(MudText.HtmlTag)</CodeInline> property.
+                        Use Inspect to compare how the text below is rendered.
+                    </p>
+                </Description>
             </SectionHeader>
             <SectionContent Code="@nameof(TextGeneralExample)" Block="true">
                 <TextGeneralExample />
@@ -15,7 +25,11 @@
 
         <DocsPageSection>
             <SectionHeader Title="Alignment">
-                <Description></Description>
+                <Description>
+                    This demonstrates the <CodeInline>@nameof(MudText.Align)</CodeInline> property.
+                    <br />
+                    <b>Note:</b> This will not work with an inline element like <CodeInline>span</CodeInline>.
+                </Description>
             </SectionHeader>
             <SectionContent Code="@nameof(TextAlignmentExample)" Block="true" FullWidth="true">
                 <TextAlignmentExample />

diff --git a/src/MudBlazor.Docs/Pages/Customization/Theming/Overview.razor b/src/MudBlazor.Docs/Pages/Customization/Theming/Overview.razor
@@ -20,11 +20,11 @@
             </SectionHeader>
             <ul class="docs-list mx-2">
                 <li><MudLink Href="/customization/palette">Palette</MudLink></li>
-                <li><MudText Inline="true">Shadows</MudText></li>
+                <li><MudText HtmlTag="span">Shadows</MudText></li>
                 <li><MudLink Href="/customization/typography">Typography</MudLink></li>
-                <li><MudText Inline="true">Layout Properties</MudText></li>
+                <li><MudText HtmlTag="span">Layout Properties</MudText></li>
                 <li><MudLink Href="/customization/z-index">z-index</MudLink></li>
-                <li><MudText Inline="true">Pseudo CSS scope</MudText></li>
+                <li><MudText HtmlTag="span">Pseudo CSS scope</MudText></li>
                 <li><MudLink Href="/customization/pseudocss">Pseudo CSS</MudLink></li>
             </ul>
             <MudText Class="mt-4">You can find all the <MudLink Href="/customization/default-theme" Color="Color.Secondary">Default Theme</MudLink> values under customization.</MudText>

diff --git a/src/MudBlazor.Docs/Pages/Customization/Theming/ZIndex.razor b/src/MudBlazor.Docs/Pages/Customization/Theming/ZIndex.razor
@@ -9,12 +9,12 @@
                 <Description>This is the z-order that is utilized by MudBlazor by default. Either design your application around it or change it in your theme.</Description>
             </SectionHeader>
             <ul class="docs-list mx-2">
-                <li><MudText Inline="true">Drawer</MudText></li>
-                <li><MudText Inline="true">Popover</MudText></li>
-                <li><MudText Inline="true">AppBar</MudText></li>
-                <li><MudText Inline="true">Dialog</MudText></li>
-                <li><MudText Inline="true">Snackbar</MudText></li>
-                <li><MudText Inline="true">Tooltip</MudText></li>
+                <li><MudText HtmlTag="span">Drawer</MudText></li>
+                <li><MudText HtmlTag="span">Popover</MudText></li>
+                <li><MudText HtmlTag="span">AppBar</MudText></li>
+                <li><MudText HtmlTag="span">Dialog</MudText></li>
+                <li><MudText HtmlTag="span">Snackbar</MudText></li>
+                <li><MudText HtmlTag="span">Tooltip</MudText></li>
             </ul>
             <MudText Class="mt-4 mb-16">These values can be changed in the <CodeInline>MudTheme</CodeInline> class, where <MudLink Href="/customization/default-theme" Color="Color.Secondary">the defaults</MudLink> are displayed under z-index.</MudText>
         </DocsPageSection>

diff --git a/src/MudBlazor.Docs/Pages/Features/Breakpoints/BreakpointTable.razor b/src/MudBlazor.Docs/Pages/Features/Breakpoints/BreakpointTable.razor
@@ -12,7 +12,7 @@
         <tr>
             <td>
                 <MudIcon Icon="@Icons.Material.Filled.PhoneIphone" Class="mb-n1" />
-                <MudText Inline="true">Extra small</MudText>
+                <MudText HtmlTag="span">Extra small</MudText>
             </td>
             <td>xs</td>
             <td>Small to large phone</td>
@@ -21,7 +21,7 @@
         <tr>
             <td>
                 <MudIcon Icon="@Icons.Material.Filled.StayCurrentLandscape" Class="mb-n1 mr-1" />
-                <MudText Inline="true">Small</MudText>
+                <MudText HtmlTag="span">Small</MudText>
             </td>
             <td>sm</td>
             <td>Small to medium tablet</td>
@@ -30,7 +30,7 @@
         <tr>
             <td>
                 <MudIcon Icon="@Icons.Material.Filled.Laptop" Class="mb-n1 mr-1" />
-                <MudText Inline="true">Medium</MudText>
+                <MudText HtmlTag="span">Medium</MudText>
             </td>
             <td>md</td>
             <td>Large tablet to laptop</td>
@@ -39,7 +39,7 @@
         <tr>
             <td>
                 <MudIcon Icon="@Icons.Material.Filled.DesktopWindows" Class="mb-n1 mr-1" />
-                <MudText Inline="true">Large</MudText>
+                <MudText HtmlTag="span">Large</MudText>
             </td>
             <td>lg</td>
             <td>Desktop</td>
@@ -48,7 +48,7 @@
         <tr>
             <td>
                 <MudIcon Icon="@Icons.Material.Filled.Tv" Class="mb-n1 mr-1" />
-                <MudText Inline="true">Extra Large</MudText>
+                <MudText HtmlTag="span">Extra Large</MudText>
             </td>
             <td>xl</td>
             <td>HD and 4k</td>
@@ -57,7 +57,7 @@
         <tr>
             <td>
                 <MudIcon Icon="@Icons.Material.Filled.Tv" Class="mb-n1 mr-1" />
-                <MudText Inline="true">Extra Extra Large</MudText>
+                <MudText HtmlTag="span">Extra Extra Large</MudText>
             </td>
             <td>xxl</td>
             <td>4k+ and ultra-wide</td>