chore: fix issues and downgrade certain packages

carbon-design-system · Jun 18, 2024 · 3f4ef0e · 3f4ef0e
1 parent aa836a2
commit 3f4ef0e
Show file tree

Hide file tree

Showing 12 changed files with 408 additions and 327 deletions.
diff --git a/config/cli/package.json b/config/cli/package.json
@@ -32,7 +32,7 @@
     "fs-extra": "^11.2.0",
     "inquirer": "^9.2.23",
     "npm-check-updates": "^16.14.20",
-    "prettier": "^3.3.2",
+    "prettier": "^2.8.8",
     "prettier-config-carbon": "^0.11.0",
     "remark": "^15.0.1",
     "semver": "^7.6.2",

diff --git a/config/stylelint-config-ibm-products/package.json b/config/stylelint-config-ibm-products/package.json
@@ -15,15 +15,15 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon$)/'"
   },
   "peerDependencies": {
-    "stylelint": "^16.6.1"
+    "stylelint": "^15.11.0"
   },
   "devDependencies": {
     "stylelint-config-carbon": "^1.17.1",
-    "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-no-unsupported-browser-features": "^8.0.1",
-    "stylelint-plugin-carbon-tokens": "^3.0.0",
-    "stylelint-use-logical": "^2.1.2"
+    "stylelint-config-idiomatic-order": "^9.0.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-no-unsupported-browser-features": "^7.0.0",
+    "stylelint-plugin-carbon-tokens": "^2.3.1",
+    "stylelint-use-logical": "^2.1.0"
   }
 }
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "cheerio": "^1.0.0-rc.12",
     "copyfiles": "^2.4.1",
     "cspell": "^8.8.4",
-    "eslint": "^9.5.0",
+    "eslint": "^8.56.0",
     "eslint-config-carbon": "^2.20.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
@@ -93,12 +93,12 @@
     "npm-run-all": "^4.1.5",
     "npm-upgrade": "^3.1.0",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.2",
+    "prettier": "^2.8.8",
     "prettier-config-carbon": "^0.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.7",
-    "stylelint": "^16.6.1",
+    "stylelint": "^15.11.0",
     "stylelint-config-ibm-products": "*",
     "webpack": "^5.92.0"
   },

diff --git a/packages/ibm-products-styles/src/components/StatusIcon/_status-icon.scss b/packages/ibm-products-styles/src/components/StatusIcon/_status-icon.scss
@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function --clr($name, $theme: light) {
+@function clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -124,14 +124,14 @@ $block-class: #{$pkg-prefix}--status-icon;
           }
           // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
-          // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          // stylelint-disable-next-line carbon/theme-token-use, function-no-unknown
+          fill: clr($icon, $theme);
         } @else if $icon == running {
-          // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          // stylelint-disable-next-line carbon/theme-token-use, function-no-unknown
+          fill: clr($icon, $theme);
         } @else {
-          // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          // stylelint-disable-next-line carbon/theme-token-use, function-no-unknown
+          fill: clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;

diff --git a/packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss b/packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss
@@ -79,7 +79,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--top-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line declaration-no-important, carbon/layout-token-use  */
   inset-block-start: -1px !important;
 }
 
@@ -92,6 +92,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--bottom-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line declaration-no-important, carbon/layout-token-use  */
   inset-block-end: -1px !important;
 }
