From 38ee5c05ffbcf42d78ca10e233dc4e4ecad8e15a Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 9 Feb 2024 17:00:40 +0100 Subject: [PATCH 1/5] replace height with maxHeight --- packages/react/src/drafts/SelectPanel2/SelectPanel.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx index cccad7d792c..22a28fce23a 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx @@ -66,6 +66,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 children: React.ReactNode } @@ -86,7 +88,7 @@ const Panel: React.FC = ({ onSubmit: propsOnSubmit, width = 'medium', - height = 'large', + maxHeight = 'large', ...props }) => { const [internalOpen, setInternalOpen] = React.useState(defaultOpen) @@ -230,6 +232,8 @@ const Panel: React.FC = ({ aria-describedby={description ? `${panelId}--description` : undefined} width={width} height={height} + height="fit-content" + maxHeight={maxHeight} sx={{ // reset dialog default styles border: 'none', @@ -433,6 +437,7 @@ const SelectPanelFooter = ({...props}) => { display: 'flex', justifyContent: 'space-between', alignItems: 'center', + flexShrink: 0, padding: hidePrimaryActions ? 2 : 3, minHeight: '44px', borderTop: '1px solid', From e8c9ec1e4f12effa860c2e052650e471cacea74f Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 9 Feb 2024 17:01:04 +0100 Subject: [PATCH 2/5] adjust height of loading & message based on container --- packages/react/src/Overlay/Overlay.tsx | 2 +- packages/react/src/drafts/SelectPanel2/SelectPanel.tsx | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 45ae645e8ec..1c804e6adb4 100644 --- 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 index 22a28fce23a..1698ba74ca5 100644 --- 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,6 @@ 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 @@ -231,10 +230,10 @@ const Panel: React.FC = ({ 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, @@ -523,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) }} > @@ -565,6 +566,8 @@ const SelectPanelMessage: React.FC = ({ paddingX: 4, textAlign: 'center', a: {color: 'inherit', textDecoration: 'underline'}, + minHeight: 'min(calc(var(--max-height) - 150px), 324px)', + // maxHeight of dialog - (header & footer) }} > {variant !== 'empty' ? ( From 056f6f76fd691afd1d45b753b721db4e38a17b15 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 9 Feb 2024 17:01:16 +0100 Subject: [PATCH 3/5] remove redundant height from stories --- .../SelectPanel2/stories/SelectPanel.examples.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx index 3eaf75e9060..c1cd7d0b0fd 100644 --- 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 = () => {

Use height=fit-content to match height of contents

- + Notify me:{' '} {Object.keys(channels) From 0db45d01de9f025a9a59140827dd565555b982bf Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 9 Feb 2024 17:07:08 +0100 Subject: [PATCH 4/5] Create strange-starfishes-work.md --- .changeset/strange-starfishes-work.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strange-starfishes-work.md diff --git a/.changeset/strange-starfishes-work.md b/.changeset/strange-starfishes-work.md new file mode 100644 index 00000000000..fed1220bd9d --- /dev/null +++ b/.changeset/strange-starfishes-work.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +experimental/SelectPanel: Automatically adjust height based on contents From e9bff98f2f4f06f2564512ac6e76ad174186e587 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 12 Feb 2024 16:44:38 +0100 Subject: [PATCH 5/5] fix bad merge --- .../SelectPanel2/stories/SelectPanel.features.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx b/packages/react/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx index 1ef2d78b9b1..6f4d348c933 100644 --- 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 = () => { <>

Instant selection variant

- + {selectedTag || 'Choose a tag'}