Skip to content

Commit 2298ddf

Browse files
visualjerkvisualjerk
committed
Input style tweaks
1 parent 17fffa0 commit 2298ddf

File tree

12 files changed

+1660
-21
lines changed

12 files changed

+1660
-21
lines changed

‎babel.config.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
module.exports = {
2-
presets: ['@vue/app'],
3-
plugins: ["@babel/plugin-syntax-dynamic-import"]
1+
module.exports = function(api) {
2+
const config = {
3+
presets: ['@vue/app'],
4+
plugins: ['@babel/plugin-syntax-dynamic-import']
5+
}
6+
if (api.env('test')) {
7+
// mocks require.context() in test environment
8+
config.plugins.push('transform-require-context')
9+
}
10+
return config
411
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"async-validator": "^1.8.5",
2929
"babel-core": "7.0.0-bridge.0",
3030
"babel-jest": "^23.0.1",
31+
"babel-plugin-transform-require-context": "^0.0.3",
3132
"cheerio": "^1.0.0-rc.2",
3233
"clipboard-copy": "^2.0.1",
3334
"clone-deep": "^4.0.0",

‎src/system/components/data-display/CopyField/__snapshots__/spec.js.snap

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ exports[`CopyField.vue matches snapshot 1`] = `
1111
<div
1212
class="ds-copy-field-link"
1313
>
14-
<ds-button
14+
<dsbutton-stub
1515
color="soft"
16-
ghost=""
16+
ghost="true"
1717
icon="copy"
18+
linktag="button"
1819
/>
1920
</div>
2021

‎src/system/components/data-input/Select/Select.vue

+15-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<ds-form-item>
33
<div
44
class="ds-select-wrap"
5-
v-click-outside="handleBlur">
5+
v-click-outside="handleBlur"
6+
@keyup.esc="close">
67
<div
78
v-if="icon"
89
class="ds-select-icon">
@@ -30,6 +31,7 @@
3031
</slot>
3132
</div>
3233
<input
34+
ref="search"
3335
class="ds-select-search"
3436
:id="id"
3537
:name="model"
@@ -38,7 +40,8 @@
3840
:disabled="disabled"
3941
:readonly="readonly"
4042
v-model="searchString"
41-
@focus="handleFocus">
43+
@focus="handleFocus"
44+
@keyup.esc="close">
4245
</div>
4346
<div class="ds-select-dropdown">
4447
<ul class="ds-select-options">
@@ -71,6 +74,8 @@
7174
<script>
7275
import inputMixin from '../shared/input'
7376
import ClickOutside from 'vue-click-outside'
77+
import DsFormItem from '@@/components/data-input/FormItem/FormItem'
78+
import DsIcon from '@@/components/typography/Icon/Icon'
7479
7580
/**
7681
* Used for handling basic user input.
@@ -79,6 +84,10 @@ import ClickOutside from 'vue-click-outside'
7984
export default {
8085
name: 'DsSelect',
8186
mixins: [inputMixin],
87+
components: {
88+
DsFormItem,
89+
DsIcon
90+
},
8291
directives: {
8392
ClickOutside
8493
},
@@ -173,6 +182,10 @@ export default {
173182
},
174183
resetSearch() {
175184
this.searchString = ''
185+
},
186+
close() {
187+
this.$refs.search.blur()
188+
this.handleBlur()
176189
}
177190
}
178191
}

‎src/system/components/data-input/Select/__snapshots__/spec.js.snap

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Select.vue matches snapshot 1`] = `
4+
<dsformitem-stub>
5+
<div
6+
class="ds-select-wrap"
7+
>
8+
<!---->
9+
10+
<div
11+
class="ds-select ds-select-has-icon-right"
12+
>
13+
<div
14+
class="ds-select-value"
15+
>
16+
17+
1
18+
19+
</div>
20+
21+
<input
22+
class="ds-select-search"
23+
/>
24+
</div>
25+
26+
<div
27+
class="ds-select-dropdown"
28+
>
29+
<ul
30+
class="ds-select-options"
31+
>
32+
<li
33+
class="ds-select-option ds-select-option-is-selected"
34+
>
35+
36+
1
37+
38+
</li>
39+
<li
40+
class="ds-select-option"
41+
>
42+
43+
2
44+
45+
</li>
46+
<li
47+
class="ds-select-option"
48+
>
49+
50+
3
51+
52+
</li>
53+
</ul>
54+
</div>
55+
56+
<div
57+
class="ds-select-icon-right"
58+
>
59+
<dsicon-stub
60+
arialabel="icon"
61+
name="angle-down"
62+
tag="span"
63+
/>
64+
</div>
65+
</div>
66+
</dsformitem-stub>
67+
`;

‎src/system/components/data-input/Select/spec.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { shallowMount } from '@vue/test-utils'
2+
import Comp from './Select.vue'
3+
4+
describe('Select.vue', () => {
5+
let wrapper
6+
7+
describe('Events emitting', () => {
8+
describe('@input', () => {
9+
test('should be called when the value is changed passing the new value', () => {
10+
const wrapper = shallowMount(Comp, {
11+
propsData: {
12+
value: '3',
13+
options: ['1', '2', '3']
14+
}
15+
})
16+
wrapper.vm.selectOption(wrapper.vm.options[0])
17+
expect(wrapper.emitted().input[0]).toEqual(['1'])
18+
})
19+
test('should be called when the an option is clicked passing the options value', () => {
20+
const wrapper = shallowMount(Comp, {
21+
propsData: {
22+
value: '3',
23+
options: ['1', '2', '3']
24+
}
25+
})
26+
wrapper.find('.ds-select-option').trigger('click')
27+
expect(wrapper.emitted().input[0]).toEqual(['1'])
28+
})
29+
})
30+
})
31+
32+
it('matches snapshot', () => {
33+
const wrapper = shallowMount(Comp, {
34+
propsData: {
35+
value: '1',
36+
options: ['1', '2', '3']
37+
}
38+
})
39+
expect(wrapper.element).toMatchSnapshot()
40+
})
41+
})

‎src/system/components/data-input/Select/style.scss

+5-6
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@
1010
}
1111

