Merge branch 'main' into feat/ibmdotcom-styles-remove-react-class-2

.github/workflows/e2e-tests-parallel.yml

@@ -64,7 +64,7 @@ jobs:
           path: packages/web-components/storybook-static
 
       - name: Clear remnant failure files
-        uses: geekyeggo/delete-artifact@v2
+        uses: geekyeggo/delete-artifact@v4
         with:
           name: failure-wc.txt
 

.github/workflows/percy-update-base.yml

@@ -37,7 +37,7 @@ jobs:
           KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_WEBCOMPONENTS }}
       - name: Run percy storybook
-        run: yarn visual-snapshot
+        run: yarn build-storybook && visual-snapshot
         working-directory: packages/web-components
   carbon-web-components:
     if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
@@ -67,5 +67,5 @@ jobs:
           KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_CARBONWEBCOMPONENTS }}
       - name: Run percy storybook
-        run: yarn visual-snapshot
+        run: yarn build-storybook && visual-snapshot
         working-directory: packages/carbon-web-components

packages/carbon-web-components/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-01-19)
+
+
+### Bug Fixes
+
+* **number-input:** fix incorrect controls border for readonly mode ([#11402](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11402)) ([3b2149b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3b2149bb71c2b8cf4325972f728032d13b0b6ce1)), closes [#11390](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11390)
+* **radio-button:** add missing slot optioin ([#11307](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11307)) ([95e9eb5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/95e9eb56d5ef3926f361de5c2e9b854a722631e7)), closes [#11288](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11288)
+* **select:** selected item is not showing for ios/ipados ([#11214](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11214)) ([2186384](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/218638476e26c72e67376b1b8fa430219f63b4ad))
+* **tooltip:** tooltip persists issue ([#11324](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11324)) ([d355535](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d35553594e84406878f3b8a21489bb6b66faaa7e))
+
+
+### Features
+
+* **modal:** with slug ([#11247](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11247)) ([209142a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/209142a44187788965dd5b193f31491de8b12c0b)), closes [#11142](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11142)
+
+
+
+
+
 # [1.34.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2023-11-15)
 
 **Note:** Version bump only for package @carbon/web-components

packages/carbon-web-components/README.md

@@ -119,6 +119,7 @@ These are the list of available components via CDN:
 - radio-button.min.js
 - search.min.js
 - select.min.js
+- skeleton-icon.min.js
 - skeleton-placeholder.min.js
 - skeleton-text.min.js
 - skip-to-content.min.js

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/.sassrc

@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/cdn.html

@@ -0,0 +1,29 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-skeleton-icon:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-icon.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-skeleton-icon></cds-skeleton-icon>
+</body>
+</html>

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/index.html

@@ -0,0 +1,28 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
+ <style>
+    /* Suppress custom element until styles are loaded */
+    cds-skeleton-icon:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-skeleton-icon></cds-skeleton-icon>
+</body>
+</html>

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-skeleton-icon-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/skeleton-icon/index.js';

packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon/src/styles.scss

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}

packages/carbon-web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.1.2",
+  "version": "2.2.0-rc.0",
   "publishConfig": {
     "access": "public"
   },
@@ -33,20 +33,20 @@
     "build": "gulp build && yarn wca",
     "build:dist": "gulp build:dist",
     "build:dist:dev": "gulp build:dist:dev",
-    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=es build-storybook",
+    "build-storybook": "cross-env BABEL_ENV=es build-storybook",
     "ci-check": "yarn wca && yarn typecheck && yarn build && yarn test:unit",
     "clean": "gulp clean",
     "reset": "yarn cache clean && yarn clean && rimraf node_modules && yarn install && yarn build",
     "start": "yarn storybook",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000",
+    "storybook": "start-storybook -p 9000",
     "test": "gulp test && yarn test:integration",
     "test:integration": "yarn test:integration:build && yarn test:integration:ui",
     "test:integration:build": "jest -c tests/integration/build/jest.config.js --runInBand",
     "test:integration:ui": "jest -c tests/integration/ui/jest.config.js --runInBand",
-    "test:unit": "cross-env NODE_OPTIONS=--openssl-legacy-provider gulp test:unit",
-    "test:unit:updateSnapshot": "NODE_OPTIONS=--openssl-legacy-provider gulp test:unit --update-snapshot",
+    "test:unit": "gulp test:unit",
+    "test:unit:updateSnapshot": "gulp test:unit --update-snapshot",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "visual-snapshot": "yarn build-storybook && percy storybook:start ./storybook-static",
+    "visual-snapshot": "yarn percy storybook:start ./storybook-static",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "files": [
@@ -87,9 +87,9 @@
     "@babel/preset-env": "~7.23.2",
     "@babel/preset-modules": "^0.1.5",
     "@babel/template": "~7.12.0",
-    "@babel/traverse": "~7.23.0",
+    "@babel/traverse": "~7.23.7",
     "@carbon/icon-helpers": "10.45.1",
-    "@carbon/icons": "11.31.0",
+    "@carbon/icons": "11.34.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.27.4",
@@ -190,7 +190,7 @@
     "rollup": "^2.55.1",
     "rollup-plugin-multi-input": "^1.3.1",
     "rtlcss": "^3.0.0",
-    "sass": "~1.69.0",
+    "sass": "~1.70.0",
     "sass-loader": "^10.0.0",
     "strip-comments": "^1.0.0",
     "style-loader": "^2.0.0",

packages/carbon-web-components/src/components/progress-indicator/progress-step.ts

@@ -126,7 +126,7 @@ export default class CDSProgressStep extends FocusMixin(LitElement) {
           }[state],
           children: svgLabel ? svg`<title>${svgLabel}</title>` : undefined,
         })}
-        <slot>
+        <slot name="label-text">
           <p
             role="button"
             class="${prefix}--progress-label"

packages/carbon-web-components/src/components/select/select.ts

@@ -19,6 +19,7 @@ import FormMixin from '../../globals/mixins/form';
 import { filter } from '../../globals/internal/collection-helpers';
 import { INPUT_SIZE } from '../text-input/text-input';
 import styles from './select.scss';
+import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
@@ -113,7 +114,7 @@ class CDSSelect extends FormMixin(LitElement) {
               <option
                 class="${prefix}--select-option"
                 ?disabled="${disabled}"
-                label="${ifDefined(label ?? textContent)}"
+                label="${ifNonEmpty(label)}"
                 ?selected="${selected}"
                 value="${ifDefined(value)}">
                 ${textContent}

packages/carbon-web-components/src/components/skeleton-icon/docs/overview.mdx

@@ -0,0 +1,12 @@
+## Live demo
+
+<StorybookDemo
+  tall
+  url="https://www.ibm.com/standards/carbon/carbon-web-components"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'components-skeleton-icon--default'
+    }
+  ]}
+/>

packages/carbon-web-components/src/components/skeleton-icon/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './skeleton-icon';

packages/carbon-web-components/src/components/skeleton-icon/skeleton-icon-story.mdx

@@ -0,0 +1,33 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Skeleton icon
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-icon)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/skeleton-icon/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['skeleton-icon'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-skeleton-icon></cds-skeleton-icon>
+```
+
+## `<cds-skeleton-icon>` attributes, properties and events
+
+<Props of="cds-skeleton-icon" />