diff --git a/packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss b/packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss
@@ -44,7 +44,7 @@ $themes: (
 
 $theme-keys: map-keys($themes);
 
-@function --get-background-color($color, $key, $contrast-key) {
+@function get-background-color($color, $key, $contrast-key) {
   @return map-get(
     $carbon-colors,
     #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -58,8 +58,8 @@ $theme-keys: map-keys($themes);
   @each $color in $base-colors {
     @each $contrast-key in $theme-keys {
       .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
-        // stylelint-disable-next-line carbon/theme-token-use
-        background-color: --get-background-color($color, $key, $contrast-key);
+        // stylelint-disable-next-line carbon/theme-token-use, function-no-unknown
+        background-color: get-background-color($color, $key, $contrast-key);
       }
     }
   }

diff --git a/packages/ibm-products/scripts/generate/index.js b/packages/ibm-products/scripts/generate/index.js
@@ -9,7 +9,7 @@ const fs = require('fs');
 const { green } = require('chalk');
 const { outputFileSync, readFileSync } = require('fs-extra');
 const { sync } = require('glob');
-const { camelCase, paramCase, pascalCase, headerCase } = require('change-case');
+const { camelCase, kebabCase, pascalCase, headerCase } = require('change-case');
 const { join, relative, resolve } = require('path');
 
 // https://www.npmjs.com/package/yargs#usage
@@ -22,7 +22,7 @@ const substitutions = {
   DISPLAY_NAME: pascalCase(name),
   FULL_YEAR: new Date().getFullYear(),
   CAMEL_NAME: camelCase(name),
-  STYLE_NAME: paramCase(name),
+  STYLE_NAME: kebabCase(name),
   TITLE_NAME: headerCase(name),
 };
 

diff --git a/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx b/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx
@@ -88,8 +88,8 @@ const FilterSummary = React.forwardRef(
       typeof viewAllButtonRef?.current?.offsetWidth === 'undefined'
         ? 0
         : overflowCount > 0
-        ? 48
-        : 0;
+          ? 48
+          : 0;
     const measurementOffset =
       (filterSummaryClearButton?.current?.offsetWidth || 0) + viewAllWidth;
 
@@ -157,7 +157,7 @@ const FilterSummary = React.forwardRef(
           [`${blockClass}__expanded`]: multiline,
         })}
       >
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           {!multiline && renderTagSet('single')}
           {multiline && renderTagSet('multiline')}
         </AnimatePresence>

diff --git a/packages/ibm-products/src/global/js/utils/StoryDocsPage.js b/packages/ibm-products/src/global/js/utils/StoryDocsPage.js
@@ -19,7 +19,7 @@ import {
   useOf,
   Markdown,
 } from '@storybook/blocks';
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 
 import {
   codeSandboxHref,
@@ -37,7 +37,7 @@ export const CustomBlocks = ({ blocks }) => {
     }
     return (
       <div key={`block-index--${index}`}>
-        {block.title && <h3 id={paramCase(block.title)}>{block.title}</h3>}
+        {block.title && <h3 id={kebabCase(block.title)}>{block.title}</h3>}
         {block.subTitle && <h4>{block.subTitle}</h4>}
         {block.image}
         {block.description && typeof block.description === 'string' ? (
@@ -147,13 +147,13 @@ export const StoryDocsPage = ({
         {['Overview', 'Coded examples', 'Example usage', 'Component API'].map(
           (item) => (
             <li key={item}>
-              <AnchorMdx href={`#${paramCase(item)}`}>{item}</AnchorMdx>
+              <AnchorMdx href={`#${kebabCase(item)}`}>{item}</AnchorMdx>
               {processedBlocks && item === 'Example usage' ? (
                 <ul>
                   {processedBlocks.map((block) => {
                     return block?.title ? (
                       <li key={block.title}>
-                        <AnchorMdx href={`#${paramCase(block.title)}`}>
+                        <AnchorMdx href={`#${kebabCase(block.title)}`}>
                           {block.title}
                         </AnchorMdx>
                       </li>

diff --git a/packages/ibm-products/src/global/js/utils/story-helper.js b/packages/ibm-products/src/global/js/utils/story-helper.js
@@ -8,7 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import pkg from '../package-settings';
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 
 export const checkCanaryStatus = (componentName) =>
   !pkg.isComponentEnabled(componentName, true) &&
@@ -72,7 +72,7 @@ export const palUsageHref = (csfFile) => {
   const [_pkg, kind, section] = title.split('/');
 
   if (/components|patterns/i.test(kind) && name) {
-    return `https://pages.github.ibm.com/cdai-design/pal/${kind}s/${paramCase(
+    return `https://pages.github.ibm.com/cdai-design/pal/${kind}s/${kebabCase(
       section
     )}/usage`;
   }
@@ -130,7 +130,7 @@ export const storyDocsPageInfo = (csfFile) => {
 
     result.section = a;
 
-    result.guidelinesHref = `https://pages.github.ibm.com/cdai-design/pal/${kind}s/${paramCase(
+    result.guidelinesHref = `https://pages.github.ibm.com/cdai-design/pal/${kind}s/${kebabCase(
       result.section
     )}/usage`;
   } else {

diff --git a/scripts/example-gallery-builder/update-example/index.js b/scripts/example-gallery-builder/update-example/index.js
@@ -8,7 +8,7 @@
 const { outputFileSync, readFileSync, removeSync } = require('fs-extra');
 const fs = require('fs');
 const { sync } = require('glob');
-const { camelCase, paramCase, pascalCase, headerCase } = require('change-case');
+const { camelCase, kebabCase, pascalCase, headerCase } = require('change-case');
 const { basename, join, resolve, relative, dirname } = require('path');
 
 const compile = (template, substitutions) =>
@@ -78,7 +78,7 @@ const updateExample = (name, config) => {
       TITLE_NAME: headerCase(name),
       FULL_YEAR: new Date().getFullYear(),
       CAMEL_NAME: camelCase(name),
-      STYLE_NAME: paramCase(name),
+      STYLE_NAME: kebabCase(name),
     };
 
     const keywords = substitutions.STYLE_NAME.split('-');