Skip to content

Commit 2249d99

Browse files
pozilpozil
committed
feat: upgrade to SLDS 2.0
1 parent 4c18f20 commit 2249d99

File tree

4 files changed

+34
-78
lines changed

4 files changed

+34
-78
lines changed

‎src/main/default/lwc/lookup/__tests__/lookupRendering.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ describe('c-lookup rendering', () => {
118118
expect(clearSelButton.length).toBe(0);
119119
// Verify result list is rendered
120120
const selList = lookupEl.shadowRoot.querySelectorAll('ul.slds-listbox_inline');
121-
expect(selList.length).toBe(1);
121+
expect(selList.length).toBe(0);
122122

123123
await expect(lookupEl).toBeAccessible();
124124
});
@@ -217,7 +217,7 @@ describe('c-lookup rendering', () => {
217217
});
218218

219219
// Verify errors
220-
const errorEls = lookupEl.shadowRoot.querySelectorAll('div.form-error');
220+
const errorEls = lookupEl.shadowRoot.querySelectorAll('div.slds-form-element__help');
221221
expect(errorEls.length).toBe(errors.length);
222222
expect(errorEls[0].textContent).toBe(errors[0].message);
223223
expect(errorEls[1].textContent).toBe(errors[1].message);

‎src/main/default/lwc/lookup/lookup.css‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/main/default/lwc/lookup/lookup.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{label}
66
</label>
77
<div class="slds-form-element__control">
8-
<div class={getContainerClass}>
8+
<div class="slds-combobox_container">
99
<div
1010
class={getDropdownClass}
1111
aria-expanded={isListboxOpen}
@@ -108,7 +108,7 @@
108108
data-recordid={item.result.id}
109109
>
110110
<span
111-
class="slds-media__figure slds-listbox__option-icon"
111+
class="slds-media__figure slds-listbox__option-icon slds-m-top_none"
112112
lwc:if={item.result.icon}
113113
>
114114
<lightning-icon
@@ -118,7 +118,7 @@
118118
></lightning-icon>
119119
</span>
120120
<span class="slds-media__body">
121-
<span class="slds-listbox__option-text slds-listbox__option-text_entity">
121+
<span class="slds-listbox__option-text_entity">
122122
<lightning-formatted-rich-text
123123
value={item.result.titleFormatted}
124124
disable-linkify
@@ -127,7 +127,7 @@
127127
</span>
128128
<span
129129
lwc:if={item.result.subtitleFormatted}
130-
class="slds-listbox__option-meta slds-listbox__option-meta_entity"
130+
class="slds-listbox__option-meta"
131131
>
132132
<lightning-formatted-rich-text
133133
value={item.result.subtitleFormatted}
@@ -161,15 +161,15 @@
161161
data-sobject={newRecord.value}
162162
role="option"
163163
>
164-
<span class="slds-media__figure slds-listbox__option-icon">
164+
<span class="slds-media__figure slds-listbox__option-icon slds-m-top_none">
165165
<lightning-icon
166166
icon-name="utility:add"
167167
size="small"
168168
alternative-text={newRecord.label}
169169
></lightning-icon>
170170
</span>
171171
<span class="slds-media__body">
172-
<span class="slds-listbox__option-text">{newRecord.label}</span>
172+
<span class="slds-listbox__option-text_entity">{newRecord.label}</span>
173173
</span>
174174
</div>
175175
</li>
@@ -185,6 +185,7 @@
185185
<template lwc:if={isMultiEntry}>
186186
<div id="selection" role="listbox" aria-label={label} aria-orientation="horizontal">
187187
<ul
188+
lwc:if={hasSelection}
188189
class="slds-listbox slds-listbox_inline slds-var-p-top_xxx-small"
189190
role="group"
190191
aria-label="Selected options"
@@ -208,7 +209,7 @@
208209

209210
<!-- Errors start -->
210211
<template for:each={_errors} for:item="error">
211-
<div key={error.id} role="alert" class="slds-form-element__label slds-var-m-top_xx-small form-error">
212+
<div key={error.id} role="alert" class="slds-form-element__help slds-var-m-top_xx-small">
212213
{error.message}
213214
</div>
214215
</template>

‎src/main/default/lwc/lookup/lookup.js‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -199,11 +199,7 @@ export default class Lookup extends NavigationMixin(LightningElement) {
199199
if (this.isMultiEntry) {
200200
return true;
201201
}
202-
return !this.hasSelection();
203-
}
204-
205-
hasSelection() {
206-
return this._curSelection.length > 0;
202+
return !this.hasSelection;
207203
}
208204

