Skip to content

Commit e9ef9d6

Browse files
author
Ramin B
committed
feat(component): prepend support on textfield & select
BREAKING CHANGE: textfields and selects that have icons (and not prepends) need to be wrapped in an extra div with a class name of "#{$ray-class-prefix}#{$class}__wrapper" re #81
1 parent 3d0e76e commit e9ef9d6

File tree

11 files changed

+399
-170
lines changed

11 files changed

+399
-170
lines changed

‎docs/components/select.md

+15-8
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,38 @@ title: Select
55

66
<page-intro>Text fields within the system have a standard Size and a compact Size. Our fields are outlined and become activated with our primary color using the rules we set up in our affordances. These components have several elements, not all of which are required.</page-intro>
77

8-
<component
8+
<component
99
name="With placeholder"
1010
component="select"
11-
variation="select--with-placeholder"
11+
variation="select--with-placeholder"
1212
>
1313
</component>
1414

15-
<component
15+
<component
1616
name="Compact"
1717
component="select"
18-
variation="select--compact"
18+
variation="select--compact"
1919
>
2020
</component>
2121

22-
<component
22+
<component
2323
name="Error"
2424
component="select"
25-
variation="select--error"
25+
variation="select--error"
2626
>
2727
</component>
2828

29-
<component
29+
<component
3030
name="With icon"
3131
component="select"
32-
variation="select-with-icon"
32+
variation="select-with-icon"
33+
>
34+
</component>
35+
36+
<component
37+
name="With prepend"
38+
component="select"
39+
variation="select-with-prepend"
3340
>
3441
</component>
3542

‎docs/components/text-field.md

+7
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ title: Text Field
4040
>
4141
</component>
4242

43+
<component
44+
name="Text field with prepend"
45+
component="text-field"
46+
variation="text-field-with-prepend"
47+
>
48+
</component>
49+
4350
## Adding hints
4451

4552
Use these modifiers with `.ray-form-item__hint` class.

‎docs/html/select/select-with-icon.html

+21-18
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
<div class="ray-form-item">
22
<div class="ray-select ray-select--with-icon-left">
3-
<svg class="ray-select__icon--left" viewBox="0 0 25 25">
4-
<g id="budicon-profile-picture">
5-
<path
6-
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
7-
/>
8-
</g>
9-
</svg>
10-
<select class="ray-select__input">
11-
<option value="" disabled selected data-ray-placeholder></option>
12-
<option value="Pikachu">WeWork</option>
13-
<option value="Squirtle">WeLive</option>
14-
<option value="Bulbasaur">WeGrow</option>
15-
<option value="Charmander">WeTech</option>
16-
</select>
17-
18-
<label class="ray-select__label">
19-
Better Together
20-
</label>
3+
<div class="ray-select__icon--left">
4+
<svg viewBox="0 0 25 25" style="height: 1rem;">
5+
<g id="budicon-profile-picture">
6+
<path
7+
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
8+
/>
9+
</g>
10+
</svg>
11+
</div>
12+
<div class="ray-select__wrapper">
13+
<select class="ray-select__input">
14+
<option value="" disabled selected data-ray-placeholder></option>
15+
<option value="Pikachu">WeWork</option>
16+
<option value="Squirtle">WeLive</option>
17+
<option value="Bulbasaur">WeGrow</option>
18+
<option value="Charmander">WeTech</option>
19+
</select>
20+
<label class="ray-select__label">
21+
Better Together
22+
</label>
23+
</div>
2124
</div>
2225
</div>

‎docs/html/select/select-with-prepend.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="ray-form-item">
2+
<div class="ray-select ray-select--with-prepend">
3+
<div class="ray-select__prepend">
4+
<svg viewBox="0 0 25 25" style="height: 1rem;">
5+
<g id="budicon-profile-picture">
6+
<path
7+
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
8+
/>
9+
</g>
10+
</svg>
11+
</div>
12+
<div class="ray-select__wrapper">
13+
<select class="ray-select__input">
14+
<option value="" disabled selected data-ray-placeholder></option>
15+
<option value="Pikachu">WeWork</option>
16+
<option value="Squirtle">WeLive</option>
17+
<option value="Bulbasaur">WeGrow</option>
18+
<option value="Charmander">WeTech</option>
19+
</select>
20+
21+
<label class="ray-select__label">
22+
Better Together
23+
</label>
24+
</div>
25+
</div>
26+
</div>

