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

Starts to bring mobile buttons into VADS. [Amends #2391] #2514

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Starts to bring mobile buttons into VADS. [Amends #2391] #2514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 2 additions & 3 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ uswds_link: https://designsystem.digital.gov/


# People
sketch_for_teams_admin: "Kevin Hoffman"
sketch_library_owner: "Lillian Boot, Barb Denney"
experimental_reviewer_1: "Matthew Dingee"


Expand Down Expand Up @@ -90,5 +88,6 @@ exclude:

# Default for building locally.
# See configuration files in jekyll-configs/ for environment overrides.
storybook_path: "http://127.0.0.1:6006"
storybook_path: "http://localhost:6006"
storybook_prod_uswds_path: "https://design.va.gov/storybook/?path=/docs/uswds"
storybook_mobile_path: "https://department-of-veterans-affairs.github.io/va-mobile-library"
3 changes: 0 additions & 3 deletions config/gulp/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
var gulp = require('gulp');
//var clean = require('gulp-clean');

gulp.task('build',
//gulp.series(
gulp.series(
'json',
'fonts',
Expand All @@ -11,5 +9,4 @@ gulp.task('build',
'css',
'storybook',
)
// )
);
1 change: 1 addition & 0 deletions src/_about/whats-new.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ See the [component-library release notes](https://github.com/department-of-veter
### Documentation updates

* Renamed Featured Content to [Summary box]({{ site.baseurl }}/components/summary-box).
* Moved [List]({{ site.baseurl }}/components/list) to components.
* Added [Design tokens]({{ site.baseurl }}/foundation/design-tokens) to the Foundation section.
* Updated the [Contributing]({{ site.baseurl }}/about/developers/contributing) page for developers.
* Added the [Language toggle]({{ site.baseurl }}/components/language-toggle) component.
Expand Down
40 changes: 28 additions & 12 deletions src/_components/button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,46 @@ anchors:

{% include _site-in-this-section.html %}

## Examples - v1
## Examples - v3

### Default - Primary

{% include storybook-preview.html height="100px" story="components-va-button--primary" link_text="va-button--primary" %}
{% include storybook-preview.html height="100px" story="uswds-va-button--primary" link_text="va-button--primary" %}

### Default - Secondary

{% include storybook-preview.html height="100px" story="components-va-button--secondary" link_text="va-button--secondary" %}
{% include storybook-preview.html height="100px" story="uswds-va-button--secondary" link_text="va-button--secondary" %}

### Default - Big

{% include storybook-preview.html height="100px" story="components-va-button--big" link_text="va-button--big" %}
{% include storybook-preview.html height="100px" story="uswds-va-button--big" link_text="va-button--big" %}

### Continue

{% include storybook-preview.html height="100px" story="components-va-button--continue" link_text="va-button--continue" %}
{% include storybook-preview.html height="100px" story="uswds-va-button--continue" link_text="va-button--continue" %}

### Back

{% include storybook-preview.html height="100px" story="components-va-button--back" link_text="va-button--back" %}
{% include storybook-preview.html height="100px" story="uswds-va-button--back" link_text="va-button--back" %}

## Examples - v3
### Destructive

{% include storybook-preview.html height="100px" story="button--destructive" link_text="" base_path=site.storybook_mobile_path %}

### Base - Primary (mobile only)

{% include storybook-preview.html height="100px" story="button--base" link_text="" base_path=site.storybook_mobile_path %}

### Base - Secondary (mobile only)

{% include storybook-preview.html height="100px" story="button--base-secondary" link_text="" base_path=site.storybook_mobile_path %}


## Examples - v1

### Default - Primary

{% include storybook-preview.html height="100px" story="uswds-va-button--primary" link_text="va-button--primary v3 along with additional variations" %}
{% include storybook-preview.html height="100px" story="components-va-button--primary" link_text="va-button--primary v1 along with additional variations" %}

## Usage

Expand All @@ -59,7 +72,7 @@ anchors:
#### When to use a button

* **Actions.** Use buttons for clickable actions you want users to take on a page, such as “Add”, “Close”, “Cancel”, or “Save.” Buttons **do things**, links **go places**. Refer to guidance on [Links vs. buttons](#links-vs-buttons).
* **Triggers.** Buttons can also trigger functionality via Javascript. For example, closing a modal window.
* **Triggers.** Buttons can also trigger functionality via Javascript. For example, closing a modal window.

#### When to consider something else

Expand All @@ -72,11 +85,14 @@ anchors:
* **Arrows are reserved.** Arrow icons should only appear for "Back" and "Continue" buttons that appear in forms.
* **Avoid disabling buttons.** [Disabling buttons is strongly discouraged.](#do-not-disable-buttons)


### Choosing between variations

* **Use primary for the most important action.** Use the primary button for the most important action that you want the user to take on the page, or in a section.
* **Use secondary for non-primary actions.** Use secondary buttons for any actions that need to be _downplayed_ against other actions on the page, or in a section.
* **Use Primary for the most important action.** Use the primary button for the most important action that you want the user to take on the page, or in a section. Also, use primary buttons to take the user to the next step in a process.
* **Use Secondary for non-primary actions.** Use secondary buttons for any actions that need to be _downplayed_ against other actions on the page, or in a section. Also, use secondary buttons for actions that happen on the current page.
* **Use Big primary buttons for the only action.** Use the big variation of the primary button for the only action on the page.
* **Use Continue and Back for advancing to the next step and returning to the previous step, respectively.** Note that these buttons can be used as a pair from [button pair]({{ site.baseurl }}/components/button/button-pair). Also, note that the Back button should not be used if it is only navigating rather than taking an action (like submitting data ala the Continue button).
* **Use Base, primary and secondary, in dark mode in mobile applications.** Use the base variations for dark mode or when primary buttons will not pass the required color contrast ratio.
* **Use destructive for actions that have serious consequences.** Use the destructive button for any action that cannot be reversed and may result in data loss. Currently used in the mobile app when canceling an appointment and when removing contact information.

### Placement

Expand Down
9 changes: 5 additions & 4 deletions src/_components/template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,25 @@ anchors:

{% include storybook-preview.html story="components-va-component-name--default" link_text=page.web-component %}


### Variation 1

Add Storybook examples as necessary.


### Variation 2

Add Storybook examples as necessary.

### Variation 3 (mobile only)

{% include storybook-preview.html height="100px" story="name" base_path=site.storybook_mobile_path %}

## Usage

### When to use Component name

* **In this context**: Explain the scenario or user context where this component is, or could be, used.
* **In this task**: Explain the user task or tasks where this component is, or could be, used.


### When to consider something else

* **Not in this context**: Explain which scenarios or user context where this component is not, or should not, be used.
Expand All @@ -64,7 +65,7 @@ Describe the key interactions for this component.

### Choosing between variations

Help the designer and developer understand when to choose between any variations of this component.
Help the designer and developer understand when to choose between any variations of this component. Include mobile variations here.

### Placement

Expand Down
10 changes: 7 additions & 3 deletions src/_includes/a11y/do-not-disable-buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,17 @@ In addition, disabled buttons can be unintentionally read out and accessed by mo

While it is technically possible, we strongly discourage disabling buttons. Here are recommendations on how to handle specific interactions:

* **Lack of required fields.** When a user attempts to submit a form without entering all required form fields:
* Announce the error and shift focus to the first unfilled required form field.
* **Lack of required fields.** When a user attempts to submit a form without entering all required form fields:
* Announce the error and shift focus to the first unfilled required form field.
* Properly indicate required form elements (the right thing will happen for you when you use the required property on form fields in the Design System).
* **No longer valid options.** If certain options in a form are no longer valid then there are two options:
1. Replace the form elements that can no longer be changed with text representing the current value instead of the current value within a disabled input.
2. Hide the form elements that are no longer valid.


Additional suggestions:

* **Provide additional context.** Provide additional context surrounding a button that tells a user what to expect when a button is tapped.

#### Is it ever valid to disable a button?

Post-form submission or post-action it can be appropriate to disable the submit or action button as the system is in-between states and loading or taking action. This behavior is often seen on buttons that make a purchase or reservation to prevent the user from accidentally triggering the action multiple times.
9 changes: 7 additions & 2 deletions src/_includes/storybook-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
{% assign storybook_path = site.storybook_path %}
{% if include.base_path %}
{% assign storybook_path = include.base_path %}
{% endif %}

<div
class="site-showcase"
style="max-width: {{ include.width | default: '100%' }}"
>
<iframe
width="100%"
height="{{ include.height }}"
src="{{ site.storybook_path }}/iframe.html?id={{ include.story }}&viewMode=story"
src="{{ storybook_path }}/iframe.html?id={{ include.story }}&amp;full=1&amp;shortcuts=false&amp;singleStory=true"
></iframe>
</div>

[{% if include.link_text %}<img aria-hidden="true" role="img" src="{{ site.baseurl }}/images/storybook.svg" class="site-component-resources-links__icon" width="16px" alt="Storybook logo">View {{ include.link_text}}{% else %}See this{% endif %} in Storybook]({{ site.storybook_path }}/?path=/docs/{{ include.story }})
[{% if include.link_text %}<img aria-hidden="true" role="img" src="{{ site.baseurl }}/images/storybook.svg" class="site-component-resources-links__icon" width="16px" alt="Storybook logo">View {{ include.link_text}}{% else %}See this{% endif %} in Storybook]({{ storybook_path }}/?path=/docs/{{ include.story }})
Loading