Create Terra Dropdown Button #2487

nfaltermeier · 2019-06-28T20:10:26Z

Summary

A button that, when pressed, opens a dropdown with more buttons with custom callbacks. Has another variation that also shows a button with a custom callback outside the dropdown.

PR is still waiting for some UX feedback from @neilpfeiffer but code is ready for review.

Deployment

Expected Interactions

Enter / Space / Mouse click to trigger primary option / open dropdown / trigger options in dropdown
Up and down arrows to navigate up / down inside dropdown
Home to jump to 1st item inside dropdown
End to jump to last item inside dropdown
Typing numbers or letters to jump to first option beginning with that character (resets after half a second of no typing)
Tab / Escape inside dropdown to close dropdown
Click outside dropdown to close dropdown

Additional Details

Closes #2216

Multiple UX updates - isCompact prop, new css styles, updated variables, and new tests and screenshots.

neilpfeiffer · 2019-07-30T14:12:34Z

Tested: PR #2487
Resolves: Issue #2216

Reviewed:

Follows pattern considerations documented in the current Cerner Design Standards: Dropdown-Buttons & Split-Buttons
Follows UX defined design implementation for Terra-Dropdown-Button
Follows defined theme designs: terra-opensource-theme

Considerations for Future Enhancements:

update applied Focus state styling to detect for mouse/keyboard interaction
update Focus state to new Terra outline style (black dashed line)
add "Emphasis" as an available variant for Split-Button

Marking as Verified by @neilpfeiffer, ready for release.

Pass
UX Review

…into dropdown-button

packages/terra-dropdown-button/src/DropdownButton.module.scss

packages/terra-dropdown-button/src/_variables.scss

