Adding margin around notice styles (#5881)

Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>

Author: 2 people

.changeset/twenty-crabs-try.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SelectPanel): Add margin around notice styles

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-features--with-notice-light-modern-action-list--true-linux.png

@@ -133,4 +133,29 @@ test.describe('SelectPanel', () => {
       `SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true.png`,
     )
   })
+
+  test(`Default @vrt with notice`, async ({page}) => {
+    await visit(page, {
+      id: 'components-selectpanel-features--with-notice',
+      globals: {
+        featureFlags: {
+          primer_react_select_panel_with_modern_action_list: true,
+        },
+      },
+    })
+
+    // Open select panel
+    const isPanelOpen = await page.isVisible('[role="listbox"]')
+    if (!isPanelOpen) {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    }
+
+    expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+      `SelectPanel-features--with-notice-light-modern-action-list--true.png`,
+    )
+  })
 })

e2e/components/SelectPanel.test.ts

@@ -37,11 +37,13 @@
   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-top: var(--borderWidth-thin) solid;
-  border-bottom: var(--borderWidth-thin) solid;
+  border: var(--borderWidth-thin) solid;
   gap: var(--base-size-8);
+  border-radius: var(--borderRadius-medium);
 }
 
 .Notice a {