Update eslint and stylelint dependencies (#5098)

* chore(project): update eslint to 8.6.0

* chore(project): update stylelint to 13.0.0

* chore(project): fix eslint and stylelint violations

* chore(project): sync offline mirror

package.json

@@ -55,7 +55,7 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
-    "eslint": "^6.0.0",
+    "eslint": "^6.8.0",
     "eslint-config-carbon": "10.4.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
@@ -69,7 +69,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "rimraf": "^3.0.0",
-    "stylelint": "^10.0.1"
+    "stylelint": "^13.0.0"
   },
   "husky": {
     "hooks": {

packages/components/src/.eslintrc.js

@@ -19,7 +19,12 @@ module.exports = {
   plugins: ['jsdoc'],
   rules: {
     'jsdoc/check-param-names': 2,
-    'jsdoc/check-tag-names': 2,
+    'jsdoc/check-tag-names': [
+      'error',
+      {
+        definedTags: ['jest-environment'],
+      },
+    ],
     'jsdoc/check-types': 2,
     'comma-dangle': [
       2,
@@ -39,6 +44,7 @@ module.exports = {
       2,
       { allowAfterThis: true, allowAfterSuper: true },
     ],
+    strict: ['error', 'global'],
   },
   settings: {
     jsdoc: {

packages/components/src/components/dropdown/dropdown.js

@@ -465,7 +465,7 @@ class Dropdown extends mixin(
    * Enum for navigating backward/forward.
    * @readonly
    * @member Dropdown.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */

packages/components/src/components/floating-menu/floating-menu.js

@@ -18,7 +18,7 @@ import on from '../../globals/js/misc/on';
 
 /**
  * The structure for the position of floating menu.
- * @typedef {Object} FloatingMenu~position
+ * @typedef {object} FloatingMenu~position
  * @property {number} left The left position.
  * @property {number} top The top position.
  * @property {number} right The right position.
@@ -27,14 +27,14 @@ import on from '../../globals/js/misc/on';
 
 /**
  * The structure for the size of floating menu.
- * @typedef {Object} FloatingMenu~size
+ * @typedef {object} FloatingMenu~size
  * @property {number} width The width.
  * @property {number} height The height.
  */
 
 /**
  * The structure for the position offset of floating menu.
- * @typedef {Object} FloatingMenu~offset
+ * @typedef {object} FloatingMenu~offset
  * @property {number} top The top position.
  * @property {number} left The left position.
  */

packages/components/src/components/inline-loading/inline-loading.js

@@ -103,7 +103,7 @@ class InlineLoading extends mixin(
 
   /**
    * The list of states.
-   * @type {Object<string, string>}
+   * @type {object<string, string>}
    */
   static states /* #__PURE_CLASS_PROPERTY__ */ = {
     INACTIVE: 'inactive',

packages/components/src/components/overflow-menu/overflow-menu.js

@@ -23,7 +23,7 @@ import on from '../../globals/js/misc/on';
 
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
- * @type {Object<string, string>}
+ * @type {object<string, string>}
  */
 const triggerButtonPositionProps = /* #__PURE__ */ (() => ({
   [DIRECTION_TOP]: 'bottom',
@@ -34,7 +34,7 @@ const triggerButtonPositionProps = /* #__PURE__ */ (() => ({
 
 /**
  * Determines how the position of arrow should affect the floating menu position.
- * @type {Object<string, number>}
+ * @type {object<string, number>}
  */
 const triggerButtonPositionFactors = /* #__PURE__ */ (() => ({
   [DIRECTION_TOP]: -2,

packages/components/src/components/progress-indicator/progress-indicator.js

@@ -33,7 +33,7 @@ class ProgressIndicator extends mixin(createComponent, initComponentBySearch) {
 
     /**
      * The component state.
-     * @type {Object}
+     * @type {object}
      */
     this.state = {
       /**

packages/components/src/components/tabs/tabs.js

@@ -237,7 +237,7 @@ class Tab extends ContentSwitcher {
    * Enum for navigating backward/forward.
    * @readonly
    * @member Tab.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */

packages/components/src/components/ui-shell/header-nav.js

@@ -108,7 +108,7 @@ export default class HeaderNav extends mixin(
    * Enum for navigating backward/forward.
    * @readonly
    * @member Header.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */

packages/components/src/components/ui-shell/header-submenu.js

@@ -297,7 +297,7 @@ export default class HeaderSubmenu extends mixin(
    * Enum for navigating backward/forward.
    * @readonly
    * @member HeaderSubmenu.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */

packages/components/src/components/ui-shell/navigation-menu.js

@@ -273,7 +273,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * Enum for navigating backward/forward.
    * @readonly
    * @member NavigationMenuPanel.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */

packages/components/src/components/ui-shell/side-nav.js

@@ -36,7 +36,7 @@ export default class SideNav extends mixin(
    * Enum for toggling side nav visibility
    * @readonly
    * @member SideNav.state
-   * @type {Object}
+   * @type {object}
    * @property {string} EXPANDED Opening/visible
    * @property {string} COLLAPSED Closing/hidden
    */
@@ -116,7 +116,7 @@ export default class SideNav extends mixin(
    * If `options` is specified in the constructor, {@linkcode SideNav.create .create()}, or {@linkcode SideNav.init .init()},
    * properties in this object are overriden for the instance being create and how {@linkcode SideNav.init .init()} works.
    * @member SideNav.options
-   * @type {Object}
+   * @type {object}
    * @property {string} selectorInit The data attribute to find side navs.
    */
   static options /* #__PURE_CLASS_PROPERTY__ */ = {

packages/components/src/globals/js/misc/on-focus-by-keyboard.js

@@ -11,7 +11,7 @@ export default function onFocusByKeyboard(node, name, callback) {
   const focusoutEventName = hasFocusout ? 'focusout' : 'blur';
   /**
    * Event types supported by this function
-   * @type {Object<string, string>}
+   * @type {object<string, string>}
    */
   const supportedEvents = {
     focus: focusinEventName,

packages/components/src/globals/js/mixins/create-component.js

@@ -39,7 +39,7 @@ export default function(ToMix) {
 
       /**
        * The component options.
-       * @type {Object}
+       * @type {object}
        */
       this.options = Object.assign(
         Object.create(this.constructor.options),

packages/components/src/globals/js/mixins/evented-state.js

@@ -108,7 +108,7 @@ export default function(ToMix) {
      * Classes inheriting {@link EventedState `EventedState`} should override this function.
      * @function EventedState#shouldStateBeChanged
      * @param {string} [state] The new state. Can be an omitted, which means toggling.
-     * @param {Object} [detail]
+     * @param {object} [detail]
      *   The object that should be put to event details that is fired before/after changing state.
      *   Can have a `group` property, which specifies what state to be changed.
      * @returns {boolean}

packages/components/tests/spec/watch_spec.js

@@ -1,4 +1,14 @@
-import { delay } from 'bluebird'; // For testing on browsers not supporting Promise
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable max-classes-per-file */
+
+// For testing on browsers not supporting Promise
+import { delay } from 'bluebird';
 import settings from '../../src/globals/js/settings';
 import mixin from '../../src/globals/js/misc/mixin';
 import createComponent from '../../src/globals/js/mixins/create-component';

packages/eslint-config-carbon/index.js

@@ -29,7 +29,12 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
     'jsdoc/check-param-names': 2,
-    'jsdoc/check-tag-names': 2,
+    'jsdoc/check-tag-names': [
+      'error',
+      {
+        definedTags: ['jest-environment'],
+      },
+    ],
     'jsdoc/check-types': 2,
     'jsx-a11y/no-static-element-interactions': 1,
     'jsx-a11y/no-noninteractive-element-interactions': 1,

packages/eslint-config-carbon/package.json

@@ -21,15 +21,15 @@
   },
   "dependencies": {
     "babel-eslint": "^10.0.1",
-    "eslint-config-airbnb": "^17.0.0",
-    "eslint-config-airbnb-base": "^13.0.0",
-    "eslint-config-prettier": "^5.0.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsdoc": "^8.4.6",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-jsdoc": "^20.3.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "eslint-restricted-globals": "^0.2.0"
   }
 }

packages/react/src/components/Icon/Icon.js

@@ -12,7 +12,7 @@ import icons from 'carbon-icons';
 
 /**
  * The icons list object from `carbon-icons`.
- * @type {Object}
+ * @type {object}
  */
 let iconsList = icons;
 

packages/react/src/components/OverflowMenu/OverflowMenu.js

@@ -34,7 +34,7 @@ const on = (element, ...args) => {
 
 /**
  * The CSS property names of the arrow keyed by the floating menu direction.
- * @type {Object<string, string>}
+ * @type {object<string, string>}
  */
 const triggerButtonPositionProps = {
   [DIRECTION_TOP]: 'bottom',
@@ -43,7 +43,7 @@ const triggerButtonPositionProps = {
 
 /**
  * Determines how the position of arrow should affect the floating menu position.
- * @type {Object<string, number>}
+ * @type {object<string, number>}
  */
 const triggerButtonPositionFactors = {
   [DIRECTION_TOP]: -2,

packages/react/src/components/Tabs/Tabs-story.scss

@@ -5,7 +5,9 @@
 $css--font-face: false;
 $css--body: false;
 $css--reset: false;
-@import '~carbon-components/src/globals/scss/css--helpers'; // SEE THE NOTE ABOVE
+
+// SEE THE NOTE ABOVE
+@import '~carbon-components/src/globals/scss/css--helpers';
 
 .bx--tabs--container ~ div {
   height: 320px;

packages/react/src/internal/FloatingMenu.js

@@ -13,7 +13,7 @@ import window from 'window-or-global';
 
 /**
  * The structure for the position of floating menu.
- * @typedef {Object} FloatingMenu~position
+ * @typedef {object} FloatingMenu~position
  * @property {number} left The left position.
  * @property {number} top The top position.
  * @property {number} right The right position.
@@ -22,14 +22,14 @@ import window from 'window-or-global';
 
 /**
  * The structure for the size of floating menu.
- * @typedef {Object} FloatingMenu~size
+ * @typedef {object} FloatingMenu~size
  * @property {number} width The width.
  * @property {number} height The height.
  */
 
 /**
  * The structure for the position offset of floating menu.
- * @typedef {Object} FloatingMenu~offset
+ * @typedef {object} FloatingMenu~offset
  * @property {number} top The top position.
  * @property {number} left The left position.
  */

packages/stylelint-config-elements/package.json

@@ -20,14 +20,14 @@
     "access": "public"
   },
   "peerDependencies": {
-    "stylelint": "^9.10.1"
+    "stylelint": "^13.0.0"
   },
   "dependencies": {
-    "stylelint-config-prettier": "^4.0.0",
-    "stylelint-prettier": "^1.0.6",
-    "stylelint-scss": "^3.5.3"
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-prettier": "^1.1.2",
+    "stylelint-scss": "^3.13.0"
   },
   "devDependencies": {
-    "stylelint": "^9.10.1"
+    "stylelint": "^13.0.0"
   }
 }

packages/type/scss/_reset.scss

@@ -25,8 +25,9 @@
   }
 
   body {
-    font-family: $body-font-family;
     @include carbon--font-weight('regular');
+
+    font-family: $body-font-family;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;