Replace chart examples by hello to avoid confusion with the ChartJS component

Author: welcoMattic

src/StimulusBundle/doc/index.rst

@@ -174,15 +174,15 @@ For example:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }) }}>
+    <div {{ stimulus_controller('hello', { 'name': 'World', 'data': [1, 2, 3, 4] }) }}>
         Hello
     </div>
 
     <!-- would render -->
     <div
-       data-controller="chart"
-       data-chart-name-value="Likes"
-       data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
+       data-controller="hello"
+       data-hello-name-value="World"
+       data-hello-data-value="&#x5B;1,2,3,4&#x5D;"
     >
        Hello
     </div>
@@ -191,49 +191,49 @@ If you want to set CSS classes:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
+    <div {{ stimulus_controller('hello', { 'name': 'World', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
         Hello
     </div>
 
     <!-- would render -->
     <div
-       data-controller="chart"
-       data-chart-name-value="Likes"
-       data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
-       data-chart-loading-class="spinner"
+       data-controller="hello"
+       data-hello-name-value="World"
+       data-hello-data-value="&#x5B;1,2,3,4&#x5D;"
+       data-hello-loading-class="spinner"
     >
        Hello
     </div>
 
     <!-- or without values -->
-    <div {{ stimulus_controller('chart', controllerClasses = { 'loading': 'spinner' }) }}>
+    <div {{ stimulus_controller('hello', controllerClasses: { 'loading': 'spinner' }) }}>
         Hello
     </div>
 
 And with outlets:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart',
-            { 'name': 'Likes', 'data': [1, 2, 3, 4] },
+    <div {{ stimulus_controller('hello',
+            { 'name': 'World', 'data': [1, 2, 3, 4] },
             { 'loading': 'spinner' },
             { 'other': '.target' } ) }}>
         Hello
     </div>
 
     <!-- would render -->
     <div
-       data-controller="chart"
-       data-chart-name-value="Likes"
-       data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
-       data-chart-loading-class="spinner"
-       data-chart-other-outlet=".target"
+       data-controller="hello"
+       data-hello-name-value="World"
+       data-hello-data-value="&#x5B;1,2,3,4&#x5D;"
+       data-hello-loading-class="spinner"
+       data-hello-other-outlet=".target"
     >
        Hello
     </div>
 
     <!-- or without values/classes -->
-    <div {{ stimulus_controller('chart', controllerOutlets = { 'other': '.target' }) }}>
+    <div {{ stimulus_controller('hello', controllerOutlets: { 'other': '.target' }) }}>
         Hello
     </div>
 
@@ -246,20 +246,20 @@ there's also a ``stimulus_controller`` filter:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart', { 'name': 'Likes' })|stimulus_controller('other-controller') }}>
+    <div {{ stimulus_controller('hello', { 'name': 'World' })|stimulus_controller('other-controller') }}>
         Hello
     </div>
 
     <!-- would render -->
-    <div data-controller="chart other-controller" data-chart-name-value="Likes">
+    <div data-controller="hello other-controller" data-hello-name-value="World">
         Hello
     </div>
 
 You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
 
 .. code-block:: twig
 
-    {{ form_start(form, { attr: stimulus_controller('chart', { 'name': 'Likes' }).toArray() }) }}
+    {{ form_start(form, { attr: stimulus_controller('hello', { 'name': 'World' }).toArray() }) }}
 
 stimulus_action
 ~~~~~~~~~~~~~~~