Skip to content

Commit 7fecd32

Browse files
mrholekmrholek
committed
refactor(MultiSelect): update CSS classes and variables
1 parent 8d55daf commit 7fecd32

File tree

4 files changed

+102
-87
lines changed

4 files changed

+102
-87
lines changed

‎js/src/multi-select.js

Lines changed: 45 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
5151

5252
const CLASS_NAME_CLEANER = 'form-multi-select-cleaner'
5353
const CLASS_NAME_DISABLED = 'disabled'
54+
const CLASS_NAME_INPUT_GROUP = 'form-multi-select-input-group'
5455
const CLASS_NAME_LABEL = 'label'
5556
const CLASS_NAME_SELECT = 'form-multi-select'
5657
const CLASS_NAME_SELECT_DROPDOWN = 'form-multi-select-dropdown'
@@ -68,7 +69,6 @@ const CLASS_NAME_SELECTION_TAGS = 'form-multi-select-selection-tags'
6869
const CLASS_NAME_SHOW = 'show'
6970
const CLASS_NAME_TAG = 'form-multi-select-tag'
7071
const CLASS_NAME_TAG_DELETE = 'form-multi-select-tag-delete'
71-
const CLASS_NAME_TOGGLER = 'form-multi-select-toggler'
7272

7373
const Default = {
7474
cleaner: true,
@@ -131,7 +131,7 @@ class MultiSelect extends BaseComponent {
131131
this._options = this._getOptions()
132132
this._popper = null
133133
this._search = ''
134-
this._selection = this._getSelectedOptions(this._options)
134+
this._selected = this._getSelectedOptions(this._options) // TODO : change to this._selected
135135

136136
if (this._config.options.length > 0) {
137137
this._createNativeSelect(this._config.options)
@@ -207,7 +207,7 @@ class MultiSelect extends BaseComponent {
207207
update(config) {
208208
this._config = this._getConfig(config)
209209
this._options = this._getOptions()
210-
this._selection = this._getSelectedOptions(this._options)
210+
this._selected = this._getSelectedOptions(this._options)
211211
this._clone.remove()
212212
this._element.innerHTML = ''
213213
this._createNativeOptions(this._element, this._options)
@@ -246,7 +246,7 @@ class MultiSelect extends BaseComponent {
246246
}
247247

248248
getValue() {
249-
return this._selection
249+
return this._selected
250250
}
251251

252252
// Private
@@ -424,26 +424,22 @@ class MultiSelect extends BaseComponent {
424424
}
425425

426426
_createSelect() {
427-
const div = document.createElement('div')
428-
div.classList.add(CLASS_NAME_SELECT)
429-
div.classList.toggle('is-invalid', this._config.invalid)
430-
div.classList.toggle('is-valid', this._config.valid)
431-
div.setAttribute('aria-expanded', 'false')
427+
const multiSelectEl = document.createElement('div')
428+
multiSelectEl.classList.add(CLASS_NAME_SELECT)
429+
multiSelectEl.classList.toggle('is-invalid', this._config.invalid)
430+
multiSelectEl.classList.toggle('is-valid', this._config.valid)
431+
multiSelectEl.setAttribute('aria-expanded', 'false')
432432

433433
if (this._config.disabled) {
434434
this._element.classList.add(CLASS_NAME_DISABLED)
435435
}
436436

437437
for (const className of this._getClassNames()) {
438-
div.classList.add(className)
438+
multiSelectEl.classList.add(className)
439439
}
440440

441-
if (this._config.multiple && this._config.selectionType === 'tags') {
442-
div.classList.add(CLASS_NAME_SELECTION_TAGS)
443-
}
444-
445-
this._clone = div
446-
this._element.parentNode.insertBefore(div, this._element.nextSibling)
441+
this._clone = multiSelectEl
442+
this._element.parentNode.insertBefore(multiSelectEl, this._element.nextSibling)
447443
this._createSelection()
448444
this._createButtons()
449445

@@ -463,12 +459,16 @@ class MultiSelect extends BaseComponent {
463459

464460
_createSelection() {
465461
const togglerEl = document.createElement('div')
466-
togglerEl.classList.add(CLASS_NAME_TOGGLER)
462+
togglerEl.classList.add(CLASS_NAME_INPUT_GROUP)
467463
this._togglerElement = togglerEl
468464

469465
const selectionEl = document.createElement('div')
470466
selectionEl.classList.add(CLASS_NAME_SELECTION)
471467

468+
if (this._config.multiple && this._config.selectionType === 'tags') {
469+
selectionEl.classList.add(CLASS_NAME_SELECTION_TAGS)
470+
}
471+
472472
togglerEl.append(selectionEl)
473473
this._clone.append(togglerEl)
474474

@@ -658,8 +658,8 @@ class MultiSelect extends BaseComponent {
658658
this.deselectAll()
659659
}
660660

661-
if (this._selection.filter(e => e.value === value).length === 0) {
662-
this._selection.push({
661+
if (this._selected.filter(e => e.value === value).length === 0) {
662+
this._selected.push({
663663
value,
664664
text
665665
})
@@ -677,7 +677,7 @@ class MultiSelect extends BaseComponent {
677677
}
678678

679679
EventHandler.trigger(this._element, EVENT_CHANGED, {
680-
value: this._selection
680+
value: this._selected
681681
})
682682

683683
this._updateSelection()
@@ -687,8 +687,8 @@ class MultiSelect extends BaseComponent {
687687
}
688688

689689
_deselectOption(value) {
690-
const selected = this._selection.filter(e => e.value !== value)
691-
this._selection = selected
690+
const selected = this._selected.filter(e => e.value !== value)
691+
this._selected = selected
692692

693693
SelectorEngine.findOne(`option[value="${value}"]`, this._element).selected = false
694694

@@ -698,7 +698,7 @@ class MultiSelect extends BaseComponent {
698698
}
699699

700700
EventHandler.trigger(this._element, EVENT_CHANGED, {
701-
value: this._selection
701+
value: this._selected
702702
})
703703

704704
this._updateSelection()
@@ -708,8 +708,8 @@ class MultiSelect extends BaseComponent {
708708
}
709709

710710
_deselectLastOption() {
711-
if (this._selection.length > 0) {
712-
const last = this._selection.pop()
711+
if (this._selected.length > 0) {
712+
const last = this._selected.pop()
713713
this._deselectOption(last.value)
714714
}
715715
}
@@ -718,29 +718,29 @@ class MultiSelect extends BaseComponent {
718718
const selection = SelectorEngine.findOne(SELECTOR_SELECTION, this._clone)
719719
const search = SelectorEngine.findOne(SELECTOR_SEARCH, this._clone)
720720

721-
if (this._selection.length === 0 && !this._config.search) {
722-
selection.innerHTML = `<span class="form-multi-select-text">${this._config.placeholder}</span>`
721+
if (this._selected.length === 0 && !this._config.search) {
722+
selection.innerHTML = `<span class="form-multi-select-placeholder">${this._config.placeholder}</span>`
723723
return
724724
}
725725

726726
if (this._config.multiple && this._config.selectionType === 'counter' && !this._config.search) {
727-
selection.innerHTML = `<span class="form-multi-select-text">${this._selection.length} ${this._config.selectionTypeCounterText}</span>`
727+
selection.innerHTML = `${this._selected.length} ${this._config.selectionTypeCounterText}`
728728
}
729729

730730
if (this._config.multiple && this._config.selectionType === 'tags') {
731731
selection.innerHTML = ''
732732

733-
for (const e of this._selection) {
734-
selection.append(this._createTag(e.value, e.text))
733+
for (const option of this._selected) {
734+
selection.append(this._createTag(option.value, option.text))
735735
}
736736
}
737737

738738
if (this._config.multiple && this._config.selectionType === 'text') {
739-
selection.innerHTML = this._selection.map((option, index) => `<span>${option.text}${index === this._selection.length - 1 ? '' : ','}&nbsp;</span>`).join('')
739+
selection.innerHTML = this._selected.map((option, index) => `<span>${option.text}${index === this._selected.length - 1 ? '' : ','}&nbsp;</span>`).join('')
740740
}
741741

742-
if (!this._config.multiple && this._selection.length > 0 && !this._config.search) {
743-
selection.innerHTML = `<span class="form-multi-select-text">${this._selection[0].text}</span>`
742+
if (!this._config.multiple && this._selected.length > 0 && !this._config.search) {
743+
selection.innerHTML = this._selected[0].text
744744
}
745745

746746
if (search) {
@@ -759,7 +759,7 @@ class MultiSelect extends BaseComponent {
759759

760760
const selectionCleaner = SelectorEngine.findOne(SELECTOR_CLEANER, this._clone)
761761

762-
if (this._selection.length > 0) {
762+
if (this._selected.length > 0) {
763763
selectionCleaner.style.removeProperty('display')
764764
return
765765
}
@@ -774,30 +774,30 @@ class MultiSelect extends BaseComponent {
774774

775775
// Select single
776776

777-
if (!this._config.multiple && this._selection.length > 0) {
778-
this._searchElement.placeholder = this._selection[0].text
777+
if (!this._config.multiple && this._selected.length > 0) {
778+
this._searchElement.placeholder = this._selected[0].text
779779
return
780780
}
781781

782-
if (!this._config.multiple && this._selection.length === 0) {
782+
if (!this._config.multiple && this._selected.length === 0) {
783783
this._searchElement.placeholder = this._config.placeholder
784784
return
785785
}
786786

787787
// Select multiple
788788

789-
if (this._config.multiple && this._selection.length > 0 && this._config.selectionType !== 'counter') {
789+
if (this._config.multiple && this._selected.length > 0 && this._config.selectionType !== 'counter') {
790790
this._searchElement.removeAttribute('placeholder')
791791
return
792792
}
793793

794-
if (this._config.multiple && this._selection.length === 0) {
794+
if (this._config.multiple && this._selected.length === 0) {
795795
this._searchElement.placeholder = this._config.placeholder
796796
return
797797
}
798798

799799
if (this._config.multiple && this._config.selectionType === 'counter') {
800-
this._searchElement.placeholder = `${this._selection.length} item(s) selected`
800+
this._searchElement.placeholder = `${this._selected.length} item(s) selected`
801801
}
802802
}
803803

@@ -806,12 +806,12 @@ class MultiSelect extends BaseComponent {
806806
return
807807
}
808808

809-
if (this._selection.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
809+
if (this._selected.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
810810
this._searchElement.size = size
811811
return
812812
}
813813

814-
if (this._selection.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
814+
if (this._selected.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
815815
this._searchElement.removeAttribute('size')
816816
}
817817
}
@@ -939,18 +939,17 @@ class MultiSelect extends BaseComponent {
939939
continue
940940
}
941941

942-
context._clone.classList.remove(CLASS_NAME_SHOW)
942+
context.hide()
943943

944944
EventHandler.trigger(context._element, EVENT_HIDDEN)
945945
}
946946
}
947947
}
948948

949949
/**
950-
* ------------------------------------------------------------------------
951-
* Data Api implementation
952-
* ------------------------------------------------------------------------
950+
* Data API implementation
953951
*/
952+
954953
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
955954
for (const ms of SelectorEngine.find(SELECTOR_SELECT)) {
956955
if (ms.tabIndex !== -1) {
@@ -963,10 +962,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, MultiSelect.clearMenus)
963962
EventHandler.on(document, EVENT_KEYUP_DATA_API, MultiSelect.clearMenus)
964963

965964
/**
966-
* ------------------------------------------------------------------------
967965
* jQuery
968-
* ------------------------------------------------------------------------
969-
* add .MultiSelect to jQuery only if jQuery is present
970966
*/
971967

972968
defineJQueryPlugin(MultiSelect)

‎scss/_variables.scss

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1178,8 +1178,6 @@ $form-select-transition: $input-transition !default;
11781178
// scss-docs-end form-select-variables
11791179

11801180
// scss-docs-start form-multi-select-variables
1181-
$form-multi-select-padding-y: $input-padding-y !default;
1182-
$form-multi-select-padding-x: $input-padding-x !default;
11831181
$form-multi-select-font-family: $input-font-family !default;
11841182
$form-multi-select-font-size: $input-font-size !default;
11851183
$form-multi-select-font-weight: $input-font-weight !default;
@@ -1203,6 +1201,10 @@ $form-multi-select-focus-bg: $input-bg !default;
12031201
$form-multi-select-focus-border-color: shift-color($component-active-bg, -25%) !default;
12041202
$form-multi-select-focus-box-shadow: $input-btn-focus-box-shadow !default;
12051203

1204+
$form-multi-select-placeholder-color: $gray-600 !default;
1205+
1206+
$form-multi-select-selection-padding-y: $input-padding-y !default;
1207+
$form-multi-select-selection-padding-x: $input-padding-x !default;
12061208
$form-multi-select-selection-tags-gap: .25rem !default;
12071209
$form-multi-select-selection-tags-padding-y: .25rem !default;
12081210
$form-multi-select-selection-tags-padding-x: .25rem !default;
@@ -1226,7 +1228,6 @@ $form-multi-select-cleaner-hover-color: $high-emphasis !default;
12261228
$form-multi-select-cleaner-hover-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-hover-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
12271229
$form-multi-select-cleaner-focus-color: $high-emphasis !default;
12281230
$form-multi-select-cleaner-focus-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-focus-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
1229-
// $form-multi-select-cleaner-border-color: $input-border-color !default;
12301231

12311232
$form-multi-select-indicator-width: .75rem !default;
12321233
$form-multi-select-indicator-height: .75rem !default;
@@ -1293,18 +1294,18 @@ $form-multi-select-option-selected-indicator-border-color: $form-multi-select-o
12931294

12941295
$form-multi-select-option-disabled-color: $gray-600 !default;
12951296

1296-
$form-multi-select-padding-y-lg: $input-padding-y-lg !default;
1297-
$form-multi-select-padding-x-lg: $input-padding-x-lg !default;
1298-
$form-multi-select-font-size-lg: $input-font-size-lg !default;
1297+
$form-multi-select-font-size-lg: $input-font-size-lg !default;
1298+
$form-multi-select-selection-padding-y-lg: $input-padding-y-lg !default;
1299+
$form-multi-select-selection-padding-x-lg: $input-padding-x-lg !default;
12991300
$form-multi-select-selection-tags-gap-lg: .25rem !default;
13001301
$form-multi-select-selection-tags-padding-y-lg: .25rem !default;
13011302
$form-multi-select-selection-tags-padding-x-lg: .25rem !default;
13021303
$form-multi-select-tag-padding-y-lg: .175rem !default;
13031304
$form-multi-select-tag-padding-x-lg: .5rem !default;
13041305

1305-
$form-multi-select-padding-y-sm: $input-padding-y-sm !default;
1306-
$form-multi-select-padding-x-sm: $input-padding-x-sm !default;
1307-
$form-multi-select-font-size-sm: $input-font-size-sm !default;
1306+
$form-multi-select-font-size-sm: $input-font-size-sm !default;
1307+
$form-multi-select-selection-padding-y-sm: $input-padding-y-sm !default;
1308+
$form-multi-select-selection-padding-x-sm: $input-padding-x-sm !default;
13081309
$form-multi-select-selection-tags-gap-sm: .125rem !default;
13091310
$form-multi-select-selection-tags-padding-y-sm: .0625rem !default;
13101311
$form-multi-select-selection-tags-padding-x-sm: .125rem !default;

0 commit comments

Comments
 (0)