Skip to content

Commit

Permalink
Merge pull request #390 from wpmudev/SUI-62
Browse files Browse the repository at this point in the history
fix(select2): "Smart Search" needs focus state.
  • Loading branch information
iamleigh authored Dec 15, 2021
2 parents 22b77a2 + ed225cd commit 615da82
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 39 deletions.
15 changes: 8 additions & 7 deletions assets/js/shared-ui/select2.full.js
Original file line number Diff line number Diff line change
Expand Up @@ -1759,7 +1759,7 @@

this.$selection.on(
'click',
'.select2-selection__choice__remove',
'.sui-button-icon',
function (evt) {
// Ignore the event if it is disabled
if (self.isDisabled()) {
Expand All @@ -1780,7 +1780,7 @@

this.$selection.on(
'keydown',
'.select2-selection__choice__remove',
'.sui-button-icon',
function (evt) {
// Ignore the event if it is disabled
if (self.isDisabled()) {
Expand All @@ -1796,6 +1796,7 @@
var $rendered = this.$selection.find('.select2-selection__rendered');
$rendered.empty();
$rendered.removeAttr('title');
$rendered.removeClass('has-option-selected');
};

MultipleSelection.prototype.display = function (data, container) {
Expand All @@ -1808,11 +1809,11 @@
MultipleSelection.prototype.selectionContainer = function () {
var $container = $(
'<li class="select2-selection__choice">' +
'<button type="button" class="select2-selection__choice__remove" ' +
'<span class="select2-selection__choice__display"></span>' +
'<button type="button" class="sui-button-icon" ' +
'tabindex="-1">' +
'<span aria-hidden="true">&times;</span>' +
'<span class="sui-icon-close sui-sm" aria-hidden="true"></span>' +
'</button>' +
'<span class="select2-selection__choice__display"></span>' +
'</li>'
);

Expand Down Expand Up @@ -1857,7 +1858,7 @@

var removeItem = this.options.get('translations').get('removeItem');

var $remove = $selection.find('.select2-selection__choice__remove');
var $remove = $selection.find('.sui-button-icon');

$remove.attr('title', removeItem());
$remove.attr('aria-label', removeItem());
Expand All @@ -1870,7 +1871,7 @@

var $rendered = this.$selection.find('.select2-selection__rendered');

$rendered.append($selections);
$rendered.append($selections).addClass('has-option-selected');
};

return MultipleSelection;
Expand Down
165 changes: 133 additions & 32 deletions assets/scss/shared-ui/_select2.scss
Original file line number Diff line number Diff line change
Expand Up @@ -125,28 +125,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}

.select2-selection__choice__remove {
width: 26px;
height: 26px;
cursor: pointer;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 0;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
background-color: #5E5E5E;
color: $overcast;
text-align: center;

span {
display: block;
}
}
}
}

Expand Down Expand Up @@ -212,6 +190,45 @@
}
}

&:not(.sui-select-theme--search) .selection {

span[role="combobox"] {

// TYPE: Multi Select.
&.select2-selection--multiple {

// Options.
.select2-selection__rendered {

.select2-selection__choice {

.sui-button-icon {
width: 26px;
height: 26px;
cursor: pointer;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background-color: #5E5E5E;
color: $overcast;
text-align: center;

&:focus {
box-shadow: none;
}
}
}
}
}
}
}

// DESIGN: Icon.
&.sui-select-theme--icon {

Expand Down Expand Up @@ -315,21 +332,22 @@
padding-left: 40px;

.select2-selection__choice {
min-width: 1px;
max-width: none;
display: flex;
flex-flow: row nowrap;
flex: 1;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0;
margin: 0;
padding: 0;
background-color: transparent;
border-radius: 0;
color: $nightrider;
font: 500 15px/22px $font;
letter-spacing: -0.2px;
letter-spacing: $font--letter-spacing;
}

.select2-selection__choice__remove {
background-color: transparent;
color: $nightrider;
}
&.has-option-selected {
width: 100%;

+ .select2-search {
display: none;
Expand All @@ -339,6 +357,67 @@
}
}
}

// STATE: Hover
&:hover {

.selection {

span[role="combobox"] {
background: $white;
}
}
}

// STATE: Focus
&.select2-container--focus {

.selection {

span[role="combobox"] {
border-color: $blue;
background: $white;
box-shadow: 0 0 0 2px $blue-ghost;

.select2-search {

textarea {

&:focus {
outline: none;
}
}
}
}
}

&.select2-container--open {

&.sui-select-dropdown-container--above {

.selection {

span[role="combobox"] {
border-top-color: $overcast;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}

&.sui-select-dropdown-container--below {

.selection {

span[role="combobox"] {
border-bottom-color: $overcast;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
}
}
}

// STATE: Focus.
Expand Down Expand Up @@ -692,7 +771,7 @@
.select2-selection__choice {
background-color: $black;

.select2-selection__choice__remove {
.sui-button-icon {
background-color: $black;
color: $white;
}
Expand All @@ -717,7 +796,7 @@
.select2-selection__choice {
color: $black;

.select2-selection__choice__remove {
.sui-button-icon {
color: $black;
}
}
Expand Down Expand Up @@ -1125,6 +1204,28 @@
}
}
}

// DESIGN: Smart Search.
&.sui-select-theme--search {

.sui-select-dropdown {
border-color: $blue;

&.sui-select-dropdown--above {
border-bottom-style: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 0 -2px 0 2px $blue-ghost;
}

&.sui-select-dropdown--below {
border-top-style: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 2px 0 2px $blue-ghost;
}
}
}
}
}
}
Expand Down

0 comments on commit 615da82

Please sign in to comment.