Skip to content

Commit 0c9b4fd

Browse files
andreancardonafrancineluccakodiakhq[bot]
authored
feat: migration examples prefix selectors (#13264)
* feat(ContentSwitcher): preliminary unstable refactor * feat: added prefix and id prefix examples * fix: delete content switcher directory * feat: update demos * Update examples/id-prefix/src/App.jsx Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/IdPrefix/index.js * feat: added docs * fix: update context * fix: yarn install * fix: update context 2 * chore: update yarn packages * chore: udpate yarn carbon/react --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 21536a5 commit 0c9b4fd

File tree

18 files changed

+351
-2
lines changed

18 files changed

+351
-2
lines changed

‎examples/class-prefix/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/class-prefix/README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with
2+
[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
3+
4+
## Class Prefix
5+
6+
By default, the prefix used by components is cds. However, you can change this
7+
prefix in Sass and coordinate that change to React using the ClassPrefix
8+
component.
9+
10+
## Getting Started
11+
12+
First, run `yarn` or `npm install` and then run the development server:
13+
14+
```bash
15+
npm run dev
16+
# or
17+
yarn dev
18+
```
19+
20+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the
21+
result.
22+
23+
## Sass
24+
25+
First and foremost, if you want to use v11 styles in any capacity, you'll have
26+
to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
27+
to `dart-sass` in v11. For more information about migrating, visit our docs
28+
[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
29+
30+
In Sass, you can customize this prefix by writing the following:
31+
32+
`@use '@carbon/react' with ( $prefix: 'custom' );`
33+
34+
Similarly, you can configure scss/config directly:
35+
36+
`@use '@carbon/react/scss/config' with ( $prefix: 'custom' );`
37+
38+
## V11
39+
40+
This example is of how to use ClassPrefix from v11 🎉.
41+
42+
## Learn More
43+
44+
To learn more about Next.js, take a look at the following resources:
45+
46+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
47+
features and API.
48+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
49+
50+
You can check out
51+
[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
52+
feedback and contributions are welcome!

‎examples/class-prefix/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎examples/class-prefix/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "class-prefix",
3+
"private": true,
4+
"version": "0.21.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@carbon/react": "^1.24.0",
12+
"react": "^17.0.0",
13+
"react-dom": "^17.0.0"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.0.0",
17+
"@types/react-dom": "^18.0.0",
18+
"@vitejs/plugin-react": "1.1.3",
19+
"sass": "^1.51.0",
20+
"vite": "^2.9.5"
21+
}
22+
}

‎examples/class-prefix/src/App.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { usePrefix } from '@carbon/react';
3+
import { ClassPrefix } from '@carbon/react';
4+
5+
function ExampleComponent() {
6+
const prefix = usePrefix();
7+
8+
return (
9+
<p>The current prefix is: {prefix}</p>
10+
)
11+
}
12+
13+
function App() {
14+
return (
15+
<>
16+
<ExampleComponent />
17+
<ClassPrefix prefix="custom">
18+
<ExampleComponent />
19+
</ClassPrefix>
20+
</>
21+
);
22+
}
23+
24+
export default App

‎examples/class-prefix/src/index.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@use '@carbon/react' with (
2+
$prefix: 'custom'
3+
);

‎examples/class-prefix/src/main.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import './index.scss'
2+
3+
import React from 'react'
4+
import ReactDOM from 'react-dom'
5+
import App from './App'
6+
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
document.getElementById('root')
12+
);

‎examples/class-prefix/vite.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [
7+
react({
8+
jsxRuntime: 'classic',
9+
}),
10+
],
11+
});

‎examples/id-prefix/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/id-prefix/README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with
2+
[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
3+
4+
## Id Prefix
5+
6+
This component is intended to be used in limited cases, primarily only if you
7+
have id conflicts when using v10 and v11 packages at the same time during
8+
migration.
9+
10+
In React, you can use IdPrefix anywhere in your component tree and specify the
11+
prefix with the prefix prop. Most often it's used in the project root wrapping
12+
the entire project
13+
14+
## Getting Started
15+
16+
First, run `yarn` or `npm install` and then run the development server:
17+
18+
```bash
19+
npm run dev
20+
# or
21+
yarn dev
22+
```
23+
24+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the
25+
result.
26+
27+
## Sass
28+
29+
First and foremost, if you want to use v11 styles in any capacity, you'll have
30+
to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
31+
to `dart-sass` in v11. For more information about migrating, visit our docs
32+
[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
33+
34+
## V10 and V11
35+
36+
This example is a v11 feature using the IdPrefix 🎉. As mentioned above, it will
37+
help with any id conflicts as you migrate over to v11.
38+
39+
## Learn More
40+
41+
To learn more about Next.js, take a look at the following resources:
42+
43+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
44+
features and API.
45+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
46+
47+
You can check out
48+
[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
49+
feedback and contributions are welcome!

0 commit comments

Comments
 (0)