diff --git a/e2e/components/CounterLabel.test.ts b/e2e/components/CounterLabel.test.ts
index 6d32cec228d..6b18f0fe40c 100644
--- a/e2e/components/CounterLabel.test.ts
+++ b/e2e/components/CounterLabel.test.ts
@@ -11,10 +11,6 @@ const stories = [
title: 'Primary Theme',
id: 'components-counterlabel--primary-theme',
},
- {
- title: 'Primary Theme',
- id: 'components-counterlabel--primary-theme',
- },
{
title: 'Secondary Theme',
id: 'components-counterlabel--secondary-theme',
diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
index 13e2e5b859e..d811fe66a08 100644
--- a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
+++ b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
@@ -1,39 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CounterLabel renders with secondary scheme when no "scheme" prop is provided 1`] = `
+.c1:not(:focus):not(:active):not(:focus-within) {
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
.c0 {
display: inline-block;
padding: 2px 5px;
font-size: 12px;
font-weight: bold;
- line-height: condensedUltra;
+ line-height: 1;
border-radius: 20px;
- background-color: neutral.muted;
border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
- color: fg.default;
}
.c0:empty {
display: none;
}
-.c1 {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- -webkit-clip: rect(0,0,0,0);
- clip: rect(0,0,0,0);
- white-space: nowrap;
- border-width: 0;
-}
-
1234
@@ -48,39 +44,35 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
`;
exports[`CounterLabel respects the primary "scheme" prop 1`] = `
+.c1:not(:focus):not(:active):not(:focus-within) {
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
.c0 {
display: inline-block;
padding: 2px 5px;
font-size: 12px;
font-weight: bold;
- line-height: condensedUltra;
+ line-height: 1;
border-radius: 20px;
- background-color: neutral.emphasis;
border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
- color: fg.onEmphasis;
}
.c0:empty {
display: none;
}
-.c1 {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- -webkit-clip: rect(0,0,0,0);
- clip: rect(0,0,0,0);
- white-space: nowrap;
- border-width: 0;
-}
-
1234
diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index d25b5d9a2d2..02e48cf533e 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -813,19 +813,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
flex-grow: 1;
}
-.c7 {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- -webkit-clip: rect(0,0,0,0);
- clip: rect(0,0,0,0);
- white-space: nowrap;
- border-width: 0;
-}
-
.c9 {
font-size: 16px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
@@ -862,6 +849,19 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
font-weight: var(--base-text-weight-semibold,600);
}
+.c7 {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ -webkit-clip: rect(0,0,0,0);
+ clip: rect(0,0,0,0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
.c0 {
font-size: 14px;
line-height: 20px;