Skip to content

Commit

Permalink
docs: update README and docs page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebnitu
sebnitu committed May 6, 2021
1 parent 1f37f46 commit 56af910
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 20 deletions.
97 changes: 80 additions & 17 deletions docs/_packages/icon-action.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,64 +11,82 @@ usage:

## icon-action

The icon-action component consists of two parts, the `icon-action` and it's child `icon` component. Because icon-actions only contain an icon as its content, it's important to add an `aria-label` attribute with a label of what the action does for accessibility.

{% include demo_open.html class_grid="grid_stack" %}
<div class="level">
<button class="icon-action" aria-label="Close button">
<button class="icon-action" aria-label="Dismiss component">
{% include icon.html icon="x" %}
</button>
<button class="icon-action" aria-label="Minimize">
<button class="icon-action" aria-label="Minimize component">
{% include icon.html icon="minus" %}
</button>
<button class="icon-action" aria-label="Fullscreen">
<button class="icon-action" aria-label="Toggle fullscreen mode">
{% include icon.html icon="maximize-2" %}
</button>
</div>
{% include demo_switch.html %}
```html
<button class="icon-action" aria-label="Close">
<button class="icon-action" aria-label="Close button">
<svg role="img" class="icon">
<!-- SVG markup or link ID goes here.. -->
<!-- SVG markup or link ID goes here... -->
</svg>
</button>
```
{% include demo_close.html %}

## icon-action_invert

A supplemental icon-action modifier that allows base component and the [`icon-action_subtle`](#icon-action_subtle) modifier to provide an inversed version of itself. Since not all icon-action styles require an inversed variant, this is typically used for when the background context of an action matters.

{% include demo_open.html class_grid="grid_stack" %}
<div class="padding radius background-night">
<button class="icon-action icon-action_invert" aria-label="Close">
<button class="icon-action icon-action_invert" aria-label="Close button">
{% include icon.html icon="x" %}
</button>
</div>
{% include demo_switch.html %}
```html
<button class="icon-action" aria-label="Close">...</button>
<button class="icon-action icon-action_invert" aria-label="Close">...</button>
<button class="icon-action" aria-label="...">...</button>
<button class="icon-action icon-action_invert" aria-label="...">...</button>
```
{% include demo_close.html %}

### Available Combinations

- `icon-action icon-action_invert`
- `icon-action icon-action_invert icon-action_subtle`

## icon-action_subtle

Applies more subtle button styles to the icon-action. Can also be inverted using the [`icon-action_invert`](#icon-action_invert) supplemental modifier.

{% include demo_open.html class_grid="grid_stack" class_parent="flex flex-items-equal" %}
<div class="padding radius background-white border margin-right-sm">
<button class="icon-action icon-action_subtle" aria-label="Close">
<button class="icon-action icon-action_subtle" aria-label="Close button">
{% include icon.html icon="x" %}
</button>
</div>
<div class="padding radius background-night margin-left-sm">
<button class="icon-action icon-action_invert icon-action_subtle" aria-label="Close">
<button class="icon-action icon-action_invert icon-action_subtle" aria-label="Close button">
{% include icon.html icon="x" %}
</button>
</div>
{% include demo_switch.html %}
```html
<button class="icon-action icon-action_subtle" aria-label="Close">...</button>
<button class="icon-action icon-action_subtle icon-action_invert" aria-label="Close">...</button>
<button class="icon-action icon-action_subtle" aria-label="...">...</button>
<button class="icon-action icon-action_subtle icon-action_invert" aria-label="...">...</button>
```
{% include demo_close.html %}

## icon-action_type_[key]
### Available Combinations

- `icon-action icon-action_subtle`
- `icon-action icon-action_subtle icon-action_invert`

## icon-action_type_[value]

Adds styles for changing the look and feel of an icon-action to better reflect the urgency or status of the action.

{% include demo_open.html class_grid="grid_stack" %}
<div class="level">
Expand All @@ -87,9 +105,54 @@ usage:
</div>
{% include demo_switch.html %}
```html
<button class="icon-action icon-action_type_info" aria-label="Helpful information">...</button>
<button class="icon-action icon-action_type_success" aria-label="Fullscreen">...</button>
<button class="icon-action icon-action_type_caution" aria-label="Minimize">...</button>
<button class="icon-action icon-action_type_danger" aria-label="Close">...</button>
<button class="icon-action icon-action_type_info" aria-label="...">...</button>
<button class="icon-action icon-action_type_success" aria-label="...">...</button>
<button class="icon-action icon-action_type_caution" aria-label="...">...</button>
<button class="icon-action icon-action_type_danger" aria-label="...">...</button>
```
{% include demo_close.html %}

### Available Variations

- `icon-action_type_info`
- `icon-action_type_success`
- `icon-action_type_caution`
- `icon-action_type_danger`

## Sass Variables

<div class="scroll-box">
<table class="table table_style_bordered table_zebra table_hover table_responsive_lg">
<thead>
<tr>
<th>Variable</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- Prefixes -->
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-block</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">null</code></td>
<td data-mobile-label="Desc">String to prefix blocks with.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-element</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"__"</code></td>
<td data-mobile-label="Desc">String to prefix elements with.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-modifier</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"_"</code></td>
<td data-mobile-label="Desc">String to prefix modifiers with.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-modifier-value</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"_"</code></td>
<td data-mobile-label="Desc">String to prefix modifier values with.</td>
</tr>
<!-- General -->
</tbody>
</table>
</div>
16 changes: 13 additions & 3 deletions packages/icon-action/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,35 @@ The icon-action component consists of two parts, the `icon-action` and it's chil

### `icon-action_invert`

...
A supplemental icon-action modifier that allows base component and the [`icon-action_subtle`](#icon-action_subtle) modifier to provide an inversed version of itself. Since not all icon-action styles require an inversed variant, this is typically used for when the background context of an action matters.

```html
<button class="icon-action icon-action_invert" aria-label="...">
...
</button>
```

#### Available Combinations

- `icon-action icon-action_invert`
- `icon-action icon-action_invert icon-action_subtle`

### `icon-action_subtle`

...
Applies more subtle button styles to the icon-action. Can also be inverted using the [`icon-action_invert`](#icon-action_invert) supplemental modifier.

```html
<button class="icon-action icon-action_subtle" aria-label="...">
...
</button>
```

### `icon-action_type_[key]`
### Available Combinations

- `icon-action icon-action_subtle`
- `icon-action icon-action_subtle icon-action_invert`

### `icon-action_type_[value]`

Adds styles for changing the look and feel of an icon-action to better reflect the urgency or status of the action.

Expand Down

0 comments on commit 56af910

Please sign in to comment.