chore(merge): resolve merge conflicts

annawen1 · Apr 16, 2024 · d6b7fb0 · d6b7fb0
2 parents 6d6ef7a + e9fa12f
commit d6b7fb0
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 382 deletions.
diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/slug/cdn.html b/packages/carbon-web-components/examples/stackblitz/basic/components/slug/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
   <style>
     /* Suppress custom element until styles are loaded */
     cds-slug:not(:defined) {
@@ -24,7 +24,7 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/slug/v2/latest/slug.min.js"></script>
 </head>
 <body class="cds-theme-zone-white">
-  <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+  <cds-slug size="mini" alignment="bottom-left">
     <span slot="body-text">AI was used to generate this content</span>
   </cds-slug>
 </body>

diff --git a/packages/carbon-web-components/examples/stackblitz/basic/components/slug/index.html b/packages/carbon-web-components/examples/stackblitz/basic/components/slug/index.html
@@ -13,7 +13,7 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  
+
   <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
@@ -24,7 +24,7 @@
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+  <cds-slug size="mini" alignment="bottom-left">
     <span slot="body-text">AI was used to generate this content</span>
   </cds-slug>
 </body>

diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -155,14 +155,15 @@
   border: 1px solid transparent;
   background-color: $layer;
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-    0 4px 10px 2px $ai-drop-shadow;
+    0 24px 40px -24px $ai-drop-shadow;
 }
 
 :host(#{$prefix}-modal[slug][has-footer]) .#{$prefix}--modal-container {
   @include ai-popover-gradient('default', 64px, 'layer');
 
   box-shadow: inset 0 -80px 0 -16px $layer,
-    inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;
+    inset 0 -160px 70px -65px $ai-inner-shadow,
+    0 24px 40px -24px $ai-drop-shadow;
 }
 
 :host(#{$prefix}-modal[slug][has-scrolling-content]) {

diff --git a/packages/carbon-web-components/src/components/popover/autoalign.stories.ts b/packages/carbon-web-components/src/components/popover/autoalign.stories.ts
@@ -65,10 +65,6 @@ const content = html`
   </div>
 `;
 
-const hollowContent = html`<span slot="body-text"
-  >AI was used to generate this content</span
->`;
-
 const actions = html`
   <cds-icon-button kind="ghost" slot="actions" size="lg">
     ${View16({ slot: 'icon' })}
@@ -277,15 +273,7 @@ export const Slug = {
     kind: {
       control: 'select',
       description: 'Kind (kind)',
-      options: ['default', 'hollow', 'inline'],
-    },
-    dotType: {
-      if: {
-        arg: 'kind',
-      },
-      control: 'select',
-      description: 'DotType (dotType)',
-      options: ['default', 'hollow'],
+      options: ['default', 'inline'],
     },
     aiTextLabel: {
       control: 'text',
@@ -297,8 +285,7 @@ export const Slug = {
     },
   },
   render: (args) => {
-    const { alignment, aiTextLabel, size, kind, dotType, revertActive } =
-      args ?? {};
+    const { alignment, aiTextLabel, size, kind, revertActive } = args ?? {};
     return html`
       <style>
         ${slugStyles}
@@ -309,11 +296,9 @@ export const Slug = {
           alignment="${alignment}"
           size="${size}"
           kind="${kind}"
-          dot-type="${dotType}"
           ai-text-label="${aiTextLabel}"
           ?revert-active="${revertActive}">
-          ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content}
-          ${kind === 'hollow' || dotType === 'hollow' ? '' : actions}
+          ${content} ${actions}
         </cds-slug>
       </div>
     `;

diff --git a/packages/carbon-web-components/src/components/popover/popover.scss b/packages/carbon-web-components/src/components/popover/popover.scss
@@ -106,6 +106,11 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
+:host(#{$prefix}-slug[alignment^='bottom']:not([autoalign]))
+  .#{$prefix}--popover-caret {
+  clip-path: none;
+}
+
 :host(#{$prefix}-tooltip-content[align='bottom']:not([autoalign])),
 :host(#{$prefix}-popover-content[align='bottom']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment='bottom']:not([autoalign])),

diff --git a/packages/carbon-web-components/src/components/slug/defs.ts b/packages/carbon-web-components/src/components/slug/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022, 2023
+ * Copyright IBM Corp. 2020, 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.
@@ -56,28 +56,8 @@ export enum SLUG_KIND {
    */
   DEFAULT = '',
 
-  /**
-   * Hollow kind.
-   */
-  HOLLOW = 'hollow',
-
   /**
    * Inline kind.
    */
   INLINE = 'inline',
 }
-
-/**
- * Slug dot type.
- */
-export enum SLUG_DOT_TYPE {
-  /**
-   * Default dot type.
-   */
-  DEFAULT = '',
-
-  /**
-   * Hollow dot type.
-   */
-  HOLLOW = 'hollow',
-}
diff --git a/packages/carbon-web-components/src/components/slug/slug.mdx b/packages/carbon-web-components/src/components/slug/slug.mdx
@@ -91,27 +91,12 @@ the `ai-text-label` prop.
 </cds-slug>
 ```
 
-### Slug `dotType`
-
-When using the `inline` variant, you can switch between the `hollow` slug for
-content that does not need additional explainability or the `default` variant
-that will render the AI callout.
-
-```html
-<cds-slug kind="inline" dot-type="hollow" ai-text-label="Text goes here">
-  <div slot="body-text">Explanation of AI-generated content</div>
-</cds-slug>
-```
-
 ### Slug `kind`
 
-The `Slug` component has three variants, `default`, `hollow`, and `inline`. The
-`hollow` slugs represent items that don’t have any additional explainability.
-Therefore they don’t use the AI callout and instead use the standard Carbon
-tooltip, with a simple message.
+The `Slug` component has two variants, `default` and `inline`.
 
 ```html
-<cds-slug kind="hollow" size="xs">
+<cds-slug size="xs">
   <div slot="body-text">AI was used to generate this content</div>
 </cds-slug>
 ```