Skip to content

Commit e23ec65

Browse files
stomitastomita
authored
Merge pull request #224 from mashmatrix/lookup-meta-entry
Support meta information displaying in lookup candidates
2 parents 2b83216 + 28ffb54 commit e23ec65

File tree

5 files changed

+3982
-1774
lines changed

5 files changed

+3982
-1774
lines changed

‎.storybook/__storyshots__/Form.shot‎

Lines changed: 171 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -416,60 +416,87 @@ exports[`Compound Form`] = `
416416
className="slds-lookup__list"
417417
role="presentation">
418418
<li
419-
className="slds-lookup__item">
419+
role="presentation">
420420
<a
421-
className="slds-truncate react-slds-candidate"
421+
className="slds-lookup__item-action react-slds-candidate"
422422
onBlur={[Function]}
423423
onClick={[Function]}
424424
onKeyDown={[Function]}
425425
role="option"
426426
tabIndex={-1}>
427-
<svg
428-
aria-hidden={true}
429-
className="slds-icon slds-icon--small slds-icon-standard-account"
430-
style={undefined}>
431-
<use
432-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account" />
433-
</svg>
434-
Account
427+
<span
428+
className="slds-media slds-media--center slds-truncate">
429+
<svg
430+
aria-hidden={true}
431+
className="slds-icon slds-icon--small slds-icon-standard-account slds-media__figure"
432+
style={undefined}>
433+
<use
434+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account" />
435+
</svg>
436+
<div
437+
className="slds-media__body slds-truncate">
438+
<span
439+
className="slds-lookup__result-text slds-truncate">
440+
Account
441+
</span>
442+
</div>
443+
</span>
435444
</a>
436445
</li>
437446
<li
438-
className="slds-lookup__item">
447+
role="presentation">
439448
<a
440-
className="slds-truncate react-slds-candidate"
449+
className="slds-lookup__item-action react-slds-candidate"
441450
onBlur={[Function]}
442451
onClick={[Function]}
443452
onKeyDown={[Function]}
444453
role="option"
445454
tabIndex={-1}>
446-
<svg
447-
aria-hidden={true}
448-
className="slds-icon slds-icon--small slds-icon-standard-contact"
449-
style={undefined}>
450-
<use
451-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#contact" />
452-
</svg>
453-
Contact
455+
<span
456+
className="slds-media slds-media--center slds-truncate">
457+
<svg
458+
aria-hidden={true}
459+
className="slds-icon slds-icon--small slds-icon-standard-contact slds-media__figure"
460+
style={undefined}>
461+
<use
462+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#contact" />
463+
</svg>
464+
<div
465+
className="slds-media__body slds-truncate">
466+
<span
467+
className="slds-lookup__result-text slds-truncate">
468+
Contact
469+
</span>
470+
</div>
471+
</span>
454472
</a>
455473
</li>
456474
<li
457-
className="slds-lookup__item">
475+
role="presentation">
458476
<a
459-
className="slds-truncate react-slds-candidate"
477+
className="slds-lookup__item-action react-slds-candidate"
460478
onBlur={[Function]}
461479
onClick={[Function]}
462480
onKeyDown={[Function]}
463481
role="option"
464482
tabIndex={-1}>
465-
<svg
466-
aria-hidden={true}
467-
className="slds-icon slds-icon--small slds-icon-standard-opportunity"
468-
style={undefined}>
469-
<use
470-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
471-
</svg>
472-
Opportunity
483+
<span
484+
className="slds-media slds-media--center slds-truncate">
485+
<svg
486+
aria-hidden={true}
487+
className="slds-icon slds-icon--small slds-icon-standard-opportunity slds-media__figure"
488+
style={undefined}>
489+
<use
490+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
491+
</svg>
492+
<div
493+
className="slds-media__body slds-truncate">
494+
<span
495+
className="slds-lookup__result-text slds-truncate">
496+
Opportunity
497+
</span>
498+
</div>
499+
</span>
473500
</a>
474501
</li>
475502
</ul>
@@ -7530,60 +7557,87 @@ exports[`Horizontal Form`] = `
75307557
className="slds-lookup__list"
75317558
role="presentation">
75327559
<li
7533-
className="slds-lookup__item">
7560+
role="presentation">
75347561
<a
7535-
className="slds-truncate react-slds-candidate"
7562+
className="slds-lookup__item-action react-slds-candidate"
75367563
onBlur={[Function]}
75377564
onClick={[Function]}
75387565
onKeyDown={[Function]}
75397566
role="option"
75407567
tabIndex={-1}>
7541-
<svg
7542-
aria-hidden={true}
7543-
className="slds-icon slds-icon--small slds-icon-standard-account"
7544-
style={undefined}>
7545-
<use
7546-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account" />
7547-
</svg>
7548-
Account
7568+
<span
7569+
className="slds-media slds-media--center slds-truncate">
7570+
<svg
7571+
aria-hidden={true}
7572+
className="slds-icon slds-icon--small slds-icon-standard-account slds-media__figure"
7573+
style={undefined}>
7574+
<use
7575+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account" />
7576+
</svg>
7577+
<div
7578+
className="slds-media__body slds-truncate">
7579+
<span
7580+
className="slds-lookup__result-text slds-truncate">
7581+
Account
7582+
</span>
7583+
</div>
7584+
</span>
75497585
</a>
75507586
</li>
75517587
<li
7552-
className="slds-lookup__item">
7588+
role="presentation">
75537589
<a
7554-
className="slds-truncate react-slds-candidate"
7590+
className="slds-lookup__item-action react-slds-candidate"
75557591
onBlur={[Function]}
75567592
onClick={[Function]}
75577593
onKeyDown={[Function]}
75587594
role="option"
75597595
tabIndex={-1}>
7560-
<svg
7561-
aria-hidden={true}
7562-
className="slds-icon slds-icon--small slds-icon-standard-contact"
7563-
style={undefined}>
7564-
<use
7565-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#contact" />
7566-
</svg>
7567-
Contact
7596+
<span
7597+
className="slds-media slds-media--center slds-truncate">
7598+
<svg
7599+
aria-hidden={true}
7600+
className="slds-icon slds-icon--small slds-icon-standard-contact slds-media__figure"
7601+
style={undefined}>
7602+
<use
7603+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#contact" />
7604+
</svg>
7605+
<div
7606+
className="slds-media__body slds-truncate">
7607+
<span
7608+
className="slds-lookup__result-text slds-truncate">
7609+
Contact
7610+
</span>
7611+
</div>
7612+
</span>
75687613
</a>
75697614
</li>
75707615
<li
7571-
className="slds-lookup__item">
7616+
role="presentation">
75727617
<a
7573-
className="slds-truncate react-slds-candidate"
7618+
className="slds-lookup__item-action react-slds-candidate"
75747619
onBlur={[Function]}
75757620
onClick={[Function]}
75767621
onKeyDown={[Function]}
75777622
role="option"
75787623
tabIndex={-1}>
7579-
<svg
7580-
aria-hidden={true}
7581-
className="slds-icon slds-icon--small slds-icon-standard-opportunity"
7582-
style={undefined}>
7583-
<use
7584-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
7585-
</svg>
7586-
Opportunity
7624+
<span
7625+
className="slds-media slds-media--center slds-truncate">
7626+
<svg
7627+
aria-hidden={true}
7628+
className="slds-icon slds-icon--small slds-icon-standard-opportunity slds-media__figure"
7629+
style={undefined}>
7630+
<use
7631+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
7632+
</svg>
7633+
<div
7634+
className="slds-media__body slds-truncate">
7635+
<span
7636+
className="slds-lookup__result-text slds-truncate">
7637+
Opportunity
7638+
</span>
7639+
</div>
7640+
</span>
75877641
</a>
75887642
</li>
75897643
</ul>
@@ -13459,60 +13513,87 @@ exports[`Stacked Form`] = `
1345913513
className="slds-lookup__list"
1346013514
role="presentation">
1346113515
<li
13462-
className="slds-lookup__item">
13516+
role="presentation">
1346313517
<a
13464-
className="slds-truncate react-slds-candidate"
13518+
className="slds-lookup__item-action react-slds-candidate"
1346513519
onBlur={[Function]}
1346613520
onClick={[Function]}
1346713521
onKeyDown={[Function]}
1346813522
role="option"
1346913523
tabIndex={-1}>
13470-
<svg
13471-
aria-hidden={true}
13472-
className="slds-icon slds-icon--small slds-icon-standard-account"
13473-
style={undefined}>
13474-
<use
13475-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account" />
13476-
</svg>
13477-
Account
13524+
<span
13525+
className="slds-media slds-media--center slds-truncate">
13526+
<svg
13527+
aria-hidden={true}
13528+
className="slds-icon slds-icon--small slds-icon-standard-account slds-media__figure"
13529+
style={undefined}>
13530+
<use
13531+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account" />
13532+
</svg>
13533+
<div
13534+
className="slds-media__body slds-truncate">
13535+
<span
13536+
className="slds-lookup__result-text slds-truncate">
13537+
Account
13538+
</span>
13539+
</div>
13540+
</span>
1347813541
</a>
1347913542
</li>
1348013543
<li
13481-
className="slds-lookup__item">
13544+
role="presentation">
1348213545
<a
13483-
className="slds-truncate react-slds-candidate"
13546+
className="slds-lookup__item-action react-slds-candidate"
1348413547
onBlur={[Function]}
1348513548
onClick={[Function]}
1348613549
onKeyDown={[Function]}
1348713550
role="option"
1348813551
tabIndex={-1}>
13489-
<svg
13490-
aria-hidden={true}
13491-
className="slds-icon slds-icon--small slds-icon-standard-contact"
13492-
style={undefined}>
13493-
<use
13494-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#contact" />
13495-
</svg>
13496-
Contact
13552+
<span
13553+
className="slds-media slds-media--center slds-truncate">
13554+
<svg
13555+
aria-hidden={true}
13556+
className="slds-icon slds-icon--small slds-icon-standard-contact slds-media__figure"
13557+
style={undefined}>
13558+
<use
13559+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#contact" />
13560+
</svg>
13561+
<div
13562+
className="slds-media__body slds-truncate">
13563+
<span
13564+
className="slds-lookup__result-text slds-truncate">
13565+
Contact
13566+
</span>
13567+
</div>
13568+
</span>
1349713569
</a>
1349813570
</li>
1349913571
<li
13500-
className="slds-lookup__item">
13572+
role="presentation">
1350113573
<a
13502-
className="slds-truncate react-slds-candidate"
13574+
className="slds-lookup__item-action react-slds-candidate"
1350313575
onBlur={[Function]}
1350413576
onClick={[Function]}
1350513577
onKeyDown={[Function]}
1350613578
role="option"
1350713579
tabIndex={-1}>
13508-
<svg
13509-
aria-hidden={true}
13510-
className="slds-icon slds-icon--small slds-icon-standard-opportunity"
13511-
style={undefined}>
13512-
<use
13513-
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
13514-
</svg>
13515-
Opportunity
13580+
<span
13581+
className="slds-media slds-media--center slds-truncate">
13582+
<svg
13583+
aria-hidden={true}
13584+
className="slds-icon slds-icon--small slds-icon-standard-opportunity slds-media__figure"
13585+
style={undefined}>
13586+
<use
13587+
xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
13588+
</svg>
13589+
<div
13590+
className="slds-media__body slds-truncate">
13591+
<span
13592+
className="slds-lookup__result-text slds-truncate">
13593+
Opportunity
13594+
</span>
13595+
</div>
13596+
</span>
1351613597
</a>
1351713598
</li>
1351813599
</ul>

0 commit comments

Comments
 (0)