Skip to content

Commit

Permalink
docs(button): update docs (#1006)
Browse files Browse the repository at this point in the history 
* docs(button): updated JSDoc

* docs(button) :init a11y page

* docs(button): added usage to code page

* docs(badge): badge docs cleanup

* docs(badge): added usage section

* docs(badge): edited alt text, elminated dup usage band on code tab, and removed a11y tab for now

* docs(badge): added changeset

* docs(badge): added sample component

* docs(badge): move summary to class doc

* docs(badge): add cssprops to cem

* docs(badge): Updated .changeset/red-melons-begin.md

Co-authored-by: Benny Powers <bennypowers@users.noreply.github.com>

* docs(badge): updated badge with a11y and related items sections

* docs(button): updated button docs

* docs(button): fixed style and updated element JSDoc summary

* docs(button): added changeset

* docs(button): undo merge from docs/badge

* docs(button): undo merge from docs/badge

* docs(button): undeo merge from docs/badge

* docs(button): undo merge from docs/badge

* docs(button): removed old SVG images

* docs(button): getting description to work

* docs(contributors): added NikkiMK to contributors array on package.json

* docs(button): updated JSDoc description

Co-authored-by: Benny Powers <bennypowers@users.noreply.github.com>

* docs(button): Fixed formatting on style page

* docs(button): Updated styling and JSDoc

* docs(button): format markdown

* docs(button): updated style and overviewdocs

* docs(button): updated notes and repo status

* docs(button): fixed overview and accesisbility

* docs(button): added example paletter none to two guidelines images

* docs(button): fixed table column widths

* docs(button): updated table columns and added spacer shortcode

* docs(button): updated status based on PR review

* docs(button): updated docs based on PR review

* docs(button): updated button element with description

---------

Co-authored-by: Benny Powers <web@bennypowers.com>
Co-authored-by: Benny Powers <bennypowers@users.noreply.github.com>
  • Loading branch information
@nikkimk @bennypowers
3 people committed Jun 4, 2023
1 parent 10fadf0 commit 86c606b
Show file tree
Hide file tree
Showing 55 changed files with 406 additions and 673 deletions.
5 changes: 5 additions & 0 deletions .changeset/poor-kids-think.md
View file
@@ -0,0 +1,5 @@
---
"@rhds/elements": patch
---

`<rh-button>`: corrected and updated custom elements manifest
18 changes: 7 additions & 11 deletions docs/_data/repoStatus.csv
View file
Expand Up @@ -10,17 +10,13 @@ Call to action - default video,x,,x,,
Call to action - brick,x,x,x,,
Call to action - brick with icon,x,,,,
Link with icon,,,,,
Button - primary,,,,,
Button - secondary,,,,,
Button - tertiary,,,,,
Button - danger,,,,,
Button - danger secondary,,,,,
Button - disabled,,,,,
Button - search,,,,,
Button - link,,,,,
Button - link danger,,,,,
Button - close,,,,,
Button - play,,,,,
Button - danger,x,,,,
Button - primary,x,,,,
Button - secondary,x,,,,
Button - tertiary,x,,,,
Button - link,x,,,,
Button - play,x,,,,
Button - close,x,,,,
Skip to main content,,,,,
"Tabs - horizontal, open",,x,x,,
"Tabs - horizontal, boxed",,x,x,,
Expand Down
2 changes: 1 addition & 1 deletion elements/rh-badge/docs/screenshot.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 19 additions & 5 deletions elements/rh-button/docs/00-overview.md
View file
@@ -1,13 +1,17 @@
Buttons allow users to perform an action when triggered. They feature a text
label, a background or a border, and icons.
{% section %}
## Overview
{{ tagName | getElementDescription }}

{% example palette="light",
alt="Image of Danger, Primary, Secondary, Tertiary, and Link buttons in the first row and Play and Close buttons in the second row",
src="./button-sample.png" %}
{% endsection %}

{% section %}
## Sample component
![Examples of buttons]({{ './buttons.svg' | url }}) {style="--inline-img-max-width: 604px;"}
<rh-button>Primary</rh-button>
{% endsection %}

{% repoStatus %}

{% section %}
## Demos
View a live version of this component and see how it can be customized.
Expand All @@ -17,3 +21,13 @@ label, a background or a border, and icons.
{% endcta %}
{% endsection %}

{% section %}
## When to use
- When you need to allow users to interact with pages in a variety of ways
- When you need to communicate actions users can take
- When you need to draw attention to the highest priority action

{% endsection %}

{% repoStatus type="Element" %}

222 changes: 114 additions & 108 deletions elements/rh-button/docs/10-style.md
View file
@@ -1,139 +1,145 @@
Buttons can be used in light and dark themes. There are a variety of styles to
choose from depending on what users need to accomplish.
## Style

<!-- Anatomy image with sketch -->
A button is clickable text or an icon that triggers an action on the page or in
the background. Depending on the action, content, and hierarchy, a button can be
used on its own or grouped with other buttons.
### Anatomy

{% example palette="light",
width=370,
class="inline-flex centered",
style="margin-block:var(--rh-space-2xl);",
alt="Naming button parts",
src="../button-style.svg" %}
alt=" Anatomy image of buttons with numbered annotations",
src="../button-anatomy.png" %}

