diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml
index 876d38afa793..92dd06e2eac4 100644
--- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml
@@ -29,6 +29,7 @@ body:
- '@carbon/motion'
- '@carbon/pictograms'
- '@carbon/pictograms-react'
+ - '@carbon/react'
- '@carbon/themes'
- '@carbon/type'
- '@carbon/upgrade'
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 54860b379eac..3eddd09af315 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,9 +5,3 @@ updates:
directory: '/'
schedule:
interval: 'daily'
-
- # Maintain dependencies for npm
- - package-ecosystem: 'npm'
- directory: '/'
- schedule:
- interval: 'daily'
diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 2dacb83c0e8f..6a0371ed8117 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -12,7 +12,7 @@
// https://docs.renovatebot.com/presets-npm/#npmunpublishsafe
"npm:unpublishSafe",
- // https://docs.renovatebot.com/presets-schedule/#scheduleearlymondays
- "schedule:earlyMondays"
+ // https://docs.renovatebot.com/presets-schedule/#scheduledaily
+ "schedule:daily"
]
}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 1f84e6fdd803..d6c13bb70db3 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,6 +10,7 @@ jobs:
build:
name: Create Release
runs-on: ubuntu-latest
+ timeout-minutes: 60
steps:
- uses: actions/checkout@v2
diff --git a/.yarn/cache/@babel-helper-define-polyfill-provider-npm-0.3.0-c19f133e9a-372378ac42.zip b/.yarn/cache/@babel-helper-define-polyfill-provider-npm-0.3.1-7c6efdf410-e3e93cb22f.zip
similarity index 54%
rename from .yarn/cache/@babel-helper-define-polyfill-provider-npm-0.3.0-c19f133e9a-372378ac42.zip
rename to .yarn/cache/@babel-helper-define-polyfill-provider-npm-0.3.1-7c6efdf410-e3e93cb22f.zip
index ea40b1a97bba..5863babafcf9 100644
Binary files a/.yarn/cache/@babel-helper-define-polyfill-provider-npm-0.3.0-c19f133e9a-372378ac42.zip and b/.yarn/cache/@babel-helper-define-polyfill-provider-npm-0.3.1-7c6efdf410-e3e93cb22f.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-runtime-npm-7.16.7-e642b07868-7213cdec7e.zip b/.yarn/cache/@babel-plugin-transform-runtime-npm-7.16.10-5825b370e1-62ef5fad74.zip
similarity index 55%
rename from .yarn/cache/@babel-plugin-transform-runtime-npm-7.16.7-e642b07868-7213cdec7e.zip
rename to .yarn/cache/@babel-plugin-transform-runtime-npm-7.16.10-5825b370e1-62ef5fad74.zip
index 3d5a480f18f5..04ec3a3acca7 100644
Binary files a/.yarn/cache/@babel-plugin-transform-runtime-npm-7.16.7-e642b07868-7213cdec7e.zip and b/.yarn/cache/@babel-plugin-transform-runtime-npm-7.16.10-5825b370e1-62ef5fad74.zip differ
diff --git a/.yarn/cache/@rollup-plugin-commonjs-npm-18.0.0-6e9288de62-1e8d2589ab.zip b/.yarn/cache/@rollup-plugin-commonjs-npm-18.0.0-6e9288de62-1e8d2589ab.zip
deleted file mode 100644
index a798f4b80f0b..000000000000
Binary files a/.yarn/cache/@rollup-plugin-commonjs-npm-18.0.0-6e9288de62-1e8d2589ab.zip and /dev/null differ
diff --git a/.yarn/cache/@rollup-plugin-commonjs-npm-21.0.1-a250ff7740-3e56be58c7.zip b/.yarn/cache/@rollup-plugin-commonjs-npm-21.0.1-a250ff7740-3e56be58c7.zip
new file mode 100644
index 000000000000..c8fdec01a46f
Binary files /dev/null and b/.yarn/cache/@rollup-plugin-commonjs-npm-21.0.1-a250ff7740-3e56be58c7.zip differ
diff --git a/.yarn/cache/@rollup-plugin-replace-npm-3.0.1-c1400ca698-0cd9743978.zip b/.yarn/cache/@rollup-plugin-replace-npm-3.0.1-c1400ca698-0cd9743978.zip
new file mode 100644
index 000000000000..609655fe7e3b
Binary files /dev/null and b/.yarn/cache/@rollup-plugin-replace-npm-3.0.1-c1400ca698-0cd9743978.zip differ
diff --git a/.yarn/cache/@skpm-babel-preset-npm-0.2.1-ac6160e97c-bb605d407a.zip b/.yarn/cache/@skpm-babel-preset-npm-0.2.1-ac6160e97c-bb605d407a.zip
deleted file mode 100644
index c59d0994e347..000000000000
Binary files a/.yarn/cache/@skpm-babel-preset-npm-0.2.1-ac6160e97c-bb605d407a.zip and /dev/null differ
diff --git a/.yarn/cache/@skpm-babel-preset-npm-0.2.3-a921e0245c-a8fc5bf8a9.zip b/.yarn/cache/@skpm-babel-preset-npm-0.2.3-a921e0245c-a8fc5bf8a9.zip
new file mode 100644
index 000000000000..a904dc5e3709
Binary files /dev/null and b/.yarn/cache/@skpm-babel-preset-npm-0.2.3-a921e0245c-a8fc5bf8a9.zip differ
diff --git a/.yarn/cache/@skpm-builder-npm-0.7.5-dabc12a239-34d47a9f6d.zip b/.yarn/cache/@skpm-builder-npm-0.7.5-dabc12a239-34d47a9f6d.zip
deleted file mode 100644
index d034a64a220b..000000000000
Binary files a/.yarn/cache/@skpm-builder-npm-0.7.5-dabc12a239-34d47a9f6d.zip and /dev/null differ
diff --git a/.yarn/cache/@skpm-builder-npm-0.8.0-de0cfc1c40-889a4e28ff.zip b/.yarn/cache/@skpm-builder-npm-0.8.0-de0cfc1c40-889a4e28ff.zip
new file mode 100644
index 000000000000..14f1da29de7b
Binary files /dev/null and b/.yarn/cache/@skpm-builder-npm-0.8.0-de0cfc1c40-889a4e28ff.zip differ
diff --git a/.yarn/cache/babel-plugin-polyfill-corejs3-npm-0.5.1-97339df7ce-a8945755a1.zip b/.yarn/cache/babel-plugin-polyfill-corejs3-npm-0.5.1-97339df7ce-a8945755a1.zip
new file mode 100644
index 000000000000..cf787f27ba7a
Binary files /dev/null and b/.yarn/cache/babel-plugin-polyfill-corejs3-npm-0.5.1-97339df7ce-a8945755a1.zip differ
diff --git a/.yarn/cache/core-js-compat-npm-3.20.0-6ef5264852-d2887ab75f.zip b/.yarn/cache/core-js-compat-npm-3.20.0-6ef5264852-d2887ab75f.zip
deleted file mode 100644
index c887cd55bada..000000000000
Binary files a/.yarn/cache/core-js-compat-npm-3.20.0-6ef5264852-d2887ab75f.zip and /dev/null differ
diff --git a/.yarn/cache/core-js-compat-npm-3.20.3-b7b0eec0ac-ebb7af23e7.zip b/.yarn/cache/core-js-compat-npm-3.20.3-b7b0eec0ac-ebb7af23e7.zip
new file mode 100644
index 000000000000..32f0e3bb8c43
Binary files /dev/null and b/.yarn/cache/core-js-compat-npm-3.20.3-b7b0eec0ac-ebb7af23e7.zip differ
diff --git a/.yarn/cache/coscript-npm-1.0.0-64ba58ceaf-9868e928e8.zip b/.yarn/cache/coscript-npm-1.0.0-64ba58ceaf-9868e928e8.zip
deleted file mode 100644
index b0b8806f3df2..000000000000
Binary files a/.yarn/cache/coscript-npm-1.0.0-64ba58ceaf-9868e928e8.zip and /dev/null differ
diff --git a/.yarn/cache/cross-env-npm-5.2.1-90c1c3d1d2-364f72482f.zip b/.yarn/cache/cross-env-npm-5.2.1-90c1c3d1d2-364f72482f.zip
deleted file mode 100644
index b1f63f812950..000000000000
Binary files a/.yarn/cache/cross-env-npm-5.2.1-90c1c3d1d2-364f72482f.zip and /dev/null differ
diff --git a/.yarn/cache/cross-env-npm-7.0.3-96d81820f4-26f2f3ea2a.zip b/.yarn/cache/cross-env-npm-7.0.3-96d81820f4-26f2f3ea2a.zip
new file mode 100644
index 000000000000..5f6297f326cb
Binary files /dev/null and b/.yarn/cache/cross-env-npm-7.0.3-96d81820f4-26f2f3ea2a.zip differ
diff --git a/.yarn/cache/del-npm-2.0.2-c6e06722fd-730d13ce0d.zip b/.yarn/cache/del-npm-2.0.2-c6e06722fd-730d13ce0d.zip
deleted file mode 100644
index 1d745b945efb..000000000000
Binary files a/.yarn/cache/del-npm-2.0.2-c6e06722fd-730d13ce0d.zip and /dev/null differ
diff --git a/.yarn/cache/glob-npm-5.0.15-59b17ec4cb-f974244830.zip b/.yarn/cache/glob-npm-5.0.15-59b17ec4cb-f974244830.zip
deleted file mode 100644
index c949b9828bf5..000000000000
Binary files a/.yarn/cache/glob-npm-5.0.15-59b17ec4cb-f974244830.zip and /dev/null differ
diff --git a/.yarn/cache/globby-npm-3.0.1-87996ea685-d99f8400db.zip b/.yarn/cache/globby-npm-3.0.1-87996ea685-d99f8400db.zip
deleted file mode 100644
index fc4f3cce4ee6..000000000000
Binary files a/.yarn/cache/globby-npm-3.0.1-87996ea685-d99f8400db.zip and /dev/null differ
diff --git a/.yarn/cache/pinkie-npm-1.0.0-1864baf29a-987523756f.zip b/.yarn/cache/pinkie-npm-1.0.0-1864baf29a-987523756f.zip
deleted file mode 100644
index de493c63e4ae..000000000000
Binary files a/.yarn/cache/pinkie-npm-1.0.0-1864baf29a-987523756f.zip and /dev/null differ
diff --git a/.yarn/cache/pinkie-promise-npm-1.0.0-e0c57d0c18-9dc945fd77.zip b/.yarn/cache/pinkie-promise-npm-1.0.0-e0c57d0c18-9dc945fd77.zip
deleted file mode 100644
index de020aedc85c..000000000000
Binary files a/.yarn/cache/pinkie-promise-npm-1.0.0-e0c57d0c18-9dc945fd77.zip and /dev/null differ
diff --git a/.yarn/cache/progress-estimator-npm-0.2.2-629240fe93-0d0466b67e.zip b/.yarn/cache/progress-estimator-npm-0.2.2-629240fe93-0d0466b67e.zip
deleted file mode 100644
index f60513bcd0ae..000000000000
Binary files a/.yarn/cache/progress-estimator-npm-0.2.2-629240fe93-0d0466b67e.zip and /dev/null differ
diff --git a/.yarn/cache/progress-estimator-npm-0.3.0-5983e1cdd5-3cd7873269.zip b/.yarn/cache/progress-estimator-npm-0.3.0-5983e1cdd5-3cd7873269.zip
new file mode 100644
index 000000000000..6eac32f6d3e2
Binary files /dev/null and b/.yarn/cache/progress-estimator-npm-0.3.0-5983e1cdd5-3cd7873269.zip differ
diff --git a/.yarn/cache/run-sketch-plugin-npm-1.0.3-cf940c0f03-fbbb79a59b.zip b/.yarn/cache/run-sketch-plugin-npm-1.0.3-cf940c0f03-fbbb79a59b.zip
deleted file mode 100644
index 28d61c70a6e6..000000000000
Binary files a/.yarn/cache/run-sketch-plugin-npm-1.0.3-cf940c0f03-fbbb79a59b.zip and /dev/null differ
diff --git a/.yarn/cache/sketch-polyfill-fetch-npm-0.4.6-ffd964330b-1b16a2cd9e.zip b/.yarn/cache/sketch-polyfill-fetch-npm-0.4.6-ffd964330b-1b16a2cd9e.zip
deleted file mode 100644
index 474cc033a3f3..000000000000
Binary files a/.yarn/cache/sketch-polyfill-fetch-npm-0.4.6-ffd964330b-1b16a2cd9e.zip and /dev/null differ
diff --git a/.yarn/cache/sketch-polyfill-fetch-npm-0.5.2-4cd651e8c2-ab2299dc0a.zip b/.yarn/cache/sketch-polyfill-fetch-npm-0.5.2-4cd651e8c2-ab2299dc0a.zip
new file mode 100644
index 000000000000..c685c777e6be
Binary files /dev/null and b/.yarn/cache/sketch-polyfill-fetch-npm-0.5.2-4cd651e8c2-ab2299dc0a.zip differ
diff --git a/package.json b/package.json
index 5ecbce6705ba..0265246db55e 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,8 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"all-contributors-cli": "^6.19.0",
- "cross-env": "^5.2.0",
- "cross-spawn": "^6.0.5",
+ "cross-env": "^7.0.0",
+ "cross-spawn": "^7.0.0",
"doctoc": "^1.4.0",
"eslint": "^7.28.0",
"fs-extra": "^10.0.0",
diff --git a/packages/carbon-react/.storybook/Welcome/Welcome.js b/packages/carbon-react/.storybook/Welcome/Welcome.js
index 0e0856177680..f2faab24cebd 100644
--- a/packages/carbon-react/.storybook/Welcome/Welcome.js
+++ b/packages/carbon-react/.storybook/Welcome/Welcome.js
@@ -18,8 +18,8 @@ export const Welcome = () => {
background: `url(${bg}) no-repeat center center fixed`,
backgroundSize: 'cover',
}}>
- Carbon Components
- {`React v${PackageInfo.version}`}
+ @carbon/react
+ {`v${PackageInfo.version}`}
);
};
diff --git a/packages/carbon-react/.storybook/preview.js b/packages/carbon-react/.storybook/preview.js
index 2ddbd2fab609..25319807bd36 100644
--- a/packages/carbon-react/.storybook/preview.js
+++ b/packages/carbon-react/.storybook/preview.js
@@ -40,7 +40,7 @@ export const globalTypes = {
description: 'Set the global theme for displaying components',
defaultValue: 'white',
toolbar: {
- icon: 'circlehollow',
+ icon: 'paintbrush',
items: ['white', 'g10', 'g90', 'g100'],
},
},
diff --git a/packages/carbon-react/.storybook/theme.js b/packages/carbon-react/.storybook/theme.js
index 90f89efc677b..1f08a492cc20 100644
--- a/packages/carbon-react/.storybook/theme.js
+++ b/packages/carbon-react/.storybook/theme.js
@@ -6,52 +6,19 @@
*/
import { create } from '@storybook/theming';
-import { g10 } from '@carbon/themes';
import PackageInfo from './../package.json';
-const {
- field01,
- interactive01,
- selectedUI,
- text01,
- inverse01,
- ui01,
- ui03,
- uiBackground,
-} = g10;
-
+/**
+ * @see https://storybook.js.org/docs/react/configure/theming
+ */
export default create({
base: 'light',
- colorPrimary: interactive01,
- colorSecondary: selectedUI,
-
- // UI
- appBg: uiBackground,
- appContentBg: ui01,
- appBorderColor: ui03,
- appBorderRadius: 0,
-
// Typography
fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif",
fontCode:
"'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
- // Text colors
- textColor: text01,
- textInverseColor: inverse01,
-
- // Toolbar default and active colors
- barTextColor: text01,
- barSelectedColor: interactive01,
- barBg: uiBackground,
-
- // Form colors
- inputBg: field01,
- inputBorder: ui03,
- inputTextColor: text01,
- inputBorderRadius: 0,
-
brandTitle: `@carbon/react@${PackageInfo.version}`,
brandUrl:
'https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-react',
diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
index 43d5b1aa8272..7efb584b7f42 100644
--- a/packages/carbon-react/package.json
+++ b/packages/carbon-react/package.json
@@ -60,8 +60,8 @@
"@babel/preset-react": "^7.16.7",
"@carbon/themes": "^10.50.0",
"@rollup/plugin-babel": "^5.3.0",
- "@rollup/plugin-commonjs": "^18.0.0",
- "@rollup/plugin-node-resolve": "^11.2.1",
+ "@rollup/plugin-commonjs": "^21.0.0",
+ "@rollup/plugin-node-resolve": "^13.0.0",
"@storybook/addon-a11y": "^6.4.9",
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-docs": "^6.4.9",
diff --git a/packages/carbon-react/tasks/build-styles.js b/packages/carbon-react/tasks/build-styles.js
index 93d9adf42e40..61ac23df7f4b 100644
--- a/packages/carbon-react/tasks/build-styles.js
+++ b/packages/carbon-react/tasks/build-styles.js
@@ -549,6 +549,20 @@ async function build() {
},
],
},
+ {
+ type: 'directory',
+ filepath: 'utilities',
+ files: [
+ {
+ type: 'file',
+ filepath: '_convert.scss',
+ },
+ {
+ type: 'file',
+ filepath: '_z-index.scss',
+ },
+ ],
+ },
],
};
const files = collect(styles);
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 64dc2401b00a..77530ef3197c 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -29,8 +29,8 @@
"@octokit/plugin-throttling": "^2.6.0",
"@octokit/rest": "^16.28.1",
"@rollup/plugin-babel": "^5.3.0",
- "@rollup/plugin-commonjs": "^18.0.0",
- "@rollup/plugin-node-resolve": "^11.2.1",
+ "@rollup/plugin-commonjs": "^21.0.0",
+ "@rollup/plugin-node-resolve": "^13.0.0",
"chalk": "^4.1.1",
"change-case": "^4.1.2",
"child-process-promise": "^2.2.1",
@@ -44,7 +44,7 @@
"markdown-toc": "^1.2.0",
"prettier": "^2.2.1",
"prettier-config-carbon": "^0.6.0",
- "progress-estimator": "^0.2.2",
+ "progress-estimator": "^0.3.0",
"remark": "^10.0.1",
"replace-in-file": "^6.1.0",
"rollup": "^2.46.0",
diff --git a/packages/colors/examples/sass-modules/yarn.lock b/packages/colors/examples/sass-modules/yarn.lock
index d42dc1171b5a..f96c827610d1 100644
--- a/packages/colors/examples/sass-modules/yarn.lock
+++ b/packages/colors/examples/sass-modules/yarn.lock
@@ -91,7 +91,7 @@
to-fast-properties "^2.0.0"
"@carbon/colors@file:../..":
- version "10.17.0"
+ version "10.35.0"
"@hapi/accept@5.0.1":
version "5.0.1"
@@ -409,6 +409,14 @@ anymatch@~3.1.1:
normalize-path "^3.0.0"
picomatch "^2.0.4"
+anymatch@~3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+ integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+ dependencies:
+ normalize-path "^3.0.0"
+ picomatch "^2.0.4"
+
aproba@^1.0.3, aproba@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -792,7 +800,7 @@ chalk@4.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
-chokidar@3.4.3, "chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1:
+chokidar@3.4.3, chokidar@^3.4.1:
version "3.4.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
@@ -807,6 +815,21 @@ chokidar@3.4.3, "chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1:
optionalDependencies:
fsevents "~2.1.2"
+"chokidar@>=3.0.0 <4.0.0":
+ version "3.5.3"
+ resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+ integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+ dependencies:
+ anymatch "~3.1.2"
+ braces "~3.0.2"
+ glob-parent "~5.1.2"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.6.0"
+ optionalDependencies:
+ fsevents "~2.3.2"
+
chokidar@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -1664,6 +1687,11 @@ fsevents@~2.1.2:
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+fsevents@~2.3.2:
+ version "2.3.2"
+ resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+ integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
gauge@~2.7.3:
version "2.7.4"
resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -1703,6 +1731,13 @@ glob-parent@~5.1.0:
dependencies:
is-glob "^4.0.1"
+glob-parent@~5.1.2:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+ integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+ dependencies:
+ is-glob "^4.0.1"
+
glob-to-regexp@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -1860,6 +1895,11 @@ iferr@^0.1.5:
resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
+immutable@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+ integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -3071,6 +3111,13 @@ readdirp@~3.5.0:
dependencies:
picomatch "^2.2.1"
+readdirp@~3.6.0:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+ integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+ dependencies:
+ picomatch "^2.2.1"
+
regenerator-runtime@^0.13.4:
version "0.13.7"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -3198,12 +3245,14 @@ sass-loader@10.0.5:
schema-utils "^3.0.0"
semver "^7.3.2"
-sass@^1.29.0:
- version "1.29.0"
- resolved "https://registry.yarnpkg.com/sass/-/sass-1.29.0.tgz#ec4e1842c146d8ea9258c28c141b8c2b7c6ab7f1"
- integrity sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==
+sass@^1.36.0:
+ version "1.49.7"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49"
+ integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
dependencies:
- chokidar ">=2.0.0 <4.0.0"
+ chokidar ">=3.0.0 <4.0.0"
+ immutable "^4.0.0"
+ source-map-js ">=0.6.2 <2.0.0"
scheduler@^0.20.1:
version "0.20.1"
@@ -3328,9 +3377,9 @@ simple-concat@^1.0.0:
integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
simple-get@^3.0.3:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
- integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.1.tgz#cc7ba77cfbe761036fbfce3d021af25fc5584d55"
+ integrity sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==
dependencies:
decompress-response "^4.2.0"
once "^1.3.1"
@@ -3387,6 +3436,11 @@ source-list-map@^2.0.0:
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+"source-map-js@>=0.6.2 <2.0.0":
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+ integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
version "0.5.3"
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
diff --git a/packages/components/package.json b/packages/components/package.json
index ec3cbb469ec4..3224fdd34c3a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -84,9 +84,9 @@
"@carbon/test-utils": "^10.21.0",
"@frctl/fractal": "^1.1.0",
"@rollup/plugin-babel": "^5.3.0",
- "@rollup/plugin-commonjs": "^18.0.0",
- "@rollup/plugin-node-resolve": "^11.2.1",
- "@rollup/plugin-replace": "^2.4.2",
+ "@rollup/plugin-commonjs": "^21.0.0",
+ "@rollup/plugin-node-resolve": "^13.0.0",
+ "@rollup/plugin-replace": "^3.0.0",
"@rollup/plugin-virtual": "^2.0.3",
"adaro": "1.0.4",
"autoprefixer": "^9.7.4",
@@ -103,10 +103,10 @@
"classnames": "^2.2.0",
"commander": "^2.13.0",
"core-js": "^3.16.0",
- "cross-env": "^5.2.0",
+ "cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"custom-event": "^1.0.0",
- "del": "~2.0.2",
+ "del": "~6.0.0",
"diff": "^5.0.0",
"express-handlebars": "^5.2.1",
"fancy-log": "^1.3.0",
diff --git a/packages/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
index 4a49dfd35e16..e64c5723f3c1 100644
--- a/packages/components/src/components/content-switcher/_content-switcher.scss
+++ b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -51,15 +51,37 @@
color: $text-secondary;
text-align: left;
text-decoration: none;
- transition: all $duration--fast-01 motion(standard, productive);
+ transition: all $duration--moderate-01 motion(standard, productive);
white-space: nowrap;
+ &::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ background-color: $layer-selected-inverse;
+ content: '';
+ transform: scaleY(0);
+ transform-origin: bottom;
+ transition: all $duration--moderate-01 motion(standard, productive);
+ }
+
+ &:disabled::after {
+ display: none;
+ }
+
&:focus {
z-index: 3;
border-color: $focus;
box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
}
+ &:focus::after {
+ clip-path: inset(3px 3px 3px 3px);
+ }
+
&:hover {
color: $text-primary;
cursor: pointer;
@@ -156,6 +178,7 @@
}
.#{$prefix}--content-switcher__label {
+ z-index: 1;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
@@ -172,6 +195,10 @@
background-color: $layer-selected-inverse;
color: $text-inverse;
+ &::after {
+ transform: scaleY(1);
+ }
+
&:disabled {
background-color: $layer-selected-disabled;
color: $text-disabled;
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index d24af1be0aab..005744696569 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -453,6 +453,7 @@
.#{$prefix}--table-toolbar--small,
.#{$prefix}--table-toolbar--sm {
height: rem(32px);
+ min-height: rem(32px);
.#{$prefix}--toolbar-search-container-expandable,
.#{$prefix}--toolbar-search-container-persistent {
@@ -536,6 +537,17 @@
background-color: transparent;
}
+
+ .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
+ width: rem(32px);
+ //:after element is 2rem but w/o this trigger button is for some reason 28px
+ min-width: rem(32px);
+ height: rem(32px);
+ }
+
+ .#{$prefix}--toolbar-content {
+ height: rem(32px);
+ }
}
.#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
@@ -590,6 +602,12 @@
overflow: hidden;
height: rem(32px);
}
+
+ // V11: remove --small selector block
+ .#{$prefix}--table-toolbar--small .#{$prefix}--batch-summary,
+ .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
+ min-height: 2rem;
+ }
}
@include exports('data-table-v2-action') {
diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index aa35058b5330..535fbee446a5 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -99,6 +99,12 @@
color: transparent;
}
}
+
+ .#{$prefix}--text-area__label-wrapper {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ }
}
@include exports('text-area') {
diff --git a/packages/icon-build-helpers/package.json b/packages/icon-build-helpers/package.json
index 47d0156160f9..eb0d1809d3cd 100644
--- a/packages/icon-build-helpers/package.json
+++ b/packages/icon-build-helpers/package.json
@@ -31,7 +31,7 @@
"@carbon/cli-reporter": "^10.5.0",
"@carbon/icon-helpers": "^10.26.0",
"@rollup/plugin-babel": "^5.3.0",
- "@rollup/plugin-replace": "^2.4.2",
+ "@rollup/plugin-replace": "^3.0.0",
"browserslist-config-carbon": "^10.6.1",
"change-case": "^4.1.1",
"core-js": "^3.16.0",
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index b4e08957b66d..54da4747ab36 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -182,17 +182,6 @@ Map {
},
"Button" => Object {
"$$typeof": Symbol(react.forward_ref),
- "defaultProps": Object {
- "dangerDescription": "danger",
- "disabled": false,
- "isExpressive": false,
- "kind": "primary",
- "size": "default",
- "tabIndex": 0,
- "tooltipAlignment": "center",
- "tooltipPosition": "top",
- "type": "button",
- },
"propTypes": Object {
"as": Object {
"args": Array [
@@ -248,7 +237,6 @@ Map {
"tertiary",
],
],
- "isRequired": true,
"type": "oneOf",
},
"onBlur": Object {
@@ -351,9 +339,6 @@ Map {
"render": [Function],
},
"ButtonSkeleton" => Object {
- "defaultProps": Object {
- "small": false,
- },
"propTypes": Object {
"className": Object {
"type": "string",
@@ -6871,10 +6856,12 @@ Map {
"defaultProps": Object {
"cols": 50,
"disabled": false,
+ "enableCounter": false,
"helperText": "",
"invalid": false,
"invalidText": "",
"light": false,
+ "maxCount": undefined,
"onChange": [Function],
"onClick": [Function],
"placeholder": "",
@@ -6903,6 +6890,9 @@ Map {
"disabled": Object {
"type": "bool",
},
+ "enableCounter": Object {
+ "type": "bool",
+ },
"helperText": Object {
"type": "node",
},
@@ -6925,6 +6915,9 @@ Map {
"light": Object {
"type": "bool",
},
+ "maxCount": Object {
+ "type": "number",
+ },
"onChange": Object {
"type": "func",
},
@@ -7208,19 +7201,6 @@ Map {
},
"render": [Function],
},
- "defaultProps": Object {
- "disabled": false,
- "helperText": "",
- "inline": false,
- "invalid": false,
- "invalidText": "",
- "light": false,
- "onChange": [Function],
- "onClick": [Function],
- "type": "text",
- "warn": false,
- "warnText": "",
- },
"propTypes": Object {
"className": Object {
"type": "string",
diff --git a/packages/react/package.json b/packages/react/package.json
index a099cef3aac5..99df11b72090 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -85,9 +85,9 @@
"@percy/cypress": "^3.1.1",
"@percy/storybook": "^4.1.0",
"@rollup/plugin-babel": "^5.3.0",
- "@rollup/plugin-commonjs": "^18.0.0",
- "@rollup/plugin-node-resolve": "^11.2.1",
- "@rollup/plugin-replace": "^2.4.2",
+ "@rollup/plugin-commonjs": "^21.0.0",
+ "@rollup/plugin-node-resolve": "^13.0.0",
+ "@rollup/plugin-replace": "^3.0.0",
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-docs": "^6.4.9",
"@storybook/addon-knobs": "^6.4.0",
@@ -112,7 +112,7 @@
"chalk": "^4.1.1",
"cli-table": "^0.3.0",
"core-js": "^3.16.0",
- "cross-env": "^5.2.0",
+ "cross-env": "^7.0.0",
"css-loader": "^6.5.1",
"cypress": "^9.2.0",
"cypress-real-events": "^1.6.0",
diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js
index c853ec979716..ce537e0384b1 100644
--- a/packages/react/src/components/Button/Button.Skeleton.js
+++ b/packages/react/src/components/Button/Button.Skeleton.js
@@ -10,8 +10,15 @@ import React from 'react';
import cx from 'classnames';
import { useFeatureFlag } from '../FeatureFlags';
import { usePrefix } from '../../internal/usePrefix';
+import * as FeatureFlags from '@carbon/feature-flags';
-const ButtonSkeleton = ({ className, small, href, size, ...rest }) => {
+const ButtonSkeleton = ({
+ className,
+ small = false,
+ href,
+ size = FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'default',
+ ...rest
+}) => {
const enabled = useFeatureFlag('enable-v11-release');
const prefix = usePrefix();
@@ -54,16 +61,18 @@ ButtonSkeleton.propTypes = {
* For `default` buttons, this prop can remain unspecified or use `default`.
* In the next major release of Carbon, `default`, `field`, and `small` will be removed
*/
- size: PropTypes.oneOf([
- 'default',
- 'field',
- 'small',
- 'sm',
- 'md',
- 'lg',
- 'xl',
- '2xl',
- ]),
+ size: FeatureFlags.enabled('enable-v11-release')
+ ? PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
+ : PropTypes.oneOf([
+ 'default',
+ 'field',
+ 'small',
+ 'sm',
+ 'md',
+ 'lg',
+ 'xl',
+ '2xl',
+ ]),
/**
* Specify whether the Button should be a small variant
@@ -71,8 +80,4 @@ ButtonSkeleton.propTypes = {
small: PropTypes.bool,
};
-ButtonSkeleton.defaultProps = {
- small: false,
-};
-
export default ButtonSkeleton;
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 368a182bf6d4..3a7acfc682d5 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -16,33 +16,34 @@ import { usePrefix } from '../../internal/usePrefix';
import { useId } from '../../internal/useId';
import toggleClass from '../../tools/toggleClass';
import { useFeatureFlag } from '../FeatureFlags';
+import * as FeatureFlags from '@carbon/feature-flags';
const Button = React.forwardRef(function Button(
{
- children,
as,
+ children,
className,
- disabled,
- small,
- size,
- kind,
+ dangerDescription = 'danger',
+ disabled = false,
+ hasIconOnly = false,
href,
- isExpressive,
- isSelected,
- tabIndex,
- type,
- renderIcon: ButtonImageElement,
- dangerDescription,
iconDescription,
- hasIconOnly,
- tooltipPosition,
- tooltipAlignment,
- onClick,
+ isExpressive = false,
+ isSelected,
+ kind = 'primary',
onBlur,
+ onClick,
onFocus,
onMouseEnter,
onMouseLeave,
- ...other
+ renderIcon: ButtonImageElement,
+ size = FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'default',
+ small,
+ tabIndex = 0,
+ tooltipAlignment = 'center',
+ tooltipPosition = 'top',
+ type = 'button',
+ ...rest
},
ref
) {
@@ -222,7 +223,7 @@ const Button = React.forwardRef(function Button(
onFocus: composeEventHandlers([onFocus, handleFocus]),
onBlur: composeEventHandlers([onBlur, handleBlur]),
onClick: composeEventHandlers([onClick, handleClick]),
- ...other,
+ ...rest,
...commonProps,
...otherProps,
},
@@ -293,14 +294,14 @@ Button.propTypes = {
isExpressive: PropTypes.bool,
/**
- * Specify whether the Button is currently selected
+ * Specify whether the Button is currently selected. Only applies to the Ghost variant.
*/
isSelected: PropTypes.bool,
/**
* Specify the kind of Button you want to create
*/
- kind: PropTypes.oneOf(ButtonKinds).isRequired,
+ kind: PropTypes.oneOf(ButtonKinds),
/**
* Provide an optional function to be called when the button element
@@ -344,20 +345,20 @@ Button.propTypes = {
role: PropTypes.string,
/**
- * Specify the size of the button, from a list of available sizes.
- * For `default` buttons, this prop can remain unspecified or use `default`.
- * In the next major release of Carbon, `default`, `field`, and `small` will be removed
+ * Specify the size of the button, from the following list of sizes:
*/
- size: PropTypes.oneOf([
- 'default',
- 'field',
- 'small',
- 'sm',
- 'md',
- 'lg',
- 'xl',
- '2xl',
- ]),
+ size: FeatureFlags.enabled('enable-v11-release')
+ ? PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl'])
+ : PropTypes.oneOf([
+ 'default',
+ 'field',
+ 'small',
+ 'sm',
+ 'md',
+ 'lg',
+ 'xl',
+ '2xl',
+ ]),
/**
* Deprecated in v10 in favor of `size`.
@@ -391,16 +392,4 @@ Button.propTypes = {
type: PropTypes.oneOf(['button', 'reset', 'submit']),
};
-Button.defaultProps = {
- tabIndex: 0,
- type: 'button',
- disabled: false,
- kind: 'primary',
- size: 'default',
- dangerDescription: 'danger',
- tooltipAlignment: 'center',
- tooltipPosition: 'top',
- isExpressive: false,
-};
-
export default Button;
diff --git a/packages/react/src/components/Button/next/Button.stories.js b/packages/react/src/components/Button/next/Button.stories.js
index 833edd118079..97b8cfc689c8 100644
--- a/packages/react/src/components/Button/next/Button.stories.js
+++ b/packages/react/src/components/Button/next/Button.stories.js
@@ -18,50 +18,105 @@ export default {
ButtonSet,
ButtonSkeleton,
},
+ argTypes: {
+ kind: {
+ options: [
+ 'primary',
+ 'secondary',
+ 'tertiary',
+ 'ghost',
+ 'danger',
+ 'danger--tertiary',
+ 'danger--ghost',
+ ],
+ control: { type: 'select' },
+ },
+ size: {
+ options: ['sm', 'md', 'lg', 'xl', '2xl'],
+ control: { type: 'select' },
+ },
+ children: {
+ control: false,
+ },
+ renderIcon: {
+ control: false,
+ },
+ as: {
+ control: false,
+ },
+ small: {
+ table: {
+ disable: true,
+ },
+ },
+ },
};
-export const _Default = () => {
- return ;
+export const _Default = (args) => {
+ return ;
};
-export const Secondary = () => {
- return ;
+export const Secondary = (args) => {
+ return (
+
+ );
};
-export const Tertiary = () => {
- return ;
+export const Tertiary = (args) => {
+ return (
+
+ );
};
-export const Danger = () => {
+export const Danger = (args) => {
return (
<>
-
+
-
+
-
+
);
};
-export const Ghost = () => {
- return ;
+export const Ghost = (args) => {
+ return (
+
+ );
};
-export const IconButton = () => (
+export const IconButton = (args) => (
);
-export const SetOfButtons = () => {
+export const SetOfButtons = (args) => {
return (
-
-
+
+
);
};
@@ -70,6 +125,6 @@ export const Skeleton = () => (
-
+
);
diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
deleted file mode 100644
index 34ca0868b0a9..000000000000
--- a/packages/react/src/components/DataTable/DataTable-story.js
+++ /dev/null
@@ -1,436 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 './stories/datatable-story.scss';
-
-import { action } from '@storybook/addon-actions';
-import React from 'react';
-import { withKnobs, boolean, select } from '@storybook/addon-knobs';
-import Button from '../Button';
-import Checkbox from '../Checkbox';
-import OverflowMenu from '../OverflowMenu';
-import OverflowMenuItem from '../OverflowMenuItem';
-import {
- default as DataTable,
- TableContainer,
- Table,
- TableHead,
- TableRow,
- TableHeader,
- TableBody,
- TableCell,
- TableToolbar,
- TableToolbarAction,
- TableToolbarContent,
- TableToolbarSearch,
- TableToolbarMenu,
-} from '../DataTable';
-import mdx from './DataTable.mdx';
-import { headers, rows } from './stories/shared';
-
-const props = () => ({
- useZebraStyles: boolean('Zebra row styles (useZebraStyles)', false),
- size: select(
- 'Row height (size)',
- {
- 'Extra small (xs)': 'xs',
- 'Small (sm)': 'sm',
- 'Medium (md)': 'md',
- 'Large (lg) - default': 'lg',
- 'Extra Large (xl)': 'xl',
- },
- 'lg'
- ),
- stickyHeader: boolean('Sticky header (experimental)', false),
- useStaticWidth: boolean('Use static width (useStaticWidth)', false),
-});
-
-export default {
- title: 'Components/DataTable',
- component: DataTable,
- subcomponents: {
- TableContainer,
- Table,
- TableHead,
- TableRow,
- TableHeader,
- TableBody,
- TableCell,
- },
- decorators: [withKnobs],
- parameters: {
- docs: {
- page: mdx,
- },
- },
-};
-
-export const Usage = () => (
-
- {({
- rows,
- headers,
- getHeaderProps,
- getRowProps,
- getTableProps,
- getTableContainerProps,
- }) => (
-
-
-
-
- {headers.map((header) => (
-
- ))}
-
-
-
- {rows.map((row) => (
-
- {row.cells.map((cell) => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
-
-);
-
-export const BasicTable = () => {
- const rows = [
- {
- id: 'load-balancer-1',
- name: 'Load Balancer 1',
- rule: 'Round robin',
- Status: 'Starting',
- },
- {
- id: 'load-balancer-2',
- name: 'Load Balancer 2',
- rule: 'DNS delegation',
- status: 'Active',
- },
- {
- id: 'load-balancer-3',
- name: 'Load Balancer 3',
- rule: 'Round robin',
- status: 'Disabled',
- },
- ];
- const headers = ['Name', 'Rule', 'Status'];
-
- return (
-
-
-
- {headers.map((header) => (
-
- ))}
-
-
-
- {rows.map((row) => (
-
- {Object.keys(row)
- .filter((key) => key !== 'id')
- .map((key) => {
- return {row[key]};
- })}
-
- ))}
-
-
- );
-};
-
-export const WithOverflowMenu = () => (
-
- {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
-
-
-
-
- {headers.map((header) => (
-
- {header.header}
-
- ))}
-
-
-
-
- {rows.map((row) => (
-
- {row.cells.map((cell) => (
- {cell.value}
- ))}
-
-
- Action 1
- Action 2
- Action 3
-
-
-
- ))}
-
-
-
- )}
-
-);
-
-export const WithToolbar = () => (
-
- {({
- rows,
- headers,
- getHeaderProps,
- getRowProps,
- getTableProps,
- getToolbarProps,
- onInputChange,
- getTableContainerProps,
- }) => (
-
-
-
- {
- action('onFocus')();
- handleExpand(event, true);
- }}
- onBlur={(event, handleExpand) => {
- action('onBlur')();
- const { value } = event.target;
- if (!value) {
- handleExpand(event, false);
- }
- }}
- />
-
-
- Action 1
-
-
- Action 2
-
-
- Action 3
-
-
-
-
-
-
-
-
- {headers.map((header) => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map((row) => (
-
- {row.cells.map((cell) => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
-
-);
-
-export const WithCheckmarkColumns = () => {
- const rows = [
- {
- id: 'a',
- name: 'Load Balancer 3',
- protocol: 'HTTP',
- port: 3000,
- rule: 'Round robin',
- attached_groups: 'Kevin’s VM Groups',
- status: 'Disabled',
- enabled: true,
- },
- {
- id: 'b',
- name: 'Load Balancer 1',
- protocol: 'HTTP',
- port: 443,
- rule: 'Round robin',
- attached_groups: 'Maureen’s VM Groups',
- status: 'Starting',
- enabled: true,
- },
- {
- id: 'c',
- name: 'Load Balancer 2',
- protocol: 'HTTP',
- port: 80,
- rule: 'DNS delegation',
- attached_groups: 'Andrew’s VM Groups',
- status: 'Active',
- enabled: false,
- },
- ];
-
- const headers = [
- {
- key: 'name',
- header: 'Name',
- },
- {
- key: 'protocol',
- header: 'Protocol',
- },
- {
- key: 'port',
- header: 'Port',
- },
- {
- key: 'rule',
- header: 'Rule',
- },
- {
- key: 'attached_groups',
- header: 'Attached Groups',
- },
- {
- key: 'status',
- header: 'Status',
- },
- {
- key: 'enabled',
- header: 'Enabled',
- },
- ];
-
- return (
-
- {({
- rows,
- headers,
- getHeaderProps,
- getRowProps,
- getTableProps,
- getTableContainerProps,
- }) => (
-
-
-
-
- {headers.map((header) => (
-
- {header.header}
-
- ))}
-
-
-
- {rows.map((row) => (
-
- {row.cells.map((cell) => {
- if (cell.info.header === 'enabled') {
- return (
-
-
-
- );
- } else {
- return {cell.value};
- }
- })}
-
- ))}
-
-
-
- )}
-
- );
-};
-
-export const Playground = () => (
- (
-
-
-
-
- {headers.map((header, i) => (
-
- ))}
-
-
-
- {rows.map((row, i) => (
-
- {row.cells.map((cell) => (
- {cell.value}
- ))}
-
- ))}
-
-
-
- )}
- />
-);
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index b95e038e17b5..6a3dce26475c 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1871,16 +1871,9 @@ exports[`DataTable should render 1`] = `
@@ -2039,10 +2032,6 @@ exports[`DataTable should render 1`] = `
}
>