209205
processSelectionUpdate(isUserInteraction) {
@@ -214,7 +210,7 @@ export default class Lookup extends NavigationMixin(LightningElement) {
214210
// Indicate that component was interacted with
215211
this._isDirty = isUserInteraction;
216212
// Blur input after single select lookup selection
217-
if (!this.isMultiEntry && this.hasSelection()) {
213+
if (!this.isMultiEntry && this.hasSelection) {
218214
this._hasFocus = false;
219215
}
220216
// If selection was changed by user, notify parent components
@@ -246,7 +242,7 @@ export default class Lookup extends NavigationMixin(LightningElement) {
246242
// Indicate that component was interacted with
247243
this._isDirty = true;
248244
// Blur input after single select lookup selection
249-
if (!this.isMultiEntry && this.hasSelection()) {
245+
if (!this.isMultiEntry && this.hasSelection) {
250246
this._hasFocus = false;
251247
}
252248
// Notify parent components that selection was cleared
@@ -382,14 +378,23 @@ export default class Lookup extends NavigationMixin(LightningElement) {
382378
);
383379
}
384380

381+
get hasSelection() {
382+
return this._curSelection.length > 0;
383+
}
384+
385385
get hasResults() {
386386
return this._searchResults.length > 0;
387387
}
388388

389389
get getFormElementClass() {
390-
return this.variant === VARIANT_LABEL_INLINE
391-
? 'slds-form-element slds-form-element_horizontal'
392-
: 'slds-form-element';
390+
let css = 'slds-form-element';
391+
if (this.variant === VARIANT_LABEL_INLINE) {
392+
css += ' slds-form-element_horizontal';
393+
}
394+
if (this._errors.length > 0 || (this._isDirty && this.required && !this.hasSelection)) {
395+
css += ' slds-has-error';
396+
}
397+
return css;
393398
}
394399

395400
get getLabelClass() {
@@ -398,14 +403,6 @@ export default class Lookup extends NavigationMixin(LightningElement) {
398403
: 'slds-form-element__label';
399404
}
400405

401-
get getContainerClass() {
402-
let css = 'slds-combobox_container ';
403-
if (this._errors.length > 0) {
404-
css += 'has-custom-error';
405-
}
406-
return css;
407-
}
408-
409406
get getDropdownClass() {
410407
let css = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ';
411408
if (this.isListboxOpen) {
@@ -419,11 +416,8 @@ export default class Lookup extends NavigationMixin(LightningElement) {
419416
if (this._hasFocus && this.hasResults) {
420417
css += 'slds-has-focus ';
421418
}
422-
if (this._errors.length > 0 || (this._isDirty && this.required && !this.hasSelection())) {
423-
css += 'has-custom-error ';
424-
}
425419
if (!this.isMultiEntry) {
426-
css += 'slds-combobox__input-value ' + (this.hasSelection() ? 'has-custom-border' : '');
420+
css += 'slds-combobox__input-value ' + (this.hasSelection ? 'has-custom-border' : '');
427421
}
428422
return css;
429423
}
@@ -434,7 +428,7 @@ export default class Lookup extends NavigationMixin(LightningElement) {
434428
css += 'slds-input-has-icon_right';
435429
} else {
436430
css +=
437-
this.hasSelection() && this._curSelection[0].icon
431+
this.hasSelection && this._curSelection[0].icon
438432
? 'slds-input-has-icon_left-right'
439433
: 'slds-input-has-icon_right';
440434
}
@@ -444,38 +438,38 @@ export default class Lookup extends NavigationMixin(LightningElement) {
444438
get getSearchIconClass() {
445439
let css = 'slds-input__icon slds-input__icon_right ';
446440
if (!this.isMultiEntry) {
447-
css += this.hasSelection() ? 'slds-hide' : '';
441+
css += this.hasSelection ? 'slds-hide' : '';
448442
}
449443
return css;
450444
}
451445

452446
get getClearSelectionButtonClass() {
453447
return (
454448
'slds-button slds-button_icon slds-input__icon slds-input__icon_right ' +
455-
(this.hasSelection() ? '' : 'slds-hide')
449+
(this.hasSelection ? '' : 'slds-hide')
456450
);
457451
}
458452

459453
get getSelectIconName() {
460-
return this.hasSelection() ? this._curSelection[0].icon : 'standard:default';
454+
return this.hasSelection ? this._curSelection[0].icon : 'standard:default';
461455
}
462456

463457
get getSelectIconClass() {
464-
return 'slds-combobox__input-entity-icon ' + (this.hasSelection() ? '' : 'slds-hide');
458+
return 'slds-combobox__input-entity-icon ' + (this.hasSelection ? '' : 'slds-hide');
465459
}
466460

467461
get getInputValue() {
468462
if (this.isMultiEntry) {
469463
return this._searchTerm;
470464
}
471-
return this.hasSelection() ? this._curSelection[0].title : this._searchTerm;
465+
return this.hasSelection ? this._curSelection[0].title : this._searchTerm;
472466
}
473467

474468
get getInputTitle() {
475469
if (this.isMultiEntry) {
476470
return '';
477471
}
478-
return this.hasSelection() ? this._curSelection[0].title : '';
472+
return this.hasSelection ? this._curSelection[0].title : '';
479473
}
480474

481475
get getListboxClass() {
@@ -490,6 +484,6 @@ export default class Lookup extends NavigationMixin(LightningElement) {
490484
if (this.isMultiEntry) {
491485
return false;
492486
}
493-
return this.hasSelection();
487+
return this.hasSelection;
494488
}
495489
}

0 commit comments

Comments
 (0)