Skip to content

Commit 9d2b67d

Browse files
Group 1: Banner and Image audit on the website (#2897)
Co-authored-by: Kristin Bradley <[email protected]>
1 parent 5dbdc8b commit 9d2b67d

File tree

6 files changed

+24
-24
lines changed

6 files changed

+24
-24
lines changed

website/docs/components/dropdown/partials/guidelines/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
A dropdown is a flexible component that displays a list of actions or options to the user. It should not be confused with [Select](/components/form/select), which is used in forms as a way for the user to make a selection from a list.
1+
A dropdown is a flexible component that displays a list of actions or options to the user. It should not be confused with the [Select](/components/form/select), which is used in forms as a way for the user to make a selection from a list.
22

33
!!! Info
44

website/docs/components/form/select/partials/guidelines/guidelines.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
!!! Info
2-
3-
**This component uses a native HTML element**
4-
5-
It's not possible to customize options within this component as it is a native HTML element and uses browser defaults to render it. Find more information [on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
6-
7-
!!!
8-
91
## Usage
102

113
### When to use
Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
A Select is a form element that provides users with a way to select amongst a set of options.
1+
A Select is a form element that provides users with a way to select amongst a set of options.
2+
3+
!!! Info
4+
5+
**This component uses a native HTML element**
6+
7+
It's not possible to customize options within this component as it is a native HTML element and uses browser defaults to render it. Find more information [on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
8+
9+
!!!

website/docs/components/reveal/partials/guidelines/guidelines.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ The Reveal component should be used for hiding and showing simple content. For c
4545

4646
## Spacing
4747

48+
!!! Info
49+
50+
In cases where surrounding elements already have margin or padding added, you may want to reduce or remove the spacing entirely.
51+
!!!
52+
4853
- When using the Reveal to contain information related to a single element within a group or section, we recommend leaving 8px between the Reveal and the element it relates to.
4954

5055
![Reveal example within a section](/assets/components/reveal/spacing-guidance-single-element.png =591x*)
@@ -53,9 +58,4 @@ The Reveal component should be used for hiding and showing simple content. For c
5358

5459
![Reveal example underneath a section](/assets/components/reveal/spacing-guidance-section.png =591x*)
5560

56-
- If you need to adjust the spacing, always ensure it is slightly tighter compared to the spacing between other elements and components in the group, section, or page.
57-
58-
!!! Info
59-
60-
In cases where surrounding elements already have margin or padding added, you may want to reduce or remove the spacing entirely.
61-
!!!
61+
- If you need to adjust the spacing, always ensure it is slightly tighter compared to the spacing between other elements and components in the group, section, or page.

website/docs/patterns/table-multi-select/partials/guidelines/guidelines.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
The Helios Table [multi-select functionality](/components/table/table#multi-select) supports performing bulk actions and selection of one or more rows within a Table.
22

3-
![Example of Table multi-select in context](/assets/patterns/table-multi-select/multi-select-preview-image.png)
4-
53
!!! Info
64

75
These guidelines are meant to assist teams in designing and building Tables that have bulk editing and selection functionality. Currently there aren’t Ember or Figma components to support these advanced patterns, but they can be composed using a combination of HDS components.
86
!!!
97

8+
![Example of Table multi-select in context](/assets/patterns/table-multi-select/multi-select-preview-image.png)
9+
1010
## Selected count
1111

1212
Display the **selected count** to communicate how many rows or results have been selected in the _entire_ data set. This includes Table rows that are outside of the current view in the Table (e.g., in a different page if using [Pagination](/components/pagination)), and should be represented using a numerical value.

website/docs/utilities/dialog-primitive/partials/code/how-to-use.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ The `DialogPrimitive` serves as the foundation for dialog derived components lik
4747

4848
The `@titleTag` argument changes the HTML element that wraps the `DialogPrimitive::Header` tagline and "title" content. When organizing the content on a webpage, the heading levels should reflect the structure of the page. For example, if the `DialogPrimitive` is used as a Split Window, the value should be `"h2"`.
4949

50+
!!! Insight
51+
52+
The default `@titleTag` value is `"div"` as the correct heading level (`h1–`h6) is dependent on the context in which it is used within a page. We strongly encourage consumers to set the appropriate `@titleTag` value to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology.
53+
54+
!!!
55+
5056
```handlebars
5157
<div class="doc-dialog-primitive-grid-layout">
5258
<div class="doc-dialog-primitive-flex-layout">
@@ -79,9 +85,3 @@ The `@titleTag` argument changes the HTML element that wraps the `DialogPrimitiv
7985
</Hds::DialogPrimitive::Wrapper>
8086
</div>
8187
```
82-
83-
!!! Insight
84-
85-
The default `@titleTag` is `"div"` because the correct value is dependent on the individual page. We strongly encourage consumers to update the `@titleTag` to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology.
86-
87-
!!!

0 commit comments

Comments
 (0)