feat(eslint): automigration rules for bootstrap position helpers (#6335)

## 📄 Description

- Added information in the migration guide of the removal of bootstrap
position helpers
- Added auto migration rules for the helper classes

---------

Co-authored-by: Alizé Debray <[email protected]>

Author: leagrdv

.changeset/slow-breads-attack.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added information in the migration guide regarding the removal of position helpers.

packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts

@@ -192,9 +192,9 @@ export class MigrationV99Component extends LitElement {
                 </li>
                 <li class="mb-16">
                   <p>
+                    <span data-info="automigration" class="tag tag-sm tag-info">🪄 migration rule</span>
                     The gap classes naming (<code>gap-*</code>, <code>row-gap-*</code>,
                     <code>column-gap-*</code>) has changed to pixel-based names
-                    <span class="tag tag-sm tag-danger">breaking</span> <span class="tag tag-sm tag-info">🪄 migration rule</span>
                   </p>
                   <ul>
                     <li><code>*-1</code> is now <code>*-4</code></li>
@@ -210,7 +210,6 @@ export class MigrationV99Component extends LitElement {
               <ul>
                 <li class="mb-16">
                   <p>
-                    <span data-info="automigration" class="tag tag-sm tag-info">🪄 migration rule</span>
                     Changed the percentage sizing utility classes (<code>w-*</code>,
                     <code>h-*</code>, <code>mh-*</code>, <code>mw-*</code>) naming
                   </p>
@@ -279,7 +278,6 @@ export class MigrationV99Component extends LitElement {
                     We recommend using the <code>.elevation-*</code> classes instead.
                   </p>
                 </li>
-
                 <li class="mb-16">
                   <p>
                     <span data-info="automigration" class="tag tag-sm tag-info">🪄 migration rule</span>
@@ -367,6 +365,18 @@ export class MigrationV99Component extends LitElement {
                     <li><code>.rounded-{top/bottom/start/end}</code> are now <code>.rounded-{top/bottom/start/end}-4</code></li>
                   </ul>
                 </li>
+                <li class="mb-16">
+                  <p>
+                    <span data-info="automigration" class="tag tag-sm tag-info">🪄 migration rule</span>
+                    Removed some position helper classes that can be replaced with a combination of other utilities
+                  </p>
+                  <ul>
+                    <li><code>fixed-top</code> is now <code>position-fixed top-0 start-0 end-0 z-fixed</code></li>
+                    <li><code>fixed-bottom</code> is now <code>position-fixed bottom-0 start-0 end-0 z-fixed</code></li>
+                    <li><code>sticky-top</code> is now <code>position-sticky top-0 z-header</code></li>
+                    <li><code>sticky-bottom</code> is now <code>position-sticky bottom-0 z-header</code></li>
+                  </ul>
+                </li>
                 <li class="mb-16">
                   <p>
                     Removed all text color utility classes (<code>.text-*</code>)

packages/eslint/docs/rules/html/migrations/no-deprecated-position-helpers.md

@@ -0,0 +1,30 @@
+# `no-deprecated-position-helpers`
+
+Flags deprecated Bootstrap position helpers `fixed-[top/bottom]` and `sticky-[top/bottom]` classes and replace them with a combination of other utility classes.
+
+- Type: problem
+- 🔧 Supports autofix (--fix)
+
+## Rule Options
+
+This rule does not have any configuration options.
+
+## Example
+
+### ❌ Invalid Code
+
+```html
+<div class="fixed-top">Content</div>
+<div class="fixed-bottom">Content</div>
+<div class="sticky-top">Content</div>
+<div class="sticky-bottom">Content</div>
+```
+
+### ✅ Valid Code
+
+```html
+<div class="position-fixed top-0 start-0 end-0 z-fixed">Content</div>
+<div class="position-fixed bottom-0 start-0 end-0 z-fixed">Content</div>
+<div class="position-sticky top-0 z-header">Content</div>
+<div class="position-sticky bottom-0 z-header">Content</div>
+```

packages/eslint/src/rules/html/migrations/index.ts

@@ -29,6 +29,9 @@ import noDeprecatedFontSizesRule, {
 import noDeprecatedChipFilter, {
   name as noDeprecatedChipFilterName,
 } from './no-deprecated-chip-filter';
+import noDeprecatedPositionHelpersRule, {
+  name as noDeprecatedPositionHelpersRuleName,
+} from './no-deprecated-position-helpers';
 
 import {
   rulePhase1 as noDeprecatedBreakpointsRulePhase1,
@@ -54,9 +57,10 @@ export const htmlMigrationRules = {
   [noFormTextRuleName]: noFormTextRule,
   [noDeprecatedFontWeightRuleName]: noDeprecatedFontWeightRule,
   [noDeprecatedShadowUtilitiesRuleName]: noDeprecatedShadowUtilitiesRule,
-  [noDeprecatedElevationUtilitiesRuleName]: noDeprecatedElevationUtilitiesRule,
   [noDeprecatedHClearfixName]: noDeprecatedHClearfix,
   [noDeprecatedHVisuallyhiddenRuleName]: noDeprecatedHVisuallyhiddenRule,
+  [noDeprecatedPositionHelpersRuleName]: noDeprecatedPositionHelpersRule,
+  [noDeprecatedElevationUtilitiesRuleName]: noDeprecatedElevationUtilitiesRule,
   [noDeprecatedFontSizesRuleName]: noDeprecatedFontSizesRule,
   [noDeprecatedChipFilterName]: noDeprecatedChipFilter,
 };

packages/eslint/src/rules/html/migrations/no-deprecated-position-helpers.ts

@@ -0,0 +1,23 @@
+import { createClassUpdateRule } from '../../../utils/create-class-update-rule';
+import { generateReplacedClassMessages } from '../../../utils/generate-messages';
+import { generateReplacedClassMutations } from '../../../utils/generate-mutations';
+
+export const name = 'no-deprecated-position-helpers';
+
+const classesMap = [
+  { old: 'fixed-top', new: 'position-fixed top-0 start-0 end-0 z-fixed' },
+  { old: 'fixed-bottom', new: 'position-fixed bottom-0 start-0 end-0 z-fixed' },
+  { old: 'sticky-top', new: 'position-sticky top-0 z-header' },
+  { old: 'sticky-bottom', new: 'position-sticky bottom-0 z-header' },
+];
+
+export const data = generateReplacedClassMutations(classesMap);
+
+export default createClassUpdateRule({
+  name,
+  type: 'problem',
+  description:
+    'Flags deprecated bootstrap position helpers "fixed-{top|bottom}" and "sticky-{top|bottom}" classes and replace them with a combination of other utility classes.',
+  messages: generateReplacedClassMessages(classesMap),
+  mutations: data,
+});

packages/eslint/test/rules/html/migrations/no-deprecated-position-helpers.spec.ts

@@ -0,0 +1,14 @@
+import rule, {
+  name,
+  data,
+} from '../../../../src/rules/html/migrations/no-deprecated-position-helpers';
+import { generatedDataTester } from '../../../utils/generated-data-tester';
+
+const validData = [
+  'position-fixed top-0 start-0 end-0 z-fixed',
+  'position-fixed bottom-0 start-0 end-0 z-fixed',
+  'position-sticky top-0 z-header',
+  'position-sticky bottom-0 z-header',
+];
+
+generatedDataTester(name, rule, data, validData);