Skip to content

Commit a26e33e

Browse files
author
Sergio Baez
committed
chore: DPP-1231 Fix minor style issues
- Hover option background does not cover the whole line - Search icon updated with correct fill color - Fix style mixes between unique select and single select
1 parent 0d75c1e commit a26e33e

8 files changed

+60
-36
lines changed

‎dist/react-select.css

+18-9
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,13 @@
9393
background: rgba(0, 0, 0, 0.04);
9494
border: 1px solid #d5d6df;
9595
}
96+
.Select.is-unique > .Select-control .Select-placeholder,
97+
.Select.is-unique > .Select-control .Select-value {
98+
color: #000;
99+
display: inline-block;
100+
padding-top: 2px;
101+
position: relative !important;
102+
}
96103
.Select.is-unique.is-open .Select-control,
97104
.Select.is-unique.is-focused .Select-control,
98105
.Select.is-unique.is-pseudo-focused .Select-control {
@@ -111,13 +118,6 @@
111118
.Select.is-unique.is-pseudo-focused .Select-control .Select-value .Select-value-label {
112119
color: #FFF;
113120
}
114-
.Select.is-unique .Select-placeholder,
115-
.Select .Select-value {
116-
color: #000;
117-
display: inline-block;
118-
padding-top: 2px;
119-
position: relative !important;
120-
}
121121
.Select.is-unique .Select-input {
122122
display: inline-block;
123123
height: 0px;
@@ -161,6 +161,12 @@
161161
.Select.is-unique > .unique-outer-menu .Select-value {
162162
max-width: 208px;
163163
}
164+
.Select.is-unique > .unique-outer-menu .Select-value .Select-value {
165+
color: #000;
166+
display: inline-block;
167+
padding-top: 2px;
168+
position: relative !important;
169+
}
164170
.Select.is-unique > .unique-outer-menu .Select-unique-value {
165171
min-height: 21px;
166172
}
@@ -178,6 +184,9 @@
178184
.Select.is-unique > .unique-outer-menu .Select-unique-row-option.is-selected {
179185
background-color: rgba(0, 0, 0, 0.04);
180186
}
187+
.Select.is-unique > .unique-outer-menu .Select-unique-row-option:hover {
188+
background-color: rgba(0, 0, 0, 0.04);
189+
}
181190
.Select.is-unique > .unique-outer-menu .Select-unique-selected-icon-wrapper {
182191
align-items: center;
183192
display: flex;
@@ -191,7 +200,7 @@
191200
padding-top: 38px;
192201
}
193202
.Select.is-unique > .unique-outer-menu .Select-unique-icon {
194-
fill: #000;
203+
fill: rgba(0, 0, 0, 0.54);
195204
width: 16px;
196205
}
197206
.Select.is-unique > .unique-outer-menu .Select-unique-menu-outer-loading {
@@ -207,7 +216,7 @@
207216
background-color: initial;
208217
}
209218
.Select.is-unique > .unique-outer-menu .Select-option.is-focused {
210-
background-color: rgba(0, 0, 0, 0.04);
219+
background-color: unset;
211220
}
212221
.Select .Select-option.is-selected {
213222
display: inline-block;

‎dist/react-select.es.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1766,7 +1766,9 @@ var Select$1 = function (_React$Component) {
17661766
}, {
17671767
key: 'renderClear',
17681768
value: function renderClear() {
1769-
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled) return;
1769+
var isUnique = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
1770+
1771+
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled || !isUnique && this.props.isLoading) return;
17701772
var clear = this.props.clearRenderer();
17711773

17721774
return React.createElement(
@@ -2014,7 +2016,7 @@ var Select$1 = function (_React$Component) {
20142016
React.createElement(
20152017
'div',
20162018
{ className: 'Select-unique-value-clear' },
2017-
this.renderClear()
2019+
this.renderClear(true)
20182020
)
20192021
),
20202022
React.createElement(

‎dist/react-select.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1771,7 +1771,9 @@ var Select$1 = function (_React$Component) {
17711771
}, {
17721772
key: 'renderClear',
17731773
value: function renderClear() {
1774-
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled) return;
1774+
var isUnique = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
1775+
1776+
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled || !isUnique && this.props.isLoading) return;
17751777
var clear = this.props.clearRenderer();
17761778

17771779
return React__default.createElement(
@@ -2019,7 +2021,7 @@ var Select$1 = function (_React$Component) {
20192021
React__default.createElement(
20202022
'div',
20212023
{ className: 'Select-unique-value-clear' },
2022-
this.renderClear()
2024+
this.renderClear(true)
20232025
)
20242026
),
20252027
React__default.createElement(

‎dist/react-select.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-select.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/control.less

+18-9
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,12 @@
125125
background: rgba(0,0,0,0.04);
126126
border: 1px solid #d5d6df;
127127
}
128+
.Select-placeholder, .Select-value {
129+
color: #000;
130+
display: inline-block;
131+
padding-top: 2px;
132+
position: relative !important;
133+
}
128134
}
129135

130136
&.is-unique {
@@ -143,13 +149,6 @@
143149
}
144150
}
145151

146-
&.is-unique .Select-placeholder, .Select-value {
147-
color: #000;
148-
display: inline-block;
149-
padding-top: 2px;
150-
position: relative !important;
151-
}
152-
153152
&.is-unique .Select-input {
154153
display: inline-block;
155154
height: 0px;
@@ -197,6 +196,13 @@
197196

198197
.Select-value {
199198
max-width: 208px;
199+
200+
.Select-value {
201+
color: #000;
202+
display: inline-block;
203+
padding-top: 2px;
204+
position: relative !important;
205+
}
200206
}
201207

202208
.Select-unique-value {
@@ -218,6 +224,9 @@
218224
&.is-selected {
219225
background-color: rgba(0,0,0,0.04);
220226
}
227+
&:hover {
228+
background-color: rgba(0,0,0,0.04);
229+
}
221230
}
222231

223232
.Select-unique-selected-icon-wrapper {
@@ -235,7 +244,7 @@
235244
}
236245

237246
.Select-unique-icon {
238-
fill: #000;
247+
fill: rgba(0, 0, 0, 0.54);
239248
width: 16px;
240249
}
241250

@@ -253,7 +262,7 @@
253262
}
254263

255264
&.is-focused {
256-
background-color: rgba(0,0,0,0.04);
265+
background-color: unset;
257266
}
258267
padding: 8px 0 8px 40px;
259268
}

‎lib/Select.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1059,7 +1059,9 @@ var Select = function (_React$Component) {
10591059
}, {
10601060
key: 'renderClear',
10611061
value: function renderClear() {
1062-
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled) return;
1062+
var isUnique = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
1063+
1064+
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled || !isUnique && this.props.isLoading) return;
10631065
var clear = this.props.clearRenderer();
10641066

10651067
return _react2.default.createElement(
@@ -1307,7 +1309,7 @@ var Select = function (_React$Component) {
13071309
_react2.default.createElement(
13081310
'div',
13091311
{ className: 'Select-unique-value-clear' },
1310-
this.renderClear()
1312+
this.renderClear(true)
13111313
)
13121314
),
13131315
_react2.default.createElement(

‎src/Select.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -754,9 +754,9 @@ class Select extends React.Component {
754754
? (<div className="Select-unique-placeholder">No Item Selected</div>)
755755
: (<div className="Select-placeholder">{this.props.placeholder}</div>);
756756
if (!valueArray.length) {
757-
if (isTop) {
758-
return placeholderDiv;
759-
}
757+
if (isTop) {
758+
return placeholderDiv;
759+
}
760760
return !this.state.inputValue ? placeholderDiv : null;
761761
}
762762

@@ -881,7 +881,7 @@ class Select extends React.Component {
881881
}
882882
return (
883883
<div className={ className } key="input-wrap">
884-
<input {...inputProps} />
884+
<input {...inputProps} />
885885
</div>
886886
);
887887
}
@@ -905,8 +905,8 @@ class Select extends React.Component {
905905
);
906906
}
907907

908-
renderClear () {
909-
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled) return;
908+
renderClear (isUnique = false) {
909+
if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled || (!isUnique && this.props.isLoading)) return;
910910
const clear = this.props.clearRenderer();
911911

912912
return (
@@ -1117,7 +1117,7 @@ class Select extends React.Component {
11171117
{this.renderValue(valueArray, isOpen, true)}
11181118
</div>
11191119
<div className="Select-unique-value-clear">
1120-
{this.renderClear()}
1120+
{this.renderClear(true)}
11211121
</div>
11221122
</div>
11231123
<div className="Select-unique-input-list-wrapper">
@@ -1136,9 +1136,9 @@ class Select extends React.Component {
11361136
<g><path d="M15.5 14h-.79l-.28-.27c.98-1.14 1.57-2.62 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49-4.99-5zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z" /></g>
11371137
</svg>
11381138
</span>
1139-
<div className="Select-multi-value-wrapper" id={this._instancePrefix + '-value'}>
1140-
{this.renderInput(valueArray, focusedOptionIndex, false, true)}
1141-
</div>
1139+
<div className="Select-multi-value-wrapper" id={this._instancePrefix + '-value'}>
1140+
{this.renderInput(valueArray, focusedOptionIndex, false, true)}
1141+
</div>
11421142
</div>
11431143
{this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption, true)}
11441144
</div>

0 commit comments

Comments
 (0)