From 98dc633674b793edfa4fbeb88fd239e6ca40544e Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 30 Nov 2021 17:11:36 +0100
Subject: [PATCH] ActionList: Fix multiple selection svg by overriding global
 shape-rendering for github.com (#1668)

* override global shape-rendering for github.com

* add changelog

* add issue to comment

* update snapshots
---
 .changeset/actionlist-fix-selection-rendering.md       | 5 +++++
 src/ActionList/Item.tsx                                | 1 +
 src/ActionList2/Selection.tsx                          | 3 ++-
 src/__tests__/__snapshots__/Autocomplete.test.tsx.snap | 4 ++++
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/actionlist-fix-selection-rendering.md

diff --git a/.changeset/actionlist-fix-selection-rendering.md b/.changeset/actionlist-fix-selection-rendering.md
new file mode 100644
index 00000000000..a5c5b5d08e7
--- /dev/null
+++ b/.changeset/actionlist-fix-selection-rendering.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+ActionList: Fix multiple selection svg by overriding global shape-rendering for github.com
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 0033cfecd46..2664edd7421 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -317,6 +317,7 @@ const MultiSelectIcon = styled.svg<{selected?: boolean}>`
   rect {
     fill: ${({selected}) => (selected ? get('colors.accent.fg') : get('colors.canvas.default'))};
     stroke: ${({selected}) => (selected ? get('colors.accent.fg') : get('colors.border.default'))};
+    shape-rendering: auto; // this is a workaround to override global style in github/github, see primer/react#1666
   }
   path {
     fill: ${get('colors.fg.onEmphasis')};
diff --git a/src/ActionList2/Selection.tsx b/src/ActionList2/Selection.tsx
index f85b78db44e..eb67221bc2f 100644
--- a/src/ActionList2/Selection.tsx
+++ b/src/ActionList2/Selection.tsx
@@ -38,7 +38,8 @@ export const Selection: React.FC<SelectionProps> = ({selected}) => {
       sx={{
         rect: {
           fill: selected ? 'accent.fg' : 'canvas.default',
-          stroke: selected ? 'accent.fg' : 'border.default'
+          stroke: selected ? 'accent.fg' : 'border.default',
+          shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
         },
         path: {
           fill: 'fg.onEmphasis',
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index aac585b05f5..81eed5d4814 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -513,6 +513,7 @@ Array [
 .c6 rect {
   fill: #ffffff;
   stroke: #d0d7de;
+  shape-rendering: auto;
 }
 
 .c6 path {
@@ -1386,6 +1387,7 @@ Array [
 .c6 rect {
   fill: #ffffff;
   stroke: #d0d7de;
+  shape-rendering: auto;
 }
 
 .c6 path {
@@ -2206,6 +2208,7 @@ Array [
 .c10 rect {
   fill: #ffffff;
   stroke: #d0d7de;
+  shape-rendering: auto;
 }
 
 .c10 path {
@@ -2216,6 +2219,7 @@ Array [
 .c6 rect {
   fill: #0969da;
   stroke: #0969da;
+  shape-rendering: auto;
 }
 
 .c6 path {