feat: modernize float classes to Bootstrap 5 with deprecation handling

Documentation-rendertest/ImagesAndFigures/FloatAndAlignment.rst

@@ -20,7 +20,7 @@ Image float left
 
 .. |example-teaser-left| image:: ../images/q150_cccccc.png
    :alt: Left floating image
-   :class: float-left with-shadow
+   :class: float-start with-shadow
 
 |example-teaser-left|
 Typesetting is the composition of text by means of arranging physical
@@ -41,7 +41,7 @@ Image float right
 
 .. |example-teaser-right| image:: ../images/q150_cccccc.png
    :alt: Right floating image
-   :class: float-right with-shadow
+   :class: float-end with-shadow
 
 |example-teaser-right|
 Typesetting is the composition of text by means of arranging physical
@@ -62,7 +62,8 @@ Figure float left
 
 .. figure:: ../images/q150_cccccc.png
    :alt: Left floating figure
-   :class: float-left with-shadow
+   :align: left
+   :class: with-shadow
 
    A figure floated to the left
 
@@ -85,7 +86,8 @@ Figure float right
 
 .. figure:: ../images/q150_cccccc.png
    :alt: Right floating figure
-   :class: float-right with-shadow
+   :align: right
+   :class: with-shadow
 
    A figure floated to the right
 

composer.json

@@ -8,7 +8,7 @@
         "ext-dom": "*",
         "ext-libxml": "*",
         "brotkrueml/twig-codehighlight": "^1.0",
-        "league/flysystem": "^1.1.10",
+        "league/flysystem": "^3.29",
         "phpdocumentor/dev-server": "^1.9.4",
         "phpdocumentor/filesystem": "^1.9",
         "phpdocumentor/guides": "^1.9",

packages/typo3-docs-theme/assets/sass/components/_images.scss

@@ -17,15 +17,20 @@ figure {
     &:not(:first-child) {
         @extend .mt-3;
     }
+    &.float-start,
+    &.float-end,
+    // Deprecated: legacy Bootstrap 4 class names — remove after migration period (see #1179)
     &.float-left,
     &.float-right {
         margin-bottom: $spacer;
         max-width: 50%;
     }
+    &.float-start,
     &.float-left {
         float: left;
         margin-right: $spacer;
     }
+    &.float-end,
     &.float-right {
         float: right;
         margin-left: $spacer;
@@ -37,6 +42,8 @@ figure {
 }
 
 @media (max-width: 575.98px) {
+    figure.float-start,
+    figure.float-end,
     figure.float-left,
     figure.float-right {
         float: none;

packages/typo3-docs-theme/assets/sass/components/_rst.scss

@@ -32,11 +32,14 @@
         display: inline-block;
         max-width: 100%;
         height: auto;
+        // Deprecated: legacy Bootstrap 4 class names — remove after migration period (see #1179)
+        &.float-start,
         &.float-left {
             float: left;
             margin-right: $spacer;
             margin-bottom: $spacer;
         }
+        &.float-end,
         &.float-right {
             float: right;
             margin-left: $spacer;
@@ -57,6 +60,17 @@
             }
         }
     }
+    @media (max-width: 575.98px) {
+        img.float-start,
+        img.float-end,
+        img.float-left,
+        img.float-right {
+            float: none;
+            max-width: 100%;
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
     .plantuml object {
         height: auto !important;
     }

packages/typo3-docs-theme/resources/config/typo3-docs-theme.php

@@ -29,6 +29,7 @@
 use T3Docs\Typo3DocsTheme\Directives\ConfvalMenuDirective;
 use T3Docs\Typo3DocsTheme\Directives\DirectoryTreeDirective;
 use T3Docs\Typo3DocsTheme\Directives\FigureDirective;
+use T3Docs\Typo3DocsTheme\Directives\ImageDirective;
 use T3Docs\Typo3DocsTheme\Directives\GlossaryDirective;
 use T3Docs\Typo3DocsTheme\Directives\GroupTabDirective;
 use T3Docs\Typo3DocsTheme\Directives\IncludeDirective;
@@ -203,6 +204,7 @@
         ->set(DirectoryTreeDirective::class)
         ->set(FigureDirective::class)
         ->arg('$startingRule', service(DirectiveContentRule::class))
+        ->set(ImageDirective::class)
         ->set(GlossaryDirective::class)
         ->set(GroupTabDirective::class)
         ->set(IncludeDirective::class)