-
Notifications
You must be signed in to change notification settings - Fork 5
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.
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
Add Combobox component to Toucan Core & Toucan Form #200
Merged
Merged
Changes from all commits
Commits
Show all changes
86 commits
Select commit
Hold shift + click to select a range
8e47606
feat: Add Form::Controls::Select
clintcs 0ce8422
fix: add placeholder styling
clintcs 82c2e54
chore: post-rebase tweaks
clintcs 6b70b36
fix: Escape should never open the popover
clintcs bc9f129
chore: add note about scrollbar styling
clintcs d2eb4d7
fix: shift arrow over
clintcs 1d9469f
chore: styling tweaks
clintcs c9ea2b9
fix: add z-index to demo
clintcs 7bd75dc
fix: styling tweaks
clintcs ae985f2
chore: remove active descendant support
clintcs 98a4ff5
Fix a11y issues and move to new API
ynotdraw b17059e
toucan-core: Add filtering
ynotdraw 0370e0b
toucan-core: Add custom filtering
ynotdraw aa8ed2a
toucan-core: Move selected logic into Select root
ynotdraw 761b63c
toucan-core: Remove out of date docs
ynotdraw 7bce810
toucan-core: Prettier docs
ynotdraw 245430b
toucan-core: Add optionKey and onFilter
ynotdraw b9a74d3
toucan-core: Fix filteredOptions logic
ynotdraw 8532fee
toucan-core: Use ember-is-equal
ynotdraw 4cf92e4
toucan-core: Reset input to selection on blur
ynotdraw c2e1975
toucan-core: Handle tab+backspace keyboard events
ynotdraw 997ca0f
toucan-core: Remove unused component args
ynotdraw 8221150
toucan-core: Fix up SelectField component
ynotdraw 9aaefd6
toucan-core: Add type="text"
ynotdraw e8ab8f4
toucan-core: JSDoc for select control
ynotdraw 195cdec
toucan-core: Add lock icon
ynotdraw 71c14fe
docs: Rename select single to base-demo
ynotdraw 9062d64
docs: Update documentation with latest args
ynotdraw 49ace8d
docs: Update selectfield docs
ynotdraw a9008c6
toucan-core: Set input value on render
ynotdraw 687d740
toucan-core: Disable no-redundant-role on input
ynotdraw 95619b5
toucan-core: Re-opening should clear filtered options
ynotdraw 30a74b2
toucan-core: Use deep equality check
ynotdraw 0914dae
toucan-core: Reselect text input on click, remove backspace logic
ynotdraw dce0071
toucan-core: Add noResultsText
ynotdraw 5c0dd09
toucan-core: Adjust optionElement logic
ynotdraw b89bb5f
docs: Remove placeholder in demo
ynotdraw 38a5e2c
toucan-core: Remove option chaining
ynotdraw afc288f
toucan-core: Allow space key to be entered
ynotdraw c2ec6ca
docs: Add noResultsText to select-field
ynotdraw 00bd8bf
toucan-core: Adjust list option styling to match designs
ynotdraw 41dfc34
Revert "toucan-core: Allow space key to be entered"
ynotdraw 334c470
toucan-core: Allow space key to be entered
ynotdraw 60e11ea
docs: Remove unused component arg
ynotdraw 1a0b7f4
cleanup: Remove TODO comments
ynotdraw 4cafbfc
Add SelectField to template-registry
ynotdraw 0692f97
toucan-form: Wire up select-field to work with ToucanForm
ynotdraw 0cdcc84
Rename from select to combobox
ynotdraw 70bbaf9
toucan-core: Remove redundant class
ynotdraw 41356a3
Revert "toucan-core: Remove redundant class"
ynotdraw 6421232
toucan-core: Remove redundant class
ynotdraw 228c135
toucan-core: Move splattributes to li element instead
ynotdraw 9adfbf6
tests: Add combobox control tests
ynotdraw e7e1b15
tests: Add combobox field tests
ynotdraw 5916adc
tests: Add ToucanForm Combobox tests
ynotdraw bcf716e
tests: Remove eslint-disable no-undef
ynotdraw 74ab854
deps: Add pnpm-lock changes
ynotdraw 30d87e8
fix: Add explicit on modifier import
ynotdraw 91204aa
Add a changeset entry
ynotdraw 818905f
toucan-core:Add isDisabled arg to label+hint
ynotdraw b638b7d
Adjust glint typing
ynotdraw 3ca35bb
Attempt to fix embroider error
ynotdraw 975ba63
design: Remove bg-selected from selected option
ynotdraw 40da407
toucan-core: Fix combobox reselection bug
ynotdraw bb353bb
toucan-core: Add JSDoc for option
ynotdraw f65648c
embroider: Remove compat from toucan-core
ynotdraw a4c0e54
Attempt to fix CI
ynotdraw 40d0f0f
Revert "Attempt to fix CI"
ynotdraw abbc22a
Implemented suggestions
ynotdraw 1111e1b
Temporarily disable embroider-optimized tests
ynotdraw edc9a6a
test: Add a test about reselection
ynotdraw 40a9bb7
fix: Remove z-popover class
ynotdraw 760601b
ci: Let embroider tests still run but not fail build?
ynotdraw ccac800
Revert "ci: Let embroider tests still run but not fail build?"
ynotdraw 1b39ff1
Update docs/components/combobox/index.md
ynotdraw 4f2d139
Use an assert instead of a comment
ynotdraw 45594a7
Remove outdated JSdoc
ynotdraw e40c4e1
Adjust optionKey to use OPTION
ynotdraw 754b29b
Remove @babel/plugin-proposal-class-properties
ynotdraw 0c8f958
Uncomment ember-try config
ynotdraw ac3991c
fix typos in tests
ynotdraw d036a43
Remove unnecessary await
ynotdraw 2b74de0
Add docs around onFilter
ynotdraw bbb761e
Remove ember-velcro dep in docs/test apps
ynotdraw 3d4431c
Revert "Remove ember-velcro dep in docs/test apps"
ynotdraw 212cd77
Remove unused internal selected getter
ynotdraw File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
--- | ||
'@crowdstrike/ember-toucan-core': patch | ||
'@crowdstrike/ember-toucan-form': patch | ||
--- | ||
|
||
Added a `Combobox` component to both core and form packages. | ||
|
||
If you're using `toucan-core`, the control and field components are exposed: | ||
|
||
```hbs | ||
<Form::Controls::Combobox | ||
@onChange={{this.onChange}} | ||
@options={{this.options}} | ||
@contentClass='z-10' | ||
@selected={{this.selected}} | ||
@optionKey='label' | ||
@noResultsText='No results' | ||
placeholder='Colors' | ||
as |combobox| | ||
> | ||
<combobox.Option> | ||
{{combobox.option.label}} | ||
</combobox.Option> | ||
</Form::Controls::Combobox> | ||
|
||
<Form::Fields::Combobox | ||
@contentClass='z-10' | ||
@error={{this.errorMessage}} | ||
@hint='Type "blue" into the field' | ||
@label='Label' | ||
@noResultsText='No results' | ||
@onChange={{this.onChange}} | ||
@optionKey='label' | ||
@options={{this.options}} | ||
@selected={{this.selected}} | ||
placeholder='Colors' | ||
as |combobox| | ||
> | ||
<combobox.Option> | ||
{{combobox.option.label}} | ||
</combobox.Option> | ||
</Form::Fields::Combobox> | ||
``` | ||
|
||
If you're using `toucan-form`, the component is exposed via: | ||
|
||
```hbs | ||
<ToucanForm as |form|> | ||
<form.Combobox | ||
@label='Combobox' | ||
@name='combobox' | ||
@options={{options}} | ||
data-combobox | ||
as |combobox| | ||
> | ||
<combobox.Option data-option>{{combobox.option}}</combobox.Option> | ||
</form.Combobox> | ||
</ToucanForm> | ||
``` | ||
|
||
For more information on using these components, view [the docs](https://ember-toucan-core.pages.dev/docs/components/combobox). |
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,74 @@ | ||
```hbs template | ||
<Form::Fields::Combobox | ||
@contentClass='z-10' | ||
@error={{this.errorMessage}} | ||
@hint='Type "blue" into the field' | ||
@label='Label' | ||
@noResultsText='No results' | ||
@onChange={{this.onChange}} | ||
@optionKey='label' | ||
@options={{this.options}} | ||
@selected={{this.selected}} | ||
placeholder='Colors' | ||
as |combobox| | ||
> | ||
<combobox.Option> | ||
{{combobox.option.label}} | ||
</combobox.Option> | ||
</Form::Fields::Combobox> | ||
``` | ||
|
||
```js component | ||
import Component from '@glimmer/component'; | ||
import { action } from '@ember/object'; | ||
import { tracked } from '@glimmer/tracking'; | ||
|
||
export default class extends Component { | ||
@tracked selected; | ||
@tracked errorMessage; | ||
|
||
options = [ | ||
{ | ||
label: 'Blue', | ||
name: 'blue', | ||
}, | ||
{ | ||
label: 'Green', | ||
name: 'green', | ||
}, | ||
{ | ||
label: 'Yellow', | ||
name: 'yellow', | ||
}, | ||
{ | ||
label: 'Orange', | ||
name: 'orange', | ||
}, | ||
{ | ||
label: 'Red', | ||
name: 'red', | ||
}, | ||
{ | ||
label: 'Purple', | ||
name: 'purple', | ||
}, | ||
{ | ||
label: 'Teal', | ||
name: 'teal', | ||
}, | ||
]; | ||
|
||
@action | ||
onChange(option) { | ||
this.selected = option; | ||
console.log(option); | ||
|
||
if (option.label !== 'Blue') { | ||
this.errorMessage = 'Please select "Blue"'; | ||
return; | ||
} | ||
|
||
this.errorMessage = null; | ||
} | ||
} | ||
``` |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So much work to get to this stage of being able to import
ember-velcro
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we have to add it here? The addon already has it as a dependency. so that should be enough?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, unfortunately without it we get the following error on a build: https://github.com/CrowdStrike/ember-toucan-core/actions/runs/5554403233/jobs/10144183085?pr=200
😭