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

Jump to bottom

New Component: chip-group and selection modes #1933

Closed
macandcheese opened this issue Apr 8, 2021 · 9 comments
Closed

New Component: chip-group and selection modes #1933

macandcheese opened this issue Apr 8, 2021 · 9 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. estimate - 13 Requires planning and input from team, consider smaller steps. new component Issues tied to a new component. p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2023 April Priori...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Apr 8, 2021 •
edited
Loading

Description

We need a workflow for single or multi selection of chips.

Material refers to these as “choice” / “filter” chips - https://material.io/components/chips#types

Our options could match other components in our system like dropdown, accordion, etc., with a single/ multi / single-persist / none selection mode prop.

User Stories

Single select cc @asangma

Multi select:
Category search on : https://developers.arcgis.com/calcite-design-system/icons/

Screen Shot 2021-08-23 at 8 53 56 AM

That functionally works as "multi select choice chips" would (missing some keyboard affordances)

<calcite-chip-group selection-mode="single/multi/single-persist">
    <calcite-chip></calcite-chip>
    <calcite-chip></calcite-chip>
<calcite-chip-group>
  • To improve keyboard navigability, it needs to work with arrow / home / end - Do we need to render a hidden semantic analog here like in calcite-rating?
  • A calcite-chip would need an active prop to determine styling.
  • A wrapping calcite-chip-group would set the selection-mode, similar to a dropdown group or accordion component.
  • In addition to selection modes - calcite-chip-group would be able to space consistently chips used in static display, or dismissible chip grid. Need to evaluate keyboard behavior for chips in chip group without selection - do they need focus? only when dismissible?

High priority for Online (analysis/home app)
@macandcheese macandcheese added new component Issues tied to a new component. 0 - new New issues that need assignment. labels Apr 8, 2021
@macandcheese macandcheese self-assigned this Apr 8, 2021
@macandcheese macandcheese added 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. p - low Issue is non core or affecting less that 10% of people using the library and removed 0 - new New issues that need assignment. labels Apr 29, 2021
@macandcheese macandcheese added needs triage Planning workflow - pending design/dev review. and removed 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. labels Jun 7, 2021
@macandcheese macandcheese removed their assignment Jun 7, 2021
@macandcheese macandcheese added 0 - new New issues that need assignment. and removed p - low Issue is non core or affecting less that 10% of people using the library labels Jun 7, 2021
@julio8a julio8a added this to the Backlog milestone Jun 21, 2021
@julio8a julio8a removed the needs triage Planning workflow - pending design/dev review. label Jun 21, 2021
@macandcheese
Copy link
Contributor Author

Can we bump the priority of this? We are still using a hand-rolled solution using Calcite Chips on the icon search linked above.

@ethanbdev
Copy link
Contributor

+1, have a need for this as well!

@macandcheese
Copy link
Contributor Author

@julio8a @benelan - can we take a look at adding some priority to this?

@mitc7862
Copy link

This looks great!
We really need this in Map Viewer and Analysis Studio.

@julio8a julio8a modified the milestones: Freezer, Back burner Sep 14, 2021
@macandcheese
Copy link
Contributor Author

@benelan let's look at re-prioritizing this one if possible next triage.

@ethanbdev
Copy link
Contributor

@jay-bis ended up implementing something similar for a different project, I am not sure if some if it could be reused / moved to this repository

This was referenced Dec 30, 2021
Closed
Closed
@macandcheese macandcheese self-assigned this Jan 5, 2022
@macandcheese macandcheese mentioned this issue Jan 21, 2022
Closed
@macandcheese macandcheese removed their assignment Jun 18, 2022
@macandcheese macandcheese changed the title New Component: selection / filter chips New Component: chip-group and selection modes Jun 27, 2022
@benelan benelan added the epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. label Jun 29, 2022
@macandcheese macandcheese self-assigned this Jul 29, 2022
@macandcheese macandcheese added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. labels Dec 16, 2022
@macandcheese macandcheese mentioned this issue Dec 16, 2022
Merged
@ellenupp
Copy link

We could also use something like this in Dashboards. We're currently implementing something similar using calcite-buttons:

image

But we also have an "edit" mode where items can be reordered and renamed.

image

@brittneytewks brittneytewks added estimate - 13 Requires planning and input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality labels Mar 30, 2023
macandcheese added a commit that referenced this issue Apr 21, 2023
@macandcheese
feat(chip-group): Add Chip Group component (#6075)
77dec87 
**Related Issue:**
[#1933](#1933)

###  ~~Opening as a draft~~ Ready for review :) 

## Summary
This still needs work but want to get a branch up so folks can preview
and provide feedback.

This PR adds the proposed `chip-group` component and some associated
changes to `chip`.
- `chip-group` can be used for spacing and keyboard navigation of
selectable or non-selectable `chip` components.
- `chip-group` defaults to `selection-mode:none`, but supports `single`,
`single-persist`, and `multiple` selection modes.

To do / looking for feedback:
- Currently, users need to add `selectable` property to child `chip`
components to enable the selection capability. This could potentially be
managed by the parent `chip-group`: conditionally applied via an
internal property based on `selection-mode`, but that creates a weird
situation where `selectable` is not documented but the `selected`
property is public, since that will always need to be available to a
user. Open to thoughts there.
  
- Currently, once dismissed, the previous chip is focused. If the first
chip is dismissed, focus is moved to the "next first chip" as it takes
the place - does this make sense?
  
  - Add more tests as needed.
  - Audit of keyboard navigation.
  - Need an a11y audit from @geospatialem :)
  - Style cleanup / design feedback from @SkyeSeitz @ashetland  :)
  - General pattern feedback :)



https://user-images.githubusercontent.com/4733155/208154126-bdc706de-8c25-4d64-b7e7-988952d96043.mov
@macandcheese macandcheese added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Apr 21, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Apr 21, 2023
@geospatialem
Copy link
Member

Verified in master with mouse, keyboard, and AT - JAWS and NVDA.

Referencing issue #6825 for additional keyboard support down the line.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. estimate - 13 Requires planning and input from team, consider smaller steps. new component Issues tied to a new component. p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2023 April Priorities - No breaking c...
Development

No branches or pull requests
10 participants
@jcfranco @alisonailea @macandcheese @geospatialem @julio8a @benelan @mitc7862 @ellenupp @ethanbdev @brittneytewks