‎docs/html/text-field/text-field-with-icon.html

+40-34
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,49 @@
11
<div class="ray-form-item">
22
<div class="ray-text-field ray-text-field--with-icon-left">
3-
<svg class="ray-text-field__icon--left" viewBox="0 0 25 25">
4-
<g id="budicon-profile-picture">
5-
<path
6-
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
7-
/>
8-
</g>
9-
</svg>
10-
11-
<input
12-
type="text"
13-
class="ray-text-field__input"
14-
id="input-with-icon"
15-
placeholder="Few people are aware..."
16-
/>
17-
<label class="ray-text-field__label" for="input-with-icon">
18-
Fun fact about Ray Eames
19-
</label>
3+
<div class="ray-text-field__icon--left">
4+
<svg viewBox="0 0 25 25" style="height: 1rem;">
5+
<g id="budicon-profile-picture">
6+
<path
7+
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
8+
/>
9+
</g>
10+
</svg>
11+
</div>
12+
<div class="ray-text-field__wrapper">
13+
<input
14+
type="text"
15+
class="ray-text-field__input"
16+
id="input-with-icon"
17+
placeholder="Few people are aware..."
18+
/>
19+
<label class="ray-text-field__label" for="input-with-icon">
20+
Fun fact about Ray Eames
21+
</label>
22+
</div>
2023
</div>
2124
</div>
2225

2326
<div class="ray-form-item">
2427
<div class="ray-text-field ray-text-field--with-icon-right">
25-
<svg class="ray-text-field__icon--right" viewBox="0 0 25 25">
26-
<g id="budicon-profile-picture">
27-
<path
28-
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
29-
/>
30-
</g>
31-
</svg>
32-
33-
<input
34-
type="text"
35-
class="ray-text-field__input"
36-
id="input-with-icon2"
37-
placeholder="Few people are aware..."
38-
/>
39-
<label class="ray-text-field__label" for="input-with-icon2">
40-
Fun fact about Ray Eames
41-
</label>
28+
<div class="ray-text-field__icon--right">
29+
<svg viewBox="0 0 25 25" style="height: 1rem;">
30+
<g id="budicon-profile-picture">
31+
<path
32+
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
33+
/>
34+
</g>
35+
</svg>
36+
</div>
37+
<div class="ray-text-field__wrapper">
38+
<input
39+
type="text"
40+
class="ray-text-field__input"
41+
id="input-with-icon2"
42+
placeholder="Few people are aware..."
43+
/>
44+
<label class="ray-text-field__label" for="input-with-icon2">
45+
Fun fact about Ray Eames
46+
</label>
47+
</div>
4248
</div>
4349
</div>

‎docs/html/text-field/text-field-with-prepend.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="ray-form-item">
2+
<div class="ray-text-field ray-text-field--with-prepend">
3+
<div class="ray-text-field__prepend">
4+
<svg viewBox="0 0 25 25" style="height: 1rem;">
5+
<g id="budicon-profile-picture">
6+
<path
7+
d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
8+
/>
9+
</g>
10+
</svg>
11+
</div>
12+
<div class="ray-text-field__wrapper">
13+
<input
14+
type="text"
15+
class="ray-text-field__input"
16+
id="input-with-icon"
17+
placeholder="Few people are aware..."
18+
/>
19+
<label class="ray-text-field__label" for="input-with-icon">
20+
Fun fact about Ray Eames
21+
</label>
22+
</div>
23+
</div>
24+
</div>

‎packages/core/src/components/select/_select.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,20 @@
55
.#{$ray-class-prefix}select {
66
@include required-support('select');
77
@include icon-support('select');
8+
@include prepend-support('select');
89

910
border: $ray-border-width solid $ray-color-gray-60;
1011
background-color: $ray-color-white;
1112
border-radius: $ray-border-radius;
1213
position: relative;
1314
height: $ray-field-height;
1415
display: flex;
16+
align-items: stretch;
1517

