Merge branch 'main' of github.com:carbon-design-system/carbon into re…

…novate/stylelint-order-6.x

.all-contributorsrc

@@ -1259,7 +1259,7 @@
       "contributions": [
         "code"
       ]
-    },
+    }
   ],
   "commitConvention": "none"
 }

.github/workflows/dco.yml

@@ -16,7 +16,7 @@ jobs:
           (github.event.comment.body == 'recheck' || github.event.comment.body
           == 'I have read the DCO document and I hereby sign the DCO.') ||
           github.event_name == 'pull_request_target'
-        uses: cla-assistant/[email protected].0
+        uses: cla-assistant/github-action@a895a435fcce79ecf28fbce61a4ef0f0dabc9853 #v2.3.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}

.github/workflows/deploy-packages.yml

@@ -33,7 +33,7 @@ jobs:
             @carbon/icons@next \
             @carbon/icons-react@next \
       - name: Generate token
-        uses: tibdex/github-app-token@v1
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
         id: generate_token
         with:
           app_id: ${{ secrets.APP_ID }}
@@ -76,7 +76,7 @@ jobs:
             @carbon/pictograms-react \
             @carbon/react
       - name: Generate token
-        uses: tibdex/github-app-token@v1
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
         id: generate_token
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/issue-triage.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@main
       - name: Generate token
-        uses: tibdex/github-app-token@v1
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
         id: generate_token
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/release-notifications.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@main
       - name: Generate token
-        uses: tibdex/github-app-token@v1
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
         id: generate_token
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/slack-office-hours-dev.yml

@@ -6,13 +6,13 @@ on:
     - cron: '0 14 * * TUE'
 
 jobs:
-  post-reminder:
+  post-reminder-to-carbon-react:
     name: Post dev reminder to carbon-react
     runs-on: ubuntu-latest
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/[email protected]
+        uses: slackapi/slack-github-action@e28cf165c92ffef168d23c5c9000cffc8a25e117 #v1.24.0
         with:
           payload: |
             {
@@ -48,7 +48,7 @@ jobs:
                   "type": "section",
                   "text": {
                     "type": "mrkdwn",
-                    "text": "*Carbon developer office hours* are a bi-weekly opportunity to discuss topics like these and get help from the team. Developers from the Carbon System Squad, who maintain the core React components, elements and styles, will be available to help and answer questions. While it's very informal, please be prepared to screen share and show your issue!"
+                    "text": "*Carbon developer office hours* are a bi-weekly opportunity to discuss topics like these and get help from the team. Developers from the Carbon team will be available to help and answer questions. While it's very informal, please be prepared to screen share and show your issue!"
                   }
                 },
                 {
@@ -98,3 +98,97 @@ jobs:
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
+  post-reminder-to-carbon-web-components:
+    name: Post dev reminder to carbon-web-components
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send custom JSON data to Slack workflow
+        id: slack
+        uses: slackapi/slack-github-action@e28cf165c92ffef168d23c5c9000cffc8a25e117 #v1.24.0
+        with:
+          payload: |
+            {
+              "username": "Carbon Design System",
+              "icon_url": "https://user-images.githubusercontent.com/3360588/192045905-5d9705af-92e2-4432-805e-15db98571e8b.png",
+              "channel": "#carbon-web-components",
+              "text": "Join us for Carbon Developer Office Hours!",
+              "blocks": [
+                {
+                  "type": "header",
+                  "text": {
+                    "type": "plain_text",
+                    "text": "Join us for Carbon Developer Office Hours!",
+                    "emoji": true
+                  }
+                },
+                {
+                  "type": "divider"
+                },
+                {
+                  "type": "image",
+                  "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png",
+                  "alt_text": "A terminal prompt symbol"
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": ":thinking_face:   _Are you running into a weird bug you can’t resolve?_  \n\n_:question:  Do you have questions about using Carbon?_  \n\n :rocket:  _Would you like to discuss migrating from v10 to v11?_"
+                  }
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "*Carbon developer office hours* are a bi-weekly opportunity to discuss topics like these and get help from the team. Developers from the Carbon team will be available to help and answer questions. While it's very informal, please be prepared to screen share and show your issue!"
+                  }
+                },
+                {
+                  "type": "divider"
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": ":yourlearning:  *Subscribe and add to your calendar*     :ibm-arrow-right::ibm-arrow-right::ibm-arrow-right:"
+                  },
+                  "accessory": {
+                    "type": "button",
+                    "text": {
+                      "type": "plain_text",
+                      "text": "Subscribe",
+                      "emoji": true
+                    },
+                    "value": "click_me_123",
+                    "url": "https://ec.yourlearning.ibm.com/w3/enrollment/event/10322733",
+                    "action_id": "button-action"
+                  }
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": ":memo:  *Sign up to get help in a future session*     :ibm-arrow-right::ibm-arrow-right::ibm-arrow-right:"
+                  },
+                  "accessory": {
+                    "type": "button",
+                    "text": {
+                      "type": "plain_text",
+                      "text": "View the agenda",
+                      "emoji": true
+                    },
+                    "value": "click_me_123",
+                    "url": "https://ibm.biz/carbon-dev-office-hours",
+                    "action_id": "button-action"
+                  }
+                },
+                {
+                  "type": "divider"
+                }
+              ]
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+

