Skip to content

Commit

Permalink
Merge branch 'main' into 10987-deprecate-tabs-light
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] authored Mar 9, 2023
2 parents 61155d9 + f4b3903 commit f94b652
Show file tree
Hide file tree
Showing 75 changed files with 3,149 additions and 4,773 deletions.
45 changes: 45 additions & 0 deletions e2e/components/Popover/Popover-test.e2e.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
24 changes: 24 additions & 0 deletions examples/class-prefix/.gitignore
Original file line number Diff line number Diff line change
@@ -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?
52 changes: 52 additions & 0 deletions examples/class-prefix/README.md
Original file line number Diff line number Diff line change
@@ -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!
13 changes: 13 additions & 0 deletions examples/class-prefix/index.html
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions examples/class-prefix/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
24 changes: 24 additions & 0 deletions examples/class-prefix/src/App.jsx
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions examples/class-prefix/src/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@use '@carbon/react' with (
$prefix: 'custom'
);
12 changes: 12 additions & 0 deletions examples/class-prefix/src/main.jsx
Original file line number Diff line number Diff line change
@@ -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')
);
11 changes: 11 additions & 0 deletions examples/class-prefix/vite.config.js
Original file line number Diff line number Diff line change
@@ -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',
}),
],
});
24 changes: 24 additions & 0 deletions examples/id-prefix/.gitignore
Original file line number Diff line number Diff line change
@@ -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?
49 changes: 49 additions & 0 deletions examples/id-prefix/README.md
Original file line number Diff line number Diff line change
@@ -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!
13 changes: 13 additions & 0 deletions examples/id-prefix/index.html
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 22 additions & 0 deletions examples/id-prefix/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
24 changes: 24 additions & 0 deletions examples/id-prefix/src/App.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { useIdPrefix } from '@carbon/react';
import { IdPrefix } from '@carbon/react';

function ExampleComponent() {
const idPrefix = useIdPrefix();

return (
<p>The current id prefix is: {idPrefix}</p>
)
}

function App() {
return (
<>
<ExampleComponent />
<IdPrefix prefix="custom">
<ExampleComponent />
</IdPrefix>
</>
);
}

export default App
3 changes: 3 additions & 0 deletions examples/id-prefix/src/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@use '@carbon/react' with (
$prefix: 'custom'
);
12 changes: 12 additions & 0 deletions examples/id-prefix/src/main.jsx
Original file line number Diff line number Diff line change
@@ -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')
);
11 changes: 11 additions & 0 deletions examples/id-prefix/vite.config.js
Original file line number Diff line number Diff line change
@@ -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',
}),
],
});
Loading

0 comments on commit f94b652

Please sign in to comment.