Introduce Save and close on SelectPanel (#5956)

Co-authored-by: hectahertz <24622853+hectahertz@users.noreply.github.com>
Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Author: hectahertz

.changeset/small-dog-bark.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Introduce Save and close on SelectPanel

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true-linux.png

@@ -501,35 +501,37 @@ function Panel({
   const showResponsiveCancelSaveButtons =
     variant !== 'modal' && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel !== undefined
 
-  // The responsive save button is only covering a very specific case:
-  // - anchored panel with multi select if there is no onCancel
-  const showResponsiveSaveButton =
+  // The responsive save and close button is only covering a very specific case:
+  // - anchored panel with multi select if there is no onCancel.
+  // This variant should disappear in the future, once onCancel is required,
+  // but for now we need to support it so there is a user friendly way to close the panel.
+  const showResponsiveSaveAndCloseButton =
     variant !== 'modal' && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel === undefined
 
   // If there is any element in the footer, we render it.
   const renderFooter =
     secondaryAction !== undefined ||
     showPermanentCancelSaveButtons ||
-    showResponsiveSaveButton ||
+    showResponsiveSaveAndCloseButton ||
     showResponsiveCancelSaveButtons
 
   // If there's any permanent elements in the footer, we show it always.
   // The save button is only shown on small screens.
   const displayFooter =
     secondaryAction !== undefined || showPermanentCancelSaveButtons
       ? 'always'
-      : showResponsiveSaveButton || showResponsiveCancelSaveButtons
+      : showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons
         ? 'only-small'
         : undefined
 
   const stretchSecondaryAction =
-    showResponsiveSaveButton || showResponsiveCancelSaveButtons
+    showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons
       ? 'only-big'
       : showPermanentCancelSaveButtons
         ? 'never'
         : 'always'
 
-  const stretchSaveButton = showResponsiveSaveButton && secondaryAction === undefined ? 'only-small' : 'never'
+  const stretchSaveButton = showResponsiveSaveAndCloseButton && secondaryAction === undefined ? 'only-small' : 'never'
 
   return (
     <>
@@ -671,7 +673,7 @@ function Panel({
                   </Button>
                 </div>
               ) : null}
-              {showResponsiveSaveButton ? (
+              {showResponsiveSaveAndCloseButton ? (
                 <div className={classes.ResponsiveSaveButton} data-stretch-save-button={stretchSaveButton}>
                   <Button
                     block
@@ -681,7 +683,7 @@ function Panel({
                       onClose('click-outside')
                     }}
                   >
-                    Save
+                    Save and close
                   </Button>
                 </div>
               ) : null}