Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: updated component max character / max word counts #1184

Merged
merged 26 commits into from
Nov 27, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
a4c7a27
docs: updated component max character / max word counts
Aug 2, 2023
c763d31
docs: added max counts to spinner and tooltip
Aug 2, 2023
2fd35f4
Merge branch 'main' into docs/max-character-limits
nikkimk Aug 24, 2023
6849e2d
Merge branch 'main' into docs/max-character-limits
nikkimk Sep 21, 2023
9a2bd03
Merge branch 'main' of github.com:RedHat-UX/red-hat-design-system int…
Nov 8, 2023
12e8394
docs(announcement): updated character count
Nov 8, 2023
6906905
docs(disclosure): updated character count
Nov 8, 2023
5dc3481
docs(jump-links): updated character count
Nov 8, 2023
7b01834
docs(card): character count
Nov 10, 2023
39cce77
docs(link): character count
Nov 10, 2023
c8aff7a
docs(sticky-card): character count
Nov 10, 2023
bdaa50e
docs(video-thumbnail): character count
Nov 10, 2023
cd09707
docs(card): character count
Nov 10, 2023
0d60dac
docs(progress-steps): character count
Nov 10, 2023
9153099
Merge branch 'main' into docs/max-character-limits
nikkimk Nov 10, 2023
14b6abc
Merge branch 'main' into docs/max-character-limits
nikkimk Nov 13, 2023
be0f32d
docs: made char count tables more consistent
Nov 13, 2023
58b1ec6
Merge branch 'docs/max-character-limits' of github.com:RedHat-UX/red-…
Nov 13, 2023
b0e2e68
docs: Character limit for footers in cards
Nov 13, 2023
63a049a
docs: updated maximum character count
Nov 13, 2023
de45bbe
docs: updated character count tables
Nov 13, 2023
77f6b5a
docs(audio-player): updated character count guidelines
Nov 14, 2023
b11041a
Merge branch 'main' into docs/max-character-limits
nikkimk Nov 14, 2023
7d869dd
Merge branch 'main' into docs/max-character-limits
marionnegp Nov 14, 2023
4581b68
Merge branch 'main' into docs/max-character-limits
markcaron Nov 27, 2023
d661947
Merge branch 'main' into docs/max-character-limits
markcaron Nov 27, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion elements/rh-accordion/docs/20-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Title text should have fewer characters to help users make sense of what the con

| Element {style="width: 50%" } | Character count |
| ----------------------------- | --------------- |
| Title text | 45 |
| Title text | 65 |

### Panel content
When a panel is expanded, some content must appear below the title text and chevron icon. Content can include text, cards, images, etc. Text blocks should not exceed `750px` to maintain optimal readability.
Expand Down
6 changes: 6 additions & 0 deletions elements/rh-spinner/docs/20-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ enough time to read it.
alt=" Two spinners; one with a short text label, which is acceptable, and one with a very long text label which is not acceptable",
src="../spinner-text-label.png" %}

### Character and word count

| Element | Character count |
| ---------- | --------------- |
| Text label | 30 |

## Animation

The spinner animation will loop until the data is retrieved and disappears when
Expand Down
13 changes: 5 additions & 8 deletions elements/rh-subnav/docs/20-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,11 @@ strategist to shorten them.

### Character count

A subnavigation should have four or five links maximum. However, if text labels
are very short, more can be added.

| Link count | Character count |
| ---------- | --------------- |
| 6 | < 13 |
| 5 | 14 - 17 |
| 4 | 18 - 23 |
A subnavigation should have four or five links maximum. Text labels should be short but descriptive.

| Character count | Word count |
nikkimk marked this conversation as resolved.
Show resolved Hide resolved
| --------------- | ---------- |
| 20 | 2 to 3 |

{.full-width}

Expand Down
12 changes: 6 additions & 6 deletions elements/rh-tabs/docs/20-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@ Text labels should be concise, scannable, and descriptive of content in the pane
{% example palette="light", alt="Image of open tabs with examples of adequate and long text labels", src="../tabs-text-labels.png" %}

### Character count
In general, tabs should have three or four text labels maximum. However, if text labels are <strong>very short</strong>, more can be added.
In general, tabs should have three or four text labels maximum. Text labels should be short but descriptive.

| Tab count {style="width: 50%;"} | Character count |
| ------------------------------- | --------------- |
| 6 | < 13 |
| 5 | 14 - 17 |
| 4 | 18 - 23 |
Text labels should be short but descriptive.

| Character count | Word count |
| --------------- | ---------- |
| 20 | 2 to 3 |

## Layout
### Horizontal tabs width
Expand Down
8 changes: 8 additions & 0 deletions elements/rh-tooltip/docs/20-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@ Content in a tooltip is limited to text only. Consider the following when writin
alt="Various text examples; from left to right, the text length starts very short, but gets longer and longer",
src="../tooltip-content.png" %}

### Character count

A tooltip's body text should be short and descriptive.

| Element | Maximum characters |
| ------- | ------------------ |
| Body | 60 |

## Orientation
The correct orientation of a tooltip depends on the amount of content and browser window. If a tooltip covers up important information or gets cut off, choose a different orientation.

Expand Down