chore: update stylelint from v15 to v16 #6515

davidmenendez · 2024-11-27T20:27:39Z

major dependency upgrades for stylelint from v15 to v16 and stylelint-plugin-carbon-tokens from 2.8.0 to 3.2.1

addresses breaking changes in the carbon token plugin:

carbon/layout-token-use has been renamed to carbon/layout-use.
carbon/theme-token-use has been renamed to carbon/theme-use.
carbon/type-token-use has been renamed to carbon/type-use.

netlify · 2024-11-27T20:27:57Z

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	`4acbeff`
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/674f1c488ce9fe0008cfe45f
😎 Deploy Preview	https://deploy-preview-6515--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-11-27T20:28:00Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`4acbeff`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/674f1c48ba824e0008561297
😎 Deploy Preview	https://deploy-preview-6515--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

elycheea

Much better! Some smaller changes and observations —

Are the AI tokens not captured in stylelint-plugin-carbon-tokens? If so, we should check in with Lee.
Caught a few places that look like redundant disables. If we can remove them, we should.
^ some of those were using a namespace. I would expect stylelint-plugin-carbon-tokens to work with them, in which case they are redundant again. If not, we should follow up with Lee.

elycheea · 2024-11-27T20:30:32Z

examples/carbon-for-ibm-products/Cascade/src/Example/_example.scss

  margin: 1rem;
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use


Suggested change

// stylelint-disable-next-line carbon/theme-use

Wouldn’t this one count as token use? 🤔

elycheea · 2024-11-27T20:36:47Z

packages/ibm-products-styles/src/components/CreateTearsheet/_create-tearsheet.scss

