chore(deps): update dependency eslint-plugin-testing-library to v7 (#…

…3967) * chore(deps): update dependency eslint-plugin-testing-library to v7 * chore: remove @eslint/compat dependency * chore: lint md files UITOOL-284 --------- Co-authored-by: renovate-coveo[bot] <115253437+renovate-coveo[bot]@users.noreply.github.com> Co-authored-by: Germain Bergeron <[email protected]>
coveo · Dec 5, 2024 · 89ccad4 · 89ccad4
1 parent b3a514d
commit 89ccad4
Show file tree

Hide file tree

Showing 17 changed files with 119 additions and 240 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,4 +1,3 @@
-import {fixupPluginRules} from '@eslint/compat';
 import vitest from '@vitest/eslint-plugin';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import eslintPluginImport from 'eslint-plugin-import-x';
@@ -224,7 +223,7 @@ export default tsEslint.config(
     {
         files: ['**/*.spec.ts', '**/*.spec.tsx'],
         plugins: {
-            'testing-library': fixupPluginRules(eslintPluginTestingLibrary),
+            'testing-library': eslintPluginTestingLibrary,
             vitest,
         },
         settings: {

diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
         "@commitlint/cli": "19.6.0",
         "@commitlint/config-conventional": "19.6.0",
         "@coveo/semantic-monorepo-tools": "2.5.7",
-        "@eslint/compat": "1.2.3",
         "@sindresorhus/slugify": "2.2.1",
         "@types/node": "22.10.1",
         "@vitest/eslint-plugin": "1.1.12",
@@ -64,7 +63,7 @@
         "eslint-plugin-react": "7.37.2",
         "eslint-plugin-react-hooks": "5.0.0",
         "eslint-plugin-react-refresh": "0.4.14",
-        "eslint-plugin-testing-library": "6.5.0",
+        "eslint-plugin-testing-library": "7.0.0",
         "eslint-plugin-unused-imports": "4.1.4",
         "globals": "15.12.0",
         "husky": "9.1.7",

diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
diff --git a/packages/website/src/docs/Button.md b/packages/website/src/docs/Button.md
@@ -42,5 +42,5 @@ When the label is hidden, add a tooltip displaying the action.
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Link](https://plasma.coveo.com/foundations/Links) - When you need to redirect users to another section or website.
--   [Actionable items](https://plasma.coveo.com/form/ActionableItem) - When you need to group several less important actions together.
+- [Link](https://plasma.coveo.com/foundations/Links) - When you need to redirect users to another section or website.
+- [Actionable items](https://plasma.coveo.com/form/ActionableItem) - When you need to group several less important actions together.
diff --git a/packages/website/src/docs/Checkbox.md b/packages/website/src/docs/Checkbox.md
@@ -46,6 +46,6 @@ The partially selected state is only allowed with checkboxes that have children
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Multi select](https://plasma.coveo.com/form/MultiSelect) - When there are more than seven options.
--   [Toggle](https://plasma.coveo.com/form/FlatSelect) - When the result applies immediately, for example with a change of display.
--   [Radio button](https://plasma.coveo.com/form/RadioButton) - When options are mutually exclusive.
+- [Multi select](https://plasma.coveo.com/form/MultiSelect) - When there are more than seven options.
+- [Toggle](https://plasma.coveo.com/form/FlatSelect) - When the result applies immediately, for example with a change of display.
+- [Radio button](https://plasma.coveo.com/form/RadioButton) - When options are mutually exclusive.
diff --git a/packages/website/src/docs/ChildForm.md b/packages/website/src/docs/ChildForm.md
@@ -5,5 +5,5 @@ If the user navigates between options within the set, keep track of their previo
 
 # Related Components
 
--   [Checkbox](https://plasma.coveo.com/form/Checkbox)
--   [Radio Buttons](https://plasma.coveo.com/form/RadioButton)
+- [Checkbox](https://plasma.coveo.com/form/Checkbox)
+- [Radio Buttons](https://plasma.coveo.com/form/RadioButton)
diff --git a/packages/website/src/docs/CodeEditor.md b/packages/website/src/docs/CodeEditor.md
@@ -6,8 +6,8 @@ Be **extremely careful** when allowing users to edit code, as it greatly increas
 
 The code editor should:
 
--   Preferably take the full width of the section it appears in to reduce line wrap friction.
--   Be long enough to display a significant portion of the code and allow users to review it comfortably.
+- Preferably take the full width of the section it appears in to reduce line wrap friction.
+- Be long enough to display a significant portion of the code and allow users to review it comfortably.
 
 ## Labeling
 
@@ -34,4 +34,4 @@ If possible, consider adding a way for users to test their code before moving on
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [JSON editor](https://plasma.coveo.com/form/JSONEditor) - When the user needs to input code using JSON syntax.
+- [JSON editor](https://plasma.coveo.com/form/JSONEditor) - When the user needs to input code using JSON syntax.
diff --git a/packages/website/src/docs/FlatSelectConnected.md b/packages/website/src/docs/FlatSelectConnected.md
@@ -12,8 +12,8 @@ You can offer a flat select as a way to switch views, but tabs should be preferr
 
 ## Labeling
 
--   Keep titles short, preferably **under three words**.
--   Make option labels consistent and easy to scan.
+- Keep titles short, preferably **under three words**.
+- Make option labels consistent and easy to scan.
 
 ## Flat Select and Tabs
 
@@ -23,6 +23,6 @@ The flat select and the tab set look similar and are both designed for view swit
 
 ## Related Components
 
--   [Radio buttons](https://plasma.coveo.com/form/RadioButton) - When the result doesn't apply immediately.
--   [Single select](https://plasma.coveo.com/form/SingleSelect) - Alternative to a flat select in the context of a form.
--   [Tabs](https://plasma.coveo.com/navigation/Tabs) - When in a navigational control context.
+- [Radio buttons](https://plasma.coveo.com/form/RadioButton) - When the result doesn't apply immediately.
+- [Single select](https://plasma.coveo.com/form/SingleSelect) - Alternative to a flat select in the context of a form.
+- [Tabs](https://plasma.coveo.com/navigation/Tabs) - When in a navigational control context.
diff --git a/packages/website/src/docs/MultiSelectConnected.md b/packages/website/src/docs/MultiSelectConnected.md
@@ -32,13 +32,13 @@ Allow the addition of custom values only when it doesn't increase the risk of fa
 
 Examples:
 
--   When users select countries: do not allow custom values.
--   When users build a grocery list: allow custom values so that users can request new products that may not be on the list yet.
+- When users select countries: do not allow custom values.
+- When users build a grocery list: allow custom values so that users can request new products that may not be on the list yet.
 
 # Related Components
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Multiline box](https://plasma.coveo.com/form/MultilineBox) - When space is not an issue or when legibility of the selected option is critical.
--   [Checkbox](https://plasma.coveo.com/form/Checkbox) - When there are seven options or less.
--   [Single select](https://plasma.coveo.com/form/SingleSelect) - When users can select only one option from the list.
+- [Multiline box](https://plasma.coveo.com/form/MultilineBox) - When space is not an issue or when legibility of the selected option is critical.
+- [Checkbox](https://plasma.coveo.com/form/Checkbox) - When there are seven options or less.
+- [Single select](https://plasma.coveo.com/form/SingleSelect) - When users can select only one option from the list.
diff --git a/packages/website/src/docs/RadioSelectConnected.md b/packages/website/src/docs/RadioSelectConnected.md
@@ -6,9 +6,9 @@ Radio buttons always come in a set of two or more options.
 
 When presenting only two options,
 
--   For an on/off choice, use a [Toggle](https://plasma.coveo.com/form/FlatSelect). Example: Enable dark mode.
--   For a yes/no choice, such as opt in/out, use a stand-alone [Checkbox](https://plasma.coveo.com/form/Checkbox). Example: Receive email notification.
--   When it’s neither, use a radio button. Examples: Choose between red or blue.
+- For an on/off choice, use a [Toggle](https://plasma.coveo.com/form/FlatSelect). Example: Enable dark mode.
+- For a yes/no choice, such as opt in/out, use a stand-alone [Checkbox](https://plasma.coveo.com/form/Checkbox). Example: Receive email notification.
+- When it’s neither, use a radio button. Examples: Choose between red or blue.
 
 Aim for seven or less options. If that's impossible, consider using the [Single select](https://plasma.coveo.com/form/SingleSelect) instead.
 
@@ -34,9 +34,9 @@ Use a consistent writing style for all options in the list.
 
 Always preselect an option as the default. The default option can identify:
 
--   The recommended path when you want to assist the user.
--   The most commonly selected option when you want to help expedite the task.
-    If preselecting a default option increases the risk of irreversible changes or security issues, always use the least risky option as the default.
+- The recommended path when you want to assist the user.
+- The most commonly selected option when you want to help expedite the task.
+  If preselecting a default option increases the risk of irreversible changes or security issues, always use the least risky option as the default.
 
 When the user needs to be able to easily revert to the default option, for instance when testing configurations, add “(recommended)” or “(default)” to the appropriate option label.
 
@@ -46,6 +46,6 @@ If the choice is optional, add a neutral option (e.g., "None") so the user can e
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Single select](https://plasma.coveo.com/form/SingleSelect) - When there are more than seven options.
--   [Toggle](https://plasma.coveo.com/form/FlatSelect) - When the options are binary (e.g., on/off).
--   [Checkbox](https://plasma.coveo.com/form/Checkbox) - When the user can chose any number of options (from none to all of them).
+- [Single select](https://plasma.coveo.com/form/SingleSelect) - When there are more than seven options.
+- [Toggle](https://plasma.coveo.com/form/FlatSelect) - When the options are binary (e.g., on/off).
+- [Checkbox](https://plasma.coveo.com/form/Checkbox) - When the user can chose any number of options (from none to all of them).
diff --git a/packages/website/src/docs/SingleSelectConnected.md b/packages/website/src/docs/SingleSelectConnected.md
@@ -32,12 +32,12 @@ Allow the addition of custom values only when it doesn't increase the risk of fa
 
 Examples:
 
--   When users select a country: do not allow custom values.
--   When users select their favorite color: allow custom values.
+- When users select a country: do not allow custom values.
+- When users select their favorite color: allow custom values.
 
 # Related Components
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Radio buttons](https://plasma.coveo.com/form/RadioButton) - When there are seven options or less.
--   [Multi select](https://plasma.coveo.com/form/MultiSelect) - When users can select multiple options from the list.
+- [Radio buttons](https://plasma.coveo.com/form/RadioButton) - When there are seven options or less.
+- [Multi select](https://plasma.coveo.com/form/MultiSelect) - When users can select multiple options from the list.
diff --git a/packages/website/src/docs/Slider.md b/packages/website/src/docs/Slider.md
@@ -2,9 +2,9 @@
 
 A slider is appropriate when providing **an exact value is not important**. Sliders typically allow users to adjust the intensity of an effect, such as a percentage of opacity, or when an approximate value is sufficient, for example when choosing a flight departure time. It helps visualize a range of allowed values. Consider the following:
 
--   Use a slider when page real estate is not an issue and when visualizing the range helps users make more informed choices.
--   The slider should have a range of up to 100 values.
--   If the range is short (i.e., 5 values or less) or large (i.e., over 50 values), consider using a [numeric input](https://plasma.coveo.com/form/NumericInput) instead.
+- Use a slider when page real estate is not an issue and when visualizing the range helps users make more informed choices.
+- The slider should have a range of up to 100 values.
+- If the range is short (i.e., 5 values or less) or large (i.e., over 50 values), consider using a [numeric input](https://plasma.coveo.com/form/NumericInput) instead.
 
 Use sliders carefully, as they can be difficult to control on smaller devices or when the range is very large but the space is limited.
 

diff --git a/packages/website/src/docs/TextArea.md b/packages/website/src/docs/TextArea.md
@@ -32,5 +32,5 @@ If the input can be left blank, the tag “(Optional)” must appear next to the
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Text input](https://plasma.coveo.com/form/TextInput) - When users should enter no more than one line of text.
--   [Code editor](https://plasma.coveo.com/form/CodeEditor) - When users need to enter code rather than plain text.
+- [Text input](https://plasma.coveo.com/form/TextInput) - When users should enter no more than one line of text.
+- [Code editor](https://plasma.coveo.com/form/CodeEditor) - When users need to enter code rather than plain text.
diff --git a/packages/website/src/docs/TextInput.md b/packages/website/src/docs/TextInput.md
@@ -17,8 +17,8 @@ Help text provides extra guidance on what information to provide or how the user
 Help text should be **short, preferably on one line**.
 There are two ways to provide help text:
 
--   Written instructions (e.g., "Provide your business email.")
--   Example (e.g., "E.g., [email protected]")
+- Written instructions (e.g., "Provide your business email.")
+- Example (e.g., "E.g., [email protected]")
 
 A combination of both is also acceptable.
 
@@ -37,6 +37,6 @@ If providing the information is optional, the text input will be automatically t
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Text Area](https://plasma.coveo.com/form/TextArea) - When users need to enter longer text.
--   [Numeric input](https://plasma.coveo.com/form/NumericInput) - When only numerical characters are allowed.
--   [Single select](https://plasma.coveo.com/form/SingleSelect) - When users need to select an option from a list instead.
+- [Text Area](https://plasma.coveo.com/form/TextArea) - When users need to enter longer text.
+- [Numeric input](https://plasma.coveo.com/form/NumericInput) - When only numerical characters are allowed.
+- [Single select](https://plasma.coveo.com/form/SingleSelect) - When users need to select an option from a list instead.
diff --git a/packages/website/src/docs/Toast.md b/packages/website/src/docs/Toast.md
@@ -1,8 +1,8 @@
 # Best Practices
 
--   Only include information that is relevant to the performed action.
--   Toasts may contain actions or links, preferably only one.
--   Toasts should not prevent users from interacting with the page content. However, if it is unavoidable, consider using a [prompt modal](https://plasma.coveo.com/layout/ModalWindow) instead.
+- Only include information that is relevant to the performed action.
+- Toasts may contain actions or links, preferably only one.
+- Toasts should not prevent users from interacting with the page content. However, if it is unavoidable, consider using a [prompt modal](https://plasma.coveo.com/layout/ModalWindow) instead.
 
 # Variations
 
@@ -18,6 +18,6 @@ The result of the operation triggering the toast determines the type of toast to
 
 If your use case doesn't match the guidelines above, consider using one of the following components instead:
 
--   [Prompt modal](https://plasma.coveo.com/layout/ModalWindow) - When users shouldn't be able to interact with the page content while the message is displayed.
--   [Info box](https://plasma.coveo.com/layout/InfoBox) - When the message isn't related to an action the user has performed.
--   [Tooltip](https://plasma.coveo.com/feedback/Tooltip) - When you want to provide additional information about an element on screen.
+- [Prompt modal](https://plasma.coveo.com/layout/ModalWindow) - When users shouldn't be able to interact with the page content while the message is displayed.
+- [Info box](https://plasma.coveo.com/layout/InfoBox) - When the message isn't related to an action the user has performed.
+- [Tooltip](https://plasma.coveo.com/feedback/Tooltip) - When you want to provide additional information about an element on screen.
diff --git a/packages/website/src/docs/Tooltip.md b/packages/website/src/docs/Tooltip.md
@@ -1,11 +1,11 @@
 # Do
 
--   The text must be direct and to the point, ideally a max of 3 lines. Link to external documentation when detailed explanations are required.
--   Tooltips must **appear in empty areas** of the screen, or on top of less relevant information.
--   Only show **one Tooltip at a time**.
+- The text must be direct and to the point, ideally a max of 3 lines. Link to external documentation when detailed explanations are required.
+- Tooltips must **appear in empty areas** of the screen, or on top of less relevant information.
+- Only show **one Tooltip at a time**.
 
 # Do Not
 
--   Use tooltips to display **required information**. Pertinent information must be presented in the regular text.
--   Add tooltips that display the same text as what **can already be read in the interface** (e.g., a tooltip with "Print" is not necessary on a button with the label “Print”).
--   Use tooltips for information regarding **errors or warnings**. Displaying this information is too important to depend on hovering.
+- Use tooltips to display **required information**. Pertinent information must be presented in the regular text.
+- Add tooltips that display the same text as what **can already be read in the interface** (e.g., a tooltip with "Print" is not necessary on a button with the label “Print”).
+- Use tooltips for information regarding **errors or warnings**. Displaying this information is too important to depend on hovering.