Skip to content

Commit 2dbe619

Browse files
brandonferruabrandonferrua
authored
chore(lookups): Use new combobox component (#3081)
* chore(lookups): Use new combobox component * chore(lookups): Use new combobox component * Fix id and restriction rules * Update aria-activedescendant * Update restriction rules
1 parent c55fb4c commit 2dbe619

File tree

7 files changed

+553
-440
lines changed

7 files changed

+553
-440
lines changed

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -405,10 +405,8 @@
405405
/**
406406
* @summary Container for a combobox group
407407
*
408-
* @name combobox-group
409408
* @selector .slds-combobox-group
410409
* @restrict div
411-
* @variant
412410
*/
413411
.slds-combobox-group {
414412
display: flex;
@@ -466,8 +464,7 @@
466464
/**
467465
* @summary The container of pill selections found inside of a combobox group
468466
* @selector .slds-listbox_selection-group
469-
* @restrict .slds-listbox
470-
* @modifier
467+
* @restrict .slds-combobox-group ~ div
471468
*/
472469
.slds-listbox_selection-group {
473470
padding: 0;
@@ -479,7 +476,6 @@
479476
* @summary Expanded state of a selection group
480477
* @selector .slds-is-expanded
481478
* @restrict .slds-listbox_selection-group
482-
* @modifier
483479
*/
484480
&.slds-is-expanded {
485481
height: auto;
@@ -509,9 +505,8 @@
509505

510506
/**
511507
* @summary The first combobox in the combobox group
512-
* @selector .sldss-combobox-addon_start
508+
* @selector .slds-combobox-addon_start
513509
* @restrict .slds-combobox-group div
514-
* @modifier
515510
*/
516511
.slds-combobox-addon_start .slds-combobox__input {
517512
border-top-right-radius: 0;
@@ -522,9 +517,8 @@
522517

523518
/**
524519
* @summary The last combobox in the combobox group
525-
* @selector .sldss-combobox-addon_end
520+
* @selector .slds-combobox-addon_end
526521
* @restrict .slds-combobox-group div
527-
* @modifier
528522
*/
529523
.slds-combobox-addon_end .slds-combobox__input {
530524
border-top-right-radius: 4px;

‎ui/components/lookups/_doc.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
*
3939
* @base
4040
* @name lookups
41-
* @selector .slds-combobox-lookup
41+
* @selector .slds-combobox, .slds-combobox-group
4242
* @support dev-ready
4343
* @category experience
4444
* @type user-input

‎ui/components/lookups/base/_deprecate.scss

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
2+
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
3+
4+
@include deprecate('4.0.0', '.slds-lookup has been replaced with .slds-combobox and .slds-combobox-group') {
5+
6+
.slds-lookup {
7+
position: relative;
8+
width: 100%; // Fill up parent container
9+
10+
/**
11+
* Initializes lookup results list
12+
*
13+
* @selector .slds-lookup__list
14+
* @restrict .slds-lookup ul
15+
*/
16+
&__list {
17+
// crazy calc - line height of primary text + line height of meta text - the offset to bring the meta up a bit + the top/bottom padding multipied by how many items I want to show
18+
max-height: calc((((#{$line-height-text} * #{$font-size-medium}) + (#{$line-height-text} * #{$font-size-small}) - #{$spacing-xx-small}) + (#{$spacing-xx-small} * 2)) * 8);
19+
overflow-y: auto;
20+
}
21+
22+
/**
23+
* Initializes lookup results list container
24+
*
25+
* @selector .slds-lookup__menu
26+
* @restrict .slds-lookup div
27+
* @notes Applies positioning and container styles
28+
* @required
29+
*/
30+
&__menu {
31+
background: $color-background-alt;
32+
border: $border-width-thin solid $color-border;
33+
border-radius: $border-radius-medium;
34+
z-index: $z-index-dropdown;
35+
position: absolute;
36+
width: 100%;
37+
padding: $spacing-x-small 0;
38+
display: none;
39+
}
40+
41+
&__item {
42+
43+
> a,
44+
> span,
45+
> button {
46+
display: block;
47+
padding: $spacing-x-small;
48+
color: $color-text-default;
49+
text-align: left;
50+
width: 100%;
51+
line-height: $line-height-text;
52+
border-radius: 0;
53+
54+
&:hover,
55+
&:focus {
56+
outline: 0;
57+
background-color: $color-background-row-hover;
58+
color: $color-text-default;
59+
text-decoration: none;
60+
}
61+
62+
.slds-icon {
63+
margin-right: $spacing-x-small;
64+
}
65+
}
66+
}
67+
68+
/**
69+
* Non-actionable label inside of a lookup item
70+
*
71+
* @selector .slds-lookup__item_label
72+
* @restrict .slds-lookup h3
73+
*/
74+
&__item_label,
75+
&__item--label {
76+
display: flex;
77+
align-items: center;
78+
padding: $spacing-x-small $spacing-medium;
79+
}
80+
81+
/**
82+
* Actionable element inside of a lookup item
83+
*
84+
* @selector .slds-lookup__item-action
85+
* @restrict .slds-lookup a, .slds-lookup button, .slds-lookup span
86+
*/
87+
&__item-action {
88+
font-size: $font-size-medium;
89+
display: flex;
90+
align-items: center;
91+
padding: $spacing-xx-small $spacing-medium;
92+
color: $color-text-default;
93+
text-align: left;
94+
width: 100%;
95+
line-height: $line-height-text;
96+
border-radius: 0;
97+
98+
/**
99+
* Hover/focus state for actionable lookup item
100+
*
101+
* @selector .slds-has-focus
102+
* @restrict .slds-lookup__item-action
103+
* @modifier
104+
*/
105+
&:hover,
106+
&:focus,
107+
&.slds-has-focus {
108+
outline: 0;
109+
cursor: pointer;
110+
background-color: $color-background-row-hover;
111+
color: $color-text-default;
112+
text-decoration: none;
113+
}
114+
115+
// Icon in results, here so it doesn't need to be repeated in DOM
116+
.slds-media__figure {
117+
margin-right: $spacing-x-small;
118+
margin-top: $spacing-xx-small;
119+
}
120+
}
121+
122+
/**
123+
* Actionable element inside of a lookup item that's output is single line text
124+
*
125+
* @selector .slds-lookup__item-action_label
126+
* @restrict .slds-lookup__item-action
127+
*/
128+
&__item-action_label,
129+
&__item-action--label {
130+
padding: $spacing-x-small $spacing-medium;
131+
132+
> .slds-icon {
133+
margin-left: $spacing-xx-small;
134+
margin-right: $spacing-small;
135+
}
136+
}
137+
138+
/**
139+
* Search input inside of lookup
140+
*
141+
* @selector .slds-lookup__search-input
142+
* @restrict .slds-lookup input
143+
*/
144+
&__search-input {
145+
width: 100%;
146+
}
147+
148+
/**
149+
* Primary entity name within lookup item
150+
*
151+
* @selector .slds-lookup__result-text
152+
* @restrict .slds-lookup__item-action span
153+
*/
154+
&__result-text {
155+
@include truncate; // truncate mixin used so class wouldn't need to be repeated in DOM
156+
display: block;
157+
margin-bottom: $spacing-xxx-small;
158+
}
159+
160+
/**
161+
* Secondary info of primary entity name within lookup item
162+
*
163+
* @selector .slds-lookup__result-meta
164+
* @restrict .slds-lookup__item-action span
165+
*/
166+
&__result-meta {
167+
display: block;
168+
margin-top: ($spacing-xx-small * -1); // Offset $line-height-text from result-text
169+
color: $color-text-label;
170+
}
171+
172+
&__pill-container {
173+
padding: 0 $spacing-x-small $spacing-xx-small; // center aligns pills within selection area due to top padding on menu
174+
}
175+
176+
// Typeahead bizness
177+
mark {
178+
font-weight: $font-weight-bold;
179+
background-color: transparent;
180+
color: inherit;
181+
}
182+
183+
/**
184+
* Deal with Lookup when user activates the lookup
185+
*
186+
* @selector .slds-is-open
187+
* @restrict .slds-lookup
188+
* @modifier
189+
*/
190+
&.slds-is-open {
191+
192+
// Show and remove border and border radius
193+
.slds-lookup__menu {
194+
display: block;
195+
}
196+
}
197+
198+
/**
199+
* Deal with lookup if selection has been made
200+
*
201+
* @selector .slds-has-selection
202+
* @restrict .slds-lookup
203+
*/
204+
&.slds-has-selection {
205+
206+
// If developer needs to keep the input in the DOM and not able to remove it
207+
.slds-input,
208+
.slds-input__icon,
209+
.slds-lookup__search-input {
210+
display: none;
211+
}
212+
213+
// Stretch pill 100% of container
214+
.slds-pill {
215+
display: flex;
216+
}
217+
218+
// Send close button to the end of the pill
219+
.slds-pill__remove {
220+
margin-left: auto;
221+
}
222+
}
223+
}
224+
}

0 commit comments

Comments
 (0)