Merge branch 'main' into datepicker-rtl

.all-contributorsrc

@@ -885,6 +885,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "francinelucca",
+      "name": "Francine Lucca",
+      "avatar_url": "https://avatars.githubusercontent.com/u/40550942?v=4",
+      "profile": "https://github.com/francinelucca",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml

@@ -26,6 +26,15 @@ body:
     attributes:
       label: Justification
       description: 'Provide the business reasons for this request.'
+    validations:
+      required: true
+  - type: textarea
+    id: Screenshots
+    attributes:
+      label: Screenshots
+      description: 'Provide screenshots or a screen capture video of the proposed idea, or what you are unable to accomplish that this enhancement would make possible.'
+    validations:
+      required: true
   - type: textarea
     id: metrics
     attributes:
@@ -48,6 +57,13 @@ body:
       description:
         'Do you want this work within a specific time period? Is it related to
         an upcoming release?'
+  - type: input
+    id: team
+    attributes:
+      label: Your team
+      description: 'Please provide the requesting team you are apart of. @mention design and development members from your team that should be aware of this request.'
+    validations:
+      required: true
   - type: input
     id: resources
     attributes:

.github/workflows/dco.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: "DCO Assistant"
         if: (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/github-action@v2.1.3-beta
+        uses: cla-assistant/github-action@v2.2.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}

.github/workflows/issue-triage.yml

@@ -32,7 +32,7 @@ jobs:
     name: Add issue to Design System project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@v0.1.0
+      - uses: actions/add-to-project@v0.3.0
         with:
           project-url: https://github.com/orgs/carbon-design-system/projects/39
           github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}

.github/workflows/release.yml

@@ -32,7 +32,9 @@ jobs:
         run: yarn ci-check
 
       - name: Publish packages under the `next` dist tag
-        run: yarn lerna publish from-package --dist-tag next --yes
+        run:
+          yarn lerna publish from-package --dist-tag next --no-verify-access
+          --yes
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.github/workflows/v10-release.yml

@@ -30,7 +30,9 @@ jobs:
         run: yarn ci-check
 
       - name: Publish packages under the `next` dist tag
-        run: yarn lerna publish from-package --dist-tag next --yes
+        run:
+          yarn lerna publish from-package --dist-tag next --no-verify-access
+          --yes
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.nvmrc

@@ -1 +1 @@
-16.16
+16.17

README.md

@@ -198,6 +198,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/dezkareid"><img src="https://avatars.githubusercontent.com/u/1269896?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joel Humberto Gómez Paredes</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=dezkareid" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/NashJames"><img src="https://avatars.githubusercontent.com/u/37304960?v=4?s=100" width="100px;" alt=""/><br /><sub><b>James Nash</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=NashJames" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=NashJames" title="Documentation">📖</a></td>
     <td align="center"><a href="http://jakubfaliszewski.github.io/portfolio/"><img src="https://avatars.githubusercontent.com/u/25402419?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Faliszewski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jakubfaliszewski" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/francinelucca"><img src="https://avatars.githubusercontent.com/u/40550942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Francine Lucca</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Documentation">📖</a></td>
   </tr>
 </table>
 

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -48,6 +48,6 @@
     "eslint-restricted-globals": "^0.2.0"
   },
   "devDependencies": {
-    "prettier": "^2.6.2"
+    "prettier": "^2.7.1"
   }
 }

config/jest-config-carbon/package.json

@@ -2,7 +2,7 @@
   "name": "jest-config-carbon",
   "private": true,
   "description": "Jest configuration and preset for Carbon",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/prettier-config-carbon/package.json

@@ -24,6 +24,6 @@
     "prettier": "^2.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.6.2"
+    "prettier": "^2.7.1"
   }
 }

config/stylelint-config-carbon/package.json

@@ -37,7 +37,7 @@
     "stylelint-scss": "^4.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "stylelint": "^14.3.0"
   }
 }

docs/developer-handbook.md

