From 601930bd2822d7c25ad1d1c06990e47c05aa91cc Mon Sep 17 00:00:00 2001
From: Thierry <thierry@byscripts.info>
Date: Thu, 19 Sep 2024 10:34:15 +0200
Subject: [PATCH] feat: update XO components guidelines

---
 .../web-core/docs/contexts/color-context.md   |  8 ++++++
 .../docs/guidelines/component definition.md   | 26 +++++++++----------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/@xen-orchestra/web-core/docs/contexts/color-context.md b/@xen-orchestra/web-core/docs/contexts/color-context.md
index 9fb3db239fe..4187b545e42 100644
--- a/@xen-orchestra/web-core/docs/contexts/color-context.md
+++ b/@xen-orchestra/web-core/docs/contexts/color-context.md
@@ -1,3 +1,11 @@
+> [!CAUTION]
+>
+> **DEPRECATED**
+>
+> ColorContext has been deprecated and shouldn’t be used anymore.
+>
+> It will be removed in the future.
+
 <!-- TOC -->
 
 - [Overview](#overview)
diff --git a/@xen-orchestra/web-core/docs/guidelines/component definition.md b/@xen-orchestra/web-core/docs/guidelines/component definition.md
index e3341aa2806..40334e2265d 100644
--- a/@xen-orchestra/web-core/docs/guidelines/component definition.md	
+++ b/@xen-orchestra/web-core/docs/guidelines/component definition.md	
@@ -12,9 +12,9 @@ Lexicon:
 
 ## DS Components MUST be stored in their own directory.
 
-Directory name MUST be in kebab-case (e.g. `my-component`)
+## Directory name MUST be in kebab-case (e.g. `my-component`)
 
-Component name MUST be in PascalCase (e.g. `MyComponent.vue`)
+## Component name MUST be in PascalCase and start with `Vts` (e.g. `VtsMyComponent.vue`)
 
 ❌ Bad
 
@@ -22,7 +22,7 @@ Component name MUST be in PascalCase (e.g. `MyComponent.vue`)
 
 ✅ Good
 
-`components/square/Square.vue`
+`components/square/VtsSquare.vue`
 
 ## Components SHOULD be kept short and be split into multiple subcomponents if necessary, stored in the same directory as the main component.
 
@@ -31,9 +31,9 @@ Component name MUST be in PascalCase (e.g. `MyComponent.vue`)
 ```
 /components/
   /square/
-    /Square.vue
+    /VtsSquare.vue
   /square-icon/
-    /SquareIcon.vue <- This component is not part of the DS and will be used only in Square.vue
+    /VtsSquareIcon.vue <- This component is not part of the DS and will be used only in Square.vue
 ```
 
 ✅ Good
@@ -41,8 +41,8 @@ Component name MUST be in PascalCase (e.g. `MyComponent.vue`)
 ```
 /components/
   /square/
-    /Square.vue
-    /SquareIcon.vue
+    /VtsSquare.vue
+    /VtsSquareIcon.vue
 ```
 
 > [!WARNING]
@@ -86,21 +86,21 @@ If a component from the DS is split into multiple subcomponents, only the main c
 
 ## Class names MUST use kebab-case
 
-## Component root element's class name MUST be named after the component name, prefixed with `vts-`
+## Component root element's class name MUST be named after the component name
 
 If no style is applied to the root element, the class name will be omitted
 
 ❌ Bad
 
 ```vue
-<!-- Square.vue -->
+<!-- VtsSquare.vue -->
 <template>
   <div class="my-shape" />
 </template>
 ```
 
 ```vue
-<!-- Square.vue -->
+<!-- VtsSquare.vue -->
 <template>
   <div class="square" />
 </template>
@@ -109,14 +109,14 @@ If no style is applied to the root element, the class name will be omitted
 ✅ Good
 
 ```vue
-<!-- Square.vue -->
+<!-- VtsSquare.vue -->
 <template>
   <div class="vts-square" />
 </template>
 ```
 
 ```vue
-<!-- SquareIcon.vue -->
+<!-- VtsSquareIcon.vue -->
 <template>
   <div class="vts-square-icon" />
 </template>
@@ -154,8 +154,6 @@ If no style is applied to the root element, the class name will be omitted
 
 ## Component CSS must be contained under the root CSS classname
 
-With meaningful class names + scoped styles, in most cases it will not be necessary to use nested CSS
-
 ❌ Bad
 
 ```vue