popover placement

[hamzasaleem2]

Feature description

possible to make placement inside popover? regular: right,left,top,bottom

example:
<popover placement="right"/>

Affected component/components

popover

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

[Nagalsky]

@hamzasaleem2 https://www.radix-ui.com/primitives/docs/components/popover#content - take a look side and align props

[hamzasaleem2]

can't believe i missed it. thanks!

needed two things to make it look like this, just incase anyone else is looking for it.

add side to className
include side={side} in content ref
set align to "start"

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> >(
  (
    { className, align = "start", side = "right", sideOffset = 4, ...props },
    ref
  ) => (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        ref={ref}
        align={align}
        side={side}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
)