@@ -682,6 +682,14 @@ original name and add it to the corresponding `deprecated.yml` file. They can
 still contribute the newly named asset, and it is recommended that they specify
 the replacement for the icon in `deprecated.yml` under the `reason` field.
 
+In the event that a change needs to be reflected immediately due to a change in
+business relationship or other matter, the asset must still be deprecated and
+not removed to avoid a breaking change.
+
+To reflect the change immediately, both the Carbon website and the IDL website
+should be updated to no longer show the file in the icon or pictogram library.
+[Here's an example PR](https://github.com/carbon-design-system/carbon-website/pull/2781)
+
 ### Code Patterns
 
 #### Deprecating a component

docs/experimental-code.md

@@ -0,0 +1,96 @@
+# Experimental Code
+
+The team occasionally will author code, or accept contributions, that is
+considered experimental or unstable. The goal for this code is to ship it as
+unstable for sponsor groups to leverage. During this time, the team can get
+feedback around what is working and what does not work so that changes can be
+made before an official release.
+
+This code should be treated as experimental and will break between release
+versions for the package that it is being imported from.
+
+- The API is not fixed, and is likely to change
+- The API is not bound by semver
+- The component export may change, be renamed, or removed in the future without
+  warning
+
+## Naming experimental code
+
+For experimental or unstable code, we use the `unstable_` prefix. For example:
+
+```js
+// An unstable method
+function unstable_layout() {
+  // ...
+}
+
+// An unstable variable
+const unstable_meta = {
+  // ...
+};
+
+// An unstable component will retain its name, specifically for things like
+// the rules of hooks plugin which depend on the correct casing of the name
+function Pagination(props) {
+  // ...
+}
+
+// However, when we export the component we will export it with the `unstable_`
+// prefix. (Similar to React.unstable_Suspense, React.unstable_Profiler)
+export { default as unstable_Pagination } from './components/Pagination';
+```
+
+For teams using these features, they will need to import the functionality by
+using the `unstable_` prefix. For example:
+
+```jsx
+import { unstable_Pagination as Pagination } from 'carbon-components-react';
+```
+
+## Experimental status
+
+Components with the prefix `unstable_`, eg, `unstable_ComponentName` are
+experimental
+
+Within the storybook these components' stories are prefixed, and may include a
+notice regarding specific instability or experimental status.
+
+## Moving to stable
+
+Over time it becomes apparent an experimental API has stabilized and suits the
+needs of most users. When there hasn't been much movement on a component, it can
+be marked to be moved from "experimental" status to be "stable" by opening a new
+issue requesting it be moved to stable.
+
+The following criteria need to be met when moving a component from experimental
+to stable:
+
+- [ ] All files have a copyright banner
+- [ ] All components exported in `src/index.js` and should not be `unstable_`
+      prefixed
+- [ ] Component has a label in the github repository
+- [ ] Component should be documented on the website
+  - [ ] Component should have a usage, style, and code tab
+  - [ ] Component may have a component demo
+- [ ] For each component exported:
+  - [ ] Component is written as a function declaration or uses `forwardRef`
+  - [ ] Component has `propTypes` defined
+    - [ ] Each prop type has a comment (used in storybook)
+    - [ ] Prop types are as specific as needed, prefer `PropTypes.shape` over
+          `PropTypes.object` if possible
+  - [ ] Default props are listed as default args in the function definition (not
+        in defaultProps)
+    - [ ] Note: default props should be stable, in other words props like
+          `onClick = () => {}` can cause re-renders since the function identity
+          is not stable
+  - [ ] Component has a story in `<ComponentName>.stories.js`
+    - [ ] Component has an mdx document that follows our outline
+    - [ ] mdx document coverages at least common use-cases and provides a prop
+          table
+    - [ ] Stories cover at least common use-cases
+    - [ ] Stories may include a `Playground` story for controls
+    - [ ] Stories should mirror intended usage of the component
+  - [ ] Component has unit/integration tests written in RTL for testing the
+        component API
+  - [ ] Component is tested via VRT for at least the initial render state
+  - [ ] Component is tested via AVT for at least the initial render state

docs/migration/v11.md

@@ -540,6 +540,20 @@ can be shortened to `scss/components/<component>` since Dart Sass resolves
 @use '@carbon/react/scss/components/accordion';
 ```
 
+#### scss/components/data-table_data-table.scss
+
+DataTable styles are no longer all bundled into one stylesheet. To include
+styles for DataTable actions, expand, skeleton, and sort you'll need to `@use`
+each module as needed.
+
+| v10                                                                  | v11                                                            |
+| :------------------------------------------------------------------- | :------------------------------------------------------------- |
+| `@import 'carbon-components/scss/components/data-table/data-table';` | `@use '@carbon/styles/scss/components/data-table';`            |
+|                                                                      | `@use '@carbon/styles/scss/components/data-table/action';`     |
+|                                                                      | `@use '@carbon/styles/scss/components/data-table/expandable';` |
+|                                                                      | `@use '@carbon/styles/scss/components/data-table/skeleton';`   |
+|                                                                      | `@use '@carbon/styles/scss/components/data-table/sort';`       |
+
 #### Component tokens
 
 In some situations, you may want to use or change the tokens for a specific
@@ -914,6 +928,9 @@ spacing.
 
 - The deprecated prop `isMobile` is no longer needed and has been removed
 - The `className` prop is now applied to the outermost element of `NumberInput`
+- `imaginaryTarget` is no longer available on the `onChange` event
+  - The signature for `onChange` is `onChange(event, {value, direction})`
+  - To fully control a NumberInput, use `value` to track internal state updates
 
 ### OverflowMenu
 
@@ -1936,12 +1953,17 @@ You can use a "compatibility theme" by setting the `$fallback` to a value from
 `scss/compat/themes`. For example:
 
 ```scss
-@use '@carbon/themes/scss/compat/themes' as compat;
-@use '@carbon/themes/scss/themes';
-@use '@carbon/themes/scss/theme' with (
+@use '@carbon/react/scss/compat/themes' as compat;
+@use '@carbon/react/scss/themes';
+@use '@carbon/react/scss/theme' with (
   $fallback: compat.$g100,
   $theme: themes.$g100
 );
+@use '@carbon/react';
+
+:root {
+  @include theme.theme();
+}
 ```
 
 In this code snippet, we set the current theme to `$g100` and include the
@@ -1970,33 +1992,33 @@ were importing `@carbon/type/scss/styles` in v10 you would now only import
 
 **Sass API**
 
-| Filename                              | v10                                  | v11                                     |
-| ------------------------------------- | ------------------------------------ | --------------------------------------- |
-| `scss/index.scss`                     |                                      | Removed, use `@carbon/type` directly    |
-| `scss/type.scss`                      |                                      | Removed, use `@carbon/type` directly    |
-| `scss/_classes.scss`                  | `@mixin carbon--type-classes`        | Renamed to `@mixin type-classes`        |
-| `scss/font-face/_mono.scss`           | `@mixin carbon--font-face-mono`      | Removed, use `@carbon/styles/scss/font` |
-| `scss/font-face/_sans-condensed.scss` | `@mixin carbon--font-face-condensed` | Removed, use `@carbon/styles/scss/font` |
-| `scss/font-face/_sans.scss`           | `@mixin carbon--font-face-sans`      | Removed, use `@carbon/styles/scss/font` |
-| `scss/font-face/_serif.scss`          | `@mixin carbon--font-face-serif`     | Removed, use `@carbon/styles/scss/font` |
-| `scss/font-face/_settings.scss`       | `$carbon--font-display`              | Removed                                 |
-| `scss/_font-family.scss`              | `$carbon--font-families`             | Renamed to `$font-families`             |
-|                                       | `@function carbon--font-family`      | Renamed to `@function font-family`      |
-|                                       | `@mixin carbon--font-family`         | Renamed to `@mixin font-family`         |
-|                                       | `$carbon--font-weights`              | Renamed to `$font-weights`              |
-|                                       | `@function carbon--font-weight`      | Renamed to `@function font-weight`      |
-|                                       | `@mixin carbon--font-weight`         | Renamed to `@mixin font-weight`         |
-| `scss/_prefix.scss`                   |                                      | No Changes                              |
-| `scss/_reset.scss`                    | `@mixin carbon--default-type`        | Renamed to `@mixin default-type`        |
-|                                       | `@mixin carbon--type-reset`          | Renamed to `@mixin type-reset`          |
-| `scss/_scale.scss`                    | `@function carbon--get-type-size`    | Removed, use `type-scale` instead       |
-|                                       | `$carbon--type-scale`                | Renamed to `$type-scale`                |
-|                                       | `@function carbon--type-scale`       | Renamed to `@function type-scale`       |
-|                                       | `@mixin carbon--type-scale`          | Renamed to `@mixin type-scale`          |
-|                                       | `@mixin carbon--font-size`           | Renamed to `@mixin font-size`           |
-| `scss/_styles.scss`                   | `@mixin carbon--type-style`          | Renamed to `@mixin type-style`          |
-|                                       | `$caption-01`                        | Removed                                 |
-|                                       | `$caption-02`                        | Removed                                 |
+| Filename                              | v10                                  | v11                                      |
+| ------------------------------------- | ------------------------------------ | ---------------------------------------- |
+| `scss/index.scss`                     |                                      | Removed, use `@carbon/type` directly     |
+| `scss/type.scss`                      |                                      | Removed, use `@carbon/type` directly     |
+| `scss/_classes.scss`                  | `@mixin carbon--type-classes`        | Renamed to `@mixin type-classes`         |
+| `scss/font-face/_mono.scss`           | `@mixin carbon--font-face-mono`      | Removed, use `@carbon/styles/scss/fonts` |
+| `scss/font-face/_sans-condensed.scss` | `@mixin carbon--font-face-condensed` | Removed, use `@carbon/styles/scss/fonts` |
+| `scss/font-face/_sans.scss`           | `@mixin carbon--font-face-sans`      | Removed, use `@carbon/styles/scss/fonts` |
+| `scss/font-face/_serif.scss`          | `@mixin carbon--font-face-serif`     | Removed, use `@carbon/styles/scss/fonts` |
+| `scss/font-face/_settings.scss`       | `$carbon--font-display`              | Removed                                  |
+| `scss/_font-family.scss`              | `$carbon--font-families`             | Renamed to `$font-families`              |
+|                                       | `@function carbon--font-family`      | Renamed to `@function font-family`       |
+|                                       | `@mixin carbon--font-family`         | Renamed to `@mixin font-family`          |
+|                                       | `$carbon--font-weights`              | Renamed to `$font-weights`               |
+|                                       | `@function carbon--font-weight`      | Renamed to `@function font-weight`       |
+|                                       | `@mixin carbon--font-weight`         | Renamed to `@mixin font-weight`          |
+| `scss/_prefix.scss`                   |                                      | No Changes                               |
+| `scss/_reset.scss`                    | `@mixin carbon--default-type`        | Renamed to `@mixin default-type`         |
+|                                       | `@mixin carbon--type-reset`          | Renamed to `@mixin type-reset`           |
+| `scss/_scale.scss`                    | `@function carbon--get-type-size`    | Removed, use `type-scale` instead        |
+|                                       | `$carbon--type-scale`                | Renamed to `$type-scale`                 |
+|                                       | `@function carbon--type-scale`       | Renamed to `@function type-scale`        |
+|                                       | `@mixin carbon--type-scale`          | Renamed to `@mixin type-scale`           |
+|                                       | `@mixin carbon--font-size`           | Renamed to `@mixin font-size`            |
+| `scss/_styles.scss`                   | `@mixin carbon--type-style`          | Renamed to `@mixin type-style`           |
+|                                       | `$caption-01`                        | Removed                                  |
+|                                       | `$caption-02`                        | Removed                                  |
 
 ## Type tokens