From 8913d27cf85f075881eede30198e8a4decb47c76 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 27 Mar 2017 22:36:58 +0000
Subject: [PATCH] Adds entry about kebab case props in documentation
---
doc/development/fe_guide/style_guide_js.md | 15 +++++++++++----
1 file 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:
--
GitLab