1618
&__icon--right {
1719
@include icon;
1820
// need to add spacing to compensate for the arrow
19-
right: calc(#{$ray-field-h-spacing} * 2 + 12px);
21+
right: calc((#{$ray-field-h-spacing} * 2) + #{$ray-field-h-spacing});
2022
}
2123

2224
&::after {
@@ -35,6 +37,11 @@
3537
border-radius: 2px;
3638
}
3739

40+
&__wrapper {
41+
position: relative;
42+
flex: 1;
43+
}
44+
3845
&__label {
3946
@include label;
4047
pointer-events: none;

‎packages/core/src/components/text-field/_text-field.scss

+8
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
.#{$ray-class-prefix}text-field {
66
@include required-support('text-field');
77
@include icon-support('text-field');
8+
@include prepend-support('select');
89
}
910

1011
.#{$ray-class-prefix}text-area {
@@ -19,6 +20,13 @@
1920
border-radius: $ray-border-radius;
2021
position: relative;
2122
height: $ray-field-height;
23+
display: flex;
24+
align-items: stretch;
25+
26+
&__wrapper {
27+
position: relative;
28+
flex: 1;
29+
}
2230

2331
&__label {
2432
@include label;

‎packages/core/src/global/mixins/_form-items.scss

+38-17
Original file line numberDiff line numberDiff line change
@@ -150,26 +150,34 @@
150150
}
151151

152152
@mixin icon {
153-
width: 1rem;
154-
height: 1rem;
155-
position: absolute;
153+
display: flex;
154+
align-items: center;
155+
justify-content: center;
156156
line-height: 1;
157157
text-align: center;
158158
fill: currentColor;
159-
// optical correction, subtract 1px
160-
top: $ray-field-v-spacing - rem(1px);
161159

162160
path {
163161
fill: currentColor;
164162
}
165163
}
166164
@mixin icon-support($class) {
167165
&--with-icon-left {
166+
&.#{$ray-class-prefix}#{$class}--active,
167+
&.#{$ray-class-prefix}#{$class}--has-value {
168+
.#{$ray-class-prefix}#{$class}__input,
169+
.#{$ray-class-prefix}#{$class}__label {
170+
left: -1 * ($ray-field-h-spacing / 2) !important;
171+
}
172+
173+
.#{$ray-class-prefix}#{$class}__label {
174+
padding-left: $ray-field-h-spacing / 2;
175+
}
176+
}
177+
168178
.#{$ray-class-prefix}#{$class}__input,
169179
.#{$ray-class-prefix}#{$class}__label {
170-
padding-left: calc(
171-
#{$ray-field-h-spacing} * 2 + #{$ray-field-icon-width}
172-
);
180+
padding-left: 0;
173181
}
174182
}
175183

@@ -193,19 +201,17 @@
193201

194202
&__icon--left {
195203
@include icon;
196-
left: $ray-field-h-spacing;
204+
position: relative;
205+
min-width: calc(#{$ray-field-h-spacing} * 2 + #{$ray-field-icon-width});
206+
border-radius: $ray-border-radius 0 0 $ray-border-radius;
197207
}
198208

199209
&__icon--right {
200210
@include icon;
201-
right: $ray-field-h-spacing;
202-
}
203-
204-
&--compact {
205-
.#{$ray-class-prefix}#{$class}__icon--left,
206-
.#{$ray-class-prefix}#{$class}__icon--right {
207-
top: $ray-field-v-spacing-compact;
208-
}
211+
position: absolute;
212+
top: 50%;
213+
right: calc(#{$ray-field-h-spacing});
214+
transform: translateY(-50%);
209215
}
210216

211217
&--active {
@@ -241,3 +247,18 @@
241247
}
242248
}
243249
}
250+
251+
@mixin prepend-support($class) {
252+
&__prepend {
253+
display: flex;
254+
align-items: center;
255+
justify-content: center;
256+
line-height: 1;
257+
text-align: center;
258+
position: relative;
259+
min-width: calc((#{$ray-field-h-spacing} * 3) + #{$ray-field-icon-width});
260+
background-color: $ray-color-gray-03;
261+
border-right: 1px solid $ray-color-gray-10;
262+
border-radius: $ray-border-radius 0 0 $ray-border-radius;
263+
}
264+
}

0 commit comments

Comments
 (0)