chore(merge): merge feat/carbon-for-ibm-dotcom-v2 into main (carb…

…on-design-system#11161) * chore(merge): merge feat/carbon-for-ibm-dotcom-v2 into main
kennylam · Nov 30, 2023 · 39b946b · 39b946b
1 parent 754ddab
commit 39b946b
Show file tree

Hide file tree

Showing 884 changed files with 34,905 additions and 19,227 deletions.
diff --git a/packages/carbon-web-components/.eslintrc.js b/packages/carbon-web-components/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
       plugins: ['@typescript-eslint'],
       rules: {
         'no-unused-vars': 0,
-        '@typescript-eslint/no-unused-vars': 0,
+        '@typescript-eslint/no-unused-vars': 1,
         'jsdoc/require-param-type': 0,
         'jsdoc/require-returns-type': 0,
         'no-undef': 0,

diff --git a/packages/carbon-web-components/.gitignore b/packages/carbon-web-components/.gitignore
@@ -5,7 +5,7 @@ dist
 es
 lib
 node_modules
-scss
+/scss
 storybook-static
 tests/coverage
 .vscode

diff --git a/packages/carbon-web-components/.storybook/_container.scss b/packages/carbon-web-components/.storybook/_container.scss
@@ -1,96 +1,72 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 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.
 //
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/css--font-face';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
-@import 'carbon-components/src/components/tag/tag';
-@import 'carbon-components/src/components/notification/inline-notification';
-@import 'carbon-components/src/components/notification/toast-notification';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/themes/scss/themes';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/grid';
+
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
+
+// Emit the flex-grid styles
+@include grid.flex-grid();
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 // The default theme is "white" (White)
 :root {
-  @include carbon--theme($carbon--theme--white, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$white);
 }
-
 // Set the <html> theme attribute to "g10" to use the Gray 10 theme
 // <html theme="g10">
 :root[storybook-carbon-theme='g10'] {
-  @include carbon--theme($carbon--theme--g10, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$g10);
 }
 
 // Set the <html> theme attribute to "g90" to use the Gray 90 theme
 // <html theme="g90">
 :root[storybook-carbon-theme='g90'] {
-  @include carbon--theme($carbon--theme--g90, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$g90);
 }
 
 // Set the <html> theme attribute to "g100" to use the Gray 100 theme
 // <html theme="g100">
 :root[storybook-carbon-theme='g100'] {
-  @include carbon--theme($carbon--theme--g100, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$g100);
 }
 
-html,
-body,
-#root,
-#root-inner,
-[name='main-content'] {
-  position: relative;
-  height: 100%;
+body {
+  background-color: theme.$background;
+  color: theme.$text-primary;
 }
 
-// Reverts Carbon reset style of lists for docs page
-#docs-root {
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
+.sb-show-main.sb-main-padded {
+  padding: 0;
 }
 
-.bx-ce-demo-devenv--container {
-  padding: 3em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+#main-content {
+  padding: 42px;
   position: relative;
 }
 
-.bx--content.bx-ce-demo-devenv--ui-shell-content {
-  background-color: $ui-01;
+.#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content {
   margin: 0;
   height: 100vh;
   width: 100%;
-
-  h2 {
-    font-weight: 800;
-    margin: 30px 0;
-    font-size: 20px;
-  }
-
-  p {
-    line-height: 20px;
-  }
+  padding: 2rem;
 }
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/components/Panel.tsx b/packages/carbon-web-components/.storybook/addon-carbon-theme/components/Panel.tsx
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/register.tsx b/packages/carbon-web-components/.storybook/addon-carbon-theme/register.tsx
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/shared.ts b/packages/carbon-web-components/.storybook/addon-carbon-theme/shared.ts
diff --git a/packages/carbon-web-components/.storybook/basic-example-cdn.html b/packages/carbon-web-components/.storybook/basic-example-cdn.html
@@ -1,32 +1,31 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script type="module">
-      import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown.js';
-      import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown-item.js';
-    </script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/canary/dropdown.min.js"></script>
     <style type="text/css">
       #app {
         font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
         width: 300px;
         margin: 2rem;
       }
 
-      bx-dropdown:not(:defined),
-      bx-dropdown-item:not(:defined) {
+      cds-dropdown:not(:defined),
+      cds-dropdown-item:not(:defined) {
         visibility: hidden;
       }
     </style>
   </head>
   <body>
     <div id="app">
-      <bx-dropdown trigger-content="Select an item">
-        <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-        <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-        <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-        <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-        <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-      </bx-dropdown>
+      <cds-dropdown trigger-content="Select an item">
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+      </cds-dropdown>
     </div>
   </body>
 </html>
diff --git a/packages/carbon-web-components/.storybook/container.ts b/packages/carbon-web-components/.storybook/container.ts
@@ -1,15 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 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.
  */
 
-import { html } from 'lit-html';
-import type { TemplateResult } from 'lit-html';
-import '../src/components/skip-to-content/skip-to-content';
+import { html, TemplateResult } from 'lit';
 import containerStyles from './_container.scss'; // eslint-disable-line import/first
 
 /**
@@ -28,13 +26,12 @@ const container = ({
   <style>
     ${containerStyles}
   </style>
-  <bx-skip-to-content href="#main-content"></bx-skip-to-content>
+  <cds-skip-to-content href="#main-content"></cds-skip-to-content>
   <div
     id="main-content"
     name="main-content"
     data-floating-menu-container
-    role="${hasMainTag ? 'none' : 'main'}"
-    class="bx--body bx-ce-demo-devenv--container">
+    role="${hasMainTag ? 'none' : 'main'}">
     ${children}
   </div>
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ dist @@
     es
     lib
     node_modules
-    scss
+    /scss
     storybook-static
     tests/coverage
     .vscode
@@ Expand Down @@