1212
.ds-select-search, .ds-select-placeholder, .ds-select-value {
13+
box-sizing: border-box;
1314
position: absolute;
1415
top: 0;
1516
left: 0;
1617
right: 0;
1718
bottom: 0;
1819
border: $input-border-size solid transparent;
1920
padding: $input-padding-vertical $space-x-small;
21+
line-height: $line-height-base;
2022

2123
.ds-input-size-small & {
2224
padding: $input-padding-vertical-small $space-x-small;
@@ -26,7 +28,7 @@
2628
padding: $input-padding-vertical-large $space-x-small;
2729
}
2830

29-
.ds-select-has-icon + & {
31+
.ds-select-has-icon & {
3032
padding-left: $input-height;
3133

3234
.ds-input-size-small & {
@@ -38,7 +40,7 @@
3840
}
3941
}
4042

41-
.ds-select-has-icon-right + & {
43+
.ds-select-has-icon-right & {
4244
padding-right: $input-height;
4345

4446
.ds-input-size-small & {
@@ -53,12 +55,9 @@
5355

5456
.ds-select-search {
5557
appearance: none;
56-
box-sizing: border-box;
57-
font-size: $font-size-base;
58-
line-height: $line-height-base;
58+
font-size: inherit;
5959
font-family: $font-family-text;
6060
width: 100%;
61-
height: $input-height;
6261
background: transparent;
6362
color: $text-color-base;
6463
outline: none;

‎src/system/components/data-input/shared/input.js

+1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export default {
111111
this.input(event.target.value)
112112
},
113113
input(value) {
114+
this.innerValue = value
114115
if (this.$parentForm) {
115116
this.$parentForm.update(this.model, value)
116117
} else {

‎src/system/components/data-input/shared/input.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.#{$class} {
77
appearance: none;
88
box-sizing: border-box;
9-
font-size: $font-size-base;
9+
font-size: $input-font-size-base;
1010
line-height: $line-height-base;
1111
font-family: $font-family-text;
1212
width: 100%;
@@ -47,6 +47,7 @@
4747
font-size: $font-size-small;
4848

4949
.#{$class} {
50+
font-size: $input-font-size-small;
5051
height: $input-height-small;
5152
padding: $input-padding-vertical-small $space-x-small;
5253
}
@@ -56,6 +57,7 @@
5657
font-size: $font-size-large;
5758

5859
.#{$class} {
60+
font-size: $input-font-size-large;
5961
height: $input-height-large;
6062
padding: $input-padding-vertical-large $space-x-small;
6163
}

‎src/system/components/navigation/Button/style.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
align-items: center;
2020
justify-content: center;
2121
text-decoration: none;
22-
padding: $input-padding-vertical $space-small;
22+
padding: 0 $space-small;
2323
height: $input-height;
2424
border-radius: $border-radius-base;
2525
box-shadow: $box-shadow-small-inset, $box-shadow-x-small;
@@ -160,13 +160,13 @@
160160

161161
.ds-button-size-small {
162162
font-size: $font-size-small;
163-
padding: $input-padding-vertical-small $space-x-small;
163+
padding: 0 $space-x-small;
164164
height: $input-height-small;
165165
}
166166

167167
.ds-button-size-large {
168168
font-size: $font-size-large;
169-
padding: $input-padding-vertical-large $space-base;
169+
padding: 0 $space-base;
170170
height: $input-height-large;
171171
}
172172

‎src/system/styles/shared/_form.scss

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
/* FORM VARIABLES / MIXINS
22
--------------------------------------------- */
33

4+
$input-font-size-base: $font-size-base;
45
$input-border-size: $border-size-base;
56
$input-padding-vertical: $space-x-small;
67
$input-height: calc(
78
#{$font-size-base * $line-height-base} + #{($input-padding-vertical + $input-border-size) * 2}
89
);
910

10-
$input-padding-vertical-small: $space-xx-small;
11+
$input-font-size-small: $font-size-base;
12+
$input-padding-vertical-small: $space-xxx-small;
1113
$input-height-small: calc(
12-
#{$font-size-small * $line-height-base} + #{($input-padding-vertical-small + $input-border-size) * 2}
14+
#{$font-size-base * $line-height-base} + #{($input-padding-vertical-small + $input-border-size) * 2}
1315
);
1416

17+
$input-font-size-large: $font-size-large;
1518
$input-padding-vertical-large: $space-x-small;
1619
$input-height-large: calc(
17-
#{$font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
20+
#{$input-font-size-large * $line-height-base} + #{($input-padding-vertical-large + $input-border-size) * 2}
1821
);

0 commit comments

Comments
 (0)