Merge branch 'main' into update-slug-storybook-controls

.all-contributorsrc

@@ -1461,6 +1461,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "anjaly0606",
+      "name": "anjaly0606",
+      "avatar_url": "https://avatars.githubusercontent.com/u/99959496?v=4",
+      "profile": "https://github.com/anjaly0606",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.github/workflows/add-to-project.yml

@@ -19,7 +19,7 @@ jobs:
     name: Add issue with enhancement label to the Proposals project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@0609a2702eefb44781da00f8e04901d6e5cd2b92 #v0.6.0
+      - uses: actions/add-to-project@1b844f0c5ac6446a402e0cb3693f9be5eca188c5 #v0.6.1
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}
           project-url: ${{ env.PROPOSALS_PROJECT_URL }}
@@ -29,7 +29,7 @@ jobs:
     name: Add issue with typescript label to the TypeScript Adoption project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@0609a2702eefb44781da00f8e04901d6e5cd2b92 #v0.6.0
+      - uses: actions/add-to-project@1b844f0c5ac6446a402e0cb3693f9be5eca188c5 #v0.6.1
         with:
           labeled: ${{ env.LABEL_TYPESCRIPT }}
           project-url: ${{ env.TYPESCRIPT_PROJECT_URL }}
@@ -39,7 +39,7 @@ jobs:
     name: Add issue to the Design System project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@0609a2702eefb44781da00f8e04901d6e5cd2b92 #v0.6.0
+      - uses: actions/add-to-project@1b844f0c5ac6446a402e0cb3693f9be5eca188c5 #v0.6.1
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}, ${{ env.LABEL_TYPESCRIPT }}
           label-operator: NOT

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@05963f47d870e2cb19a537396c1f668a348c7d8f #v3.24.8
+        uses: github/codeql-action/init@1b1aada464948af03b950897e5eb522f92603cc2 #v3.24.9
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@05963f47d870e2cb19a537396c1f668a348c7d8f #v3.24.8
+        uses: github/codeql-action/analyze@1b1aada464948af03b950897e5eb522f92603cc2 #v3.24.9

.github/workflows/deploy-react-storybook.yml

@@ -63,4 +63,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@decdde0ac072f6dcbe43649d82d9c635fff5b4e4 #v4.0.4
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e #v4.0.5

README.md

@@ -281,6 +281,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/dedanade"><img src="https://avatars.githubusercontent.com/u/66811981?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Adebonojo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=dedanade" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/mranjana"><img src="https://avatars.githubusercontent.com/u/91003483?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anjana M R</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mranjana" title="Code">💻</a></td>
     <td align="center"><a href="https://cuppajoey.com/"><img src="https://avatars.githubusercontent.com/u/14837881?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joseph Schultz</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cuppajoey" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/anjaly0606"><img src="https://avatars.githubusercontent.com/u/99959496?v=4?s=100" width="100px;" alt=""/><br /><sub><b>anjaly0606</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=anjaly0606" title="Code">💻</a></td>
   </tr>
 </table>
 

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "3.11.0",
+  "version": "3.12.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

docs/style.md

@@ -863,6 +863,41 @@ this project:
 - [Motion](../packages/motion/docs/sass.md)
 - [Type](../packages/type/docs/sass.md)
 
