Refactor float usage within admin styles. Fix #8126

.stylelintrc.js

@@ -22,12 +22,6 @@ module.exports = {
     ],
     // Would be valuable for strict BEM components but is too hard to enforce with legacy code.
     'no-descending-specificity': null,
-    // Override stylelint-config-wagtail’s options to allow all float and clear values for now.
-    'declaration-property-value-allowed-list': {
-      // 'clear': ['both', 'none'],
-      // 'float': ['inline-start', 'inline-end', 'none', 'unset'],
-      'text-align': ['start', 'end', 'center'],
-    },
     // Refined ordering to align with media mixin usage - see https://github.com/wagtail/stylelint-config-wagtail/issues/37
     'order/order': [
       'dollar-variables',

client/scss/components/_dropdown.legacy.scss

@@ -13,7 +13,7 @@
     height: 3em;
     line-height: 3em;
     text-align: start;
-    float: left;
+    float: inline-start;
   }
 
   .action-secondary {

client/scss/components/_footer.scss

@@ -13,7 +13,7 @@
   }
 
   li {
-    float: left;
+    float: inline-start;
 
     .dropdown li,  // dropdown li
         &:last-child {
@@ -84,7 +84,7 @@
   }
 
   .meta {
-    float: right;
+    float: inline-end;
     text-align: end;
     padding: 7px math.div($grid-gutter-width, 2);
     font-size: 0.85em;

client/scss/components/_grid.legacy.scss

@@ -32,7 +32,7 @@
   scroll-behavior: smooth;
   width: 100%;
   height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
-  float: left;
+  float: inline-start;
   position: relative;
   border-bottom: 1px solid theme('colors.border-furniture');
 }

client/scss/components/_header.scss

@@ -57,12 +57,12 @@
   }
 
   .col {
-    float: left;
+    float: inline-start;
     margin-inline-end: 2em;
   }
 
   .left {
-    float: left;
+    float: inline-start;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -72,7 +72,7 @@
     display: flex;
     gap: theme('spacing[2.5]');
     text-align: end;
-    float: right;
+    float: inline-end;
   }
 
   // For case where content below header should merge with it
@@ -132,12 +132,12 @@
     }
 
     .left {
-      float: left;
+      float: inline-start;
       margin-inline-end: 0;
 
       &:first-child {
         padding-bottom: 0;
-        float: left;
+        float: inline-start;
       }
     }
 
@@ -146,7 +146,7 @@
 
       .right,
       .left {
-        float: right;
+        float: inline-end;
       }
     }
 

client/scss/components/_listing.scss

@@ -231,7 +231,7 @@ ul.listing {
   }
 
   .actions {
-    float: right;
+    float: inline-end;
     font-size: 0.8rem;
     margin: 0;
 
@@ -240,7 +240,7 @@ ul.listing {
     }
 
     > li {
-      float: left;
+      float: inline-start;
       padding: 0 0.5em 0 0;
       vertical-align: middle;
     }
@@ -277,7 +277,7 @@ ul.listing {
   }
 
   .moderate-actions form {
-    float: left;
+    float: inline-start;
     margin: 0 1em 1em 0;
   }
 
@@ -461,11 +461,11 @@ table.listing {
   }
 
   .prev {
-    float: left;
+    float: inline-start;
   }
 
   .next {
-    float: right;
+    float: inline-end;
   }
 }
 
