diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-04 17:56:46 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-05-04 17:56:46 +0100 |
commit | 6f040230d2307d980dc3ebd134caebb1945a3903 (patch) | |
tree | d15713b19ccaf43cb429f0a0134e11e3cd13ea6b | |
parent | 1848ddf6562f1c0a7a53bd65c79e251f0726a532 (diff) | |
download | gitlab-ce-6f040230d2307d980dc3ebd134caebb1945a3903.tar.gz |
Changes after review31552-documentation-dos-and-donts
-rw-r--r-- | doc/development/fe_guide/style_guide_js.md | 32 |
1 files changed, 13 insertions, 19 deletions
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index a3f806c1713..d2d89517241 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -225,13 +225,6 @@ A forEach will cause side effects, it will be mutating the array being iterated. ### Vue.js #### Basic Rules -1. Only include one Vue.js component per file. -1. Export components as plain objects: - ```javascript - export default { - template: `<h1>I'm a component</h1> - } - ``` 1. The service has it's own file 1. The store has it's own file 1. Use a function in the bundle file to instantiate the Vue component: @@ -274,22 +267,13 @@ A forEach will cause side effects, it will be mutating the array being iterated. #### Naming 1. **Extensions**: Use `.vue` extension for Vue components. -1. **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances: +1. **Reference Naming**: Use camelCase for their instances: ```javascript - // bad - import cardBoard from 'cardBoard'; - // good - import CardBoard from 'cardBoard' + import cardBoard from 'cardBoard' - // bad components: { - CardBoard: CardBoard - }; - - // good - components: { - cardBoard: CardBoard + cardBoard: }; ``` @@ -495,6 +479,16 @@ A forEach will cause side effects, it will be mutating the array being iterated. 1. Tooltips: When using a tooltip, include the tooltip mixin 1. Don't change `data-original-title`. + ```javascript + // bad + <span data-original-title="tooltip text">Foo</span> + + // good + <span title="tooltip text">Foo</span> + + $('span').tooltip('fixTitle'); + ``` + ## SCSS - [SCSS](style_guide_scss.md) |