kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

limit icon component size to valid values

Browse source
This commit is contained in:
Simon Knox 2017-11-28 06:34:03 +11:00
parent 815f35be4f
commit 539ea5ebda
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/javascripts/vue_shared/components/icon.vue
View file

@ -12,6 +12,9 @@
/>
*/
// only allow classes in images.scss e.g. s12
const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
export default {
props: {
name: {
@ -22,7 +25,10 @@
size: {
type: Number,
required: false,
default: 0,
default: 16,
validator(value) {
return validSizes.includes(value);
},
},
cssClasses: {
@ -42,10 +48,11 @@
},
};
</script>
<template>
<svg
:class="[iconSizeClass, cssClasses]">
<use
<use
v-bind="{'xlink:href':spriteHref}"/>
</svg>
</template>

12
spec/javascripts/vue_shared/components/icon_spec.js
View file

@ -11,7 +11,7 @@ describe('Sprite Icon Component', function () {
icon = mountComponent(IconComponent, {
name: 'test',
size: 99,
size: 32,
cssClasses: 'extraclasses',
});
});
@ -34,12 +34,18 @@ describe('Sprite Icon Component', function () {
});
it('should properly compute iconSizeClass', function () {
expect(icon.iconSizeClass).toBe('s99');
expect(icon.iconSizeClass).toBe('s32');
});
it('forbids invalid size prop', () => {
expect(icon.$options.props.size.validator(NaN)).toBeFalsy();
expect(icon.$options.props.size.validator(0)).toBeFalsy();
expect(icon.$options.props.size.validator(9001)).toBeFalsy();
});
it('should properly render img css', function () {
const classList = icon.$el.classList;
const containsSizeClass = classList.contains('s99');
const containsSizeClass = classList.contains('s32');
const containsCustomClass = classList.contains('extraclasses');
expect(containsSizeClass).toBe(true);
expect(containsCustomClass).toBe(true);