fix(ui-view,ui-position,ui-popover): fix 'stretch' placement in Popover/ContextView

This was actually never working properly. Now the popover is in the right position and is stretched
when above/below the target. Its not stretched when its to the left/right

INSTUI-4653

Author: matyasf

packages/ui-drilldown/src/Drilldown/index.tsx

@@ -1367,7 +1367,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       maxWidth,
       role,
       as,
-      label
+      label,
+      trigger
     } = this.props
 
     if (!this.currentPage) {
@@ -1405,7 +1406,9 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           getDisabledOptionProps
         }) => (
           <View
-            borderWidth="small"
+            // if there is a trigger the border needs to be rendered by the <Popover>
+            // (because it has an arrow)
+            {...(trigger ? {} : { borderWidth: 'small' })}
             as="div"
             elementRef={this.handleDrilldownRef}
             tabIndex={0}
@@ -1496,11 +1499,17 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       onMouseOver,
       offsetX,
       offsetY,
-      shouldSetAriaExpanded
+      shouldSetAriaExpanded,
+      styles
     } = this.props
-
+    const borderColor = (styles?.drilldown as { borderColor: string })
+      ?.borderColor
     return trigger ? (
       <Popover
+        themeOverride={{
+          // use here own theme's color
+          borderColor: borderColor
+        }}
         shouldSetAriaExpanded={shouldSetAriaExpanded}
         isShowingContent={show}
         defaultIsShowingContent={defaultShow}

packages/ui-drilldown/src/Drilldown/props.ts

@@ -136,7 +136,13 @@ type DrilldownOwnProps = {
   trigger?: React.ReactNode
 
   /**
-   * If a trigger is supplied, where should the `<Drilldown />` be placed (relative to the trigger)
+   * If a trigger is supplied, where should the `<Drilldown />` be placed
+   * (relative to the trigger)
+   *
+   * `stretch` will stretch the `Drilldown` to the same size as its `trigger`
+   * (provided that the `trigger` is at least as large as the `Drilldown`).
+   * In this case you should not set `width`/`maxHeight`, it will be set
+   * automatically.
    */
   placement?: PlacementPropValues
 

packages/ui-drilldown/src/Drilldown/styles.ts

@@ -51,7 +51,6 @@ const generateStyle = (
       label: 'drilldown',
       overflow: 'visible', // needed for focus ring!
       borderColor: componentTheme.borderColor,
-
       ...(hasHighlightedOption && {
         '&:focus::before': {
           display: 'none'

packages/ui-popover/src/Popover/index.tsx

@@ -249,6 +249,9 @@ class Popover extends Component<PopoverProps, PopoverState> {
     }
   }
 
+  /**
+   * Offsets the popover by the arrow size
+   */
   computeOffsets(placement: PopoverProps['placement']) {
     let { offsetX, offsetY } = this.props
 

packages/ui-position/src/calculateElementPosition.ts

@@ -616,13 +616,18 @@ function offsetToPx(
 
 function sortPlacement(placement: PlacementValuesWithoutOffscreenArray) {
   let [first, second] = placement
-
-  if (first === 'center' || first === 'stretch') {
+  if (first === 'center') {
     ;[first, second] = [second, first]
   }
   return [first, second] as PlacementValuesWithoutOffscreenArray
 }
 
+/**
+ * Returns the following:
+ * - When the input is just 1 element, then `[input, 'center']`, else:
+ * - if the first element is `center`, it reverses the order
+ * - otherwise, it just returns the split input as an array
+ */
 function parsePlacement(placement: PlacementPropValues) {
   let parsed = placement.split(' ') as PlacementValuesWithoutOffscreenArray
 

packages/ui-view/src/ContextView/styles.ts

@@ -34,26 +34,30 @@ const endPlacements: PlacementArray = [
   'end center',
   'end top',
   'end bottom',
+  'end stretch',
   'center end',
   'end'
 ]
 const startPlacements: PlacementArray = [
   'start center',
   'start top',
   'start bottom',
+  'start stretch',
   'center start',
   'start'
 ]
 const bottomPlacements: PlacementArray = [
   'bottom',
   'bottom end',
   'bottom start',
+  'bottom stretch',
   'bottom center'
 ]
 const topPlacements: PlacementArray = [
   'top',
   'top start',
   'top end',
+  'top stretch',
   'top center'
 ]
 
@@ -85,7 +89,9 @@ const getArrowCorrections = (
     'top',
     'bottom',
     'top center',
-    'bottom center'
+    'bottom center',
+    'top stretch',
+    'bottom stretch'
   ]
   const start: PlacementArray = ['top start', 'bottom start']
   const end: PlacementArray = ['top end', 'bottom end']