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.

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

Enhancement: Subtitle/description for combobox-item #3695

Closed
1 task
jgibson02 opened this issue Dec 13, 2021 · 14 comments
Closed
1 task

Enhancement: Subtitle/description for combobox-item #3695

jgibson02 opened this issue Dec 13, 2021 · 14 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. c-combobox Issues that pertain to the calcite-combobox and related components design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. low risk Issues with low risk for consideration in low risk milestones p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.

Comments

@jgibson02
Copy link
Contributor

Description

Provide a subtitle/description prop for displaying a secondary label on a combobox-item

Acceptance Criteria

  • A prop is provided to render a secondary label within a combobox-item

Relevant Info

Which Component

combobox-item

Example Use Case

In ArcGIS Velocity, we have a spatial reference selector which has ~9000 items, and users often are familiar with choosing a spatial reference by either the text label (e.g. "GCS WGS 1984") or by its numeric WKID (e.g. "4326"), so we used the subtitle prop that calcite-react MenuItems provide to display the numeric WKID on the menuitem, and filtering automatically filters against that subtitle as well.

image

Due to a bug in calcite-react where scrolling while using the appendToBody and virtualized props together will cause the dropdown to close, we are looking to switch to using calcite-components combobox instead, but not having this subtitle is a serious UX drawback.

@jgibson02 jgibson02 added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 13, 2021
@benelan benelan added design Issues that need design consultation prior to development. and removed needs triage Planning workflow - pending design/dev review. labels Dec 30, 2021
@benelan benelan added this to the Freezer milestone Dec 30, 2021
@macandcheese
Copy link
Contributor

macandcheese commented Dec 15, 2022

This would probably be best implemented as a content-end slot alongside a description string prop.

@macandcheese macandcheese removed their assignment Dec 16, 2022
@macandcheese macandcheese added the needs triage Planning workflow - pending design/dev review. label Dec 16, 2022
@macandcheese macandcheese added the c-combobox Issues that pertain to the calcite-combobox and related components label Mar 22, 2023
@hccampos
Copy link

hccampos commented Apr 6, 2023

We should also have the ability to provide a value to be displayed in the input when the combobox is closed. In this spatial reference case, it could display the WKID or some other shorter representation of the spatial reference.

In our case, we bumped into this while working on a Timezone picker where we have a long name with the IANA code and the UTC offset, but we don't want to display all that information in the input itself, since it would make the input too large.

@ashetland ashetland self-assigned this Jun 9, 2023
@ashetland ashetland added p - medium Issue is non core or affecting less that 60% of people using the library 1 - assigned Issues that are assigned to a sprint and a team member. and removed needs triage Planning workflow - pending design/dev review. 0 - new New issues that need assignment. labels Jun 9, 2023
@ashetland
Copy link
Contributor

ashetland commented Jun 27, 2023

Designs for a description prop and a content-end slot are ready to go in this Figma file. Also outlined is a proposed value-short prop to address the needs in this comment. cc @jcfranco

@ashetland ashetland added the ready for dev Issues ready for development implementation. label Jun 27, 2023
@github-actions github-actions bot added 0 - new New issues that need assignment. and removed design Issues that need design consultation prior to development. 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 27, 2023
@github-actions github-actions bot assigned DitwanP and unassigned jcfranco Jul 16, 2024
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Jul 16, 2024

🍡 Verified on 2.11.0-next.12

Screenshot 2024-07-16 at 2 50 57 PM

@DitwanP DitwanP closed this as completed Jul 16, 2024
@DitwanP DitwanP 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 Jul 16, 2024
@ashetland
Copy link
Contributor

Reopening issue to correct a couple small misses during design review. Design spec has been updated. cc @jcfranco

@ashetland ashetland reopened this Jul 19, 2024
@DitwanP DitwanP added 2 - in development Issues that are actively being worked on. and removed 4 - verified Issues that have been released and confirmed resolved. labels Jul 19, 2024
@DitwanP DitwanP assigned jcfranco and unassigned geospatialem and DitwanP Jul 19, 2024
jcfranco added a commit that referenced this issue Jul 22, 2024
**Related Issue:** #3695 

## Summary

This fixes spacing and font-weight to follow the updated spec.

### Notes

* updates previous internal CSS prop to follow conventions (will follow
suit for others in a separate PR)
* ensures selected font weight is only applied to the title/heading
* fixes trailing indent padding
* prevents wrapping of `short-heading`
@jcfranco jcfranco 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 Jul 22, 2024
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Jul 22, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Jul 24, 2024

🍡 Verified on 2.11.0-next.21

@DitwanP DitwanP closed this as completed Jul 24, 2024
@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 Jul 30, 2024
calcite-admin pushed a commit that referenced this issue Jul 30, 2024
…s and `content-end` slot (#9771)

**Related Issue:** #3695

## Summary

This adds the following enhancements to `combobox`/`combobox-item`:

* `description` prop - displays description below label
* `shortHeading` prop - displays short version of the heading (label) in
selection
* `content-end` slot - enables slotting non-interactive elements after
the item's content

**Note**: the new props are filterable and also participate in visual
matching
calcite-admin pushed a commit that referenced this issue Jul 30, 2024
**Related Issue:** #3695 

## Summary

This fixes spacing and font-weight to follow the updated spec.

### Notes

* updates previous internal CSS prop to follow conventions (will follow
suit for others in a separate PR)
* ensures selected font weight is only applied to the title/heading
* fixes trailing indent padding
* prevents wrapping of `short-heading`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. c-combobox Issues that pertain to the calcite-combobox and related components design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. low risk Issues with low risk for consideration in low risk milestones p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Development

No branches or pull requests