SelectPanel2: Automatically adjust height based on contents (#4245)

* replace height with maxHeight * adjust height of loading & message based on container * remove redundant height from stories * Create strange-starfishes-work.md * fix bad merge
primer · Feb 12, 2024 · d79a419 · d79a419
1 parent 2aced1c
commit d79a419
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/.changeset/strange-starfishes-work.md b/.changeset/strange-starfishes-work.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+experimental/SelectPanel: Automatically adjust height based on contents
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
@@ -21,7 +21,7 @@ type StyledOverlayProps = {
   anchorSide?: AnchorSide
 } & SxProp
 
-const heightMap = {
+export const heightMap = {
   xsmall: '192px',
   small: '256px',
   medium: '320px',

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -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'
 
@@ -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
 }
@@ -86,7 +87,7 @@ const Panel: React.FC<SelectPanelProps> = ({
   onSubmit: propsOnSubmit,
 
   width = 'medium',
-  height = 'large',
+  maxHeight = 'large',
   ...props
 }) => {
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
@@ -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,
@@ -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',
@@ -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" />
@@ -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' ? (

diff --git a/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
@@ -439,7 +439,6 @@ export const OpenFromMenu = () => {
         variant="modal"
         title="Custom"
         open={selectPanelOpen}
-        height="medium"
         onSubmit={() => {
           setSelectedSetting('Custom')
           setSelectPanelOpen(false)
@@ -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)

diff --git a/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx b/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
@@ -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>