[!!!][BUGFIX] Fix behaviour of inverted TCA checkboxes

States of checkboxes defined in the TCA with "invertStateDisplay" enabled
are announced in the same way as the visual representation. The
underlaying checkbox value is inverted instead of just inverting the
corresponding visual representation.

The CSS class "checkbox-invert" used for styling these checkboxes has
been removed.

Resolves: #92678
Releases: master
Change-Id: Id35d0cc3b3872a8176f30eee6abdf49287a2c44a
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66282
Tested-by: Michael Telgkamp <michael.telgkamp@mindscreen.de>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Michael Telgkamp <michael.telgkamp@mindscreen.de>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/Sass/component/_checkbox.scss

@@ -114,29 +114,6 @@ $checkbox-focus-border: 1px solid rgba(0, 0, 0, 0.45);
             border: $checkbox-focus-border;
         }
     }
-
-    &.checkbox-invert {
-        .checkbox-label {
-            &:before {
-                background-color: $checkbox-bg-active;
-            }
-
-            &:after {
-                left: 19px;
-            }
-        }
-
-        .checkbox-input:checked + .checkbox-label {
-            &:before {
-                background-color: lighten($checkbox-bg, 10%);
-            }
-
-            &:after {
-                left: 5px;
-                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9);
-            }
-        }
-    }
 }
 
 //
@@ -211,34 +188,6 @@ $checkbox-focus-border: 1px solid rgba(0, 0, 0, 0.45);
             border: $checkbox-focus-border;
         }
     }
-
-    &.checkbox-invert {
-        .checkbox-label-switch {
-            background-color: $checkbox-bg-active;
-
-            .checkbox-label-switch-checked {
-                order: 1;
-            }
-
-            .checkbox-label-switch-unchecked {
-                order: 2;
-            }
-        }
-
-        .checkbox-input:checked + .checkbox-label {
-            .checkbox-label-switch {
-                background-color: $checkbox-bg-inactive;
-
-                .checkbox-label-switch-checked {
-                    order: 2;
-                }
-
-                .checkbox-label-switch-unchecked {
-                    order: 1;
-                }
-            }
-        }
-    }
 }
 
 //
@@ -312,16 +261,4 @@ $checkbox-focus-border: 1px solid rgba(0, 0, 0, 0.45);
             border: $checkbox-focus-border;
         }
     }
-
-    &.checkbox-invert {
-        .checkbox-label-icon {
-            background-color: $checkbox-bg-active;
-            color: #fff;
-        }
-
-        .checkbox-input:checked + .checkbox-label .checkbox-label-icon {
-            background-color: $checkbox-bg;
-            color: #333;
-        }
-    }
 }

typo3/sysext/backend/Classes/Form/Element/AbstractFormElement.php

@@ -320,16 +320,27 @@ protected function formMaxWidth($size = 48)
      * @param int $checkbox Checkbox # (0-9?)
      * @param int $checkboxesCount Total number of checkboxes in the array.
      * @param string $additionalJavaScript Additional JavaScript for the onclick handler.
+     * @param bool $invert Inverts the state of the checkbox (but not of the bit value)
      * @return string The onclick attribute + possibly the checked-option set.
      * @internal
      */
