ActionList: Fix multiple selection svg by overriding global shape-ren…

…dering for github.com (#1668) * override global shape-rendering for github.com * add changelog * add issue to comment * update snapshots
primer · Nov 30, 2021 · 98dc633 · 98dc633
1 parent 5c6dc64
commit 98dc633
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/actionlist-fix-selection-rendering.md 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
@@ -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
@@ -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
@@ -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 {