diff --git a/.changeset/fair-flowers-share.md b/.changeset/fair-flowers-share.md new file mode 100644 index 00000000000..0f0dcda7061 --- /dev/null +++ b/.changeset/fair-flowers-share.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add missing CSS for `KeybindingHint` diff --git a/.changeset/pre.json b/.changeset/pre.json index a0e864f42d1..e82f465821d 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -33,6 +33,7 @@ "deprecate-textinputwithtokens", "dirty-chairs-invent", "eighty-queens-tap", + "fair-flowers-share", "fair-views-laugh", "famous-jobs-applaud", "few-mails-sing", @@ -74,6 +75,7 @@ "pretty-emus-cover", "pretty-women-sing", "proud-chairs-study", + "purple-waves-pay", "rich-walls-fold", "rotten-carpets-raise", "rude-cycles-scream", diff --git a/.changeset/purple-waves-pay.md b/.changeset/purple-waves-pay.md new file mode 100644 index 00000000000..1d0da56050f --- /dev/null +++ b/.changeset/purple-waves-pay.md @@ -0,0 +1,5 @@ +--- +"@primer/styled-react": patch +--- + +chore: use styled wrapper instead of Box for Label, Token and Spinner diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-colorblind-linux.png new file mode 100644 index 00000000000..2c3a727a89d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-dimmed-linux.png new file mode 100644 index 00000000000..c5e176cd37c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-high-contrast-linux.png new file mode 100644 index 00000000000..d735b86bcb7 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-linux.png new file mode 100644 index 00000000000..2c3a727a89d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2c3a727a89d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-colorblind-linux.png new file mode 100644 index 00000000000..8a58c7fc66e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-high-contrast-linux.png new file mode 100644 index 00000000000..7aabf67f3ff Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-linux.png new file mode 100644 index 00000000000..8a58c7fc66e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-tritanopia-linux.png new file mode 100644 index 00000000000..8a58c7fc66e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Condensed-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..2c3a727a89d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..c5e176cd37c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..d735b86bcb7 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-linux.png new file mode 100644 index 00000000000..2c3a727a89d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2c3a727a89d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..8a58c7fc66e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..7aabf67f3ff Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-linux.png new file mode 100644 index 00000000000..8a58c7fc66e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..8a58c7fc66e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-colorblind-linux.png new file mode 100644 index 00000000000..5f51ac85d02 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-dimmed-linux.png new file mode 100644 index 00000000000..f88b8b0c6b8 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-high-contrast-linux.png new file mode 100644 index 00000000000..699b81f1b50 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-linux.png new file mode 100644 index 00000000000..5f51ac85d02 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5f51ac85d02 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-colorblind-linux.png new file mode 100644 index 00000000000..30ebc047bba Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-high-contrast-linux.png new file mode 100644 index 00000000000..ac4cfcc530c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-linux.png new file mode 100644 index 00000000000..30ebc047bba Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-tritanopia-linux.png new file mode 100644 index 00000000000..30ebc047bba Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Full-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-colorblind-linux.png new file mode 100644 index 00000000000..8a29891eb45 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-dimmed-linux.png new file mode 100644 index 00000000000..999b81c521f Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-high-contrast-linux.png new file mode 100644 index 00000000000..39adaf159fb Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-linux.png new file mode 100644 index 00000000000..8a29891eb45 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-tritanopia-linux.png new file mode 100644 index 00000000000..8a29891eb45 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-colorblind-linux.png new file mode 100644 index 00000000000..aa569ca5cab Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-high-contrast-linux.png new file mode 100644 index 00000000000..29e67e2b80d Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-linux.png new file mode 100644 index 00000000000..aa569ca5cab Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-tritanopia-linux.png new file mode 100644 index 00000000000..aa569ca5cab Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Emphasis-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-colorblind-linux.png new file mode 100644 index 00000000000..62e45c3e73c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-dimmed-linux.png new file mode 100644 index 00000000000..2b5aaba1516 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-high-contrast-linux.png new file mode 100644 index 00000000000..4b158640b67 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-linux.png new file mode 100644 index 00000000000..729826816c7 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-tritanopia-linux.png new file mode 100644 index 00000000000..62e45c3e73c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-colorblind-linux.png new file mode 100644 index 00000000000..b4af3fb9cd2 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-high-contrast-linux.png new file mode 100644 index 00000000000..98475f91ea2 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-linux.png new file mode 100644 index 00000000000..defcf074475 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-tritanopia-linux.png new file mode 100644 index 00000000000..b4af3fb9cd2 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-On-Primary-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-colorblind-linux.png new file mode 100644 index 00000000000..49c4caac9f0 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-dimmed-linux.png new file mode 100644 index 00000000000..b74a8728164 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-high-contrast-linux.png new file mode 100644 index 00000000000..64bd93a666e Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-linux.png new file mode 100644 index 00000000000..49c4caac9f0 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-tritanopia-linux.png new file mode 100644 index 00000000000..49c4caac9f0 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-colorblind-linux.png new file mode 100644 index 00000000000..7c129dd6f69 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-high-contrast-linux.png new file mode 100644 index 00000000000..af71bf44045 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-linux.png new file mode 100644 index 00000000000..7c129dd6f69 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-tritanopia-linux.png new file mode 100644 index 00000000000..7c129dd6f69 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Condensed-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-colorblind-linux.png new file mode 100644 index 00000000000..11ad62f42bb Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-dimmed-linux.png new file mode 100644 index 00000000000..4e8f8ff1a18 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0897839b0d4 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-linux.png new file mode 100644 index 00000000000..11ad62f42bb Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-tritanopia-linux.png new file mode 100644 index 00000000000..11ad62f42bb Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-colorblind-linux.png new file mode 100644 index 00000000000..fdd96b65749 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-high-contrast-linux.png new file mode 100644 index 00000000000..29e661d97b9 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-linux.png new file mode 100644 index 00000000000..fdd96b65749 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-tritanopia-linux.png new file mode 100644 index 00000000000..fdd96b65749 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Sequence-Full-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-colorblind-linux.png new file mode 100644 index 00000000000..dd877b16c13 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-dimmed-linux.png new file mode 100644 index 00000000000..16aae3991bc Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f30a0533cfc Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-linux.png new file mode 100644 index 00000000000..dd877b16c13 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-tritanopia-linux.png new file mode 100644 index 00000000000..dd877b16c13 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-colorblind-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-colorblind-linux.png new file mode 100644 index 00000000000..48e85c8608c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-high-contrast-linux.png new file mode 100644 index 00000000000..277dbd4e807 Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-linux.png new file mode 100644 index 00000000000..48e85c8608c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-linux.png differ diff --git a/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-tritanopia-linux.png new file mode 100644 index 00000000000..48e85c8608c Binary files /dev/null and b/.playwright/snapshots/components/KeybindingHint.test.ts-snapshots/KeybindingHint-Small-light-tritanopia-linux.png differ diff --git a/e2e/components/KeybindingHint.test.ts b/e2e/components/KeybindingHint.test.ts new file mode 100644 index 00000000000..c9319c782be --- /dev/null +++ b/e2e/components/KeybindingHint.test.ts @@ -0,0 +1,68 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +const stories = [ + { + title: 'Default', + id: 'experimental-components-keybindinghint--default', + }, + { + title: 'Condensed', + id: 'experimental-components-keybindinghint-features--condensed', + }, + { + title: 'Full', + id: 'experimental-components-keybindinghint-features--full', + }, + { + title: 'Sequence Condensed', + id: 'experimental-components-keybindinghint-features--sequence-condensed', + }, + { + title: 'Sequence Full', + id: 'experimental-components-keybindinghint-features--sequence-full', + }, + { + title: 'On Emphasis', + id: 'experimental-components-keybindinghint-features--on-emphasis', + }, + { + title: 'On Primary', + id: 'experimental-components-keybindinghint-features--on-primary', + }, + { + title: 'Small', + id: 'experimental-components-keybindinghint-features--small', + }, +] as const + +test.describe('KeybindingHint', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + + // Default state + await expect(page).toHaveScreenshot(`KeybindingHint.${story.title}.${theme}.png`) + }) + }) + } + + test('axe @avt', async ({page}) => { + await visit(page, { + id: story.id, + }) + + await expect(page).toHaveNoViolations() + }) + }) + } +}) diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index 82f449c844d..41bd4282611 100644 --- a/examples/codesandbox/package.json +++ b/examples/codesandbox/package.json @@ -17,7 +17,7 @@ "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", - "@primer/react": "38.0.0-rc.5", + "@primer/react": "38.0.0-rc.6", "styled-components": "5.x", "typescript": "^5.9.2", "vite": "^7.1.5" diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 1b00a81577c..2247c3c611f 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -10,7 +10,7 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@primer/react": "38.0.0-rc.5", + "@primer/react": "38.0.0-rc.6", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", diff --git a/examples/theming/package.json b/examples/theming/package.json index 6dd5b42ea55..1a025b7d01d 100644 --- a/examples/theming/package.json +++ b/examples/theming/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.0.0-rc.5", + "@primer/react": "38.0.0-rc.6", "clsx": "^2.1.1", "next": "^15.2.3", "react": "18.3.1", diff --git a/package-lock.json b/package-lock.json index 79b4178ac3a..b3c198348c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.6", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", @@ -88,7 +88,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.6", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", @@ -104,7 +104,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.6", "clsx": "^2.1.1", "next": "^15.2.3", "react": "18.3.1", @@ -25843,7 +25843,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.0.0-rc.4", + "version": "38.0.0-rc.6", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26419,11 +26419,11 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "1.0.0-rc.4", + "version": "1.0.0-rc.7", "devDependencies": { "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", - "@primer/react": "^38.0.0-rc.4", + "@primer/react": "^38.0.0-rc.6", "@rollup/plugin-babel": "^6.0.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", @@ -26439,7 +26439,7 @@ "typescript": "^5.9.2" }, "peerDependencies": { - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.6", "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 70d22719b72..cb13b011c96 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @primer/react +## 38.0.0-rc.6 + +### Patch Changes + +- [`4378ee8`](https://github.com/primer/react/commit/4378ee84442de8d75fbb34fcce48e28c09429c5c) Thanks [@langermank](https://github.com/langermank)! - Add missing CSS for `KeybindingHint` + ## 38.0.0-rc.5 ### Major Changes diff --git a/packages/react/package.json b/packages/react/package.json index 934f1530e69..8aef8e5ff57 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@primer/react", "type": "module", - "version": "38.0.0-rc.5", + "version": "38.0.0-rc.6", "description": "An implementation of GitHub's Primer Design System using React", "main": "./dist/index.js", "module": "./dist/index.js", diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css index bd8ff1887cc..204ef191baa 100644 --- a/packages/react/src/KeybindingHint/components/Chord.module.css +++ b/packages/react/src/KeybindingHint/components/Chord.module.css @@ -7,6 +7,10 @@ vertical-align: baseline; overflow: hidden; justify-content: center; + border-radius: var(--borderRadius-default); + font-size: var(--text-body-size-small); + padding: var(--base-size-4); + line-height: 10px; /* stylelint-disable-line primer/typography */ } .ChordNormal { diff --git a/packages/styled-react/CHANGELOG.md b/packages/styled-react/CHANGELOG.md index f04ee9aa8ab..b9fcd686a65 100644 --- a/packages/styled-react/CHANGELOG.md +++ b/packages/styled-react/CHANGELOG.md @@ -1,5 +1,18 @@ # @primer/styled-react +## 1.0.0-rc.7 + +### Patch Changes + +- Updated dependencies [[`4378ee8`](https://github.com/primer/react/commit/4378ee84442de8d75fbb34fcce48e28c09429c5c)]: + - @primer/react@38.0.0-rc.6 + +## 1.0.0-rc.6 + +### Patch Changes + +- [`013c200`](https://github.com/primer/react/commit/013c200dd9969743c5e824f635964802ccfdcbfa) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: use styled wrapper instead of Box for Label, Token and Spinner + ## 1.0.0-rc.5 ### Minor Changes diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index d7027375c32..b3e78132356 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/styled-react", - "version": "1.0.0-rc.5", + "version": "1.0.0-rc.7", "type": "module", "exports": { ".": { @@ -30,7 +30,7 @@ "devDependencies": { "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", - "@primer/react": "^38.0.0-rc.5", + "@primer/react": "^38.0.0-rc.6", "@rollup/plugin-babel": "^6.0.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", @@ -46,7 +46,7 @@ "typescript": "^5.9.2" }, "peerDependencies": { - "@primer/react": "38.0.0-rc.5", + "@primer/react": "38.0.0-rc.6", "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", diff --git a/packages/styled-react/src/components/Label.tsx b/packages/styled-react/src/components/Label.tsx index f62ed44e99a..dd5121acc82 100644 --- a/packages/styled-react/src/components/Label.tsx +++ b/packages/styled-react/src/components/Label.tsx @@ -1,13 +1,16 @@ -import {type LabelProps as PrimerLabelProps, Label as PrimerLabel, Box} from '@primer/react' -import {type SxProp} from '../sx' +import {type LabelProps as PrimerLabelProps, Label as PrimerLabel} from '@primer/react' +import {sx, type SxProp} from '../sx' import {forwardRef} from 'react' import type {ForwardRefComponent} from '../polymorphic' +import styled from 'styled-components' type LabelProps = PrimerLabelProps & SxProp & {as?: React.ElementType} -const StyledLabel = forwardRef(function Label(props, ref) { - return -}) as ForwardRefComponent<'span', LabelProps> +const StyledLabel: ForwardRefComponent<'span', LabelProps> = styled(PrimerLabel).withConfig({ + shouldForwardProp: prop => (prop as keyof LabelProps) !== 'sx', +})` + ${sx} +` const Label = forwardRef(({as, ...props}, ref) => { return diff --git a/packages/styled-react/src/components/Spinner.tsx b/packages/styled-react/src/components/Spinner.tsx index e6c007c68f1..4349262f6c3 100644 --- a/packages/styled-react/src/components/Spinner.tsx +++ b/packages/styled-react/src/components/Spinner.tsx @@ -1,9 +1,11 @@ -import {Box, Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react' -import React from 'react' -import type {SxProp} from '../sx' +import {Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react' +import {sx, type SxProp} from '../sx' +import styled from 'styled-components' export type SpinnerProps = PrimerSpinnerProps & SxProp -export function Spinner(props: SpinnerProps) { - return -} +export const Spinner = styled(PrimerSpinner).withConfig({ + shouldForwardProp: prop => (prop as keyof SpinnerProps) !== 'sx', +})` + ${sx} +` diff --git a/packages/styled-react/src/components/Token.tsx b/packages/styled-react/src/components/Token.tsx index 1a0e2102744..36d6884af9e 100644 --- a/packages/styled-react/src/components/Token.tsx +++ b/packages/styled-react/src/components/Token.tsx @@ -1,33 +1,20 @@ -import React from 'react' -import { - type TokenProps as PrimerTokenProps, - type SxProp, - Token as PrimerToken, - useTheme, - theme as defaultTheme, -} from '@primer/react' -import css from '@styled-system/css' +import React, {forwardRef} from 'react' +import {type TokenProps as PrimerTokenProps, Token as PrimerToken} from '@primer/react' +import {sx, type SxProp} from '../sx' import type {ForwardRefComponent} from '../polymorphic' import type {PropsWithChildren} from 'react' +import styled from 'styled-components' type TokenProps = PropsWithChildren & SxProp -const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef( - ({sx: sxProp, style, ...rest}, ref) => { - const contextTheme = useTheme() - const theme = contextTheme.theme || defaultTheme +const StyledToken: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = styled(PrimerToken).withConfig({ + shouldForwardProp: prop => (prop as keyof TokenProps) !== 'sx', +})` + ${sx} +` - // If no sx prop is provided, just return PrimerToken directly - if (!sxProp) { - return - } - - // Convert sx to CSS styles using the theme context - const sxStyles = css(sxProp)(theme) - const mergedStyle = {...sxStyles, ...style} - - return - }, -) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps> +const Token = forwardRef(({as, ...props}, ref) => { + return +}) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps> export {Token, type TokenProps}