.github/workflows/version.yml

@@ -58,7 +58,7 @@ jobs:
         run: |
           yarn lerna version minor --no-git-tag-version --no-push --yes
       - name: Generate token
-        uses: tibdex/github-app-token@v1
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
         id: generate_token
         with:
           app_id: ${{ secrets.APP_ID }}

CODEOWNERS

@@ -15,5 +15,5 @@
 **/PublicAPI-test.js @carbon-design-system/release @carbon-design-system/developers-system
 **/PublicAPI-test.js.snap @carbon-design-system/release @carbon-design-system/developers-system
 
-# Admins should be notified of changes to CI/CD workflows
-/.github/workflows @tay1orjones
+# Admins and team should be notified of changes to CI/CD workflows
+/.github/workflows @tay1orjones @carbon-design-system/developers-system

README.md

@@ -251,7 +251,6 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/djragsdale"><img src="https://avatars.githubusercontent.com/u/4396766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Ragsdale</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=djragsdale" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/haocheng6"><img src="https://avatars.githubusercontent.com/u/7645930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hao Cheng</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=haocheng6" title="Code">💻</a></td>
-    <td align="center"><a href="https://med-aziz-chebbi.web.app/"><img src="https://avatars.githubusercontent.com/u/60013060?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aziz Chebbi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=azizChebbi" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=azizChebbi" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/cordesmj"><img src="https://avatars.githubusercontent.com/u/7409239?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cordesmj</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cordesmj" title="Code">💻</a></td>
     <td align="center"><a href="https://med-aziz-chebbi.web.app/"><img src="https://avatars.githubusercontent.com/u/60013060?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aziz Chebbi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=azizChebbi" title="Code">💻</a></td>
   </tr>

config/stylelint-config-carbon/package.json

@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "stylelint-a11y": "^1.2.3",
-    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint-config-idiomatic-order": "^9.0.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^11.0.0",
-    "stylelint-no-unsupported-browser-features": "^5.0.2",
+    "stylelint-no-unsupported-browser-features": "^7.0.0",
     "stylelint-order": "^6.0.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.1.0",

docs/developer-handbook.md

@@ -344,6 +344,31 @@ Avoid nesting selectors, this will make it easier to maintain in the future.
 }
 ```
 
+Use
+[CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
+for layout. These are impacted by the writing mode and provide support for
+right-to-left styling out of the box.
+
+```scss
+// Don't do this
+.my-element {
+  padding-top: 2em;
+  padding-bottom: 2em;
+  margin-left: 2em;
+  position: relative;
+  top: 0.2em;
+}
+
+// Do this instead
+.my-element {
+  padding-block-start: 2em;
+  padding-block-end: 2em;
+  margin-inline-start: 2em;
+  position: relative;
+  inset-block-start: 0.2em;
+}
+```
+
 ### Sass documentation
 
 [SassDoc](http://sassdoc.com) is used to document the Carbon Sass source.

docs/style.md

@@ -439,10 +439,12 @@ function MyComponent({ translateWithId: t = translateWithId }) {
 
   return (
     <>
-      <span>The current count is:
-      {t('carbon.component-name.display-count'), translationState}</span>
+      <span>
+        The current count is:
+        {t('carbon.component-name.display-count', translationState)}
+      </span>
       <button onClick={() => updateCount(count + 1)}>
-        {t('carbon.component-name.increment-count')}</span>
+        {t('carbon.component-name.increment-count')}
       </button>
     </>
   );

docs/testing.md

@@ -63,7 +63,7 @@ cd packages/react
 yarn storybook
 ```
 
-One the storybook is loaded, you can run tests against is using the storybook
+Once the storybook is loaded, you can run tests against it using the storybook
 test-utils found in `e2e/test-utils/storybook`. A common use-case for testing a
 component is to use Percy to take a snapshot of a component in a particular
 theme from a specific story in storybook.
@@ -122,7 +122,7 @@ against.
 #### Working with snapshots locally
 
 Sometimes you'll want to debug snapshots locally instead of relying on an
-externaly service to get feedback. To do so, you can use the
+external service to get feedback. To do so, you can use the
 `ENABLE_LOCAL_SNAPSHOTS` environment variable to store snapshots locally. Almost
 any playwright command you run can be prefixed with this value in order to store
 screenshots locally.
@@ -137,13 +137,13 @@ screenshots locally**
 The first time you'll run this command, it will need to generate the baseline
 snapshots for this component. The second time you run it, it will compare the
 snapshots for the current page with what is stored in the screenshot. If the two
-do not match, playwright will report a failure and will provide a link to the
+do not match, Playwright will report a failure and will provide a link to the
 diff image on your machine.
 
 ## FAQ
 
 ### Why am I seeing `browserType.launch: Executable doesn't exist at ../path`?
 
-The browser executables need to be installed so that playwright can run tests
-inside chromium, firefox, etc. They can be installed by running
+The browser executables need to be installed so that Playwright can run tests
+inside Chromium, Firefox, etc. They can be installed by running
 `yarn playwright install`