[PM-2452] Popover Component (#5889)

* setup popover component template and basic story * add a11y features * add multiple positions for the popover * add stories for open right and left * prevent panel from hugging edges of screen * fix typo * add popover arrow depending on position * add buttons to stories * add figma preview * move toward directive approach * add all positions * add header input * add close functionality * make standalone component * add a11y import * add all stories * add story controls/args * add module of standalone components * gracefully handle text wrap and align close button to top for longer headings * update semantic html * add story for open state * use bitIconButton * adjust styles * add public close method * setup walkthrough mode * add walkthrough mode * revert to before walkthrough service added * add triggerRef to stories * change property name * add Escape key to close events * add initially open state * add docs * minor reformatting --------- Co-authored-by: William Martin <contact@willmartian.com>
2025-12-13 23:03:32 +00:00 · 2023-10-23 09:22:54 -07:00
parent c2e03d2cdc
commit a4303fac59
11 changed files with 883 additions and 0 deletions
--- a/libs/components/src/popover/default-positions.ts
+++ b/libs/components/src/popover/default-positions.ts
@@ -0,0 +1,150 @@
+import { ConnectedPosition } from "@angular/cdk/overlay";
+
+const ORIGIN_OFFSET_PX = 6;
+const OVERLAY_OFFSET_PX = 24;
+
+export type PositionIdentifier =
+  | "right-start"
+  | "right-center"
+  | "right-end"
+  | "left-start"
+  | "left-center"
+  | "left-end"
+  | "below-start"
+  | "below-center"
+  | "below-end"
+  | "above-start"
+  | "above-center"
+  | "above-end";
+
+export interface DefaultPosition extends ConnectedPosition {
+  id: PositionIdentifier;
+}
+
+export const defaultPositions: DefaultPosition[] = [
+  /**
+   * The order of these positions matters. The Popover component will use
+   * the first position that fits within the viewport.
+   */
+
+  // Popover opens to right of trigger
+  {
+    id: "right-start",
+    offsetX: ORIGIN_OFFSET_PX,
+    offsetY: -OVERLAY_OFFSET_PX,
+    originX: "end",
+    originY: "center",
+    overlayX: "start",
+    overlayY: "top",
+    panelClass: ["bit-popover-right", "bit-popover-right-start"],
+  },
+  {
+    id: "right-center",
+    offsetX: ORIGIN_OFFSET_PX,
+    originX: "end",
+    originY: "center",
+    overlayX: "start",
+    overlayY: "center",
+    panelClass: ["bit-popover-right", "bit-popover-right-center"],
+  },
+  {
+    id: "right-end",
+    offsetX: ORIGIN_OFFSET_PX,
+    offsetY: OVERLAY_OFFSET_PX,
+    originX: "end",
+    originY: "center",
+    overlayX: "start",
+    overlayY: "bottom",
+    panelClass: ["bit-popover-right", "bit-popover-right-end"],
+  },
+  // ... to left of trigger
+  {
+    id: "left-start",
+    offsetX: -ORIGIN_OFFSET_PX,
+    offsetY: -OVERLAY_OFFSET_PX,
+    originX: "start",
+    originY: "center",
+    overlayX: "end",
+    overlayY: "top",
+    panelClass: ["bit-popover-left", "bit-popover-left-start"],
+  },
+  {
+    id: "left-center",
+    offsetX: -ORIGIN_OFFSET_PX,
+    originX: "start",
+    originY: "center",
+    overlayX: "end",
+    overlayY: "center",
+    panelClass: ["bit-popover-left", "bit-popover-left-center"],
+  },
+  {
+    id: "left-end",
+    offsetX: -ORIGIN_OFFSET_PX,
+    offsetY: OVERLAY_OFFSET_PX,
+    originX: "start",
+    originY: "center",
+    overlayX: "end",
+    overlayY: "bottom",
+    panelClass: ["bit-popover-left", "bit-popover-left-end"],
+  },
+  // ... below trigger
+  {
+    id: "below-center",
+    offsetY: ORIGIN_OFFSET_PX,
+    originX: "center",
+    originY: "bottom",
+    overlayX: "center",
+    overlayY: "top",
+    panelClass: ["bit-popover-below", "bit-popover-below-center"],
+  },
+  {
+    id: "below-start",
+    offsetX: -OVERLAY_OFFSET_PX,
+    offsetY: ORIGIN_OFFSET_PX,
+    originX: "center",
+    originY: "bottom",
+    overlayX: "start",
+    overlayY: "top",
+    panelClass: ["bit-popover-below", "bit-popover-below-start"],
+  },
+  {
+    id: "below-end",
+    offsetX: OVERLAY_OFFSET_PX,
+    offsetY: ORIGIN_OFFSET_PX,
+    originX: "center",
+    originY: "bottom",
+    overlayX: "end",
+    overlayY: "top",
+    panelClass: ["bit-popover-below", "bit-popover-below-end"],
+  },
+  // ... above trigger
+  {
+    id: "above-center",
+    offsetY: -ORIGIN_OFFSET_PX,
+    originX: "center",
+    originY: "top",
+    overlayX: "center",
+    overlayY: "bottom",
+    panelClass: ["bit-popover-above", "bit-popover-above-center"],
+  },
+  {
+    id: "above-start",
+    offsetX: -OVERLAY_OFFSET_PX,
+    offsetY: -ORIGIN_OFFSET_PX,
+    originX: "center",
+    originY: "top",
+    overlayX: "start",
+    overlayY: "bottom",
+    panelClass: ["bit-popover-above", "bit-popover-above-start"],
+  },
+  {
+    id: "above-end",
+    offsetX: OVERLAY_OFFSET_PX,
+    offsetY: -ORIGIN_OFFSET_PX,
+    originX: "center",
+    originY: "top",
+    overlayX: "end",
+    overlayY: "bottom",
+    panelClass: ["bit-popover-above", "bit-popover-above-end"],
+  },
+];