diff --git a/.changeset/fluffy-baboons-sip.md b/.changeset/fluffy-baboons-sip.md new file mode 100644 index 00000000000..b6151abd1cc --- /dev/null +++ b/.changeset/fluffy-baboons-sip.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +SelectPanel: Add `align` prop to `SelectPanel` which determines the alignment of the panel relative to the anchor diff --git a/packages/react/src/SelectPanel/SelectPanel.docs.json b/packages/react/src/SelectPanel/SelectPanel.docs.json index b79f85363e0..373e81002e7 100644 --- a/packages/react/src/SelectPanel/SelectPanel.docs.json +++ b/packages/react/src/SelectPanel/SelectPanel.docs.json @@ -189,6 +189,12 @@ "type": "boolean", "description": "Whether to disable fullscreen behavior on narrow viewports. When `true`, the panel will maintain its anchored position regardless of viewport size. When `false`, the panel will go fullscreen on narrow viewports (if feature flag is enabled).", "defaultValue": "undefined (uses feature flag default)" + }, + { + "name": "align", + "type": "'start' | 'end' | 'center'", + "defaultValue": "'start'", + "description": "Determines the alignment of the panel relative to the anchor. Defaults to 'start' which aligns the left edge of the panel with the left edge of the anchor." } ], "subcomponents": [] diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 52690350d7e..24473437098 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -115,7 +115,7 @@ type SelectPanelVariantProps = {variant?: 'anchored'; onCancel?: () => void} | { export type SelectPanelProps = SelectPanelBaseProps & Omit & - Pick & + Pick & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps @@ -182,6 +182,7 @@ function Panel({ secondaryAction, showSelectedOptionsFirst = true, disableFullscreenOnNarrow, + align, ...listProps }: SelectPanelProps): JSX.Element { const titleId = useId() @@ -627,6 +628,7 @@ function Panel({