Fix extra padding on SelectPanel with groups (#5869)

Co-authored-by: hectahertz <24622853+hectahertz@users.noreply.github.com>
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: Marie Lucca <francinelucca@github.com>
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: 3 people

.changeset/fresh-lights-wink.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix extra padding on SelectPanel with groups

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-modern-action-list--true-linux.png

@@ -15,9 +15,9 @@
     },
     {
       "name": "variant",
-      "type": "'inset' | 'full'",
+      "type": "'inset' | 'horizontal-inset' | 'full'",
       "defaultValue": "'inset'",
-      "description": "`inset` children are offset (vertically and horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges"
+      "description": "`inset` children are offset (vertically and/or horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges"
     },
     {
       "name": "selectionVariant",

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-linux.png

@@ -13,7 +13,9 @@
 
   &:where([data-variant='inset']) {
     padding-block: var(--base-size-8);
+  }
 
+  &:where([data-variant='inset'], [data-variant='horizontal-inset']) {
     /* this is only to match default experience */
     & .ActionListItem {
       margin-inline: var(--base-size-8);

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-modern-action-list--true-linux.png

@@ -45,7 +45,7 @@ Playground.argTypes = {
     control: {
       type: 'radio',
     },
-    options: ['inset', 'full'],
+    options: ['inset', 'horizontal-inset', 'full'],
   },
   selectionVariant: {
     control: {

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-linux.png

@@ -5,7 +5,7 @@
     margin-inline-start: var(--base-size-8);
   }
 
-  &:where([data-list-variant='inset']) {
+  &:where([data-list-variant='inset'], [data-list-variant='horizontal-inset']) {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8));
   }

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-modern-action-list--true-linux.png

@@ -193,7 +193,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       paddingY: '6px', // custom value off the scale
       lineHeight: '16px',
       minHeight: 5,
-      marginX: listVariant === 'inset' ? 2 : 0,
+      marginX: listVariant === 'inset' || listVariant === 'horizontal-inset' ? 2 : 0,
       borderRadius: 2,
       transition: 'background 33.333ms linear',
       color: getVariantStyles(variant, disabled, inactive || loading).color,
@@ -217,7 +217,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       appearance: 'none',
       background: 'unset',
       border: 'unset',
-      width: listVariant === 'inset' ? 'calc(100% - 16px)' : '100%',
+      width: listVariant === 'inset' || listVariant === 'horizontal-inset' ? 'calc(100% - 16px)' : '100%',
       fontFamily: 'unset',
       textAlign: 'unset',
       marginY: 'unset',

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-linux.png

@@ -120,7 +120,7 @@ export type ActionListProps = React.PropsWithChildren<{
   /**
    * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
    */
-  variant?: 'inset' | 'full'
+  variant?: 'inset' | 'horizontal-inset' | 'full'
   /**
    * Whether multiple Items or a single Item can be selected.
    */

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png

@@ -608,6 +608,7 @@ function Panel({
             onInputRefChanged={onInputRefChanged}
             placeholderText={placeholderText}
             {...listProps}
+            variant={listProps.groupMetadata?.length ? 'horizontal-inset' : 'inset'}
             role="listbox"
             // browsers give aria-labelledby precedence over aria-label so we need to make sure
             // we don't accidentally override props.aria-label

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-linux.png

@@ -62,7 +62,7 @@ export interface ListPropsBase {
    * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
    * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
    */
-  variant?: 'inset' | 'full'
+  variant?: 'inset' | 'horizontal-inset' | 'full'
 
   /**
    *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected