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

Author: siddharthkp

.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

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')};

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',

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 {