Feature: #97271 - New TCA type “color” (#570)

https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/12.0/Feature-97271-NewTCATypeColor.html refs TYPO3-Documentation/TYPO3CMS-Reference-CoreApi#1624 Co-authored-by: lina.wolf <[email protected]> Co-authored-by: Nikita Hovratov <[email protected]>
TYPO3-Documentation · Apr 5, 2022 · aa7bd80 · aa7bd80
1 parent 8394408
commit aa7bd80
Show file tree

Hide file tree

Showing 14 changed files with 227 additions and 76 deletions.
diff --git a/Documentation/CodeSnippets/Input34.rst.txt b/Documentation/CodeSnippets/Input34.rst.txt
diff --git a/Documentation/ColumnsConfig/Index.rst b/Documentation/ColumnsConfig/Index.rst
@@ -19,6 +19,7 @@ be influenced by further properties.
    CommonProperties/Index
    Type/Category/Index
    Type/Check/Index
+   Type/Color/Index
    Type/Datetime/Index
    Type/Email/Index
    Type/Flex/Index

diff --git a/Documentation/ColumnsConfig/Introduction/Index.rst b/Documentation/ColumnsConfig/Introduction/Index.rst
@@ -49,7 +49,6 @@ input
    .. include:: /Images/Rst/Input28.rst.txt
    .. include:: /Images/Rst/Input30.rst.txt
    .. include:: /Images/Rst/Input33.rst.txt
-   .. include:: /Images/Rst/Input34.rst.txt
    .. include:: /Images/Rst/Inputdatetime3.rst.txt
 
 none

