chore(ActionMenu): Add css modules tests to ActionMenu (#5308)

* chore(ActionMenu): Add css modules tests to ActionMenu * add tests * missing file * update test * test(vrt): update snapshots --------- Co-authored-by: hussam-i-am <hussam-i-am@users.noreply.github.com>
primer · Nov 18, 2024 · 7d6842a · 7d6842a
1 parent 3935811
commit 7d6842a
Show file tree

Hide file tree

Showing 39 changed files with 284 additions and 319 deletions.
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-linux.png
diff --git a/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-linux.png b/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-linux.png
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-linux.png
diff --git a/.../components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-linux.png b/.../components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-linux.png
diff --git a/...ionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-linux.png b/...ionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-linux.png
diff --git a/...components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-linux.png b/...components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png
diff --git a/...u.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/...u.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png
diff --git a/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png b/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png
diff --git a/...enu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png b/...enu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/....test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png
diff --git a/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png b/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png
diff --git a/...enu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/...enu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png
diff --git a/...s/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-colorblind-linux.png b/...s/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-colorblind-linux.png
diff --git a/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-dimmed-linux.png b/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-dimmed-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-high-contrast-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-high-contrast-linux.png
diff --git a/...s/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-linux.png b/...s/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-linux.png
diff --git a/...s/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-tritanopia-linux.png b/...s/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-tritanopia-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-colorblind-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-colorblind-linux.png
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-high-contrast-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-high-contrast-linux.png
diff --git a/.../components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-linux.png b/.../components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-tritanopia-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-tritanopia-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png
diff --git a/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png b/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png
diff --git a/...ionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png b/...ionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png
diff --git a/...components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png b/...components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png
diff --git a/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png b/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png
diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts
diff --git a/packages/react/src/ActionMenu/ActionMenu.dev.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.dev.stories.tsx
@@ -0,0 +1,122 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import {ActionMenu} from './ActionMenu'
+import {ActionList} from '../ActionList'
+import {FeatureFlags} from '../FeatureFlags'
+
+export default {
+  title: 'Components/ActionMenu/Dev',
+  component: ActionMenu,
+} as Meta<ComponentProps<typeof ActionMenu>>
+
+export const WithCss = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <ActionMenu>
+      <ActionMenu.Button className="testCustomClassnameColor">Open menu</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium" className="testCustomClassnameBorder">
+        <ActionList>
+          <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </FeatureFlags>
+)
+
+export const WithSx = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <ActionMenu>
+      <ActionMenu.Button sx={{color: 'success.emphasis'}}>Open menu</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium" sx={{border: '1px solid', borderColor: 'success.emphasis'}}>
+        <ActionList>
+          <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </FeatureFlags>
+)
+
+export const WithSxAndCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <ActionMenu>
+      <ActionMenu.Button sx={{color: 'success.emphasis'}} className="testCustomClassnameColor">
+        Open menu
+      </ActionMenu.Button>
+      <ActionMenu.Overlay
+        width="medium"
+        className="testCustomClassnameBorder"
+        sx={{border: '1px solid', borderColor: 'success.emphasis'}}
+      >
+        <ActionList>
+          <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </FeatureFlags>
+)
diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
@@ -641,6 +641,64 @@ describe('ActionMenu', () => {
 
       expect(baseAnchor).not.toHaveAttribute('aria-expanded', 'true')
     })
+
+    it('supports className prop on ActionMenu.Anchor', async () => {
+      const component = HTMLRender(
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <ActionMenu>
+              <ActionMenu.Anchor className="test-class">
+                <Button>Toggle Menu</Button>
+              </ActionMenu.Anchor>
+              <ActionMenu.Overlay>
+                <ActionList>
+                  <ActionList.Item>New file</ActionList.Item>
+                  <ActionList.Divider />
+                  <ActionList.Item>Copy link</ActionList.Item>
+                  <ActionList.Item>Edit file</ActionList.Item>
+                  <ActionList.Item variant="danger" onSelect={event => event.preventDefault()}>
+                    Delete file
+                  </ActionList.Item>
+                  <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="s">
+                    Github
+                  </ActionList.LinkItem>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </BaseStyles>
+        </ThemeProvider>,
+      )
+      const anchor = component.getByRole('button', {name: 'Toggle Menu'})
+      expect(anchor).toHaveClass('test-class')
+    })
+
+    it('supports className prop on ActionMenu.Button', async () => {
+      const component = HTMLRender(
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <ActionMenu>
+              <ActionMenu.Button className="test-class">Toggle Menu</ActionMenu.Button>
+              <ActionMenu.Overlay>
+                <ActionList>
+                  <ActionList.Item>New file</ActionList.Item>
+                  <ActionList.Divider />
+                  <ActionList.Item>Copy link</ActionList.Item>
+                  <ActionList.Item>Edit file</ActionList.Item>
+                  <ActionList.Item variant="danger" onSelect={event => event.preventDefault()}>
+                    Delete file
+                  </ActionList.Item>
+                  <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="s">
+                    Github
+                  </ActionList.LinkItem>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </BaseStyles>
+        </ThemeProvider>,
+      )
+      const button = component.getByRole('button', {name: 'Toggle Menu'})
+      expect(button).toHaveClass('test-class')
+    })
   })
 
   describe('calls event handlers on trigger', () => {