Skip to content

Commit

Permalink
Remove all non-semantic uses of <br> (#823)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdbaldry
jdbaldry authored Sep 3, 2024
1 parent 4907bef commit c52bbe3
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 38 deletions.
2 changes: 1 addition & 1 deletion docs/sources/review/backport-changes/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.]
Expand Down
40 changes: 18 additions & 22 deletions docs/sources/write/image-guidelines/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
37 changes: 22 additions & 15 deletions docs/sources/write/style-guide/ux-writing/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down Expand Up @@ -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).

Expand Down Expand Up @@ -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:**

Expand Down Expand Up @@ -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:**

Expand Down

0 comments on commit c52bbe3

Please sign in to comment.