diff --git a/Documentation/ColumnsConfig/Type/Color/Index.rst b/Documentation/ColumnsConfig/Type/Color/Index.rst
@@ -0,0 +1,82 @@
+.. include:: /Includes.rst.txt
+
+.. _columns-input-renderType-colorpicker:
+.. _columns-color:
+
+=====
+Color
+=====
+
+.. versionadded:: 12.0
+   The TCA type :php:`color` has been introduced. It replaces the
+   :php:`renderType=colorpicker` of TCA type :php:`input`.
+
+
+The TCA type :php:`color` should be used to render a JavaScript based color-picker.
+
+Examples
+========
+
+A simple color picker:
+
+.. code-block:: php
+
+    'a_color_field' => [
+        'label' => 'Color field',
+        'config' => [
+            'type' => 'color',
+        ]
+    ]
+
+
+Migration
+=========
+
+A complete migration from :php:`renderType=colorpicker` to :php:`type=color`
+looks like the following:
+
+.. code-block:: php
+
+    // Before
+
+    'a_color_field' => [
+        'label' => 'Color field',
+        'config' => [
+            'type' => 'input',
+            'renderType' => 'colorpicker',
+            'required' => true,
+            'size' => 20,
+            'max' => 1024,
+            'eval' => 'trim',
+            'valuePicker' => [
+                'items' => [
+                    ['typo3 orange', '#FF8700'],
+                ],
+            ],
+        ],
+    ],
+
+    // After
+
+    'a_color_field' => [
+        'label' => 'Color field',
+        'config' => [
+            'type' => 'color',
+            'required' => true,
+            'size' => 20,
+            'valuePicker' => [
+                'items' => [
+                    ['typo3 orange', '#FF8700'],
+                ],
+            ],
+        ]
+    ]
+
+An automatic TCA migration is performed on the fly, migrating all occurrences
+to the new TCA type and triggering a PHP :php:`E_USER_DEPRECATED` error
+where code adoption has to take place.
+
+.. toctree::
+   :titlesonly:
+
+   Properties/Index
diff --git a/Documentation/ColumnsConfig/Type/Color/Properties/Eval.rst b/Documentation/ColumnsConfig/Type/Color/Properties/Eval.rst
@@ -0,0 +1,38 @@
+.. include:: /Includes.rst.txt
+.. _columns-color-properties-eval:
+
+====
+eval
+====
+
+.. confval:: eval (type => color)
+
+   :Path: $GLOBALS['TCA'][$table]['columns'][$field]['config']
+   :type: string (list of keywords)
+   :Scope: Display  / Proc.
+
+   Configuration of field evaluation.
+
+   null
+      An empty value (string) will be stored as :code:`NULL` in the database,
+      requires a proper sql definition.
+
+.. note::
+
+   The value of TCA type :php:`color` columns is automatically trimmed before
+   being stored in the database. Therefore, the :php:`eval=trim` option is no
+   longer needed and should be removed from the TCA configuration. The only
+   valid option for :php:`eval` is :php:`null`.
+
+Examples
+========
+
+.. code-block:: php
+
+   'aField' => [
+      'label' => 'aLabel',
+      'config' => [
+         'type' => 'color',
+         'eval' => 'null',
+      ],
+   ],
diff --git a/Documentation/ColumnsConfig/Type/Color/Properties/Index.rst b/Documentation/ColumnsConfig/Type/Color/Properties/Index.rst
@@ -0,0 +1,34 @@
+.. include:: /Includes.rst.txt
+.. _columns-color-properties:
+
+==========
+Properties
+==========
+
+Special properties
+==================
+
+.. toctree::
+   :titlesonly:
+
+   Eval
+   Size
+   ValuePicker
+
+Common properties
+=================
+
+*  :ref:`behaviour > allowLanguageSynchronization <tca_property_behaviour_allowLanguageSynchronization>`
+*  :ref:`default <tca_property_default>`
+*  :ref:`fieldControl <tca_property_fieldControl>`
+*  :ref:`fieldInformation <tca_property_fieldInformation>`
+*  :ref:`fieldWizard <tca_property_fieldWizard>` with the following options
+
+   *  :ref:`defaultLanguageDifferences <tca_property_fieldwizard>`
+   *  :ref:`localizationStateSelector <tca_property_fieldWizard_localizationStateSelector>`
+   *  :ref:`otherLanguageContent <tca_property_fieldWizard_otherLanguageContent>`
+
+*  :ref:`mode <tca_property_mode>`
+*  :ref:`placeholder <tca_property_placeholder>`
+*  :ref:`readOnly <tca_property_readOnly>`
+*  :ref:`required <tca_property_required>`
diff --git a/Documentation/ColumnsConfig/Type/Color/Properties/Size.rst b/Documentation/ColumnsConfig/Type/Color/Properties/Size.rst
@@ -0,0 +1,16 @@
+.. include:: /Includes.rst.txt
+.. _columns-color-properties-size:
+
+====
+size
+====
+
+.. confval:: size (type => color)
+
+   :Path: $GLOBALS['TCA'][$table]['columns'][$field]['config']
+   :type: integer
+   :Scope: Display
+
+   Abstract value for the width of the :code:`<input>` field. To set the
+   field to the full width of the form area, use the value 50. Minimum is 10.
+   Default is 30.
diff --git a/Documentation/ColumnsConfig/Type/Color/Properties/ValuePicker.rst b/Documentation/ColumnsConfig/Type/Color/Properties/ValuePicker.rst
@@ -0,0 +1,44 @@
+.. include:: /Includes.rst.txt
+.. _columns-color-properties-valuePicker:
+
+===========
+valuePicker
+===========
+
+.. confval:: valuePicker (type => color)
+
+   :Path: $GLOBALS['TCA'][$table]['columns'][$field]['config']
+   :type: array
+   :Scope: Display
+
+   Renders a select box with static values next to the input field. When a
+   value is selected in the box, the value is transferred to the field. Keys:
+
+   items (array)
+      An array with selectable items. Each item is an array with the first value being the label in the select
+      drop-down (LLL reference possible) the second being the hex-value transferred to the input field.
+      The value should have exactly 7 characters, as this is the maximum for a hex-value.
+
+.. note::
+
+   The :php:`valuePicker` allows to define default color codes via :php:`items`
+   for a TCA type :php:`color` field.
+
+Example
+=======
+
+.. code-block:: php
+
+   'a_color_field' => [
+       'label' => 'Color field',
+       'config' => [
+           'type' => 'color',
+           'required' => true,
+           'size' => 20,
+           'valuePicker' => [
+               'items' => [
+                   ['typo3 orange', '#FF8700'],
+               ],
+           ],
+       ]
+   ]
diff --git a/Documentation/ColumnsConfig/Type/Input/ColorPicker/Examples.rst b/Documentation/ColumnsConfig/Type/Input/ColorPicker/Examples.rst
@@ -1,15 +1,5 @@
-.. include:: /Includes.rst.txt
+:orphan:
 
