diff options
| author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-27 22:36:58 +0000 |
|---|---|---|
| committer | Alfredo Sumaran <alfredo@gitlab.com> | 2017-03-27 22:36:58 +0000 |
| commit | 8913d27cf85f075881eede30198e8a4decb47c76 (patch) | |
| tree | 66c4d14a71419a55554d260fe3a4008c44f44a90 | |
| parent | a9b1a85bedb16298009a64aaf7bd321fb3da9be1 (diff) | |
| download | gitlab-ce-8913d27cf85f075881eede30198e8a4decb47c76.tar.gz | |
Adds entry about kebab case props in documentation
| -rw-r--r-- | doc/development/fe_guide/style_guide_js.md | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index 034cfe73d33..abd241c0bc8 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -200,7 +200,6 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. #### Naming - **Extensions**: Use `.vue` extension for Vue components. - **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances: - ```javascript // bad import cardBoard from 'cardBoard'; @@ -218,15 +217,23 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns. cardBoard: CardBoard }; ``` -- **Props Naming**: Avoid using DOM component prop names. +- **Props Naming:** +- Avoid using DOM component prop names. +- Use kebab-case instead of camelCase to provide props in templates. ```javascript // bad <component class="btn"> // good - <component cssClass="btn"> - ``` + <component css-class="btn"> + + // bad + <component myProp="prop" /> + + // good + <component my-prop="prop" /> +``` #### Alignment - Follow these alignment styles for the template method: |