+##### Avoid magic numbers
+
+In addition to using design tokens where appropriate, when authoring values for
+margin, padding, size, or similar, avoid using
+[magic numbers](https://csswizardry.com/2012/11/code-smells-in-css/#magic-numbers).
+
+> "A magic number is a value that is used ‘because it just works’."
+
+Magic numbers should be replaced with a value derived from its discrete parts
+that have been added together or combined. For example:
+
+![text-input-style-structure-fixed](https://github.com/carbon-design-system/carbon/assets/3360588/71e4222e-ff96-4dce-b80f-a0626f47cf21)
+
+If we were trying to apply a `padding-inline-end` to the input to ensure the
+input text does not flow behind the icon, we could add up the individual parts
+of this that use spacing tokens, contextual layout tokens, or other
+constants/variables within the system that will inherently explain what the
+final number is composed of.
+
+```diff
+- padding-inline-end: to-rem(32px);
++ padding-inline-end: calc(layout.density('padding-inline') + $icon-size-01);
+```
+
+When crafting these combinations, avoid creating file-local constants/variables,
+especially if they are never reused. Instead:
+
+1. Check the reusable/global constants for an appropriate one given what is
+   trying to be accomplished.
+2. If one exists, use it. If not, start a conversation with the team as to why
+   no such value currently exists (perhaps challenge the way it was intended to
+   be used in the first place).
+3. Decide to either introduce a new constant to meet the need; or rework the
+   code in question to use other constants (or perhaps none at all).
+
 #### Avoid nesting selectors
 
 Nesting selectors is often a convenient and fast way to author styles in Sass.

examples/class-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.50.0",
+  "version": "0.51.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/codesandbox-styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.56.0",
+  "version": "0.57.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.53.0"
+    "@carbon/styles": "^1.54.0-rc.0"
   }
 }

examples/custom-theme/package.json

@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.51.0",
+  "version": "0.52.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/id-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.50.0",
+  "version": "0.51.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/incremental-migration-vite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration-vite",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.19.0-rc.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "carbon-components": "^10.57.0",
     "carbon-components-react": "^7.57.0",
     "carbon-icons": "^7.0.7",

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.51.0",
+  "version": "0.52.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "next": "13.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.53.0",
+  "version": "0.54.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "next": "13.5.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/v10-token-compat-in-v11/package.json

@@ -1,15 +1,15 @@
 {
   "name": "v10-token-compat-in-v11",
   "private": true,
-  "version": "0.51.0",
+  "version": "0.52.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/vite/package.json

@@ -1,15 +1,15 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.51.0",
+  "version": "0.52.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/carbon-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "8.53.0",
+  "version": "8.54.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -42,8 +42,8 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/react": "^1.53.0",
-    "@carbon/styles": "^1.53.0",
+    "@carbon/react": "^1.54.0-rc.0",
+    "@carbon/styles": "^1.54.0-rc.0",
     "@ibm/telemetry-js": "^1.2.1",
     "chalk": "1.1.3"
   },

packages/carbon-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "11.53.0",
+  "version": "11.54.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.53.0",
+    "@carbon/styles": "^1.54.0-rc.0",
     "@ibm/telemetry-js": "^1.2.1",
     "chalk": "1.1.3"
   },

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "11.42.0",
+  "version": "11.43.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -40,10 +40,10 @@
   "dependencies": {
     "@carbon/colors": "^11.21.0",
     "@carbon/grid": "^11.22.0",
-    "@carbon/icons": "^11.38.0",
+    "@carbon/icons": "^11.39.0-rc.0",
     "@carbon/layout": "^11.21.0",
     "@carbon/motion": "^11.17.0",
-    "@carbon/themes": "^11.33.0",
+    "@carbon/themes": "^11.34.0-rc.0",
     "@carbon/type": "^11.26.0",
     "@ibm/telemetry-js": "^1.2.1"
   },

packages/feature-flags/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/feature-flags",
   "description": "Build with feature flags in Carbon",
-  "version": "0.18.0",
+  "version": "0.19.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/icon-build-helpers/package.json

@@ -2,7 +2,7 @@
   "name": "@carbon/icon-build-helpers",
   "private": true,
   "description": "Build helpers for the Carbon Design System icon library",
-  "version": "1.23.0",
+  "version": "1.24.0-rc.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "repository": {

packages/icons-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "11.38.0",
+  "version": "11.39.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,8 +43,8 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@carbon/icon-build-helpers": "^1.23.0",
-    "@carbon/icons": "^11.38.0",
+    "@carbon/icon-build-helpers": "^1.24.0-rc.0",
+    "@carbon/icons": "^11.39.0-rc.0",
     "rimraf": "^5.0.0"
   },
   "sideEffects": false

packages/icons-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.87.0",
+  "version": "10.88.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.7.0",
-    "@carbon/icons": "^11.38.0",
+    "@carbon/icons": "^11.39.0-rc.0",
     "fs-extra": "^11.0.0",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.0",