mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 08:13:42 +00:00
a4303fac59
* 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>
151 lines
3.5 KiB
TypeScript
151 lines
3.5 KiB
TypeScript
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"],
|
|
},
|
|
];
|