@@ -24,8 +24,8 @@
 @keyframes step-content-entrance {
  0% {
    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-0.75rem);
+    // stylelint-disable-next-line carbon/layout-use


Suggested change

// stylelint-disable-next-line carbon/layout-use

Since this was updated to a token, we can probably remove this line.

elycheea · 2024-11-27T20:37:44Z

packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss

@@ -158,7 +158,7 @@

 /* This section to be removed after support for slug dropped  - start */
 .#{$block-class} th.#{$block-class}__with-slug {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */


Are AI tokens not captured in the stylelint-plugin-carbon-tokens package or is this just leftover from maybe an earlier version? 👀

elycheea · 2024-11-27T20:38:36Z

packages/ibm-products-styles/src/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -32,8 +32,8 @@
  .#{c4p-settings.$carbon-prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
  .#{c4p-settings.$carbon-prefix}--popover-caret {
  // Used to fix layout issue with IconButton caret inside of Popover component
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  left: -4px;
+  /* stylelint-disable-next-line carbon/layout-use */


Suggested change

/* stylelint-disable-next-line carbon/layout-use */

elycheea · 2024-11-27T20:38:48Z

packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss

@@ -29,8 +29,8 @@
 @keyframes form-content-entrance {
  0% {
    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-0.75rem);
+    // stylelint-disable-next-line carbon/layout-use


Suggested change

// stylelint-disable-next-line carbon/layout-use

elycheea · 2024-11-27T20:44:02Z

packages/ibm-products/src/components/CoachmarkOverlayElements/_storybook-styles.scss

@@ -13,8 +13,8 @@
  display: inline-block;
  max-height: 100%;
  box-sizing: border-box;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding: 1rem;
+  /* stylelint-disable-next-line carbon/layout-use */


Suggested change

/* stylelint-disable-next-line carbon/layout-use */

elycheea · 2024-11-27T20:44:22Z

packages/ibm-products/src/components/CreateModal/_storybook-styles.scss

@@ -43,7 +43,7 @@
 }

 .#{c4p-settings.$carbon-prefix}--list-box__menu-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */


Suggested change

/* stylelint-disable-next-line carbon/layout-use */

elycheea · 2024-11-27T20:44:57Z

packages/ibm-products/src/components/TruncatedList/_storybook-styles.scss

@@ -9,8 +9,8 @@

 .sb-show-main.sb-main-centered #storybook-root {
  // Override default center/center with top/center.
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  margin-top: 1rem;
+  /* stylelint-disable-next-line carbon/layout-use */


Suggested change

/* stylelint-disable-next-line carbon/layout-use */

elycheea · 2024-11-27T20:45:28Z

packages/ibm-products/src/components/UserAvatar/_storybook-styles.scss

@@ -12,11 +12,13 @@

 // TODO: add any additional styles used by UserAvatar.stories.js
 .theme-section {
+  /* stylelint-disable-next-line carbon/layout-use */


Suggested change

/* stylelint-disable-next-line carbon/layout-use */

Assuming these should work when namespaced, but if not, we may need to keep this in place for now.

elycheea · 2024-11-27T20:45:51Z

packages/ibm-products/src/components/UserAvatar/_storybook-styles.scss

  padding: spacing.$spacing-05;
  background: theme.$background;
  color: theme.$text-primary;
 }

 .theme-text {
+  /* stylelint-disable-next-line carbon/layout-use */


Suggested change

/* stylelint-disable-next-line carbon/layout-use */

Again, assuming the namespaced tokens should still work with the plugin.

codecov · 2024-11-27T21:12:30Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.88%. Comparing base (b2298b5) to head (4acbeff).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6515   +/-   ##
=======================================
  Coverage   79.88%   79.88%           
=======================================
  Files         394      394           
  Lines       12877    12877           
  Branches     4258     4258           
=======================================
  Hits        10287    10287           
  Misses       2590     2590

Components	Coverage Δ
ibm-products	`∅ <ø> (∅)`
ibm-products-web-components	`∅ <ø> (∅)`

davidmenendez · 2024-12-02T20:09:30Z

@elycheea @matthewgallo looks like everything is building properly now and should be ready for review 👍

matthewgallo

Nice! I do think we could use a spacing token for the theme dropdown in the examples (examples/carbon-for-ibm-products/*/src/ThemeSelector/_theme-dropdown.scss), I noticed a lot of repeated disabling in those files. But lets take a look after we get these changes in.

davidmenendez · 2024-12-02T21:28:24Z

totally agree. there's a lot of cleanup that we can do around the scss files, specifically around taking a look at anything that's not using tokens and removing redundant code, which seems to be prevalent in storybook specific styles.

davidmenendez · 2024-12-03T15:21:41Z

@elycheea & @matthewgallo when you have a sec to re-review 👀 🙇

chore: update stylelint from v15 to v16

f0cabc2

davidmenendez requested a review from a team as a code owner November 27, 2024 20:27

davidmenendez requested review from makafsal and matthewgallo and removed request for a team November 27, 2024 20:27

davidmenendez requested a review from elycheea November 27, 2024 20:28

elycheea requested changes Nov 27, 2024

View reviewed changes

fix: sass issues

5ba15c8

davidmenendez added 3 commits December 2, 2024 08:56

fix: try to get build working

35d61f7

fix: add spacing token

ced9c0a

fix: web component fixes

48ed0df

elycheea added the status: merge conflict ✋ label Dec 2, 2024

davidmenendez added 2 commits December 2, 2024 12:54

fix: merge

bc3ad55

chore: yarn lock update

bb97cf2

davidmenendez removed the status: merge conflict ✋ label Dec 2, 2024

davidmenendez added 3 commits December 2, 2024 13:27

fix: remove unnecessary lint disable comments

73d869e

fix: remove unnecessary lint disable comments

d4fc136

fix: remove unnecessary lint disable comments

c52328b

elycheea previously approved these changes Dec 2, 2024

View reviewed changes

elycheea added the status: one more review 👀 label Dec 2, 2024

matthewgallo previously approved these changes Dec 2, 2024

View reviewed changes

matthewgallo added this pull request to the merge queue Dec 2, 2024

matthewgallo removed the status: one more review 👀 label Dec 2, 2024

github-merge-queue bot removed this pull request from the merge queue due to a conflict with the base branch Dec 2, 2024

fix: merge

c31dfb1

chore: snapshot

4acbeff

davidmenendez dismissed stale reviews from matthewgallo and elycheea via 4acbeff December 3, 2024 14:57

matthewgallo approved these changes Dec 3, 2024

View reviewed changes

davidmenendez enabled auto-merge December 3, 2024 15:49

elycheea approved these changes Dec 3, 2024

View reviewed changes

davidmenendez added this pull request to the merge queue Dec 3, 2024

Merged via the queue into carbon-design-system:main with commit 0da2372 Dec 3, 2024
34 checks passed

davidmenendez deleted the stylelint-upgrade2 branch December 3, 2024 21:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: update stylelint from v15 to v16 #6515

chore: update stylelint from v15 to v16 #6515

davidmenendez commented Nov 27, 2024 •

edited

Loading

netlify bot commented Nov 27, 2024 •

edited

Loading

netlify bot commented Nov 27, 2024 •

edited

Loading

elycheea left a comment

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

elycheea Nov 27, 2024

codecov bot commented Nov 27, 2024 •

edited

Loading

davidmenendez commented Dec 2, 2024

matthewgallo left a comment

davidmenendez commented Dec 2, 2024

davidmenendez commented Dec 3, 2024

chore: update stylelint from v15 to v16 #6515

chore: update stylelint from v15 to v16 #6515

Conversation

davidmenendez commented Nov 27, 2024 • edited Loading

netlify bot commented Nov 27, 2024 • edited Loading

✅ Deploy Preview for ibm-products-web-components ready!

netlify bot commented Nov 27, 2024 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

elycheea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Nov 27, 2024 • edited Loading

Codecov Report

davidmenendez commented Dec 2, 2024

matthewgallo left a comment

Choose a reason for hiding this comment

davidmenendez commented Dec 2, 2024

davidmenendez commented Dec 3, 2024

davidmenendez commented Nov 27, 2024 •

edited

Loading

netlify bot commented Nov 27, 2024 •

edited

Loading

netlify bot commented Nov 27, 2024 •

edited

Loading

codecov bot commented Nov 27, 2024 •

edited

Loading