-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Original form select field updates * Select files created * Added reference to select in main.js and main.scss * Added createSafeCssClassname * Implement all code review findings * Removed disabled selected * Code review V2 updates * Separate 'select' from the form component and update naming for consistency * Removed code comments
- Loading branch information
1 parent
b4fba30
commit b4bef7b
Showing
19 changed files
with
896 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| title: Select | ||
| layout: blank-layout.hbs | ||
| --- | ||
|
|
||
| <h2>Usage</h2> | ||
| <p>A select field, also referred to as a dropdown, allows users to select single or multiple items from a list of available options. Consider dropdowns when the options exceed 8, or where it is not feasible to list all options as checkboxes or radio buttons. When using multislect, ensure you make it clear to the user that more than one option can be selected.</p> | ||
|
|
||
| <p>Do:</p> | ||
|
|
||
| <ul> | ||
| <li>use descriptive labels, state the intent of the action</li> | ||
| <li>use helper text to give further guidance to the user</li> | ||
| <li>specify errors inline, show the user where the error occurred and provide a reason</li> | ||
| </ul> | ||
|
|
||
| <h3>When to avoid</h3> | ||
| <p>Don't use a select when there are fewer than 8 options or where there is benefit to the user seeing all available options up front. In these instances consider using checkboxes or radio buttons so all options are visible without additional clicking or scrolling. </p> | ||
|
|
||
| <h2>How this component works</h2> | ||
|
|
||
| <h3>Helper text</h3> | ||
|
|
||
| <p>Helper text provides users further guidance to make a selection. Use to provide additional context, information or as an example to complete a field input.</p> | ||
|
|
||
| <h3>Error messages</h3> | ||
| <p>Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors.</p> | ||
|
|
||
| <h2>Accessibility</h2> | ||
| <p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p> |
15 changes: 8 additions & 7 deletions
15
src/components/form/partials/_select.hbs → src/components/select/_select.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,11 @@ | ||
| <label class="nsw-form__label{{#if required}} nsw-form__required{{/if}}" for="{{id}}">{{label}}{{#if required}}<span class="sr-only"> (required)</span>{{/if}}</label>{{#if helper-text}} | ||
| <span class="nsw-form__helper" id="{{id}}-helper-text">{{helper-text}}</span>{{/if}} | ||
| <select class="nsw-form__select" id="{{id}}"{{#if helper-text}} aria-describedby="{{#if helper-text}}{{id}}-helper-text{{/if}}"{{/if}}{{#if error-text}} aria-invalid="true"{{/if}}> | ||
| <option value="">Please select</option> | ||
| <option value="1">{{#if option-1}}{{option-1}}{{else}}Option 1{{/if}}</option> | ||
| <option value="2">{{#if option-2}}{{option-2}}{{else}}Option 2{{/if}}</option> | ||
| <option value="3">{{#if option-3}}{{option-3}}{{else}}Option 3{{/if}}</option> | ||
| </select>{{#if error-text}} | ||
| <span class="nsw-form__helper" id="{{id}}-helper-text">{{helper-text}}</span>{{/if}}{{#if multiple}} | ||
| <div class="nsw-multi-select js-multi-select" data-selection-text="savings programs">{{/if}} | ||
| <select{{#unless multiple}} class="nsw-form__select"{{/unless}} name="{{id}}" id="{{id}}"{{#if helper-text}} aria-describedby="{{#if helper-text}}{{id}}-helper-text{{/if}}"{{/if}}{{#if error-text}} aria-invalid="true"{{/if}}{{#if multiple}} multiple{{/if}}>{{#unless multiple}}<option value="">Please select</option>{{/unless}} | ||
| {{#each list}} | ||
| <option value="{{this}}">{{this}}</option> | ||
| {{/each}} | ||
| </select>{{#if multiple}} | ||
| </div>{{/if}}{{#if error-text}} | ||
| <span id="{{id}}-error-text" class="nsw-form__helper nsw-form__helper--error"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>{{error-text}}</span>{{/if}}{{#if valid-text}} | ||
| <span id="{{id}}-valid-text" class="nsw-form__helper nsw-form__helper--valid"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">check_circle</span>{{valid-text}}</span>{{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| $nsw-form-chevron-down: '<svg fill="#333333" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 26l16-16-4-4-12 12-12-12-4 4 16 16z"></path></svg>'; | ||
|
|
||
| .nsw-form { | ||
| &__select { | ||
| @include font-size('sm'); | ||
| padding: rem(11px) rem(16px); | ||
| border-radius: var(--nsw-border-radius); | ||
| background-color: var(--nsw-white); | ||
| color: var(--nsw-text-dark); | ||
| border: 1px solid var(--nsw-grey-01); | ||
| vertical-align: middle; | ||
| appearance: none; | ||
| -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */ | ||
| width: 100%; | ||
| padding-right: rem(48px); | ||
| background: var(--nsw-white) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center; | ||
| background-size: rem(16px) auto; | ||
|
|
||
| &:hover { | ||
| background: svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center, linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover)); | ||
| background-size: rem(16px) auto, auto; | ||
| background-color: var(--nsw-white); | ||
| } | ||
|
|
||
| &:focus { | ||
| @include nsw-focus; | ||
| } | ||
|
|
||
| &:disabled { | ||
| background: var(--nsw-off-white) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center; | ||
| background-size: rem(16px) auto; | ||
| border-color: var(--nsw-grey-03); | ||
| color: var(--nsw-grey-03); | ||
| cursor: not-allowed; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| &[aria-invalid='true'], | ||
| &.has-error { | ||
| border-color: var(--nsw-status-error); | ||
| border-width: 2px; | ||
|
|
||
| &:hover { | ||
| background: var(--nsw-status-error-bg) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center; | ||
| background-size: rem(16px) auto; | ||
| } | ||
| } | ||
|
|
||
| option { | ||
| background-color: var(--nsw-white); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .nsw-multi-select { | ||
| position: relative; | ||
|
|
||
| select { | ||
| display: none; | ||
| } | ||
|
|
||
| &__button { | ||
| background-color: var(--nsw-white); | ||
| color: var(--nsw-text-dark); | ||
| border: 1px solid var(--nsw-grey-01); | ||
| font-weight: normal; | ||
| margin-top: rem(4px); | ||
| padding: rem(10px) rem(10px) rem(10px) rem(16px); | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
|
|
||
| .nsw-material-icons { | ||
| font-size: rem(32px); | ||
| } | ||
| } | ||
|
|
||
| &__label { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| &__dropdown { | ||
| @include z-index('upper'); | ||
| position: absolute; | ||
| left: 0; | ||
| top: 100%; | ||
| min-width: rem(200px); | ||
| width: 100%; | ||
| background-color: var(--nsw-white); | ||
| border-radius: var(--nsw-border-radius); | ||
| box-shadow: var(--nsw-box-shadow); | ||
| overflow: auto; | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| &__button[aria-expanded=true] + &__dropdown { | ||
| visibility: visible; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| &__list { | ||
| list-style-type: none; | ||
| padding: rem(11px) rem(16px); | ||
|
|
||
| &:not(:first-of-type) { | ||
| padding-top: rem(16px); | ||
| } | ||
|
|
||
| &:not(:last-of-type) { | ||
| border-bottom: 1px solid var(--nsw-grey-04); | ||
| padding-bottom: rem(16px); | ||
| } | ||
| } | ||
|
|
||
| &__option { | ||
| padding: rem(8px) 0; | ||
| } | ||
| } |
Oops, something went wrong.