From c52bbe32a27b9d697ee6dd474826e0db7cbeebb2 Mon Sep 17 00:00:00 2001
From: Jack Baldry <jack.baldry@grafana.com>
Date: Tue, 3 Sep 2024 17:59:55 +0100
Subject: [PATCH] Remove all non-semantic uses of <br> (#823)

---
 docs/sources/review/backport-changes/index.md |  2 +-
 docs/sources/write/image-guidelines/index.md  | 40 +++++++++----------
 .../write/style-guide/ux-writing/index.md     | 37 ++++++++++-------
 3 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/docs/sources/review/backport-changes/index.md b/docs/sources/review/backport-changes/index.md
index 8f48e19c4..29d3df625 100644
--- a/docs/sources/review/backport-changes/index.md
+++ b/docs/sources/review/backport-changes/index.md
@@ -58,7 +58,7 @@ To decide whether to backport a pull request, use the following decision tree:
 <div class="mermaid">
   flowchart TD
   D1{Is the change documenting a new feature?}
-  D2{Is the feature going to be released in<br>a future version of the project that<br>doesn't yet have a release branch?}
+  D2{Is the feature going to be released in a future version of the project that doesn't yet have a release branch?}
   D3{Is the change a fix for a typo?}
   D4{Is the change a documentation refactoring?}
   T1[Do nothing.]
diff --git a/docs/sources/write/image-guidelines/index.md b/docs/sources/write/image-guidelines/index.md
index cd87addf4..8293ea256 100644
--- a/docs/sources/write/image-guidelines/index.md
+++ b/docs/sources/write/image-guidelines/index.md
@@ -188,9 +188,8 @@ General rules:
     <tr>
       <td align="left" valign="top">Screenshot</td>
       <td align="left" valign="top">
-        <b>Naming convention:</b> <code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION&GT;-&LT;VERSION, IF APPLICABLE?&gt;.png</code><br>
-        <br>
-        <b>Examples:</b><br>
+        <p><code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION&GT;-&LT;VERSION, IF APPLICABLE?&gt;.png</code></p>
+        <b>Examples:</b>
         <ul>
           <li><code>screenshot-grafana-loki-uptime-dashboard.png</code></li>
           <li><code>screenshot-grafana-mimir-data-flow-diagram.png</code></li>
@@ -203,11 +202,11 @@ General rules:
     <tr>
       <td align="left" valign="top">Icon</td>
       <td align="left" valign="top">
-        Be as descriptive as possible.<br>
-        <br>
-        For example, use `icon-bar-graph.svg` or `icon-graph-bar.svg` instead of `icon-graph.svg`.<br>
-        <b>Naming convention:</b> <code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION?&gt;.svg</code><br>
-        <br>
+        <p><code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION?&gt;.svg</code></p>
+        <p>
+        Be as descriptive as possible.
+        For example, use <code>icon-bar-graph.svg</code> or <code>icon-graph-bar.svg</code> instead of <code>icon-graph.svg</code>.
+        </p>
         <b>Examples:</b>
         <ul>
           <li><code>icon-bar-graph.svg</code></li>
@@ -218,10 +217,8 @@ General rules:
     <tr>
       <td align="left" valign="top">Logo</td>
       <td align="left" valign="top">
-        When you name Grafana logo files, be sure to include the word "Grafana".<br>
-        <br>
-        <b>Naming convention:</b> <code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION&GT;-&LT;COLOR + ORIENTATION&GT;.&LT;FILE TYPE?&gt;</code><br>
-        <br>
+        <p><code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION&GT;-&LT;COLOR + ORIENTATION&GT;.&LT;FILE TYPE?&gt;</code></p>
+        <p>When you name Grafana logo files, be sure to include the word "Grafana".</p>
         <b>Examples:</b>
         <ul>
           <li><code>logo-prometheus-full-horizontal.svg</code></li>
@@ -232,8 +229,7 @@ General rules:
     <tr>
       <td align="left" valign="top">Photo</td>
       <td align="left" valign="top">
-        <b>Naming convention:</b> <code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION?&gt;.jpg</code><br>
-        <br>
+        <p><code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION?&gt;.jpg</code></p>
         <b>Examples:</b>
         <ul>
           <li><code>photo-raji-on-stage-grafanacon-keynote-2022.jpg</code></li>
@@ -245,8 +241,7 @@ General rules:
     <tr>
       <td align="left" valign="top">Recording</td>
       <td align="left" valign="top">
-        <b>Naming convention:</b> <code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION&GT;.&LT;FILE TYPE?&gt;</code><br>
-        <br>
+        <p><code>&lt;ASSET TYPE&GT;-&LT;VISUAL DESCRIPTION&GT;.&LT;FILE TYPE?&gt;</code></p>
         <b>Example:</b>
         <ul>
           <li><code>gif-grafana-share-playlist.mp4</code></li>
@@ -299,9 +294,10 @@ Don't store images in the local repository, as it prohibits re-use of the asset
           <li>Click <strong>Upload</strong>.</li>
           <li>The asset is available under <code>https://grafana.com/media/</code> in the directory where you uploaded it.</li>
           <li>Click <strong>Copy</strong> to copy the path of the file to your clipboard.</li>
-          <li>Add the reference to the Markdown file.<br>
-          <br>
-          The reference that you add to the Markdown renders the image when you build the Grafana website or a local docs preview.</li>
+          <li>
+            <p>Add the reference to the Markdown file.</p>
+            <p>The reference that you add to the Markdown renders the image when you build the Grafana website or a local docs preview.</p>
+          </li>
         </ol>
       </td>
     </tr>
@@ -310,9 +306,9 @@ Don't store images in the local repository, as it prohibits re-use of the asset
       <td align="left" valign="top">
         <ol>
           <li>Create a PR against the local repository that includes the Markdown file.</li>
-          <li>Add the image reference to the Markdown file.<br>
-          <br>
-          You don't need to test that the image renders in a local build of the documentation. The Grafana technical documentation team reviewing the PR ensures that the image reference works correctly.<br></li>
+          <li><p>Add the image reference to the Markdown file.</p>
+          <p>
+          You don't need to test that the image renders in a local build of the documentation. The Grafana technical documentation team reviewing the PR ensures that the image reference works correctly.</p></li>
           <li>Attach the image to the GitHub PR description.</li>
         </ol>
       </td>
diff --git a/docs/sources/write/style-guide/ux-writing/index.md b/docs/sources/write/style-guide/ux-writing/index.md
index 8146ca8d7..cc839e867 100644
--- a/docs/sources/write/style-guide/ux-writing/index.md
+++ b/docs/sources/write/style-guide/ux-writing/index.md
@@ -180,8 +180,7 @@ Use periods for multiple sentences.
 
 **Don't use:**
 
-> Metrics, Logs, and Traces are billed based on ingestion<br>
-> For Metrics, we bill based on the number of active series using the ninety-fifth percentile during the period
+> Metrics, Logs, and Traces are billed based on ingestion<br>For Metrics, we bill based on the number of active series using the ninety-fifth percentile during the period
 
 <!-- vale Grafana.We = YES -->
 
@@ -238,17 +237,22 @@ Use buttons when you want users to take actions, such as adding or creating new
 
 #### Common use cases for buttons
 
-| Button  | When to use it                                                                                                                                                                   | Examples                                                                                                                                                    |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Create  | Use when you're creating something new, from scratch or from within an existing app. Creating can involve building something (often large) from scratch.                         | **Create**<br>**Create incident**<br>**Create entry**                                                                                                       |
-| Add     | Use when you're adding something into a larger thing. Add extra details to an existing thing. Adding is usually a small or single step, with less work than creating.            | **Add details**<br>**Add contact**                                                                                                                          |
-| Save    | Save something to a server.                                                                                                                                                      | **Save**<br>**Save and exit**<br>**Save changes**                                                                                                           |
-| Edit    | Change or update something that already exists. This doesn't affect the server until the user saves.                                                                             | **Edit**                                                                                                                                                    |
-| Preview | Preview a runtime version of whatever you are working on. This action doesn't take you away from or override the page you're already on.                                         | **Preview**                                                                                                                                                 |
-| Cancel  | Cancel or leave a process. Leave without saving any changes. Although **Cancel** is a common button name, it's better to be specific and name the action that's being cancelled. | **Cancel**                                                                                                                                                  |
-| Close   | Close a window.                                                                                                                                                                  | **Close**                                                                                                                                                   |
-| Delete  | Permanently delete something from the server. This usually prompts a confirmation dialog box, asking you to confirm your decision.                                               | **Delete notification policy**<br>Deleting this notification policy permanently removes it. Are you sure you want to delete this policy?<br>**Yes, delete** |
-| Remove  | Remove an item from a list.                                                                                                                                                      | **Remove**                                                                                                                                                  |
+<!-- prettier-ignore-start -->
+
+| Button  | When to use it                                                                                                                                                                   | Examples                                                                                                                                                                                       |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Create  | Use when you're creating something new, from scratch or from within an existing app. Creating can involve building something (often large) from scratch.                         | <ul><li><b>Create</b></li><li><b>Create incident</b></li><li><b>Create entry</b></li></ul>                                                                                                     |
+| Add     | Use when you're adding something into a larger thing. Add extra details to an existing thing. Adding is usually a small or single step, with less work than creating.            | <ul><li><b>Add details</b></li><li><b>Add contact</b></li></ul>                                                                                                                                |
+| Save    | Save something to a server.                                                                                                                                                      | <ul><li><b>Save</b></li><li><b>Save and exit</b></li><li><b>Save changes</b></li></ul>                                                                                                         |
+| Edit    | Change or update something that already exists. This doesn't affect the server until the user saves.                                                                             | <ul><li><b>Edit</b></li></ul>                                                                                                                                                                  |
+| Preview | Preview a runtime version of whatever you are working on. This action doesn't take you away from or override the page you're already on.                                         | <ul><li><b>Preview</b></li></ul>                                                                                                                                                               |
+| Cancel  | Cancel or leave a process. Leave without saving any changes. Although **Cancel** is a common button name, it's better to be specific and name the action that's being cancelled. | <ul><li><b>Cancel</b></li></ul>                                                                                                                                                                |
+| Close   | Close a window.                                                                                                                                                                  | <ul><li><b>Close</b></li></ul>                                                                                                                                                                 |
+| Delete  | Permanently delete something from the server. This usually prompts a confirmation dialog box, asking you to confirm your decision.                                            | <ul><li><b>Delete notification policy</b></li><li><p><b>Deleting this notification policy permanently removes it.</p><p>Are you sure you want to delete this policy?</p><p><b>Yes, delete</b></p> |
+| Remove  | Remove an item from a list.                                                                                                                                                      | <ul><li><b>Remove</b></li></ul>                                                                                                                                                                |
+{ .no-spacing-list }
+
+<!-- prettier-ignore-end -->
 
 Refer to the Grafana Storybook React component library for button [usage](https://developers.grafana.com/ui/latest/index.html?path=/docs/buttons-button--basic) and an [example](https://developers.grafana.com/ui/latest/index.html?path=/story/buttons-button--basic).
 
@@ -289,7 +293,7 @@ Refer also to [Alert modals](#alert-modals).
 
 **Use:**
 
-> Failed to evaluate queries and expressions:<br> Add a query target to alert rule.
+> Failed to evaluate queries and expressions: Add a query target to alert rule.
 
 **Don't use:**
 
@@ -382,7 +386,10 @@ Only use a modal if this interruption is a good thing, for example, when the cos
 
 **Use:**
 
-> Use Google's location service?<br> Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
+> Use Google's location service?
+>
+> Let Google help apps determine location.
+> This means sending anonymous location data to Google, even when no apps are running.
 
 **Don't use:**