-========
-Examples
-========
-
-
-.. _tca_example_input_34:
-
-Color picker field
-==================
-
-.. include:: /Images/Rst/Input34.rst.txt
-
-.. include:: /CodeSnippets/Input34.rst.txt
+.. deprecated:: 12.0
+   The :php:`renderType=colorpicker` of TCA type :php:`input` has been
+   deprecated. Use the TCA type :ref:`color <columns-color>` instead.
diff --git a/Documentation/ColumnsConfig/Type/Input/ColorPicker/Index.rst b/Documentation/ColumnsConfig/Type/Input/ColorPicker/Index.rst
@@ -1,15 +1,5 @@
-.. include:: /Includes.rst.txt
+:orphan:
 
-.. _columns-input-renderType-colorpicker:
-
-===========
-Colorpicker
-===========
-
-This page describes the :ref:`input <columns-input>` type with renderType='colorpicker'.
-
-An input field with a JavaScript color picker.
-
-.. toctree::
-
-   Examples
+.. deprecated:: 12.0
+   The :php:`renderType=colorpicker` of TCA type :php:`input` has been
+   deprecated. Use the TCA type :ref:`color <columns-color>` instead.
diff --git a/Documentation/ColumnsConfig/Type/Input/Index.rst b/Documentation/ColumnsConfig/Type/Input/Index.rst
@@ -24,24 +24,24 @@ The following renderTypes are available:
 
 *  :ref:`default <columns-input-renderType-default>`: Can be a simple input
    field, a field with a value picker of predefined items or a value slider.
-*  :ref:`colorpicker <columns-input-renderType-colorpicker>`: An input
-   field with a JavaScript color picker.
 
 
 .. include:: /Images/Rst/Input1.rst.txt
 .. include:: /Images/Rst/Input28.rst.txt
 .. include:: /Images/Rst/Input30.rst.txt
 .. include:: /Images/Rst/Input33.rst.txt
-.. include:: /Images/Rst/Input34.rst.txt
 
 .. deprecated:: 12.0
    The :php:`renderType=inputDateTime` of TCA type :php:`input` has been
    deprecated. Use the TCA type :ref:`datetime <columns-datetime>` instead.
 
 
+.. deprecated:: 12.0
+   The :php:`renderType=colorpicker` of TCA type :php:`input` has been
+   deprecated. Use the TCA type :ref:`color <columns-color>` instead.
+
 .. toctree::
    :hidden:
 
    Default/Index
-   ColorPicker/Index
    Properties/Index
diff --git a/Documentation/Images/AutomaticScreenshots/Input34.png b/Documentation/Images/AutomaticScreenshots/Input34.png
diff --git a/Documentation/Images/Rst/Input34.rst.txt b/Documentation/Images/Rst/Input34.rst.txt
diff --git a/Documentation/screenshots.json b/Documentation/screenshots.json
@@ -374,28 +374,6 @@
             "sourceFile": "Configuration/TCA/tx_styleguide_elements_basic.php",
             "fields": ["columns/input_33"],
             "targetFileName": "Input33"
-          },
-          {
-            "action": "goToField",
-            "fields": "input_34"
-          },
-          {
-            "action": "click",
-            "link": "input"
-          },
-          {
-            "action": "wait",
-            "timeout": 0.1
-          },
-          {
-            "action": "makeScreenshotOfElement",
-            "fileName": "Input34"
-          },
-          {
-            "action": "createPhpArrayCodeSnippet",
-            "sourceFile": "Configuration/TCA/tx_styleguide_elements_basic.php",
-            "fields": ["columns/input_34"],
-            "targetFileName": "Input34"
           }
         ],
         "none_basic": [