Dep updates late Oct 2023 (#4195)

Co-authored-by: Doug MacKenzie <[email protected]>
cultureamp · Oct 24, 2023 · affcb48 · affcb48
1 parent 24e497d
commit affcb48
Show file tree

Hide file tree

Showing 11 changed files with 1,044 additions and 1,571 deletions.
diff --git a/.changeset/dull-seals-jam.md b/.changeset/dull-seals-jam.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix stylelint issues
diff --git a/package.json b/package.json
@@ -95,22 +95,22 @@
     "@types/classnames": "^2.3.1",
     "@types/jest": "^29.5.6",
     "@types/jest-axe": "^3.5.7",
-    "@types/node": "^18.18.6",
+    "@types/node": "^20.8.8",
     "@types/postcss-flexbugs-fixes": "^5.0.2",
     "@types/postcss-import": "^14.0.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.3",
     "chromatic": "^7.4.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.4.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-mdx": "^2.2.0",
     "eslint-plugin-react": "^7.33.2",
@@ -124,13 +124,13 @@
     "jest-static-stubs": "^0.0.1",
     "node-fetch": "^3.3.2",
     "node-sass": "^9.0.0",
-    "plop": "^3.1.2",
-    "postcss": "^8.4.29",
+    "plop": "^4.0.0",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
-    "postcss-preset-env": "^9.1.4",
+    "postcss-preset-env": "^9.2.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.0.3",
     "raw-loader": "^4.0.2",
@@ -141,14 +141,14 @@
     "storybook": "^7.5.1",
     "storybook-addon-pseudo-states": "^2.1.2",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.0.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "~4.0.0",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.1.1",
     "turbo": "^1.10.16",
     "typescript": "^4.9.5",
-    "webpack": "^5.88.2"
+    "webpack": "^5.89.0"
   }
 }
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.module.scss b/packages/components/src/ButtonGroup/ButtonGroup.module.scss
@@ -45,8 +45,7 @@ $focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
     &:not(.firstChild, .lastChild) {
       &:focus-visible {
         &::after {
-          inset-inline-start: $focus-ring-offset-inner;
-          inset-inline-end: $focus-ring-offset-inner;
+          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
         }
       }
     }

diff --git a/...c/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss b/...c/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss
@@ -35,10 +35,7 @@ $input-disabled-opacity: 0.3;
     /* stylelint-disable declaration-no-important */
     border-start-start-radius: 0 !important;
     border-end-start-radius: 0 !important;
-    inset-inline-start: calc(
-      -1 * calc(2 * #{$border-solid-border-width} + 1px)
-    ) !important;
-    inset-inline-end: -1px !important;
+    inset-inline: calc(-1 * calc(2 * #{$border-solid-border-width} + 1px)) -1px !important;
     /* stylelint-enable declaration-no-important */
   }
 }

diff --git a/packages/components/src/Input/InputSearch/InputSearch.module.scss b/packages/components/src/Input/InputSearch/InputSearch.module.scss
@@ -40,8 +40,7 @@ $classname--input: '.input[type="search"]';
   border: $border-solid-border-width $border-solid-border-style transparent;
   border-radius: $border-solid-border-radius-curved;
   padding-block: 0;
-  padding-inline-start: $input-padding-with-icon;
-  padding-inline-end: $input-padding-after-end-icon;
+  padding-inline: $input-padding-with-icon $input-padding-after-end-icon;
   font-size: 1rem;
   line-height: 1.5;
 

diff --git a/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.module.scss b/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.module.scss
@@ -123,8 +123,7 @@ $dt-assertive-header-background: $color-orange-100;
     @media (max-width: $layout-breakpoints-medium) {
       display: flex;
       flex-direction: column;
-      align-content: flex-start;
-      justify-content: center;
+      place-content: flex-start center;
       align-items: flex-start;
     }
 

diff --git a/packages/components/src/Tag/Tag.module.scss b/packages/components/src/Tag/Tag.module.scss
@@ -35,13 +35,11 @@ $small: $spacing-md;
   align-items: center;
   display: flex;
   color: $color-white;
-  margin-inline-start: calc(#{$spacing-md} * -0.15);
-  margin-inline-end: $spacing-xs;
+  margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
 }
 
 .profile {
-  margin-inline-start: calc(#{$spacing-md} * -0.15);
-  margin-inline-end: $spacing-xs;
+  margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
   display: inline-flex;
   align-items: center;
 }
@@ -70,8 +68,7 @@ $small: $spacing-md;
   height: 100%;
   align-items: center;
   padding: 0 $spacing-xs;
-  margin-inline-end: -0.6625rem;
-  margin-inline-start: -0.225rem;
+  margin-inline: -0.225rem -0.6625rem;
   color: rgba($color-purple-800-rgb, 0.7);
   cursor: pointer;
 

diff --git a/packages/components/src/__future__/Select/subcomponents/Option/Option.module.scss b/packages/components/src/__future__/Select/subcomponents/Option/Option.module.scss
@@ -21,8 +21,7 @@ $iconAndBadgeHeight: $spacing-md;
   grid-template-columns: auto $spacing-md;
   gap: $spacing-xs;
   padding-block: $spacing-8;
-  padding-inline-start: $spacing-12;
-  padding-inline-end: $spacing-6;
+  padding-inline: $spacing-12 $spacing-6;
   position: relative;
   font-family: $typography-paragraph-body-font-family;
   font-size: $typography-paragraph-body-font-size;

diff --git a/...ages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss b/...ages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss
@@ -31,8 +31,7 @@
   border-radius: $border-solid-border-radius;
   background-color: $color-white;
   padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
-  padding-inline-start: 0.875rem;
-  padding-inline-end: $spacing-12;
+  padding-inline: 0.875rem $spacing-12;
   font-family: $typography-paragraph-body-font-family;
   font-weight: $typography-paragraph-body-font-weight;
   font-size: $typography-paragraph-body-font-size;

diff --git a/packages/components/src/__future__/Tag/RemovableTag/RemovableTag.module.scss b/packages/components/src/__future__/Tag/RemovableTag/RemovableTag.module.scss
@@ -3,6 +3,5 @@
 .removableTag {
   padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
   padding-block: $spacing-4;
-  padding-inline-start: $spacing-8;
-  padding-inline-end: $spacing-4;
+  padding-inline: $spacing-8 $spacing-4;
 }