@@ -484,7 +484,7 @@ table.listing {
 }
 
 .filter-title {
-  float: left;
+  float: inline-start;
   font-size: 0.95em;
   padding: 1em;
   margin: 0 1em 0 0;
@@ -498,7 +498,7 @@ table.listing {
 
   li {
     padding: 0.8em;
-    float: left;
+    float: inline-start;
   }
 
   &__icon {
@@ -532,7 +532,7 @@ table.listing {
         border: 0;
 
         .bulk-action-checkbox {
-          float: left;
+          float: inline-start;
           margin: -0.5em 0.5em 0.5em -0.75em;
         }
 

client/scss/layouts/_report.scss

@@ -18,7 +18,7 @@
   }
 
   &__actions > div {
-    float: right;
+    float: inline-end;
     display: block;
     margin-inline-end: theme('spacing.3');
   }

client/scss/overrides/_vendor.datetimepicker.scss

@@ -41,7 +41,7 @@
   }
 
   .xdsoft_datepicker {
-    float: left;
+    float: inline-start;
     margin-inline-start: 8px;
   }
 
@@ -90,7 +90,7 @@
   }
 
   .xdsoft_prev {
-    float: left;
+    float: inline-start;
 
     &:before {
       mask-image: url('#{$images-root}icons/arrow-left.svg');
@@ -98,7 +98,7 @@
   }
 
   .xdsoft_today_button {
-    float: left;
+    float: inline-start;
     margin-inline-start: 5px;
 
     &:before {
@@ -107,7 +107,7 @@
   }
 
   .xdsoft_next {
-    float: right;
+    float: inline-end;
 
     &:before {
       mask-image: url('#{$images-root}icons/arrow-right.svg');
@@ -116,7 +116,7 @@
 
   .xdsoft_timepicker {
     min-width: 70px;
-    float: left;
+    float: inline-start;
     text-align: center;
     margin-inline-start: 8px;
     margin-top: 0;
@@ -176,7 +176,7 @@
     line-height: 20px;
     font-weight: bold;
     background-color: theme('colors.surface-page');
-    float: left;
+    float: inline-start;
     width: 182px;
     text-align: center;
     cursor: pointer;

client/scss/tools/_mixins.grid.scss

@@ -21,7 +21,7 @@ $padding: math.div($grid-gutter-width, 2);
 // Our column container
 @mixin column($x, $padding: $padding, $grid-columns: $grid-columns) {
   display: inline;
-  float: left;
+  float: inline-start;
   width: 100% * math.div($x, $grid-columns);
   padding-inline-end: $padding;
   padding-inline-start: $padding;

client/src/components/CommentApp/components/Comment/style.scss

@@ -82,7 +82,7 @@
     margin-top: 10px;
 
     button {
-      float: right;
+      float: inline-end;
     }
 
     &::after {
@@ -104,7 +104,7 @@
 
     button {
       height: 26px;
-      float: right;
+      float: inline-end;
       margin-inline-start: 5px;
       color: theme('colors.white.DEFAULT');
       background-color: theme('colors.critical.200');

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -32,7 +32,7 @@
   }
 
   &__action {
-    float: left;
+    float: inline-start;
     margin-inline-start: 5px;
     border-radius: 5px;
     width: 30px;

client/src/components/CommentApp/components/CommentReply/style.scss

@@ -67,7 +67,7 @@
     margin-top: 10px;
 
     button {
-      float: right;
+      float: inline-end;
     }
 
     &::after {
@@ -89,7 +89,7 @@
 
     button {
       height: 26px;
-      float: right;
+      float: inline-end;
       margin-inline-start: 5px;
       color: theme('colors.white.DEFAULT');
       background-color: theme('colors.critical.200');

client/src/includes/initStimulus.test.js

@@ -13,7 +13,7 @@ class WordCountController extends Controller {
     const output = document.createElement('output');
     output.setAttribute('name', 'word-count');
     output.setAttribute('for', this.element.id);
-    output.style.float = 'right';
+    output.style.float = 'inline-end';
     this.element.insertAdjacentElement('beforebegin', output);
     this.output = output;
     this.updateCount();

client/tailwind.config.js

@@ -184,7 +184,7 @@ module.exports = {
   ],
   corePlugins: {
     ...vanillaRTL.disabledCorePlugins,
-    // Disable float and clear which have poor RTL support.
+    // Disable float and clear. Use Flexbox or Grid instead.
     float: false,
     clear: false,
     // Disable text-transform so we don’t rely on uppercasing text.

docs/getting_started/tutorial.md

@@ -622,7 +622,7 @@ Edit your blog page template `blog_page.html` to include the images section:
 
     <!-- Add this: -->
     {% for item in page.gallery_images.all %}
-        <div style="float: left; margin: 10px">
+        <div style="float: inline-start; margin: 10px">
             {% image item.image fill-320x240 %}
             <p>{{ item.caption }}</p>
         </div>
@@ -793,7 +793,7 @@ Finally, migrate your database by running `python manage.py makemigrations` and
     {{ page.body|richtext }}
 
     {% for item in page.gallery_images.all %}
-        <div style="float: left; margin: 10px">
+        <div style="float: inline-start; margin: 10px">
             {% image item.image fill-320x240 %}
             <p>{{ item.caption }}</p>
         </div>

wagtail/admin/templates/wagtailadmin/notifications/base.html

@@ -72,14 +72,14 @@
                     }
                     body[yahoo] .img {
                         width: 130px !important;
-                        float:left;
+                        float: inline-start;
                     }
                     body[yahoo] .img img {
                         width:100% !important;
                     }
                     body[yahoo] .text {
                         width: 150px !important;
-                        float:right;
+                        float: inline-end;
                     }
             {% endblock %}
         </style>