[DOCS] Improve example in changelog about tree node labels

Use a full example of an event listener and enclose the RGB value in
quotes. The example also omits named arguments. Additionally, we have
currently no "tsconfig" language in the Sphinx-based rendering,
"typoscript" is used therefore. Also, captions are added for the code
blocks for easier adoption.

Resolves: #103257
Related: #103257
Releases: main
Change-Id: Ifd3bb51352011223470de988e6153252869d982b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83184


Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Stefan Bürk <stefan@buerk.tech>
Reviewed-by: Stefan Bürk <stefan@buerk.tech>

typo3/sysext/core/Documentation/Changelog/13.1/Deprecation-103211-DeprecatePageTreebackgroundColor.rst

@@ -11,7 +11,7 @@ See :issue:`103211`
 Description
 ===========
 
-The user TSconfig option :tsconfig:`options.pageTree.backgroundColor`
+The user TSconfig option :typoscript:`options.pageTree.backgroundColor`
 has been deprecated and will be removed in TYPO3 v14 due to its
 lack of accessibility. It is being replaced with a new label
 system for tree nodes.
@@ -20,7 +20,7 @@ system for tree nodes.
 Impact
 ======
 
-During v13, :tsconfig:`options.pageTree.backgroundColor` will be
+During v13, :typoscript:`options.pageTree.backgroundColor` will be
 migrated to the new label system. Since the use case is unknown,
 the generated label will be "Color: <value>". This information
 will be displayed on all affected nodes.
@@ -30,7 +30,7 @@ Affected installations
 ======================
 
 All installations that use the user TSconfig option
-:tsconfig:`options.pageTree.backgroundColor` are affected.
+:typoscript:`options.pageTree.backgroundColor` are affected.
 
 
 Migration
@@ -38,13 +38,15 @@ Migration
 
 Before:
 
-..  code-block:: tsconfig
+..  code-block:: typoscript
+    :caption: EXT:my_extension/Configuration/user.tsconfig
 
     options.pageTree.backgroundColor.<pageid> = #ff8700
 
 After:
 
-..  code-block:: tsconfig
+..  code-block:: typoscript
+    :caption: EXT:my_extension/Configuration/user.tsconfig
 
     options.pageTree.label.<pageid> {
         label = Campaign A

typo3/sysext/core/Documentation/Changelog/13.1/Feature-103211-IntroduceTreeNodeLabels.rst

@@ -16,7 +16,7 @@ incorporate labels, offering enhanced functionality and additional
 information.
 
 Before the implementation of labels, developers and integrators
-relied on :tsconfig:`pageTree.backgroundColor.<pageid>` for visual cues.
+relied on :typoscript:`pageTree.backgroundColor.<pageid>` for visual cues.
 However, these background colors lacked accessibility and meaningful context,
 catering only to users with perfect eyesight and excluding those
 dependent on screen readers or contrast modes.
@@ -30,7 +30,8 @@ highest priority label taking precedence over others. Users can
 assign a label to a node via user TSconfig, noting that only one label
 can be set through this method.
 
-..  code-block:: tsconfig
+..  code-block:: typoscript
+    :caption: EXT:my_extension/Configuration/user.tsconfig
 
     options.pageTree.label.<pageid> {
         label = Campaign A
@@ -41,14 +42,39 @@ The labels can also be added by using the event
 :php:`\TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent`.
 
 ..  code-block:: php
-
-    $items = $event->getItems();
-    foreach ($items as &$item) {
-        $item['labels'][] = new Label(
-            label: 'Campaign B',
-            color: #00658f,
-            priority: 1,
-        );
+    :caption: EXT:my_extension/Classes/Backend/EventListener/ModifyPageTreeItems.php
+    :emphasize-lines: 22-26
+
+    <?php
+
+    declare(strict_types=1);
+
+    namespace MyVendor\MyExtension\Backend\EventListener;
+
+    use TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent;
+    use TYPO3\CMS\Backend\Dto\Tree\Label\Label;
+    use TYPO3\CMS\Core\Attribute\AsEventListener;
+
+    #[AsEventListener(
+        identifier: 'my-extension/backend/modify-page-tree-items',
+    )]
+    final readonly class ModifyPageTreeItems
+    {
+        public function __invoke(AfterPageTreeItemsPreparedEvent $event): void
+        {
+            $items = $event->getItems();
+            foreach ($items as $item) {
+                // Add special label for all pages with parent page ID 123
+                if ($item['_page']['pid'] === 123) {
+                    $item['labels'][] = new Label(
+                        'Campaign B', // Label
+                        '#00658f',    // Color as RGB value
+                        1,            // Priority
+                    );
+                }
+            }
+            $event->setItems($items);
+        }
     }
 
 Please note that only the marker for the label with the highest priority is