-    protected function checkBoxParams($itemName, $formElementValue, $checkbox, $checkboxesCount, $additionalJavaScript = ''): string
-    {
+    protected function checkBoxParams(
+        $itemName,
+        $formElementValue,
+        $checkbox,
+        $checkboxesCount,
+        $additionalJavaScript = '',
+        $invert = false
+    ): string {
         $elementName = 'document.editform[' . GeneralUtility::quoteJSvalue($itemName) . ']';
         $checkboxPow = 2 ** $checkbox;
-        $onClick = $elementName . '.value=this.checked?(' . $elementName . '.value|' . $checkboxPow . '):('
+        $checked = $formElementValue & $checkboxPow;
+        if ($invert) {
+            $checked = !$checked;
+        }
+        $onClick = $elementName . '.value=' . ($invert ? '!' : '') . 'this.checked?(' . $elementName . '.value|' . $checkboxPow . '):('
             . $elementName . '.value&' . ((2 ** $checkboxesCount) - 1 - $checkboxPow) . ');' . $additionalJavaScript;
-        return ' onclick="' . htmlspecialchars($onClick) . '"' . ($formElementValue & $checkboxPow ? ' checked="checked"' : '');
+        return ' onclick="' . htmlspecialchars($onClick) . '"' . ($checked ? ' checked="checked"' : '');
     }
 
     /**

typo3/sysext/backend/Classes/Form/Element/CheckboxElement.php

@@ -182,7 +182,8 @@ protected function renderSingleCheckboxElement($label, $itemCounter, $formElemen
             $formElementValue,
             $itemCounter,
             $numberOfItems,
-            implode('', $additionalInformation['fieldChangeFunc'])
+            implode('', $additionalInformation['fieldChangeFunc']),
+            $invert
         );
         $uniqueId = StringUtility::getUniqueId('_');
         $checkboxId = $additionalInformation['itemFormElID'] . '_' . $itemCounter . $uniqueId;
@@ -199,7 +200,7 @@ protected function renderSingleCheckboxElement($label, $itemCounter, $formElemen
         $iconUnchecked = $this->iconFactory->getIcon($iconIdentifierUnchecked, Icon::SIZE_SMALL)->render('inline');
 
         return '
-            <div class="checkbox checkbox-type-icon-toggle' . ($invert ? ' checkbox-invert' : '') . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
+            <div class="checkbox checkbox-type-icon-toggle' . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
                 <input type="checkbox"
                     class="checkbox-input"
                     value="1"
@@ -209,8 +210,8 @@ class="checkbox-input"
                     id="' . $checkboxId . '" />
                 <label class="checkbox-label" for="' . $checkboxId . '">
                     <span class="checkbox-label-icon">
-                        <span class="checkbox-label-icon-checked">' . ($invert ? $iconUnchecked : $iconChecked) . '</span>
-                        <span class="checkbox-label-icon-unchecked">' . ($invert ? $iconChecked : $iconUnchecked) . '</span>
+                        <span class="checkbox-label-icon-checked">' . $iconChecked . '</span>
+                        <span class="checkbox-label-icon-unchecked">' . $iconUnchecked . '</span>
                     </span>
                     <span class="checkbox-label-text">' . $this->appendValueToLabelInDebugMode(($label ? htmlspecialchars($label) : '&nbsp;'), $formElementValue) . '</span>
                 </label>

typo3/sysext/backend/Classes/Form/Element/CheckboxLabeledToggleElement.php

@@ -181,12 +181,13 @@ protected function renderSingleCheckboxElement($label, $itemCounter, $formElemen
             $formElementValue,
             $itemCounter,
             $numberOfItems,
-            implode('', $additionalInformation['fieldChangeFunc'])
+            implode('', $additionalInformation['fieldChangeFunc']),
+            $invert
         );
         $uniqueId = StringUtility::getUniqueId('_');
         $checkboxId = $additionalInformation['itemFormElID'] . '_' . $itemCounter . $uniqueId;
         return '
-            <div class="checkbox checkbox-type-labeled-toggle' . ($invert ? ' checkbox-invert' : '') . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
+            <div class="checkbox checkbox-type-labeled-toggle' . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
                 <input type="checkbox"
                     class="checkbox-input"
                     value="1"

typo3/sysext/backend/Classes/Form/Element/CheckboxToggleElement.php

@@ -181,12 +181,13 @@ protected function renderSingleCheckboxElement($label, $itemCounter, $formElemen
             $formElementValue,
             $itemCounter,
             $numberOfItems,
-            implode('', $additionalInformation['fieldChangeFunc'])
+            implode('', $additionalInformation['fieldChangeFunc']),
+            $invert
         );
         $uniqueId = StringUtility::getUniqueId('_');
         $checkboxId = $additionalInformation['itemFormElID'] . '_' . $itemCounter . $uniqueId;
         return '
-            <div class="checkbox checkbox-type-toggle' . ($invert ? ' checkbox-invert' : '') . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
+            <div class="checkbox checkbox-type-toggle' . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
                 <input type="checkbox"
                     class="checkbox-input"
                     value="1"

typo3/sysext/core/Documentation/Changelog/master/Breaking-92678-CssClassCheckboxInvertRemoved.rst

@@ -0,0 +1,39 @@
+.. include:: ../../Includes.txt
+
+====================================================
+Breaking: #92678 - CSS class checkbox-invert removed
+====================================================
+
+See :issue:`92678`
+
+Description
+===========
+
+FormEngine used to have a class 'checkbox-invert' for the styling
+of an item with enabled flag 'invertStateDisplay'. Now the checkbox value
+itself is inverted. Therefore the class has been removed as it is not needed
+any more.
+
+
+Impact
+======
+
+Using the class doesn't have any effect on styling anymore.
+
+
+Affected Installations
+======================
+
+Standard installations of TYPO3 are not affected. Only installations that
+use the class 'checkbox-invert' for customizations are affected.
+
+
+Migration
+=========
+
+There is no migration required if only the invertStateDisplay configuration
+is used. If CSS styling or JavaScript in the backend relies on the
+class 'checkbox-invert' present custom code needs to be added to make it
+available again.
+
+.. index:: Backend, CSS, NotScanned, ext:backend