@carbon/web-components 2.48.0 → 2.49.0

package/scss/components/popover/popover.scss

@@ -399,6 +399,60 @@ $popover-border-color: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Bottom - No Caret Spacing (non-autoalign)
+//-----------------------------------------------------------------------------
+
+:host(
+    #{$prefix}-popover-content[align='bottom']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='bottom-start']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='bottom-end']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-block-end: -$spacing-02;
+  }
+}
+
+:host(
+    #{$prefix}-popover-content[align='bottom-start']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='bottom-left']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: calc(50% - $popover-offset - 1rem);
+  }
+}
+
+:host(
+    #{$prefix}-popover-content[align='bottom-end']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='bottom-right']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: calc(50% - $popover-offset - 1rem);
+  }
+}
+
 //-----------------------------------------------------------------------------
 // Left
 //-----------------------------------------------------------------------------
@@ -528,6 +582,30 @@ $popover-border-color: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Left - No Caret Spacing (non-autoalign)
+//-----------------------------------------------------------------------------
+
+:host(
+    #{$prefix}-popover-content[align='left']:not([caret]):not([autoalign]):not(
+        [tabTip]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content[align='left-start']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='left-end']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: calc(100% + $spacing-02);
+  }
+}
+
 //-----------------------------------------------------------------------------
 // Right
 //-----------------------------------------------------------------------------
@@ -651,6 +729,30 @@ $popover-border-color: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Right - No Caret Spacing (non-autoalign)
+//-----------------------------------------------------------------------------
+
+:host(
+    #{$prefix}-popover-content[align='right']:not([caret]):not([autoalign]):not(
+        [tabTip]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content[align='right-start']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='right-end']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: calc(100% + $spacing-02);
+  }
+}
+
 //-----------------------------------------------------------------------------
 // Top
 //-----------------------------------------------------------------------------
@@ -801,6 +903,64 @@ $popover-border-color: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Top - No Caret Spacing (non-autoalign)
+//-----------------------------------------------------------------------------
+
+:host(
+    #{$prefix}-popover-content[align='top']:not([caret]):not([autoalign]):not(
+        [tabTip]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content[align='top-start']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='top-end']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-block-start: -$spacing-02;
+  }
+}
+
+:host(
+    #{$prefix}-popover-content[align='top-start']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='top-left']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: calc(50% - $popover-offset - 1rem);
+  }
+}
+
+:host(
+    #{$prefix}-popover-content[align='top-end']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ),
+:host(
+    #{$prefix}-popover-content[align='top-right']:not([caret]):not(
+        [autoalign]
+      ):not([tabTip])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: calc(50% - $popover-offset - 1rem);
+  }
+}
+
+//-----------------------------------------------------------------------------
+// AutoAlign
+//-----------------------------------------------------------------------------
+
 :host(#{$prefix}-toggletip[autoalign]),
 :host(#{$prefix}-tooltip-content[autoalign]),
 :host(#{$prefix}-popover-content[autoalign]) {
@@ -821,10 +981,6 @@ $popover-border-color: custom-property.get-var(
   }
 }
 
-//-----------------------------------------------------------------------------
-// AutoAlign
-//-----------------------------------------------------------------------------
-
 // autoalign caret
 :host(#{$prefix}-popover-content[open][caret][autoalign]),
 :host(#{$prefix}-tooltip-content[open][caret][autoalign]) {

package/telemetry.yml

@@ -140,6 +140,8 @@ collect:
         - oncds-notification-beingclosed
         - oncds-notification-closed
         - oncds-number-input
+        - oncds-popover-beingclosed
+        - oncds-popover-closed
         - oncds-radio-button-changed
         - oncds-search-input
         - oncds-select-selected
@@ -513,7 +515,6 @@ collect:
         - sort-direction
         # cds-table-skeleton
         - column-count
-        - compact
         - headers
         - row-count
         - show-header