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.

Sign up for GitHub

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

LG-4226: Document current button offerings ("big", "outline") #193

Merged
merged 5 commits into from
Mar 1, 2021
Merged

LG-4226: Document current button offerings ("big", "outline") #193

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
93405de
Rename "Secondary" as "Outline" in buttons documentation
aduth Feb 25, 2021
dd0f41e
Document big buttons
aduth Feb 25, 2021
f202b18
Rescale buttons per Figma
aduth Feb 25, 2021
6f7e3e1
Increase border radius to 0.5rem for big buttons
aduth Mar 1, 2021
69a13a0
Match button hover, active text color to border
aduth Mar 1, 2021
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
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
- Fix an issue where focused buttons appear with a double focus ring style.
- Fix an issue where using the "auto" package entrypoint may cause components not to be loaded when used with some bundlers (e.g. Webpack).

### Documentation

- Add documentation for "Big" button variants.
- Rename "Secondary" as "Outline" in buttons documentation.

## 4.0.0

### Breaking Changes
Expand Down
72 changes: 65 additions & 7 deletions docs/_components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ title: Buttons
lead: >
Use buttons to signal actions.
subnav:
- text: Standard Buttons
href: "#standard-buttons"
- text: Button Widths
- text: Button sizes and states
href: "#button-sizes-and-states"
- text: Button widths
href: "#button-widths"
---

{% include helpers/base-component.html component="button" stylesheet="buttons" %}

## Standard Buttons
## Button sizes and states

Use the standard button styles to convey the most important action on you want the users to take. See the [USWDS Button Usage](https://v2.designsystem.digital.gov/components/button/) for more on how to use buttons.
### Default

### Primary

Expand All @@ -27,7 +27,7 @@ Use the standard button styles to convey the most important action on you want t
<button class="usa-button usa-focus">Focus</button>
<button class="usa-button" disabled>Disabled</button>

### Secondary
### Outline

```html
<button class="usa-button usa-button--outline">
Expand Down Expand Up @@ -65,7 +65,65 @@ Use the standard button styles to convey the most important action on you want t
{% include helpers/unstyled-button.html text="Disabled" extra_attributes="disabled" %}
</div>

## Button Widths
### Big

### Primary

```html
<button class="usa-button usa-button--big">
```

<div>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: The seemingly-unnecessary <div> wrapper exists to prevent the button previews from being wrapped in <p>, which in the context of the page .usa-prose causes premature line wrapping.

It might make sense to apply this to all of the examples.

<button class="usa-button usa-button--big">Default</button>
<button class="usa-button usa-button--big usa-button--hover">Hover</button>
<button class="usa-button usa-button--big usa-button--active">Active</button>
<button class="usa-button usa-button--big usa-focus">Focus</button>
<button class="usa-button usa-button--big" disabled>Disabled</button>
</div>

### Outline

```html
<button class="usa-button usa-button--big usa-button--outline">
```

<div>
<button class="usa-button usa-button--big usa-button--outline">Default</button>
<button class="usa-button usa-button--big usa-button--outline usa-button--hover">Hover</button>
<button class="usa-button usa-button--big usa-button--outline usa-button--active">Active</button>
<button class="usa-button usa-button--big usa-button--outline usa-focus">Focus</button>
<button class="usa-button usa-button--big usa-button--outline" disabled>Disabled</button>
</div>

### Danger

```html
<button class="usa-button usa-button--big usa-button--danger">
```

<div>
<button class="usa-button usa-button--big usa-button--danger">Default</button>
<button class="usa-button usa-button--big usa-button--danger usa-button--hover">Hover</button>
<button class="usa-button usa-button--big usa-button--danger usa-button--active">Active</button>
<button class="usa-button usa-button--big usa-button--danger usa-focus">Focus</button>
<button class="usa-button usa-button--big usa-button--danger" disabled>Disabled</button>
</div>

### Unstyled

```html
<button class="usa-button usa-button--unstyled">
```

<div>
{% include helpers/unstyled-button.html text="Default" extra_classes="usa-button--big" %}
{% include helpers/unstyled-button.html text="Hover" extra_classes="usa-button--hover usa-button--big" %}
{% include helpers/unstyled-button.html text="Active" extra_classes="usa-button--active usa-button--big" %}
{% include helpers/unstyled-button.html text="Focus" extra_classes="usa-focus usa-button--big" %}
{% include helpers/unstyled-button.html text="Disabled" extra_attributes="disabled" extra_classes="usa-button--big" %}
</div>

## Button widths

### Flexible width

Expand Down
9 changes: 8 additions & 1 deletion docs/_includes/helpers/unstyled-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@
{% endcomment %}

<span class="display-block mobile-lg:display-inline-flex position-relative">
<button class="usa-button" disabled hidden style="visibility: hidden;">{{ include.text }}</button>
<button
class="usa-button {{ include.extra_classes }}"
disabled
hidden
style="visibility: hidden;"
>
{{ include.text }}
</button>
<div class="position-absolute pin-all padding-right-1 display-flex flex-align-center flex-justify-center">
<button
class="usa-button usa-button--unstyled {{ include.extra_classes }}"
Expand Down
7 changes: 7 additions & 0 deletions src/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.usa-button {
line-height: 1;

&:visited {
color: color('white');
}
Expand Down Expand Up @@ -163,6 +165,11 @@
width: 100%;
}

.usa-button--big {
@include u-padding-x('205');
font-size: 1.25rem;
}

.usa-form a.usa-button.usa-button--danger { /* stylelint-disable-line selector-no-qualifying-type */
color: color('white');
text-decoration: none;
Expand Down