…or variant independent code Add pseudo changelog to make travis happy isolating default variant.. revert destructuring for smaller diff, use keycode-js for compat, isolate menu & frame for default variant add back other doc site examples using default variant Remove DEPENDENCIES.md files (#2548) Update spanish translations in terra-form-select (#2547) Update README.md Update changelogs Publish - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] Update changelog Rename publish script to release to avoid conflicts with lerna v3 lifecycle Publish - [email protected] Document the need to mock window.matchMedia for jest tests (#2532) Update changelogs Publish - [email protected] - [email protected] - [email protected] Update errorIcon default props in input and textarea fields (#2551) Update to use node 10 (#2552) Update markdown dependencies (#2554) Update RELEASE.md Update changelogs Publish - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] add combobox impl, fix some lint.. add combobox frame impl, allowClear doc site example add combobox menu impl add search variant impl, uncomment search doc site example add legacy frame impl to search variant.. add search frame impl add legacy version of multiple variant.. remove variant prop dependence in multiple variant add legacy frame impl for multiple variant.. add multiple frame impl.. Create Terra Dropdown Button (#2487) * Begin work on dropdown-button * Work on split button styles * Work on moving from options prop to children * Use Options subcomponent, add examples, styling * Adjust examples, dropdown is left aligned * Add the dropdown type to the dropdown button * Theming and styling work * Delete outer border wrapper class * Make dropdown list searchable * IE support is mandatory * More IE verification, fix dropdown and block * Some documentation work * Button no more * Remove itemSelectedCallback * Add jest tests * Remove Usage from docs README * Add changes from unreleased terra generator update * Add package to top level README * Test DropdownListUtil * Work on code documentation * This need to be themeable, this isn't needed * Work on split type WDIO tests * Updates after UX feedback round 1 * WDIO split button testing work * split defaultOption prop into label and callback * A little testing work * Break SplitButton and DropdownButtonBase from DropdownButton * Extract SplitButton and DropdownButtonBase styles * Work on documentation pages * Extract SplitButton jest tests * Finishing up split WDIO tests * Dropdown WDIO, improve split default * D-d-d-d-documentation * Use hookshot instead of popup, need to figure out focus after close * Fix firefox spacebar bug, manage focus * Active styles on FireFox onKeyDown * Update test snapshots * Address PR comments * Address PR comments (test changes) * Remove underscore prefix from Button subcomponent * Update jest snapshots * Apply suggestions from code review Co-Authored-By: Brett Jankord <[email protected]> * Use translations (RIP jest snapshot) * More PR comments * A few PR comments * Forgot a thing * Fix dropdown reopening when chevron is clicked while dropdown is open * Address more PR comments * Translations done * Dive in SplitButton snapshots * chevron => caret * Expand test coverage * Misc changes * Update jest snapshots * Remove accidentally comitted test screenshots * Use true focus instead of faking focus * Apply suggestions from code review Co-Authored-By: Derek Yu <[email protected]> * Doc updates * Change Button subcomponent to Item, PR Comments * div got unremoved * Fix focusing things from callback inside dropdown * Add peer dependency info to docs * Test focus in callback, fix tests * onClick => onSelect, stopPropagation * Rename buttons prop to items * Improve JAWS accessibility * Added isCompact prop, Updated style, added tests, updated screenshots Multiple UX updates - isCompact prop, new css styles, updated variables, and new tests and screenshots. * Update docsite split button labels * Add examples for ghost and remove commented css. Update doc template version used in dropdown button (#2558) Update changelog Update changelog Publish - [email protected] Dev site v6 (#2546) * update to dev-site-v6 * update env variable for gh-pages deploy * change logs * forgot one * update commands * update package.json change logs and add a wdio.conf.js to each package. Update raw-loader paths in examples add legacy menu to multiple variant.. add legacy menu to search variant.. cleanup code, specialize multiple variant menu add variant independent menu for search variant add impl for tag variant select add legacy impl of tag select frame add variant independent frame impl for tag select fix shouldAddOptionOnBlur for tag and combobox variants add legacy menu for tags variant.. remove variant prop dependence on tag select menu component cleanup code, remove placeholders.. refactor a lil before the flattening Update Field to pass down isInvalid to its children (#2561) Consume OCS icons v1.27 (#2562) Replace usage of markdown magic for generating package listing (#2557) [terra-avatar] [terra-image] Avatar to allow non square images. (#2494) [terra-arrange] Update the Props description. (#2567) fix jest tests, update snapshots fix updateSelectionState for tag & mutliple fix updateSelectionState for tag & mutliple round 2 fix default values, tab index for default variant add comoboboxfield, make combobox component shallow lib export add defaultselectfield, make defaultselect component shallow lib export add multipleselectfield, make multipleselect component shallow lib export add searchselectfield, make searchselect component shallow lib export add tagselectfield, make tagselect component shallow lib export fix imports & snapshots remove todos rename DefaultSelect ➡️ DropdownSelect, remove legacy context, update snapshots fix raw-loader path, clean up changelog cleanup props & prop docs, remove unnecessary props from tag/multiple variants add DropdownSelect doc site examples, add placeholders for other variants/field variants add dropdownselectfield doc site examples add combobox & comboboxfield doc site entries fix flatten, add multiple select doc site entry add multiple select field doc site entry add tag select/field doc site entries add search select/field doc site entries fix aria merge conflicts

nfaltermeier added 30 commits June 13, 2019 15:50

Begin work on dropdown-button

7bd4eca

Work on split button styles

e5d7ea4

Work on moving from options prop to children

06a65a9

Use Options subcomponent, add examples, styling

fdc858e

Adjust examples, dropdown is left aligned

f5f1c3d

Add the dropdown type to the dropdown button

cded466

Theming and styling work

4864daa

Delete outer border wrapper class

6a894ee

Make dropdown list searchable

ead3dd3

IE support is mandatory

88f7936

More IE verification, fix dropdown and block

e468807

Some documentation work

19a229a

Button no more

f33c0d5

Remove itemSelectedCallback

7d2ff53

Add jest tests

38f266e

Remove Usage from docs README

972f108

Add changes from unreleased terra generator update

5c0b477

Add package to top level README

67c6502

Test DropdownListUtil

3f38457

Work on code documentation

a7ea4a3

This need to be themeable, this isn't needed

af1eecb

Work on split type WDIO tests

6ee8dc4

Updates after UX feedback round 1

9147f51

WDIO split button testing work

b50d95c

split defaultOption prop into label and callback

37ffacd

A little testing work

d4eba33

Break SplitButton and DropdownButtonBase from DropdownButton

673fa59

Extract SplitButton and DropdownButtonBase styles

1099a9a

Work on documentation pages

5411a79

Extract SplitButton jest tests

9a35129

Merge branch 'master' into dropdown-button

102936a

ryanthemanuel temporarily deployed to terra-core-deployed-pr-2487 July 29, 2019 19:44 Inactive

Added isCompact prop, Updated style, added tests, updated screenshots

b89ec6e

Multiple UX updates - isCompact prop, new css styles, updated variables, and new tests and screenshots.

bjankord temporarily deployed to terra-core-deployed-pr-2487 July 30, 2019 13:28 Inactive

Merge branch 'master' into dropdown-button

b921e68

bjankord temporarily deployed to terra-core-deployed-pr-2487 July 30, 2019 13:30 Inactive

Merge branch 'master' into dropdown-button

2f976b2

bjankord temporarily deployed to terra-core-deployed-pr-2487 July 30, 2019 14:12 Inactive

neilpfeiffer removed UX Review Required UX Review Ready labels Jul 30, 2019

Merge branch 'master' into dropdown-button

de96fbb

bjankord temporarily deployed to terra-core-deployed-pr-2487 July 30, 2019 14:24 Inactive

neilpfeiffer added 2 commits July 30, 2019 09:29

Update docsite split button labels

ba327b4

Merge branch 'dropdown-button' of https://github.com/cerner/terra-core …

97a0608

…into dropdown-button

bjankord temporarily deployed to terra-core-deployed-pr-2487 July 30, 2019 14:29 Inactive

ryanthemanuel approved these changes Jul 30, 2019

View reviewed changes

bjankord reviewed Jul 30, 2019

View reviewed changes

packages/terra-dropdown-button/src/DropdownButton.module.scss Outdated Show resolved Hide resolved

bjankord reviewed Jul 30, 2019

View reviewed changes

packages/terra-dropdown-button/src/_variables.scss Outdated Show resolved Hide resolved

bjankord reviewed Jul 30, 2019

View reviewed changes

packages/terra-dropdown-button/src/_variables.scss Outdated Show resolved Hide resolved

bjankord reviewed Jul 30, 2019

View reviewed changes

packages/terra-dropdown-button/src/_variables.scss Outdated Show resolved Hide resolved

Add examples for ghost and remove commented css.

1df8cd9

bjankord deployed to terra-core-deployed-pr-2487 July 30, 2019 19:04 View deployment

ryanthemanuel merged commit 5d2bac9 into master Jul 30, 2019

ryanthemanuel deleted the dropdown-button branch July 30, 2019 19:37

nramamurth mentioned this pull request Dec 27, 2019

[terra-dropdown-button] Fixed Focus issue for mouse and keyboard interactions. #2766

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Terra Dropdown Button #2487

Create Terra Dropdown Button #2487

nfaltermeier commented Jun 28, 2019 •

edited

Loading

neilpfeiffer commented Jul 30, 2019 •

edited

Loading

Create Terra Dropdown Button #2487

Create Terra Dropdown Button #2487

Conversation

nfaltermeier commented Jun 28, 2019 • edited Loading

Summary

Deployment

Expected Interactions

Additional Details

neilpfeiffer commented Jul 30, 2019 • edited Loading

nfaltermeier commented Jun 28, 2019 •

edited

Loading

neilpfeiffer commented Jul 30, 2019 •

edited

Loading