Skip to content

Commit 40df6d4

Browse files
brandonferruabrandonferrua
authored
Merge pull request #2420 from salesforce-ux/chore/combobox-examples
chore(combobox): add back dynamic list examples
2 parents 9111552 + ddc8bbb commit 40df6d4

File tree

2 files changed

+110
-107
lines changed

2 files changed

+110
-107
lines changed

‎ui/components/combobox/base/_index.scss‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
display: inline-flex;
7272
flex-wrap: wrap;
7373
flex-shrink: 0;
74-
max-width: 75%;
7574
align-items: center;
7675
margin-left: $spacing-xxx-small;
7776
margin-right: $spacing-xxx-small;
@@ -148,6 +147,11 @@
148147
text-decoration: none;
149148
}
150149

150+
.slds-listbox__option[role="presentation"]:hover {
151+
background-color: transparent;
152+
cursor: default;
153+
}
154+
151155
/**
152156
* Modifies the listbox option if it contains an plain object or string
153157
*
@@ -344,6 +348,13 @@
344348
}
345349
}
346350

347-
.slds-has-inline-listbox .slds-combobox__input[value] {
348-
box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px $color-border inset;
351+
.slds-has-inline-listbox {
352+
353+
[role="listbox"] {
354+
display: inline-flex;
355+
}
356+
357+
.slds-combobox__input[value] {
358+
box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px $color-border inset;
359+
}
349360
}

‎ui/components/combobox/base/example.jsx‎

Lines changed: 96 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const listboxSelectionsId = 'listbox-selections-unique-id';
2424
const comboboxId = 'combobox-unique-id';
2525
const listboxOptionId01 = 'listbox-option-unique-id-01';
2626
const listboxOptionId02 = 'listbox-option-unique-id-02';
27+
const accounts = ['Acme','Edge SLA','Express Logistics SLA','GenePoint Lab Generators','GenePoint SLA','Pyramid Emergency Generators','United Oil Installations','United Oil Plant Standby Generators','University of AZ Installations','University of AZ Portable Generators'];
2728

2829
/**
2930
* Generic Listbox container
@@ -36,23 +37,27 @@ const listboxOptionId02 = 'listbox-option-unique-id-02';
3637
* @prop {string} aria-label -
3738
*/
3839
export let Listbox = props =>
39-
<ul
40+
<div
4041
id={props.id || listboxId}
41-
className={classNames(
42-
'slds-listbox',
43-
{
44-
'slds-listbox_vertical': props.vertical,
45-
'slds-listbox_horizontal': props.horizontal,
46-
'slds-listbox_inline': props.inline
47-
},
48-
props.className
49-
)}
5042
role="listbox"
5143
aria-orientation={props.horizontal || props.inline ? 'horizontal' : null}
52-
aria-label={props['aria-label']}
5344
>
54-
{props.children}
55-
</ul>;
45+
<ul
46+
className={classNames(
47+
'slds-listbox',
48+
{
49+
'slds-listbox_vertical': props.vertical,
50+
'slds-listbox_horizontal': props.horizontal,
51+
'slds-listbox_inline': props.inline
52+
},
53+
props.className
54+
)}
55+
role={props['aria-label'] ? 'group' : 'presentation'}
56+
aria-label={props['aria-label']}
57+
>
58+
{props.children}
59+
</ul>
60+
</div>;
5661

