Skip to content

Commit 49a2359

Browse files
committed
fix(select): add icon support to select
1 parent 44f2ff3 commit 49a2359

File tree

2 files changed

+122
-0
lines changed

2 files changed

+122
-0
lines changed

packages/core/lib/components/select/_select.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
@import '../../global/mixins/form-items';
22

3+
$ray-icon-width: 1rem;
4+
35
.#{$ray-class-prefix}select {
46
border: $ray-border-width solid $ray-color-gray-60;
57
background-color: $ray-color-white;
68
border-radius: $ray-border-radius;
79
position: relative;
810
height: $ray-field-height;
11+
display: flex;
912

1013
&::after {
1114
content: '';
@@ -50,6 +53,40 @@
5053
}
5154
}
5255

56+
@mixin icon {
57+
width: 1rem;
58+
height: 1rem;
59+
position: absolute;
60+
line-height: 1;
61+
top: 20px;
62+
border-radius: 2px;
63+
}
64+
65+
&__icon--left {
66+
@include icon;
67+
left: $ray-field-h-spacing;
68+
}
69+
70+
&__icon--right {
71+
@include icon;
72+
// add spacing to compensate for the
73+
right: calc(#{$ray-field-h-spacing} * 2 + 12px);
74+
}
75+
76+
&--with-icon-left {
77+
.#{$ray-class-prefix}select__input,
78+
.#{$ray-class-prefix}select__label {
79+
padding-left: calc(#{$ray-field-h-spacing} * 2 + #{$ray-icon-width});
80+
}
81+
}
82+
83+
&--with-icon-right {
84+
.#{$ray-class-prefix}select__input,
85+
.#{$ray-class-prefix}select__label {
86+
padding-right: calc(#{$ray-field-h-spacing} * 2 + #{$ray-icon-width});
87+
}
88+
}
89+
5390
&--has-value {
5491
.#{$ray-class-prefix}select__label {
5592
@include label--active;
@@ -107,6 +144,11 @@
107144
padding-top: 0;
108145
padding-bottom: 0;
109146
}
147+
148+
.#{$ray-class-prefix}select__icon--left,
149+
.#{$ray-class-prefix}select__icon--right {
150+
top: $ray-field-v-spacing-compact;
151+
}
110152
}
111153

112154
&--disabled {

packages/core/stories/select.stories.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,4 +183,84 @@ storiesOf('Select', module)
183183
</div>
184184
</>
185185
);
186+
})
187+
.addWithJSX('select, with icon', () => {
188+
setTimeout(init);
189+
190+
return withPadding(
191+
<>
192+
<div className="ray-form-item">
193+
<div className="ray-select ray-select--with-icon-left">
194+
<div className="ray-select__icon--left">😜</div>
195+
196+
<select className="ray-select__input">
197+
<option value="" disabled selected data-ray-placeholder />
198+
<option value="Pikachu">Pikachu</option>
199+
<option value="Squirtle">Squirtle</option>
200+
<option value="Bulbasaur">Bulbasaur</option>
201+
<option value="Charmander">Charmander</option>
202+
</select>
203+
204+
<label className="ray-select__label">
205+
{"What's your starter Pokémon?"}
206+
</label>
207+
</div>
208+
</div>
209+
210+
<div className="ray-form-item">
211+
<div className="ray-select ray-select--with-icon-left ray-select--with-icon-right">
212+
<div className="ray-select__icon--left">🤖</div>
213+
<div className="ray-select__icon--right">👽</div>
214+
215+
<select className="ray-select__input">
216+
<option value="" disabled selected data-ray-placeholder />
217+
<option value="Pikachu">Pikachu</option>
218+
<option value="Squirtle">Squirtle</option>
219+
<option value="Bulbasaur">Bulbasaur</option>
220+
<option value="Charmander">Charmander</option>
221+
</select>
222+
223+
<label className="ray-select__label">
224+
{"What's your starter Pokémon?"}
225+
</label>
226+
</div>
227+
</div>
228+
229+
<div className="ray-form-item">
230+
<div className="ray-select ray-select--with-icon-right">
231+
<div className="ray-select__icon--right">🙏</div>
232+
233+
<select className="ray-select__input">
234+
<option value="" disabled selected data-ray-placeholder />
235+
<option value="Pikachu">Pikachu</option>
236+
<option value="Squirtle">Squirtle</option>
237+
<option value="Bulbasaur">Bulbasaur</option>
238+
<option value="Charmander">Charmander</option>
239+
</select>
240+
241+
<label className="ray-select__label">
242+
{"What's your starter Pokémon?"}
243+
</label>
244+
</div>
245+
</div>
246+
247+
<div className="ray-form-item">
248+
<div className="ray-select ray-select--compact ray-select--with-icon-left">
249+
<div className="ray-select__icon--left">🏂</div>
250+
251+
<select className="ray-select__input">
252+
<option value="" disabled selected data-ray-placeholder />
253+
<option value="Pikachu">Pikachu</option>
254+
<option value="Squirtle">Squirtle</option>
255+
<option value="Bulbasaur">Bulbasaur</option>
256+
<option value="Charmander">Charmander</option>
257+
</select>
258+
259+
<label className="ray-select__label">
260+
{"What's your starter Pokémon?"}
261+
</label>
262+
</div>
263+
</div>
264+
</>
265+
);
186266
});

0 commit comments

Comments
 (0)