Merge branch 'main' into 12378-prefix-fix

config/eslint-config-carbon/package.json

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

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.5.0-rc.0",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

docs/guides/adding-component-types.md

@@ -0,0 +1,150 @@
+# Adding component types
+
+This document lays out the goal, strategy, and guidelines for adding
+[TypeScript](https://www.TypeScriptlang.org/) types for components within
+`@carbon/react`.
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Goal](#goal)
+  - [Purpose](#purpose)
+- [Strategy](#strategy)
+  - [Steps to provide baseline type definitions for components](#steps-to-provide-baseline-type-definitions-for-components)
+- [FAQ](#faq)
+  - [How do I know what's part of the public api?](#how-do-i-know-whats-part-of-the-public-api)
+  - [Should components have both prototypes and ts interface?](#should-components-have-both-prototypes-and-ts-interface)
+  - [Should comment docs be duplicated into the ts interface?](#should-comment-docs-be-duplicated-into-the-ts-interface)
+  - [Where should I put the ts interface in the file?](#where-should-i-put-the-ts-interface-in-the-file)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Goal
+
+The goal of this workstream is to provide as much downstream value to consumers
+who are using TypeScript, as quickly as possible, while writing the least amount
+of TypeScript.
+
+The goal is _not_ to convert the entire codebase to TypeScript right now.
+
+### Purpose
+
+By adding TypeScript types to components we anticipate a number of benefits:
+
+- Developer productivity will increase due to Component API's being
+  self-documenting and providing tight integration with code editor
+  intellisense.
+- The qualtiy of products developed will increase due to more stable, correct,
+  and thorough component API typings provided first-party through
+  `@carbon/react` itself.
+- Maintenance of the types themselves will be simplified by not having to go
+  through the DefinitelyTyped contribution process/system.
+
+Despite these benefits, adding TypeScript to the codebase is still a large shift
+for the developer community surrounding the Carbon Design System. Most projects
+are not using TypeScript, and contributors are more likely to not have in-depth
+knowledge of TypeScript.
+
+The bar to contribute to Carbon should be as low as possible to facilitate
+experimentation, innovation, and progress within the system. Adding TypeScript
+raises this bar of contribution adding additional friction to even the smallest
+of pull requests.
+
+We believe the majority of the benefits of TypeScript can be provided to
+consumers without needing to convert the entire codebase to use TypeScript.
+Overall, this effort will be focused on limiting the amount of TypeScript within
+the repository for now.
+
+## Strategy
+
+TypeScript will be incrementally adopted, focusing first on adding types to
+components prop APIs that are included as part of the public API of
+`@carbon/react`.
+
+Internal components, helpers, function, etc. will not initially be typed. These
+internal files/components not included in the public API should be left as
+`.js`, given a
+[jsdoc type annotation](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#providing-type-hints-in-js-via-jsdoc)
+of `/** @type any */`, and
+[errors should be enabled](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#ts-check)
+by adding `// @ts-check` to the first line in the file.
+
+Other packages, such as `@carbon/icons-react`, `@carbon/elements`, etc will not
+initially be typed.
+
+Within this incremental adoption strategy, **for now types will not be bound to
+semver**.
+
+This means that types are provided on an as-is basis. Ideally types will be
+stable and not ship breaking changes, but the reality is typings may at times be
+incorrect, outdated, or missing. Full details available within our
+[versioning documentation](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/versioning.md#a-change-is-made-to-component-typingsdefinitions).
+
+### Steps to provide baseline type definitions for components
+
+Below is a general outline of what needs to be done for each component within
+the repository. There is an issue tracking curring status of this effort,
+[#12513](https://github.com/carbon-design-system/carbon/issues/12513)
+
+- Change extension to `.tsx`
+- Copying the proptypes def to above the component definition
+- Retool the proptypes to be a ts interface
+- Fix errors as they appear
+- Do not add types to internal components or functions that are not exported as
+  part of the Public API.
+
+  - Leave internals as `.js`
+  - Add a
+    [jsdoc type annotation](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#providing-type-hints-in-js-via-jsdoc)
+    of `/** @type any */`
+  - [Enable errors](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#ts-check)
+    by adding `// @ts-check` to the first line in the file.
+
+- Test your changes - there are a few options here:
+  - At the bottom of a file, write a dummy component that uses the component
+    that you’re converting to ensure that you can still pass all appropriate
+    props that you need to.
+  - Take a storybook example for a component, copy and paste it into the bottom
+    of the .tsx file and validate whether or not it accepts the props as you’ve
+    defined them
+- Submit a pull request for the changes
+  - Please keep pull requests as small as possible
+  - Avoid adding additional components to a single PR unless necessary
+  - [Link to close the related issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword#linking-a-pull-request-to-an-issue-using-a-keyword),
+    e.g. `Closes #12513`
+- Ask questions if you get stuck!
+  - The team is available on slack
+    [`#carbon-wg-typescript`](https://ibm-studios.slack.com/archives/C03C8VASVED),
+    [discord](https://discord.gg/J7JEUEkTRX), or on
+    [the issue itself](https://github.com/carbon-design-system/carbon/issues/12513).
+
+## FAQ
+
+### How do I know what's part of the public api?
+
+- If it's not on [the storybook](https://react.carbondesignsystem.com), it's
+  probably not public.
+- The entire Public API is snapshotted, you can
+  [search the snapshot here](https://github.com/carbon-design-system/carbon/blob/main/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap).
+  If it's not included there, it's not part of the public API.
+
+### Should components have both prototypes and ts interface?
+
+- Yes
+
+### Should comment docs be duplicated into the ts interface?
+
+- Yes
+  - Duplicate comments between the proptypes definition and ts interface
+  - Storybook prefers react-docgen for now
+  - Once we have ts interfaces for everything we can switch out the storybook
+    config to favor TypeScript docs
+
+### Where should I put the ts interface in the file?
+
+- Above the component definition (likely the top of the file)
+  - The component implementation should be sandwiched inbetween the ts interface
+    and the proptypes definition

docs/guides/versioning.md

@@ -6,9 +6,10 @@
 ## Table of Contents
 
 - [Overview](#overview)
-- [`carbon-components-react`](#carbon-components-react)
+- [`carbon-components-react`, `@carbon/react`](#carbon-components-react-carbonreact)
   - [Changes](#changes)
   - [Examples](#examples)
+    - [A change is made to component typings/definitions](#a-change-is-made-to-component-typingsdefinitions)
     - [A new prop is added to a component](#a-new-prop-is-added-to-a-component)
     - [An existing prop is deprecated](#an-existing-prop-is-deprecated)
     - [An existing prop is removed](#an-existing-prop-is-removed)
@@ -17,6 +18,8 @@
     - [A `PropTypes.func` prop type is changed to have different arguments](#a-proptypesfunc-prop-type-is-changed-to-have-different-arguments)
     - [A `PropTypes.func` prop type is changed to have additional arguments](#a-proptypesfunc-prop-type-is-changed-to-have-additional-arguments)
     - [A `PropTypes.func` prop type is changed to have fewer arguments](#a-proptypesfunc-prop-type-is-changed-to-have-fewer-arguments)
+    - [The DOM node that an `id` corresponds to is changed](#the-dom-node-that-an-id-corresponds-to-is-changed)
+    - [The DOM node that an `aria-label` corresponds to is changed](#the-dom-node-that-an-aria-label-corresponds-to-is-changed)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->

e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('FluidDatePicker', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid date picker (range) @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDatePicker',
+          id: 'experimental-unstable-fluiddatepicker--range-with-calendar',
+          theme,
+        });
+      });
+
+      test('fluid date picker (single) @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDatePicker',
+          id: 'experimental-unstable-fluiddatepicker--single',
+          theme,
+        });
+      });
+
+      test('fluid date picker (simple) @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDatePicker',
+          id: 'experimental-unstable-fluiddatepicker--simple',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidDatePicker',
+      id: 'experimental-unstable-fluiddatepicker--range-with-calendar',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await visitStory(page, {
+      component: 'FluidDatePicker',
+      id: 'experimental-unstable-fluiddatepicker--single',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await visitStory(page, {
+      component: 'FluidDatePicker',
+      id: 'experimental-unstable-fluiddatepicker--simple',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidDatePicker');
+  });
+});

examples/codesandbox-styles/package.json

@@ -1,15 +1,15 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.20.0-rc.1",
+  "version": "0.20.0",
   "scripts": {
     "develop": "vite"
   },
   "devDependencies": {
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0",
     "sass": "^1.51.0"
   }
 }

examples/codesandbox-with-sass-compilation/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox-with-sass-compilation",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/codesandbox/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/custom-theme/package.json

@@ -1,14 +1,14 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/incremental-migration/package.json

@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration",
   "private": true,
-  "version": "0.17.0-rc.1",
+  "version": "0.17.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.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.15.0-rc.1",
+  "version": "0.15.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.17.0-rc.1",
+  "version": "0.17.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"

examples/vite/package.json

@@ -1,14 +1,14 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

package.json

@@ -30,7 +30,7 @@
   },
   "resolutions": {
     "@types/react": "~17.0.2",
-    "@types/prop-types": "15.7.4",
+    "@types/prop-types": "15.7.5",
     "ast-types": "^0.14.0",
     "node-sass": "^6.0.0",
     "react": "~17.0.2",