chore: use Banner instead of custom implementation for SelectPanel notice

.changeset/cuddly-cows-trade.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore: use Banner instead of custom implementation for SelectPanel notice

packages/react/src/Banner/Banner.docs.json

@@ -100,7 +100,12 @@
  {
  "name": "variant",
  "type": "'critical' | 'info' | 'success' | 'upsell' | 'warning'",
- "description": ""
+ "description": "Specify the type of the Banner"
+ },
+ {
+ "name": "layout",
+ "type": "'default' | 'compact'",
+ "description": "Specify the layout of the Banner. Compact layout will reduce the padding."
  }
  ],
  "subcomponents": [

packages/react/src/Banner/Banner.module.css

@@ -13,6 +13,10 @@
  container: banner / inline-size;
  }
 
+ &[data-layout='compact'] {
+ padding: var(--base-size-4);
+ }
+
  &[data-variant='critical'] {
  --banner-bgColor: var(--bgColor-danger-muted);
  --banner-borderColor: var(--borderColor-danger-muted);

packages/react/src/Banner/Banner.tsx

@@ -64,6 +64,11 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
  * Specify the type of the Banner
  */
  variant?: BannerVariant
+
+ /**
+ * Specify the layout of the Banner. Compact layout will reduce the padding.
+ */
+ layout?: 'default' | 'compact'
 }
 
 const iconForVariant: Record<BannerVariant, React.ReactNode> = {
@@ -140,6 +145,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
  data-variant={variant}
  tabIndex={-1}
  ref={ref}
+ data-layout={rest.layout || 'default'}
  >
  <div className={classes.BannerIcon}>{icon && supportsCustomIcon ? icon : iconForVariant[variant]}</div>
  <div className={classes.BannerContainer}>

packages/react/src/SelectPanel/SelectPanel.module.css

@@ -53,19 +53,9 @@
 }
 
 .Notice {
- display: flex;
- padding-top: var(--base-size-12);
- padding-right: var(--base-size-16);
- padding-bottom: var(--base-size-12);
- padding-left: var(--base-size-16);
  margin-top: var(--base-size-4);
  margin-right: var(--base-size-8);
  margin-left: var(--base-size-8);
- font-size: var(--text-body-size-small);
- flex-direction: row;
- border: var(--borderWidth-thin) solid;
- gap: var(--base-size-8);
- border-radius: var(--borderRadius-medium);
 }
 
 .Notice a {
@@ -85,7 +75,7 @@
  border-color: var(--borderColor-attention-muted);
 }
 
-.Notice:where([data-variant='error']) {
+.Notice:where([data-variant='critical']) {
  color: var(--fgColor-danger);
  background-color: var(--bgColor-danger-muted);
  border-color: var(--borderColor-danger-muted);

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -695,7 +695,7 @@ for (const usingRemoveActiveDescendant of [false, true]) {
  expect(screen.getByRole('combobox').hasAttribute('aria-describedby')).toBeTruthy()
  })
 
- it.skip('should announce initially focused item', async () => {
+ it('should announce initially focused item', async () => {
  const user = userEvent.setup()
  renderWithFlag(<FilterableSelectPanel />, usingRemoveActiveDescendant)
 

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -1,12 +1,4 @@
-import {
- AlertIcon,
- InfoIcon,
- SearchIcon,
- StopIcon,
- TriangleDownIcon,
- XIcon,
- type IconProps,
-} from '@primer/octicons-react'
+import {SearchIcon, TriangleDownIcon, XIcon, type IconProps} from '@primer/octicons-react'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
@@ -34,6 +26,7 @@ import {clsx} from 'clsx'
 import {debounce} from '@github/mini-throttle'
 import {useResponsiveValue} from '../hooks/useResponsiveValue'
 import type {ButtonProps, LinkButtonProps} from '../Button/types'
+import {Banner} from '../Banner'
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const SHORT_DELAY_MS = 500
@@ -675,12 +668,6 @@ function Panel({
  }
  }
 
- const iconForNoticeVariant = {
- info: <InfoIcon size={16} />,
- warning: <AlertIcon size={16} />,
- error: <StopIcon size={16} />,
- }
-
  function getMessage() {
  if (items.length === 0 && !message) {
  return DefaultEmptyMessage
@@ -826,9 +813,15 @@ function Panel({
  ) : null}
  </div>
  {notice && (
- <div ref={noticeRef} data-variant={notice.variant} className={classes.Notice}>
- {iconForNoticeVariant[notice.variant]}
- <div>{notice.text}</div>
+ <div ref={noticeRef}>
+ <Banner
+ variant={notice.variant === 'error' ? 'critical' : notice.variant}
+ description={notice.text}
+ title="Notice"
+ hideTitle
+ className={classes.Notice}
+ layout="compact"
+ />
  </div>
  )}
  <FilteredActionList