1) Text
2) Container
3) Border
4) Text only
5) Icon
6) Icon background
7) Icon only
{.example-notes}

{% section %}
## Theme

{% example palette="light",
width=680,
class="inline-flex centered",
style="margin-block:var(--rh-space-2xl);",
alt="Themes of buttons",
src="../button-theme-light.svg" %}

{% example palette="darkest",
width=680,
class="inline-flex centered",
style="margin-block:var(--rh-space-2xl);",
alt="Themes of buttons",
src="../button-theme-dark.svg" %}

<div style="display:grid;gap:var(--rh-space-2xl) var(--rh-space-4xl);grid-template-columns:repeat(auto-fit,minmax(400px,1fr));">

<div>

### Danger
Use for actions that are difficult or impossible to undo, like Delete. This
style has the same hierarchy as the Primary style due to its destructive
nature. Don’t use this style multiple times in the same area.

</div>
<div>

### Danger, secondary
Use for less destructive actions, like Cancel. This style is lower in hierarchy
than the Danger style and it should be placed on its right side. Don’t use this
style multiple times in the same area unless necessary.

</div>
<div>

### Danger, link
Use for secondary or general links. This style is lower in hierarchy than
the Primary style and it can be used multiple times in the same area.
Buttons are available in both light and dark themes.

</div>
### Light and dark themes

<hr style="grid-column:-1/1;">
{% example palette="light",
alt=" Image of light theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons",
src="../button-theme-light.png" %}

<div>

### Primary
Use to group a list of links together in a grid. Only Brick styles can
stretch to fit a container or a grid, otherwise the label padding stays the
same in all other styles.
{% example palette="darkest",
alt=" Image of dark theme Danger, Primary, Secondary, Tertiary, Link, Play, and Close buttons",
src="../button-theme-dark.png" %}

| Property {style="width: 50%" } | Light theme {style="width: 25%" } | Dark theme |
| ---------------------------------------- | --------------------------------- | ---------- |
| Color - Danger button text | `#FFFFFF` | `#151515` |
| Color - Danger button surface | `#C9190B` | `#FF542E` |
| Color - Primary button text | `#FFFFFF` | `#FFFFFF` |
| Color - Primary button surface | `#0066CC` | `#0066CC` |
| Color - Secondary button text and border | `#0066CC` | `#2B9AF3` |
| Border width - Secondary button | `1px` | `1px` |
| Color - Tertiary button text and border | `#151515` | `#FFFFFF` |
| Border width - Tertiary button | `1px` | `1px` |
| Color - Link button tex | `#0066CC` | `#2B9AF3` |
| Color - Play button background | `#151515` | `#FFFFFF` |
| Opacity - Play button background | `50%` | `25%` |
| Color - Close button | `#4D4D4D` | `#C7C7C7` |

## Configuration

All buttons with a container have the same height and border radius, but the
width varies based on the amount of content. Buttons in a row are all
horizontally centered. When a Play button is placed on an image, it is both
horizontally and vertically centered and stays the same size no matter how big
or small the image gets.

</div>
<div>
{% example palette="light",
alt=" Image of buttons and various specs like border radius, height, icon size, width, alignment, placement, and more",
src="../button-configuration.png" %}

