Merge branch 'main' into 13265

.all-contributorsrc

@@ -1067,6 +1067,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "bianca-sparxs",
+      "name": "Bianca Sparxs",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33003148?v=4",
+      "profile": "https://github.com/bianca-sparxs",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -227,6 +227,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://jsehull.com/"><img src="https://avatars.githubusercontent.com/u/9935383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Hull</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jsehull" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/awarrier99"><img src="https://avatars.githubusercontent.com/u/17476235?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashvin Warrier</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=awarrier99" title="Code">💻</a></td>
     <td align="center"><a href="https://galvingao.com/"><img src="https://avatars.githubusercontent.com/u/12567059?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GalvinGao</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=GalvinGao" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/bianca-sparxs"><img src="https://avatars.githubusercontent.com/u/33003148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bianca Sparxs</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=bianca-sparxs" title="Code">💻</a></td>
   </tr>
 </table>
 

config/babel-preset-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-preset-carbon",
   "private": true,
-  "version": "0.4.0-rc.0",
+  "version": "0.4.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -26,6 +26,6 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "babel-plugin-dev-expression": "^0.2.3",
-    "browserslist-config-carbon": "^11.1.0-rc.0"
+    "browserslist-config-carbon": "^11.1.0"
   }
 }

config/browserslist-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browserslist-config-carbon",
   "description": "Browserslist config for the Carbon Design System",
-  "version": "11.1.0-rc.0",
+  "version": "11.1.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "3.1.0-rc.0",
+  "version": "3.1.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.7.0-rc.0",
+  "version": "1.7.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/prettier-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prettier-config-carbon",
   "description": "Prettier config for the Carbon Design System",
-  "version": "0.9.0-rc.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/stylelint-config-carbon/package.json

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

docs/style.md

@@ -255,6 +255,41 @@ change. When creating a new component, even if you do not anticipate an explicit
 need to provide a forwarded ref, it's likely still worthwhile to include one to
 avoid unecessary breaking changes in the future.
 
+#### Authoring dynamic/inline styles
+
+It's increasingly common for applications to use a Content Security Policy (CSP)
+header with a
+[`style-src` directive](https://content-security-policy.com/style-src/). When
+this is configured, inline styles are blocked. Due to this, `style={{}}` can not
+be used on any element within the codebase. The `react/forbid-component-props`
+eslint rule is configured to flag invalid usages of the `style` attribute/prop.
+
+Components that need dynamic or inline styles can author these via the
+[CSS Object Model (CSSOM)](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model).
+Dynamic styles can be set via individual properties on the
+[`CSSStyleDeclaration`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
+interface object provided to
+[`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
+This will usually need to be wrapped in a `useIsomorphicEffect` hook to ensure
+compatibility between SSR and browser environments and also to ensure the value
+is unset if not provided.
+
+```jsx
+function MyComponent({ width }) {
+  const ref = useRef();
+
+  useIsomorphicEffect(() => {
+    if (width) {
+      ref.current.style.width = `${width}px`;
+    } else {
+      ref.current.style.width = null;
+    }
+  }, [width]);
+
+  return <div ref={ref} />;
+}
+```
+
 #### Translating a component
 
 Certain components will need to expose a way for the caller to pass in

e2e/components/Popover/Popover-test.e2e.js

@@ -0,0 +1,45 @@
+/**
+ * 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('Popover', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('Popover - auto align @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Popover',
+          id: 'components-popover--auto-align',
+          theme,
+        });
+      });
+
+      test('Popover - isTabTip @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Popover',
+          id: 'components-popover--tab-tip',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Popover',
+      id: 'components-popover--auto-align',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Popover');
+  });
+});

examples/class-prefix/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/class-prefix/README.md

@@ -0,0 +1,52 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Class Prefix
+
+By default, the prefix used by components is cds. However, you can change this
+prefix in Sass and coordinate that change to React using the ClassPrefix
+component.
+
+## Getting Started
+
+First, run `yarn` or `npm install` and then run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+## Sass
+
+First and foremost, if you want to use v11 styles in any capacity, you'll have
+to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
+to `dart-sass` in v11. For more information about migrating, visit our docs
+[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
+
+In Sass, you can customize this prefix by writing the following:
+
+`@use '@carbon/react' with ( $prefix: 'custom' );`
+
+Similarly, you can configure scss/config directly:
+
+`@use '@carbon/react/scss/config' with ( $prefix: 'custom' );`
+
+## V11
+
+This example is of how to use ClassPrefix from v11 🎉.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!

examples/class-prefix/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

examples/class-prefix/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "class-prefix",
+  "private": true,
+  "version": "0.21.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.24.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "1.1.3",
+    "sass": "^1.51.0",
+    "vite": "^2.9.5"
+  }
+}

examples/class-prefix/src/App.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { usePrefix } from '@carbon/react';
+import { ClassPrefix } from '@carbon/react';
+
+function ExampleComponent() {
+  const prefix = usePrefix();
+
+  return (
+    <p>The current prefix is: {prefix}</p>
+  )
+}
+
+function App() {
+  return (
+    <>
+      <ExampleComponent />
+        <ClassPrefix prefix="custom">
+          <ExampleComponent />
+        </ClassPrefix>
+    </>
+  );
+}
+
+export default App

examples/class-prefix/src/index.scss

@@ -0,0 +1,3 @@
+@use '@carbon/react' with (
+  $prefix: 'custom'
+);

examples/class-prefix/src/main.jsx

@@ -0,0 +1,12 @@
+import './index.scss'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

examples/class-prefix/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});

examples/codesandbox-styles/package.json

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

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

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

examples/codesandbox/package.json

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