From bb734514ec94dac668e67ab49e58973f7a5842ae Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 11 Oct 2024 10:40:51 -0500 Subject: [PATCH 1/2] fix(CounterLabel): update styles to work with sx overrides --- .changeset/spicy-pants-breathe.md | 5 +++++ .../react/src/CounterLabel/CounterLabel.module.css | 6 +++--- packages/react/src/CounterLabel/CounterLabel.tsx | 11 +++++++---- 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 .changeset/spicy-pants-breathe.md diff --git a/.changeset/spicy-pants-breathe.md b/.changeset/spicy-pants-breathe.md new file mode 100644 index 00000000000..11932407727 --- /dev/null +++ b/.changeset/spicy-pants-breathe.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update CSS styles for CounterLabel to allow overrides for color, background color diff --git a/packages/react/src/CounterLabel/CounterLabel.module.css b/packages/react/src/CounterLabel/CounterLabel.module.css index efc34de01dc..3b99e57d909 100644 --- a/packages/react/src/CounterLabel/CounterLabel.module.css +++ b/packages/react/src/CounterLabel/CounterLabel.module.css @@ -9,17 +9,17 @@ /* stylelint-disable-next-line primer/borders */ border-radius: 20px; - &[data-scheme='primary'] { + &:where([data-scheme='primary']) { color: var(--fgColor-onEmphasis); background-color: var(--bgColor-neutral-emphasis); } - &[data-scheme='secondary'] { + &:where([data-scheme='secondary']) { color: var(--fgColor-default); background-color: var(--bgColor-neutral-muted); } - &:empty { + &:where(:empty) { display: none; } } diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index 01f2b18397e..a8e55ea9c18 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.tsx @@ -70,21 +70,24 @@ const StyledCounterLabel = styled.span` border-radius: 20px; border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--counter-borderColor, var(--color-counter-border)); - &[data-scheme='primary'] { + &:where([data-scheme='primary']) { background-color: ${get('colors.neutral.emphasis')}; color: ${get('colors.fg.onEmphasis')}; } - &[data-scheme='secondary'] { + &:where([data-scheme='secondary']) { background-color: ${get('colors.neutral.muted')}; color: ${get('colors.fg.default')}; } - &:empty { + &:where(:empty) { display: none; } - ${sx} + /* Place the sx prop styles after previously inserted styles so that it will win out in specificity */ + & { + ${sx} + } ` CounterLabel.displayName = 'CounterLabel' From e8951fcef567c70a0d83b35b91fa62b8e5ae0bfd Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 11 Oct 2024 11:22:04 -0500 Subject: [PATCH 2/2] test: update snapshots --- .../src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap index dd639aa8fe3..1d08b1f9ece 100644 --- a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap +++ b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap @@ -21,7 +21,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border)); } -.c0:empty { +.c0:where(:empty) { display: none; } @@ -64,7 +64,7 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = ` border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border)); } -.c0:empty { +.c0:where(:empty) { display: none; }