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: Improve support for unstyled button #191

Merged
merged 3 commits into from
Feb 26, 2021
Merged

LG-4226: Improve support for unstyled button #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b4eecf
LG-4226: Improve support for unstyled button
aduth Feb 25, 2021
7b9a074
Fix button heading hierarchy
aduth Feb 25, 2021
6e51ebf
Improve unstyled button preview partial
aduth Feb 26, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
- Link hover and active colors are now distinct.
- Before: Hover and active colors are both `primary-darker`.
- After: Hover is `primary-dark`, and active is `primary-darker`.
- Improved support for "Unstyled" button variant ([see documentation](https://design.login.gov/components/buttons/))

### Bug Fixes

Expand Down
20 changes: 17 additions & 3 deletions docs/_components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ subnav:

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.

##### Primary
### Primary

```html
<button class="usa-button">
Expand All @@ -25,7 +25,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
### Secondary

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

##### Danger
### Danger

```html
<button class="usa-button usa-button--danger">
Expand All @@ -48,3 +48,17 @@ Use the standard button styles to convey the most important action on you want t
<button class="usa-button usa-button--danger usa-button--active">Active</button>
<button class="usa-button usa-button--danger usa-focus">Focus</button>
<button class="usa-button usa-button--danger" disabled>Disabled</button>

### Unstyled

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

<div>
{% include helpers/unstyled-button.html text="Default" %}
{% include helpers/unstyled-button.html text="Hover" extra_classes="usa-button--hover" %}
{% include helpers/unstyled-button.html text="Active" extra_classes="usa-button--active" %}
{% include helpers/unstyled-button.html text="Focus" extra_classes="usa-focus" %}
{% include helpers/unstyled-button.html text="Disabled" extra_attributes="disabled" %}
</div>
16 changes: 16 additions & 0 deletions docs/_includes/helpers/unstyled-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{% comment %}
This component displays an unstyled button, staged as if it has dimensions of a styled button, for
the purpose of aligning button previews amongst other variants.
{% endcomment %}

<span class="display-block mobile-lg:display-inline-flex position-relative">
<button class="usa-button" 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 }}"
{{ include.extra_attributes }}
>
{{ include.text }}
</button>
</div>
</span>
44 changes: 44 additions & 0 deletions src/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,50 @@
}
}

.usa-button--unstyled {
position: relative;
text-underline-offset: 3px;

// In USWDS, unstyled button styles are applied last to take precedence over base button styles.
// Since we override base button styles, we must re-apply the unstyled button styles.
&.usa-button {
@include button-unstyled;
}

// Hover colors are already applied by USWDS via `typeset-link`, but this does not include the
// button modifier classes.
&:hover,
&.usa-button--hover {
color: color($theme-link-hover-color);
}

&:active,
&.usa-button--active {
color: color($theme-link-active-color);
}
Comment on lines +42 to +50
Copy link
Member Author

Choose a reason for hiding this comment

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

@anniehirshman-gsa I noticed in the Figma that the hover and active states should be different colors. I think what we have here is the correct implementation, as far as using $theme-link-hover-color and $theme-link-active-color, but it appears they're currently configured to the same color.

I think it might make sense to update that globally so that the link hover and active colors are distinct, if that's the intention. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes I would like to update $theme-link-hover-color: 'primary-dark'; and $theme-link-active-color: 'primary-darker'; globally, to match the unstyled button mockups in Figma. Currently links have a hover color of primary-darker and no active color. @nickttng does that sound good to you too?

Copy link
Member

Choose a reason for hiding this comment

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

@anniehirshman-gsa Yep, that sounds good


&:disabled {
color: color('disabled');
}

&.usa-button:not([disabled]):focus,
&.usa-button:not([disabled]).usa-focus {
Comment on lines +56 to +57
Copy link
Contributor

Choose a reason for hiding this comment

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

Just to clarify, this is different from the stanza as below because the & means these styles when they apply to .usa-button--unstyled right, and the one below is when they're on any button?

Copy link
Member Author

Choose a reason for hiding this comment

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

Just to clarify, this is different from the stanza as below because the & means these styles when they apply to .usa-button--unstyled right, and the one below is when they're on any button?

Yeah, when compiled it's the difference of:

.usa-button--unstyled.usa-button:not([disabled]):focus {
  /* ... these styles */
}

vs.

.usa-button:not([disabled]).usa-focus {
  /* ... default focus styles */
}

Where the intention with these styles is to unset and replace the default focus styles, only for the unstyled buttons. Ideally we could just use the default styles, but it was surprisingly difficult to reconcile the focus style box shadow + border radius, hence recreating it with a positioned pseudo-element.

box-shadow: none;

&::before {
border-radius: .125rem;
bottom: -5px;
box-shadow: 0 0 0 $theme-focus-width color($theme-focus-color);
content: '';
left: -5px;
pointer-events: none;
position: absolute;
right: -5px;
top: -5px;
}
}
}

.usa-button:not([disabled]):focus,
.usa-button:not([disabled]).usa-focus {
@include disable-default-focus-styles;
Expand Down