feat(combobox, combobox-item): add description, shortHeading props and content-end slot
#9771
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,10 +28,11 @@ import { getAncestors, getDepth, isSingleLike } from "../combobox/utils"; | |
| import { Scale, SelectionMode } from "../interfaces"; | ||
| import { getIconScale } from "../../utils/component"; | ||
| import { IconName } from "../icon/interfaces"; | ||
| import { CSS, SLOTS } from "./resources"; | ||
|
|
||
| /** | ||
| * @slot - A slot for adding nested `calcite-combobox-item`s. | ||
| * @slot content-end - A slot for adding non-actionable elements after the component's content. | ||
| */ | ||
| @Component({ | ||
| tag: "calcite-combobox-item", | ||
|
|
@@ -59,6 +60,11 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon | |
| /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */ | ||
| @Prop({ mutable: true }) ancestors: ComboboxChildElement[]; | ||
|
|
||
| /** | ||
| * A description for the component, which displays below the label. | ||
| */ | ||
| @Prop() description: string; | ||
|
|
||
| /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */ | ||
| @Prop({ reflect: true }) guid = guid(); | ||
|
|
||
|
|
@@ -76,6 +82,15 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon | |
| /** The component's text. */ | ||
| @Prop({ reflect: true }) textLabel!: string; | ||
|
|
||
| /** | ||
| * The component's short label. | ||
| * | ||
| * When provided, the short label will be displayed in the component's selection. | ||
| * | ||
| * It is recommended to use 5 chars or less. | ||
| */ | ||
| @Prop({ reflect: true }) textLabelShort: string; | ||
|
There was a problem hiding this comment. Maybe we can come up with a better name for this prop? Something like There was a problem hiding this comment. I think at some point we should rename There was a problem hiding this comment.
When specified this prop shows an abbreviated version of the label that is used in selection. The suggested names do not quite reflect this.
Agreed, but until then it might help associate both props by matching the existing name. There were other suggestions in the design spec, but There was a problem hiding this comment. Sadly, I've got nothin' better than Long-term I do like the idea of renaming the main two props to There was a problem hiding this comment. Just throwing this out there: Instead of adding another prop we plan on renaming in the future, why not just deprecate There was a problem hiding this comment.
We'd want to use Also wanted to point out that my PR title isn't quite accurate. It's a short heading/label we're adding, not a description. Will update. There was a problem hiding this comment. @driskull This example shows how the prop comes into play. There was a problem hiding this comment. Yeah I think something like There was a problem hiding this comment. Agree with moving towards a consistent There was a problem hiding this comment. Sounds good. Thanks for the discussion, y'all! ✨💪✨ I'll submit an issue/PR to deprecate |
||
|
|
||
| /** | ||
| * Pattern for highlighting filter text matches. | ||
| * | ||
|
|
@@ -189,7 +204,6 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon | |
| class={{ | ||
| [CSS.custom]: !!this.icon, | ||
| [CSS.iconActive]: this.icon && this.selected, | ||
| }} | ||
| flipRtl={this.iconFlipRtl} | ||
| icon={this.icon || iconPath} | ||
|
|
@@ -207,15 +221,13 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon | |
| class={{ | ||
| [CSS.icon]: true, | ||
| [CSS.dot]: true, | ||
| }} | ||
| /> | ||
| ) : ( | ||
| <calcite-icon | ||
| class={{ | ||
| [CSS.icon]: true, | ||
| [CSS.iconActive]: this.selected, | ||
| }} | ||
| flipRtl={this.iconFlipRtl} | ||
| icon={iconPath} | ||
|
|
@@ -250,19 +262,31 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon | |
| [CSS.active]: this.active, | ||
| [CSS.single]: isSingleSelect, | ||
| }; | ||
| const depth = getDepth(this.el) + 1; | ||
|
|
||
| return ( | ||
| <Host aria-hidden="true"> | ||
| <InteractiveContainer disabled={disabled}> | ||
| <div | ||
| class={{ | ||
| [CSS.container]: true, | ||
| [CSS.scale(this.scale)]: true, | ||
| }} | ||
| style={{ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` }} | ||
| > | ||
| <li class={classes} id={this.guid} onClick={this.itemClickHandler}> | ||
| {this.renderSelectIndicator(showDot, iconPath)} | ||
| {this.renderIcon(iconPath)} | ||
| <div class={CSS.centerContent}> | ||
| <div class={CSS.title}>{this.renderTextContent(this.textLabel)}</div> | ||
| {this.description ? ( | ||
| <div class={CSS.description}>{this.renderTextContent(this.description)}</div> | ||
| ) : null} | ||
| </div> | ||
| {this.textLabelShort ? ( | ||
| <div class={CSS.shortText}>{this.renderTextContent(this.textLabelShort)}</div> | ||
| ) : null} | ||
| <slot name={SLOTS.contentEnd} /> | ||
| </li> | ||
| {this.renderChildren()} | ||
| </div> | ||
|
|
@@ -271,12 +295,14 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon | |
| ); | ||
| } | ||
|
|
||
| private renderTextContent(text: string): string | (string | VNode)[] { | ||
| const pattern = this.filterTextMatchPattern; | ||
|
|
||
| if (!pattern || !text) { | ||
| return text; | ||
| } | ||
|
|
||
| const parts: (string | VNode)[] = text.split(pattern); | ||
|
|
||
| if (parts.length > 1) { | ||
| // we only highlight the first match | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,24 @@ | ||
| import { Scale } from "../interfaces"; | ||
|
|
||
| export const CSS = { | ||
| active: "label--active", | ||
| centerContent: "center-content", | ||
| container: "container", | ||
| custom: "icon--custom", | ||
| description: "description", | ||
| dot: "icon--dot", | ||
| filterMatch: "filter-match", | ||
| icon: "icon", | ||
| iconActive: "icon--active", | ||
| label: "label", | ||
| scale: (scale: Scale) => `scale--${scale}` as const, | ||
| selected: "label--selected", | ||
| shortText: "short-text", | ||
| single: "label--single", | ||
| textContainer: "text-container", | ||
| title: "title", | ||
| }; | ||
|
|
||
| export const SLOTS = { | ||
| contentEnd: "content-end", | ||
| }; |
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.
will
descriptionandshort-textneed CSS vars for their color at some point?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.
descriptionmight. WDTY @ashetland?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.
If we need a custom CSS prop, I'll add it in the component tokens PR.
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.
That would make sense for the short text and I'm guessing we're doing that for description text across components?
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.
I believe so. I'll double check and add it to #8594.