diff --git a/examples/class-prefix/.gitignore b/examples/class-prefix/.gitignore new file mode 100644 index 000000000000..a547bf36d8d1 --- /dev/null +++ b/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? diff --git a/examples/class-prefix/README.md b/examples/class-prefix/README.md new file mode 100644 index 000000000000..0c804d4aad30 --- /dev/null +++ b/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! diff --git a/examples/class-prefix/index.html b/examples/class-prefix/index.html new file mode 100644 index 000000000000..b46ab83364e3 --- /dev/null +++ b/examples/class-prefix/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json new file mode 100644 index 000000000000..228febf9bc3a --- /dev/null +++ b/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" + } +} diff --git a/examples/class-prefix/src/App.jsx b/examples/class-prefix/src/App.jsx new file mode 100644 index 000000000000..80dd0a6b0cde --- /dev/null +++ b/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 ( +

The current prefix is: {prefix}

+ ) +} + +function App() { + return ( + <> + + + + + + ); +} + +export default App diff --git a/examples/class-prefix/src/index.scss b/examples/class-prefix/src/index.scss new file mode 100644 index 000000000000..f34a79c34733 --- /dev/null +++ b/examples/class-prefix/src/index.scss @@ -0,0 +1,3 @@ +@use '@carbon/react' with ( + $prefix: 'custom' +); diff --git a/examples/class-prefix/src/main.jsx b/examples/class-prefix/src/main.jsx new file mode 100644 index 000000000000..475f242ecfef --- /dev/null +++ b/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( + + + , + document.getElementById('root') +); diff --git a/examples/class-prefix/vite.config.js b/examples/class-prefix/vite.config.js new file mode 100644 index 000000000000..a50be4eeb474 --- /dev/null +++ b/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', + }), + ], +}); diff --git a/examples/id-prefix/.gitignore b/examples/id-prefix/.gitignore new file mode 100644 index 000000000000..a547bf36d8d1 --- /dev/null +++ b/examples/id-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? diff --git a/examples/id-prefix/README.md b/examples/id-prefix/README.md new file mode 100644 index 000000000000..4852068bcb5b --- /dev/null +++ b/examples/id-prefix/README.md @@ -0,0 +1,49 @@ +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). + +## Id Prefix + +This component is intended to be used in limited cases, primarily only if you +have id conflicts when using v10 and v11 packages at the same time during +migration. + +In React, you can use IdPrefix anywhere in your component tree and specify the +prefix with the prefix prop. Most often it's used in the project root wrapping +the entire project + +## 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). + +## V10 and V11 + +This example is a v11 feature using the IdPrefix 🎉. As mentioned above, it will +help with any id conflicts as you migrate over to 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! diff --git a/examples/id-prefix/index.html b/examples/id-prefix/index.html new file mode 100644 index 000000000000..b46ab83364e3 --- /dev/null +++ b/examples/id-prefix/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json new file mode 100644 index 000000000000..761112b93c5d --- /dev/null +++ b/examples/id-prefix/package.json @@ -0,0 +1,22 @@ +{ + "name": "id-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" + } +} diff --git a/examples/id-prefix/src/App.jsx b/examples/id-prefix/src/App.jsx new file mode 100644 index 000000000000..e837b2ed72ef --- /dev/null +++ b/examples/id-prefix/src/App.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useIdPrefix } from '@carbon/react'; +import { IdPrefix } from '@carbon/react'; + +function ExampleComponent() { + const idPrefix = useIdPrefix(); + + return ( +

The current id prefix is: {idPrefix}

+ ) +} + +function App() { + return ( + <> + + + + + + ); +} + +export default App diff --git a/examples/id-prefix/src/index.scss b/examples/id-prefix/src/index.scss new file mode 100644 index 000000000000..f34a79c34733 --- /dev/null +++ b/examples/id-prefix/src/index.scss @@ -0,0 +1,3 @@ +@use '@carbon/react' with ( + $prefix: 'custom' +); diff --git a/examples/id-prefix/src/main.jsx b/examples/id-prefix/src/main.jsx new file mode 100644 index 000000000000..475f242ecfef --- /dev/null +++ b/examples/id-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( + + + , + document.getElementById('root') +); diff --git a/examples/id-prefix/vite.config.js b/examples/id-prefix/vite.config.js new file mode 100644 index 000000000000..a50be4eeb474 --- /dev/null +++ b/examples/id-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', + }), + ], +}); diff --git a/packages/react/src/components/IdPrefix/IdPrefix.mdx b/packages/react/src/components/IdPrefix/IdPrefix.mdx index 0c46810f3ab3..4b408b476736 100644 --- a/packages/react/src/components/IdPrefix/IdPrefix.mdx +++ b/packages/react/src/components/IdPrefix/IdPrefix.mdx @@ -25,8 +25,8 @@ automatically generated `id` attributes placed on certain DOM elements. -This component is used intended to be used in limited cases, primarily only if -you have id conflics when using v10 and v11 packages at the same time during +This component is intended to be used in limited cases, primarily only if +you have id conflicts when using v10 and v11 packages at the same time during migration. In React, you can use `IdPrefix` anywhere in your component tree and specify the diff --git a/yarn.lock b/yarn.lock index d2dfe474791b..6a7e1b4423d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11695,6 +11695,21 @@ __metadata: languageName: node linkType: hard +"class-prefix@workspace:examples/class-prefix": + version: 0.0.0-use.local + resolution: "class-prefix@workspace:examples/class-prefix" + dependencies: + "@carbon/react": ^1.24.0 + "@types/react": ^18.0.0 + "@types/react-dom": ^18.0.0 + "@vitejs/plugin-react": 1.1.3 + react: ^17.0.0 + react-dom: ^17.0.0 + sass: ^1.51.0 + vite: ^2.9.5 + languageName: unknown + linkType: soft + "class-utils@npm:^0.3.5": version: 0.3.6 resolution: "class-utils@npm:0.3.6" @@ -18508,6 +18523,21 @@ fsevents@^1.2.7: languageName: node linkType: hard +"id-prefix@workspace:examples/id-prefix": + version: 0.0.0-use.local + resolution: "id-prefix@workspace:examples/id-prefix" + dependencies: + "@carbon/react": ^1.24.0 + "@types/react": ^18.0.0 + "@types/react-dom": ^18.0.0 + "@vitejs/plugin-react": 1.1.3 + react: ^17.0.0 + react-dom: ^17.0.0 + sass: ^1.51.0 + vite: ^2.9.5 + languageName: unknown + linkType: soft + "idb@npm:^6.1.4": version: 6.1.5 resolution: "idb@npm:6.1.5"