diff --git a/config/eslint-config-carbon/internal.js b/config/eslint-config-carbon/internal.js
index 85e321825d58..ad91d07bb129 100644
--- a/config/eslint-config-carbon/internal.js
+++ b/config/eslint-config-carbon/internal.js
@@ -14,5 +14,6 @@ module.exports = {
require.resolve('./plugins/react'),
require.resolve('./plugins/storybook'),
require.resolve('./plugins/testing-library'),
+ require.resolve('./plugins/eslint-plugin-playwright'),
],
};
diff --git a/config/eslint-config-carbon/plugins/eslint-plugin-playwright.js b/config/eslint-config-carbon/plugins/eslint-plugin-playwright.js
new file mode 100644
index 000000000000..a43e27ce1fb5
--- /dev/null
+++ b/config/eslint-config-carbon/plugins/eslint-plugin-playwright.js
@@ -0,0 +1,34 @@
+const prefixes = [
+ '@avt-default-state',
+ '@avt-advanced-states',
+ '@avt-keyboard-nav',
+];
+const prefixesList = prefixes.join(' | \n');
+
+module.exports = {
+ plugins: ['eslint-plugin-playwright'],
+ overrides: [
+ {
+ extends: ['plugin:playwright/recommended'],
+ files: ['*-test.avt.e2e.js'],
+ rules: {
+ 'playwright/valid-title': [
+ 'error',
+ {
+ mustMatch: {
+ describe: [
+ /^(\s*@avt(\s+\S+)*\s*)$/.source,
+ `Describe titles should start with "@avt" prefix`,
+ ],
+ test: [
+ /^(\s*(@avt-default-state||@avt-advanced-states||@avt-keyboard-nav)(\s+\S+)*\s*)$/
+ .source,
+ `Test titles should start with one of the following prefixes: ${prefixesList}`,
+ ],
+ },
+ },
+ ],
+ },
+ },
+ ],
+};
diff --git a/e2e/components/Accordion/Accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js
index ee836745df7d..7a224b0176a7 100644
--- a/e2e/components/Accordion/Accordion-test.avt.e2e.js
+++ b/e2e/components/Accordion/Accordion-test.avt.e2e.js
@@ -10,7 +10,7 @@
import { expect, test } from '@playwright/test';
import { visitStory } from '../../test-utils/storybook';
-test.describe('Accordion @avt', () => {
+test.describe('@avt Accordion', () => {
test('@avt-default-state', async ({ page }) => {
await visitStory(page, {
component: 'Accordion',
diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json
index 6718536233ac..b20c78da3879 100644
--- a/examples/class-prefix/package.json
+++ b/examples/class-prefix/package.json
@@ -1,7 +1,7 @@
{
"name": "class-prefix",
"private": true,
- "version": "0.47.0",
+ "version": "0.48.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json
index d6a12ed4108e..a9b111e1432a 100644
--- a/examples/codesandbox-styles/package.json
+++ b/examples/codesandbox-styles/package.json
@@ -1,7 +1,7 @@
{
"name": "codesandbox-styles",
"private": true,
- "version": "0.53.0",
+ "version": "0.54.0",
"type": "module",
"scripts": {
"dev": "vite"
@@ -11,6 +11,6 @@
"vite": "^4.3.8"
},
"dependencies": {
- "@carbon/styles": "^1.50.0"
+ "@carbon/styles": "^1.51.0"
}
}
diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json
index 164ece439296..525dbbbaaf94 100644
--- a/examples/custom-theme/package.json
+++ b/examples/custom-theme/package.json
@@ -1,7 +1,7 @@
{
"name": "custom-theme",
"private": true,
- "version": "0.48.0",
+ "version": "0.49.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json
index 3cf6fb9e9b3b..aac4311dab03 100644
--- a/examples/id-prefix/package.json
+++ b/examples/id-prefix/package.json
@@ -1,7 +1,7 @@
{
"name": "id-prefix",
"private": true,
- "version": "0.47.0",
+ "version": "0.48.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/incremental-migration-vite/package.json b/examples/incremental-migration-vite/package.json
index fd1f2114dc6d..c91cdb391c48 100644
--- a/examples/incremental-migration-vite/package.json
+++ b/examples/incremental-migration-vite/package.json
@@ -1,7 +1,7 @@
{
"name": "incremental-migration-vite",
"private": true,
- "version": "0.15.0",
+ "version": "0.16.0",
"scripts": {
"dev": "vite",
"build": "vite build",
@@ -12,7 +12,7 @@
},
"dependencies": {
"@carbon/icons-react": "^10.49.0",
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"carbon-components": "^10.57.0",
"carbon-components-react": "^7.57.0",
"carbon-icons": "^7.0.7",
diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json
index 00002c141257..a606b4f30d5f 100644
--- a/examples/light-dark-mode/package.json
+++ b/examples/light-dark-mode/package.json
@@ -1,7 +1,7 @@
{
"name": "examples-light-dark",
"private": true,
- "version": "0.48.0",
+ "version": "0.49.0",
"scripts": {
"build": "next build",
"dev": "next dev",
@@ -9,7 +9,7 @@
"start": "next start"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"next": "13.5.1",
"react": "18.2.0",
"react-dom": "18.2.0"
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 2d8b7ab5e036..b27d7a22f4c9 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -1,7 +1,7 @@
{
"name": "examples-nextjs",
"private": true,
- "version": "0.50.0",
+ "version": "0.51.0",
"scripts": {
"build": "next build",
"dev": "next dev",
@@ -9,7 +9,7 @@
"start": "next start"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"next": "13.5.6",
"react": "18.2.0",
"react-dom": "18.2.0"
diff --git a/examples/v10-token-compat-in-v11/package.json b/examples/v10-token-compat-in-v11/package.json
index c535fc9ae411..ea26cfdbfa88 100644
--- a/examples/v10-token-compat-in-v11/package.json
+++ b/examples/v10-token-compat-in-v11/package.json
@@ -1,7 +1,7 @@
{
"name": "v10-token-compat-in-v11",
"private": true,
- "version": "0.48.0",
+ "version": "0.49.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/vite/package.json b/examples/vite/package.json
index d8951e4c35d9..a5acd6af4978 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -1,7 +1,7 @@
{
"name": "vite",
"private": true,
- "version": "0.48.0",
+ "version": "0.49.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
+ "@carbon/react": "^1.51.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/package.json b/package.json
index 9c9dc1c4e905..f9b331d6f230 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest -c jest.e2e.config.js",
- "postinstall": "husky install"
+ "postinstall": "husky"
},
"resolutions": {
"@types/react": "~18.2.33",
@@ -62,9 +62,10 @@
"cross-spawn": "^7.0.0",
"doctoc": "^2.0.0",
"eslint": "^8.40.0",
+ "eslint-plugin-playwright": "^0.22.1",
"fs-extra": "^11.0.0",
"glob": "^10.0.0",
- "husky": "^8.0.0",
+ "husky": "^9.0.0",
"jest": "^28.1.0",
"jest-junit": "^16.0.0",
"lerna": "^8.0.0",
diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json
index da362572113b..72e0f3e80267 100644
--- a/packages/carbon-components-react/package.json
+++ b/packages/carbon-components-react/package.json
@@ -1,7 +1,7 @@
{
"name": "carbon-components-react",
"description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
- "version": "8.50.0",
+ "version": "8.51.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -41,8 +41,8 @@
"sass": "^1.33.0"
},
"dependencies": {
- "@carbon/react": "^1.50.0",
- "@carbon/styles": "^1.50.0",
+ "@carbon/react": "^1.51.0",
+ "@carbon/styles": "^1.51.0",
"@carbon/telemetry": "0.1.0",
"chalk": "1.1.3"
},
diff --git a/packages/carbon-components-react/scss/components/skeleton-styles/_ai-skeleton-styles.scss b/packages/carbon-components-react/scss/components/skeleton-styles/_ai-skeleton-styles.scss
new file mode 100644
index 000000000000..c07f6ee77f00
--- /dev/null
+++ b/packages/carbon-components-react/scss/components/skeleton-styles/_ai-skeleton-styles.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';
diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json
index 38ce9b203d51..9a494a7f1d6f 100644
--- a/packages/carbon-components/package.json
+++ b/packages/carbon-components/package.json
@@ -1,7 +1,7 @@
{
"name": "carbon-components",
"description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
- "version": "11.50.0",
+ "version": "11.51.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -42,7 +42,7 @@
"sass": "^1.33.0"
},
"dependencies": {
- "@carbon/styles": "^1.50.0",
+ "@carbon/styles": "^1.51.0",
"@carbon/telemetry": "0.1.0",
"chalk": "1.1.3"
},
diff --git a/packages/carbon-components/scss/components/skeleton-styles/_ai-skeleton-styles.scss b/packages/carbon-components/scss/components/skeleton-styles/_ai-skeleton-styles.scss
new file mode 100644
index 000000000000..b75ddc45dd0a
--- /dev/null
+++ b/packages/carbon-components/scss/components/skeleton-styles/_ai-skeleton-styles.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';
diff --git a/packages/elements/package.json b/packages/elements/package.json
index 320017643c8b..a7abf940c70f 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/elements",
"description": "A collection of design elements in code for the IBM Design Language",
- "version": "11.39.0",
+ "version": "11.40.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -41,7 +41,7 @@
"@carbon/icons": "^11.36.0",
"@carbon/layout": "^11.20.0",
"@carbon/motion": "^11.16.0",
- "@carbon/themes": "^11.31.0",
+ "@carbon/themes": "^11.32.0",
"@carbon/type": "^11.25.0"
},
"devDependencies": {
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index de34dd015ec2..ed0294894503 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -16,6 +16,9 @@ Array [
"aiGradientStart01",
"aiGradientStart02",
"aiInnerShadow",
+ "aiOverlay",
+ "aiSkeletonBackground",
+ "aiSkeletonElementBackground",
"background",
"backgroundActive",
"backgroundBrand",
diff --git a/packages/react/README.md b/packages/react/README.md
index 09bb47c58110..231335eee797 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -51,6 +51,25 @@ to include `node_modules` in its `includePaths` option. For more information,
checkout the [configuration](../styles/docs/sass.md#configuration) section in
our Sass docs.
+### TypeScript
+
+There is an ongoing project to add `*.d.ts` files to `@carbon/react`. Though not
+all components have yet been typed, you can still use the project successfully
+in a TypeScript setting, provided you amend to your `tsconfig.json` or
+equivalent configuration file. Include the `skipLibCheck: true` compiler option:
+
+```json
+{
+ "compilerOptions": {
+ "skipLibCheck": true
+ }
+}
+```
+
+To track the progress of TypeScript adoption, check out:
+
+- [TypeScript Adoption](https://github.com/orgs/carbon-design-system/projects/53)
+
## Usage
The `@carbon/react` package provides components and icons for the Carbon Design
diff --git a/packages/react/package.json b/packages/react/package.json
index 0dfde2833d9b..2d80aa5c4269 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/react",
"description": "React components for the Carbon Design System",
- "version": "1.50.0",
+ "version": "1.51.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -51,7 +51,7 @@
"@carbon/feature-flags": "^0.16.0",
"@carbon/icons-react": "^11.36.0",
"@carbon/layout": "^11.20.0",
- "@carbon/styles": "^1.50.0",
+ "@carbon/styles": "^1.51.0",
"@ibm/telemetry-js": "^1.2.0",
"classnames": "2.5.1",
"copy-to-clipboard": "^3.3.1",
@@ -79,7 +79,7 @@
"@babel/preset-react": "^7.22.3",
"@babel/preset-typescript": "^7.21.5",
"@carbon/test-utils": "^10.30.0",
- "@carbon/themes": "^11.31.0",
+ "@carbon/themes": "^11.32.0",
"@rollup/plugin-babel": "^6.0.0",
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
@@ -108,7 +108,7 @@
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.5",
- "postcss-loader": "^7.0.0",
+ "postcss-loader": "^8.0.0",
"process": "^0.11.10",
"prop-types": "^15.7.2",
"react": "^18.2.0",
diff --git a/packages/react/scss/components/skeleton-styles/_ai-skeleton-styles.scss b/packages/react/scss/components/skeleton-styles/_ai-skeleton-styles.scss
new file mode 100644
index 000000000000..c29b3da911ef
--- /dev/null
+++ b/packages/react/scss/components/skeleton-styles/_ai-skeleton-styles.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js b/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js
new file mode 100644
index 000000000000..0c435924623e
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AiSkeletonIcon from './AiSkeletonIcon';
+
+export default {
+ title: 'Experimental/unstable__AiSkeleton/AiSkeletonIcon',
+ component: AiSkeletonIcon,
+};
+
+const propsSkeleton = {
+ style: {
+ margin: '50px',
+ },
+};
+
+const propsSkeleton2 = {
+ style: {
+ margin: '50px',
+ width: '24px',
+ height: '24px',
+ },
+};
+
+export const Default = () => (
+ <>
+
+
+
+);
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx b/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx
new file mode 100644
index 000000000000..e85843607273
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { SkeletonIcon } from '../SkeletonIcon';
+
+interface AiSkeletonIconProps {
+ /**
+ * Specify an optional className to add.
+ */
+ className?: string;
+
+ /**
+ * The CSS styles.
+ */
+ style?: React.CSSProperties;
+}
+
+const AiSkeletonIcon = ({ className, ...rest }: AiSkeletonIconProps) => {
+ const prefix = usePrefix();
+ const AiSkeletonIconClasses = classNames(className, {
+ [`${prefix}--skeleton__icon--ai`]: true,
+ });
+
+ return ;
+};
+
+AiSkeletonIcon.propTypes = {
+ /**
+ * Specify an optional className to add.
+ */
+ className: PropTypes.string,
+
+ /**
+ * The CSS styles.
+ */
+ style: PropTypes.object,
+};
+
+export default AiSkeletonIcon;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js b/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js
new file mode 100644
index 000000000000..5a6b323c50bf
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+
+export default {
+ title: 'Experimental/unstable__AiSkeleton/AiSkeletonPlaceholder',
+ component: AiSkeletonPlaceholder,
+};
+
+export const Default = () => ;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx b/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx
new file mode 100644
index 000000000000..cc5e849a4fb9
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { SkeletonPlaceholder } from '../SkeletonPlaceholder';
+
+export interface AiSkeletonPlaceholderProps {
+ /**
+ * Add a custom class to the component to set the height and width
+ */
+ className?: string;
+}
+
+const AiSkeletonPlaceholder = ({
+ className,
+ ...other
+}: AiSkeletonPlaceholderProps) => {
+ const prefix = usePrefix();
+ const AiSkeletonPlaceholderClasses = classNames(
+ { className, [`${prefix}--skeleton__placeholder--ai`]: true },
+ className
+ );
+
+ return (
+
+ );
+};
+
+AiSkeletonPlaceholder.propTypes = {
+ /**
+ * Add a custom class to the component
+ * to set the height and width
+ */
+ className: PropTypes.string,
+};
+
+export default AiSkeletonPlaceholder;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js b/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
new file mode 100644
index 000000000000..5f75ea23a228
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AiSkeletonText from './AiSkeletonText';
+
+export default {
+ title: 'Experimental/unstable__AiSkeleton/AiSkeletonText',
+ component: AiSkeletonText,
+};
+
+export const Default = () => ;
+
+export const Playground = (args) => ;
+
+Playground.args = {
+ heading: false,
+ paragraph: false,
+ width: '100%',
+ lineCount: 3,
+};
+
+Playground.argTypes = {
+ className: {
+ control: false,
+ },
+ heading: {
+ control: {
+ type: 'boolean',
+ },
+ },
+ paragraph: {
+ control: {
+ type: 'boolean',
+ },
+ },
+ width: {
+ control: {
+ type: 'text',
+ },
+ },
+ lineCount: {
+ control: {
+ type: 'number',
+ },
+ },
+};
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx b/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx
new file mode 100644
index 000000000000..69a1b3a085e1
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { SkeletonText } from '../SkeletonText';
+
+interface AiSkeletonTextProps {
+ /**
+ * Specify an optional className to be applied to the container node.
+ */
+ className?: string;
+
+ /**
+ * Generates skeleton text at a larger size.
+ */
+ heading?: boolean;
+
+ /**
+ * The number of lines shown if paragraph is true.
+ */
+ lineCount?: number;
+
+ /**
+ * Set this to true to generate multiple lines of text.
+ */
+ paragraph?: boolean;
+
+ /**
+ * Width (in px or %) of single line of text or max-width of paragraph lines.
+ */
+ width?: string;
+}
+
+const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => {
+ const prefix = usePrefix();
+ const aiSkeletonTextClasses = classNames(className, {
+ [`${prefix}--skeleton__text--ai`]: true,
+ });
+
+ return ;
+};
+
+AiSkeletonText.propTypes = {
+ /**
+ * Specify an optional className to be applied to the container node
+ */
+ className: PropTypes.string,
+ /**
+ * generates skeleton text at a larger size
+ */
+ heading: PropTypes.bool,
+ /**
+ * the number of lines shown if paragraph is true
+ */
+ lineCount: PropTypes.number,
+ /**
+ * will generate multiple lines of text
+ */
+ paragraph: PropTypes.bool,
+ /**
+ * width (in px or %) of single line of text or max-width of paragraph lines
+ */
+ width: PropTypes.string,
+};
+
+export default AiSkeletonText;
diff --git a/packages/react/src/components/AiSkeleton/index.tsx b/packages/react/src/components/AiSkeleton/index.tsx
new file mode 100644
index 000000000000..439f4ce25736
--- /dev/null
+++ b/packages/react/src/components/AiSkeleton/index.tsx
@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AiSkeletonIcon from './AiSkeletonIcon';
+import AiSkeletonText from './AiSkeletonText';
+
+export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
index 25b74d738095..7f47641fb028 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -41,99 +41,111 @@ export default {
};
export const Default = () => {
+ const [open, setOpen] = useState(true);
return (
-
-
-
-
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a shared
- domain, a shared subdomain, or a shared domain and host.
-
-
-
-
-
-
+ <>
+
+ setOpen(false)}>
+
+
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a shared
+ domain, a shared subdomain, or a shared domain and host.
+
+
+
+
+
+
+
);
};
export const FullWidth = () => {
+ const [open, setOpen] = useState(true);
return (
-
-
-
-
-
-
-
- Column A
-
-
- Column B
-
-
- Column C
-
-
-
-
-
- Row 1
- Row 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
- dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
- posuere sem vel euismod dignissim. Nulla ut cursus dolor.
- Pellentesque vulputate nisl a porttitor interdum.
-
-
-
- Row 2
- Row 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
- dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
- posuere sem vel euismod dignissim. Nulla ut cursus dolor.
- Pellentesque vulputate nisl a porttitor interdum.
-
-
-
- Row 3
- Row 3
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
- dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
- posuere sem vel euismod dignissim. Nulla ut cursus dolor.
- Pellentesque vulputate nisl a porttitor interdum.
-
-
-
-
-
-
-
+ <>
+
+ setOpen(false)} isFullWidth>
+
+
+
+
+
+
+ Column A
+
+
+ Column B
+
+
+ Column C
+
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue.
+ Aenean posuere sem vel euismod dignissim. Nulla ut cursus
+ dolor. Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue.
+ Aenean posuere sem vel euismod dignissim. Nulla ut cursus
+ dolor. Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 3
+ Row 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue.
+ Aenean posuere sem vel euismod dignissim. Nulla ut cursus
+ dolor. Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+
+
+
+
+
);
};
export const PassiveModal = () => {
+ const [open, setOpen] = useState(true);
return (
-
-
-
-
+ <>
+
+ setOpen(false)}>
+
+
+
+
);
};
@@ -201,75 +213,80 @@ export const WithStateManager = () => {
};
export const WithScrollingContent = () => {
+ const [open, setOpen] = useState(true);
return (
-
-
-
-
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a shared
- domain, a shared subdomain, or a shared domain and host.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu
- nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo
- vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies
- fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel
- vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus
- tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare.
- Etiam gravida orci ut lectus dictum, quis ultricies felis mollis.
- Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis
- pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit.
- Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna.
- Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec
- molestie sollicitudin.{' '}
-
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a shared
+ domain, a shared subdomain, or a shared domain and host.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+ eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae
+ leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt
+ ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio,
+ elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit
+ ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare
+ ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis
+ mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante
+ quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at
+ elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales
+ magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra
+ leo nec molestie sollicitudin.{' '}
+
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a shared
- domain, a shared subdomain, or a shared domain and host.
-
-
+
+ setOpen(false)}>
+
+
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a shared
+ domain, a shared subdomain, or a shared domain and host.
+
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a shared
- domain, a shared subdomain, or a shared domain and host.
-
-
+
+ setOpen(false)}>
+
+
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a shared
+ domain, a shared subdomain, or a shared domain and host.
+
