Skip to content

SelectPanel2: Automatically adjust height based on contents #4245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 12, 2024
Merged

SelectPanel2: Automatically adjust height based on contents #4245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
38ee5c0
replace height with maxHeight
siddharthkp Feb 9, 2024
e8c9ec1
adjust height of loading & message based on container
siddharthkp Feb 9, 2024
056f6f7
remove redundant height from stories
siddharthkp Feb 9, 2024
0db45d0
Create strange-starfishes-work.md
siddharthkp Feb 9, 2024
349c125
Merge branch 'main' into drafts-selectpanel-autoheight
siddharthkp Feb 12, 2024
e9bff98
fix bad merge
siddharthkp Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/strange-starfishes-work.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

experimental/SelectPanel: Automatically adjust height based on contents
2 changes: 1 addition & 1 deletion packages/react/src/Overlay/Overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ type StyledOverlayProps = {
anchorSide?: AnchorSide
} & SxProp

const heightMap = {
export const heightMap = {
xsmall: '192px',
small: '256px',
medium: '320px',
Expand Down
16 changes: 12 additions & 4 deletions packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {ActionListContainerContext} from '../../ActionList/ActionListContainerCo
import {useSlots} from '../../hooks/useSlots'
import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
import {useFocusZone} from '../../hooks/useFocusZone'
import {StyledOverlay, OverlayProps} from '../../Overlay/Overlay'
import {StyledOverlay, OverlayProps, heightMap} from '../../Overlay/Overlay'
import InputLabel from '../../internal/components/InputLabel'
import {invariant} from '../../utils/invariant'

Expand Down Expand Up @@ -65,7 +65,8 @@ export type SelectPanelProps = {

// TODO: move these to SelectPanel.Overlay or overlayProps
width?: OverlayProps['width']
height?: OverlayProps['height'] | 'fit-content'
height?: 'fit-content' // not used, keeping it around temporary for backward compatibility
maxHeight?: Exclude<OverlayProps['maxHeight'], 'xsmall'>

children: React.ReactNode
}
Expand All @@ -86,7 +87,7 @@ const Panel: React.FC<SelectPanelProps> = ({
onSubmit: propsOnSubmit,

width = 'medium',
height = 'large',
maxHeight = 'large',
...props
}) => {
const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
Expand Down Expand Up @@ -229,8 +230,10 @@ const Panel: React.FC<SelectPanelProps> = ({
aria-labelledby={`${panelId}--title`}
aria-describedby={description ? `${panelId}--description` : undefined}
width={width}
height={height}
height="fit-content"
maxHeight={maxHeight}
sx={{
'--max-height': heightMap[maxHeight],
// reset dialog default styles
border: 'none',
padding: 0,
Expand Down Expand Up @@ -433,6 +436,7 @@ const SelectPanelFooter = ({...props}) => {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexShrink: 0,
padding: hidePrimaryActions ? 2 : 3,
minHeight: '44px',
borderTop: '1px solid',
Expand Down Expand Up @@ -518,6 +522,8 @@ const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching
alignItems: 'center',
height: '100%',
gap: 3,
minHeight: 'min(calc(var(--max-height) - 150px), 324px)',
// maxHeight of dialog - (header & footer)
}}
>
<Spinner size="medium" />
Expand Down Expand Up @@ -560,6 +566,8 @@ const SelectPanelMessage: React.FC<SelectPanelMessageProps> = ({
paddingX: 4,
textAlign: 'center',
a: {color: 'inherit', textDecoration: 'underline'},
minHeight: 'min(calc(var(--max-height) - 150px), 324px)',
// maxHeight of dialog - (header & footer)
}}
>
{variant !== 'empty' ? (
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,6 @@ export const OpenFromMenu = () => {
variant="modal"
title="Custom"
open={selectPanelOpen}
height="medium"
onSubmit={() => {
setSelectedSetting('Custom')
setSelectPanelOpen(false)
Expand Down Expand Up @@ -603,7 +602,7 @@ export const ShortSelectPanel = () => {
<p>
Use <code>height=fit-content</code> to match height of contents
</p>
<SelectPanel title="Select notification channels" height="fit-content" onSubmit={onSubmit}>
<SelectPanel title="Select notification channels" onSubmit={onSubmit}>
<SelectPanel.Button>
<Text sx={{color: 'fg.muted'}}>Notify me:</Text>{' '}
{Object.keys(channels)
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const InstantSelectionVariant = () => {
<>
<h1>Instant selection variant</h1>

<SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit} height="medium">
<SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit}>
<SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>

<ActionList>
Expand Down