5762
/**
5863
* Generic list item within a listbox
@@ -390,93 +395,39 @@ const ListboxDropdown = props =>
390395
</Listbox>;
391396

392397
const ListboxList = props =>
393-
<Listbox className="slds-dropdown_length-10" vertical={true}>
394-
<ListboxItem>
395-
<EntityOption
396-
id={_.uniqueId('listbox-option-id-')}
397-
entityTitle="Acme"
398-
entityMeta={true}
399-
/>
400-
</ListboxItem>
401-
<ListboxItem>
402-
<EntityOption
403-
id={_.uniqueId('listbox-option-id-')}
404-
entityTitle="Edge SLA"
405-
entityMeta={true}
406-
/>
407-
</ListboxItem>
408-
<ListboxItem>
409-
<EntityOption
410-
id={_.uniqueId('listbox-option-id-')}
411-
entityTitle="Express Logistics SLA"
412-
entityMeta={true}
413-
/>
414-
</ListboxItem>
415-
<ListboxItem>
416-
<EntityOption
417-
id={_.uniqueId('listbox-option-id-')}
418-
entityTitle="GenePoint Lab Generators"
419-
entityMeta={true}
420-
/>
421-
</ListboxItem>
422-
<ListboxItem>
423-
<EntityOption
424-
id={_.uniqueId('listbox-option-id-')}
425-
entityTitle="GenePoint SLA"
426-
entityMeta={true}
427-
/>
428-
</ListboxItem>
429-
<ListboxItem>
430-
<EntityOption
431-
id={_.uniqueId('listbox-option-id-')}
432-
entityTitle="Pyramid Emergency Generators"
433-
entityMeta={true}
434-
/>
435-
</ListboxItem>
436-
<ListboxItem>
437-
<EntityOption
438-
id={_.uniqueId('listbox-option-id-')}
439-
entityTitle="United Oil Installations"
440-
entityMeta={true}
441-
/>
442-
</ListboxItem>
443-
<ListboxItem>
444-
<EntityOption
445-
id={_.uniqueId('listbox-option-id-')}
446-
entityTitle="United Oil Plant Standby Generators"
447-
entityMeta={true}
448-
/>
449-
</ListboxItem>
450-
<ListboxItem>
451-
<EntityOption
452-
id={_.uniqueId('listbox-option-id-')}
453-
entityTitle="United Oil SLA"
454-
entityMeta={true}
455-
/>
456-
</ListboxItem>
457-
<ListboxItem>
458-
<EntityOption
459-
id={_.uniqueId('listbox-option-id-')}
460-
entityTitle="United Oil Standby Generators"
461-
entityMeta={true}
462-
/>
463-
</ListboxItem>
464-
<ListboxItem>
465-
<EntityOption
466-
id={_.uniqueId('listbox-option-id-')}
467-
entityTitle="University of AZ Installations"
468-
entityMeta={true}
469-
/>
470-
</ListboxItem>
471-
<ListboxItem>
472-
<EntityOption
473-
id={_.uniqueId('listbox-option-id-')}
474-
entityTitle="University of AZ Portable Generators"
475-
entityMeta={true}
476-
/>
477-
</ListboxItem>
398+
<Listbox className="slds-dropdown--length-10" vertical={true}>
399+
<li role="presentation" className="slds-listbox__item">
400+
<span className="slds-media slds-listbox__option slds-listbox__option--plain" role="presentation" id={_.uniqueId('listbox-option-id-')}>
401+
<h3 className="slds-text-title--caps" role="presentation">My Favorites</h3>
402+
</span>
403+
</li>
404+
{ accounts.slice(0, props.length).map(value =>
405+
<ListboxItem key={value}>
406+
<EntityOption
407+
id={_.uniqueId('listbox-option-id-')}
408+
entityTitle={value}
409+
entityMeta={true}
410+
/>
411+
</ListboxItem>
412+
)}
478413
</Listbox>;
479414

415+
const Footer = props =>
416+
<ul>
417+
<li>
418+
<button className="slds-button slds-button--reset slds-p-vertical--xx-small slds-size--1-of-1" role="presentation">
419+
<SvgIcon className="slds-button__icon slds-button__icon--left" sprite="utility" symbol="add" />
420+
Favorite this page
421+
</button>
422+
</li>
423+
<li>
424+
<button className="slds-button slds-button--reset slds-p-vertical--xx-small slds-size--1-of-1" role="presentation">
425+
<SvgIcon className="slds-button__icon slds-button__icon--left" sprite="utility" symbol="edit" />
426+
Edit Favorites
427+
</button>
428+
</li>
429+
</ul>;
430+
480431
/* -----------------------------------------------------------------------------
481432
Exports
482433
----------------------------------------------------------------------------- */
@@ -567,21 +518,62 @@ export let states = [
567518
// Examples
568519
export let examples = [
569520
{
570-
id: 'non-modal-dialog',
571-
label: 'Non-modal Dialog',
521+
id: 'non-modal-dialog-list-0-items',
522+
label: 'Dynamic list — 0 Items (Non-modal Dialog)',
523+
element:
524+
<Popover
525+
className="slds-nubbin--top-left"
526+
bodyClassName="slds-p-vertical--medium slds-p-horizontal--small"
527+
footer={<Footer />}
528+
>
529+
<h3 className="slds-text-title--caps slds-m-bottom--x-small" role="presentation">
530+
My Favorites
531+
</h3>
532+
<p>You can favorite any page!</p>
533+
</Popover>
534+
},
535+
{
536+
id: 'non-modal-dialog-list-1-item',
537+
label: 'Dynamic list — 1 Item (Non-modal Dialog)',
538+
element:
539+
<Popover
540+
className="slds-nubbin--top-left"
541+
bodyClassName="slds-p-horizontal--none"
542+
footer={<Footer />}
543+
>
544+
<ListboxList length="1" />
545+
</Popover>
546+
},
547+
{
548+
id: 'non-modal-dialog-list-sub-10-item',
549+
label: 'Dynamic list — <10 Items (Non-modal Dialog)',
550+
element:
551+
<Popover
552+
className="slds-nubbin--top-left"
553+
bodyClassName="slds-p-horizontal--none"
554+
footer={<Footer />}
555+
>
556+
<ListboxList length="6" />
557+
</Popover>
558+
},
559+
{
560+
id: 'non-modal-dialog-list-over-10-item',
561+
label: 'Dynamic list — >10 Items (Non-modal Dialog)',
572562
element:
573563
<Popover
574-
className="slds-nubbin_top-left"
575-
bodyClassName="slds-p-horizontal_none"
564+
className="slds-nubbin--top-left"
565+
bodyClassName="slds-p-horizontal--none"
566+
footer={<Footer />}
576567
>
577568
<ComboboxContainer
578569
autocomplete={true}
579570
isOpen={true}
571+
placeholder="Search Accounts"
580572
hideLabel={true}
581573
inputIcon="right"
582574
inputIconRightSymbol="search"
583-
formControlClassName="slds-m-around_small"
584-
listbox={<ListboxList />}
575+
inputContainerClassName="slds-m-around_small"
576+
listbox={<ListboxList length="12" />}
585577
staticListbox={true}
586578
/>
587579
</Popover>

0 commit comments

Comments
 (0)