### Secondary
Use to group a list of links with icons together in a grid. Only Brick
styles can stretch to fit a container or a grid, otherwise the label padding
stays the same in all other styles.

</div>
<div>
## Space

### Tertiary
Use for tertiary or the least important links. This style is the lowest
in hierarchy and it can be used multiple times in the same area.
Space values are the same on all breakpoints for the following buttons. To see
space values when buttons are grouped, go to the [Guidelines](./guidelines) page.

</div>
<div>
{% alert title="Helpful tip" %}
Buttons include a custom `6px` spacer, do not use it anywhere else.
{% endalert %}

### Search
Use to trigger a less important video that will play in a modal. This
style is the lowest in hierarchy and it can be used multiple times in the
same area.
{% example palette="light",
alt=" Image of Danger, Primary, Secondary, Tertiary, Link, and Close buttons with spacing values in between",
src="../button-space.png" %}

</div>
<div>
{% spacerTokensTable
headline="",
caption='',
headingLevel="4",
tokens="--rh-space-sm, --rh-space-md, --rh-space-lg" %}
{% endspacerTokensTable %}

### Disabled
Most styles will appear disabled if a task needs to be completed first.
Don’t use multiple times in the same area unless necessary.
## Interaction states

</div>
<div>
Interaction states are visual representations used to communicate the status of
an element or pattern.

### Link
Use for less important actions or group it to the right of other styles.
This style has an invisible background and no border. It can be used
multiple times in the same area.
### Hover

</div>
<div>
{% example palette="light",
alt=" Image of light theme button hover states",
src="../button-interaction-state-hover-theme-light.png" %}

### Play
Use to trigger a video that will play in a Modal. Don’t use this style
without a thumbnail image underneath or use a Default, video call to action
instead.
{% example palette="darkest",
alt=" Image of dark theme button hover states",
src="../button-interaction-state-hover-theme-dark.png" %}

| Property {style="width: 50%" } | Light theme {style="width: 25%" } | Dark theme |
| ---------------------------------- | --------------------------------- | ----------- |
| Color - Danger button surface | `#A30000` | `#FF8266` |
| Color - Primary button surface | `#004080` | `#004080` |
| Border width - Secondary button | `2px` | `2px` |
| Border width - Tertiary button | `2px` | `2px` |
| Color - Link button text | `#004080` | `#73BCF7` |
| Text decoration - Link button text | `Underline` | `Underline` |
| Opacity - Play button background | `75%` | `50%` |
| Color - Close button | `#151515` | `#FFFFFF` |

### Focus

{% alert title="Helpful tip" %}
The Focus state has the same styles as the Hover state.
{% endalert %}

</div>
<div>
{% example palette="light",
alt=" Image of light theme button focus states",
src="../button-interaction-state-focus-theme-light.png" %}

### Close
Use to close something, like an Alert. Don’t use this style multiple
times in the same area.
{% example palette="darkest",
alt=" Image of dark theme button focus states",
src="../button-interaction-state-focus-theme-dark.png" %}

</div>
| Property {style="width: 50%" } | Light theme {style="width: 25%" } | Dark theme |
| ------------------------------ | --------------------------------- | ---------- |
| Color - focus ring | `#0066CC` | `#73BCF7` |

</div>

{% endsection %}
### Active

<hr style="margin-block:var(--rh-space-5xl);">
{% alert title="Helpful tip" %}
The Active state has the same styles as the Hover state.
{% endalert %}

{% section %}
## Spacing
Buttons use [PatternFly 4
spacers](https://www.patternfly.org/v4/guidelines/spacers) to define spacing
values between elements.
{% example palette="light",
alt=" Image of light theme button active states",
src="../button-interaction-state-active-theme-light.png" %}

{% example palette="light",
width=560,
class="inline-flex centered",
style="margin-block:var(--rh-space-2xl);",
alt="button spacing",
src="../button-spacing.svg" %}
{% endsection %}
{% example palette="light",
alt=" Image of dark theme button active states",
src="../button-interaction-state-active-theme-dark.png" %}

| Property {style="width: 50%" } | Light theme {style="width: 25%" } | Dark theme |
| ------------------------------ | --------------------------------- | ---------- |
| Color - focus ring | `#0066CC` | `#73BCF7` |

0 comments on commit 86c606b

Please sign in to comment.