diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png new file mode 100644 index 00000000000..96fa576cb44 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png new file mode 100644 index 00000000000..95fc456b5a1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png new file mode 100644 index 00000000000..023f76c77f7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-linux.png new file mode 100644 index 00000000000..83a20efc55d Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png new file mode 100644 index 00000000000..83a20efc55d Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-colorblind-linux.png new file mode 100644 index 00000000000..0a0d7b132f4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png new file mode 100644 index 00000000000..dae7d216dbd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-linux.png new file mode 100644 index 00000000000..7ed18997013 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png new file mode 100644 index 00000000000..9e2ca27cf01 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..56d48dbc00a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..857e7d3bc0c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..cd7ea93d91a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-linux.png new file mode 100644 index 00000000000..6eebd6ca8c7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png new file mode 100644 index 00000000000..321b19d37f3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png new file mode 100644 index 00000000000..7b9171e6cd9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1a6f14f4040 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-linux.png new file mode 100644 index 00000000000..321b19d37f3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png new file mode 100644 index 00000000000..321b19d37f3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png new file mode 100644 index 00000000000..29cde67f322 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png new file mode 100644 index 00000000000..8b9f8c96d23 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-linux.png new file mode 100644 index 00000000000..880a2e50e11 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png new file mode 100644 index 00000000000..29cde67f322 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png new file mode 100644 index 00000000000..3eeceac5f96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png new file mode 100644 index 00000000000..4b7ff48113a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ea3f43522f6 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-linux.png new file mode 100644 index 00000000000..584be2216df Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3eeceac5f96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png new file mode 100644 index 00000000000..8ca573d8cb9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png new file mode 100644 index 00000000000..cadeebdeb0a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-linux.png new file mode 100644 index 00000000000..8ca573d8cb9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png new file mode 100644 index 00000000000..8ca573d8cb9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-colorblind-linux.png new file mode 100644 index 00000000000..afd7b05b4c9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-dimmed-linux.png new file mode 100644 index 00000000000..d35df7a4ec0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png new file mode 100644 index 00000000000..3eba9aac4ad Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-linux.png new file mode 100644 index 00000000000..afd7b05b4c9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png new file mode 100644 index 00000000000..afd7b05b4c9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-colorblind-linux.png new file mode 100644 index 00000000000..3a8fb2fe2f0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-high-contrast-linux.png new file mode 100644 index 00000000000..884474df496 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-linux.png new file mode 100644 index 00000000000..ad5f989bde0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-tritanopia-linux.png new file mode 100644 index 00000000000..3a8fb2fe2f0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png new file mode 100644 index 00000000000..36d2a45986e Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png new file mode 100644 index 00000000000..6af5e736bb0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png new file mode 100644 index 00000000000..9c595667f02 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-linux.png new file mode 100644 index 00000000000..36d2a45986e Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png new file mode 100644 index 00000000000..36d2a45986e Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png new file mode 100644 index 00000000000..d45c0170307 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png new file mode 100644 index 00000000000..b533d6b9181 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-linux.png new file mode 100644 index 00000000000..b58cb0b1a9c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png new file mode 100644 index 00000000000..d45c0170307 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png new file mode 100644 index 00000000000..56d48dbc00a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png new file mode 100644 index 00000000000..857e7d3bc0c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-colorblind-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png new file mode 100644 index 00000000000..cd7ea93d91a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-linux.png new file mode 100644 index 00000000000..6eebd6ca8c7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png new file mode 100644 index 00000000000..aa0f3d2ac3a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png new file mode 100644 index 00000000000..e331fe785f4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png new file mode 100644 index 00000000000..35074bda2ab Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-linux.png new file mode 100644 index 00000000000..aa0f3d2ac3a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png new file mode 100644 index 00000000000..aa0f3d2ac3a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-colorblind-linux.png new file mode 100644 index 00000000000..e3f7ea01ccd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png new file mode 100644 index 00000000000..cbdddbc1c78 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-linux.png new file mode 100644 index 00000000000..a2dfc789df8 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png new file mode 100644 index 00000000000..e3f7ea01ccd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png new file mode 100644 index 00000000000..56d48dbc00a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png new file mode 100644 index 00000000000..857e7d3bc0c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-colorblind-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png new file mode 100644 index 00000000000..cd7ea93d91a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-linux.png new file mode 100644 index 00000000000..6eebd6ca8c7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png new file mode 100644 index 00000000000..dc4d05ce9d9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png new file mode 100644 index 00000000000..6c6ae9fa1db Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5244e303e67 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-linux.png new file mode 100644 index 00000000000..3d0da735bb5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png new file mode 100644 index 00000000000..dc4d05ce9d9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-colorblind-linux.png new file mode 100644 index 00000000000..a052c678e1a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png new file mode 100644 index 00000000000..cf8968e0ee4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-linux.png new file mode 100644 index 00000000000..aee8843bc04 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png new file mode 100644 index 00000000000..a052c678e1a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-colorblind-linux.png new file mode 100644 index 00000000000..aff81a49101 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-dimmed-linux.png new file mode 100644 index 00000000000..98b02c72117 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ecd451e4315 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-linux.png new file mode 100644 index 00000000000..aff81a49101 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png new file mode 100644 index 00000000000..aff81a49101 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-colorblind-linux.png new file mode 100644 index 00000000000..c8f16253757 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-high-contrast-linux.png new file mode 100644 index 00000000000..ac720db602f Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-linux.png new file mode 100644 index 00000000000..ebc8a536b39 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-tritanopia-linux.png new file mode 100644 index 00000000000..c8f16253757 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png new file mode 100644 index 00000000000..356e04c2210 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png new file mode 100644 index 00000000000..04cb590fdb1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f72ac95fbdc Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png new file mode 100644 index 00000000000..2b9856fc2e5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png new file mode 100644 index 00000000000..356e04c2210 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png new file mode 100644 index 00000000000..d464f75c686 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png new file mode 100644 index 00000000000..6d0cb868d34 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-linux.png new file mode 100644 index 00000000000..b711754a8fa Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png new file mode 100644 index 00000000000..d464f75c686 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png new file mode 100644 index 00000000000..9003e7c4334 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png new file mode 100644 index 00000000000..1d2a6bcc090 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a0d34354240 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png new file mode 100644 index 00000000000..9003e7c4334 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png new file mode 100644 index 00000000000..9003e7c4334 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png new file mode 100644 index 00000000000..49a1746bcd5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png new file mode 100644 index 00000000000..8b2074ab8f7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-linux.png new file mode 100644 index 00000000000..2e5424b2215 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png new file mode 100644 index 00000000000..49a1746bcd5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png differ diff --git a/e2e/components/drafts/Button2.test.ts b/e2e/components/drafts/Button2.test.ts new file mode 100644 index 00000000000..fd6ff67991f --- /dev/null +++ b/e2e/components/drafts/Button2.test.ts @@ -0,0 +1,447 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../../test-helpers/storybook' +import {themes} from '../../test-helpers/themes' + +test.describe('Button', () => { + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--playground', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Disabled', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--invisible', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--large', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Large.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--large', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Leading Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Medium', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--medium', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Medium.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--medium', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Outline', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--outline', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Outline.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--outline', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Primary.${theme}.png`) + }) + + test.fixme('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--small', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Trailing Counter', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Counter.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) +}) diff --git a/src/drafts/Button2/Button.dev.stories.tsx b/src/drafts/Button2/Button.dev.stories.tsx new file mode 100644 index 00000000000..b6ee51efaf9 --- /dev/null +++ b/src/drafts/Button2/Button.dev.stories.tsx @@ -0,0 +1,98 @@ +import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react' +import React from 'react' +import {Button, IconButton} from '.' + +export default { + title: 'Drafts/Components/Button/DevOnly', +} + +export const InvisibleVariants = () => { + const count = 4 + return ( +
+ + + + + + + +
+ ) +} + +export const TestSxProp = () => { + const count = 4 + return ( +
+ + + + + + +
+ ) +} diff --git a/src/drafts/Button2/Button.docs.json b/src/drafts/Button2/Button.docs.json new file mode 100644 index 00000000000..4fc26b7b1bc --- /dev/null +++ b/src/drafts/Button2/Button.docs.json @@ -0,0 +1,70 @@ +{ + "id": "button", + "name": "Button", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "required": true, + "type": "React.ReactNode", + "description": "The content of the button." + }, + { + "name": "variant", + "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'", + "defaultValue": "'default'", + "description": "Change the visual style of the button." + }, + { + "name": "size", + "type": "| 'small'\n| 'medium'\n| 'large'", + "defaultValue": "'medium'" + }, + { + "name": "leadingIcon", + "type": "React.ComponentType", + "description": "An icon to display before the button text." + }, + { + "name": "trailingIcon", + "type": "React.ComponentType", + "description": "An icon to display after the button text." + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "'button'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "passthrough": { + "element": "button", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" + }, + "subcomponents": [ + { + "name": "Button.Counter", + "props": [ + { + "name": "children", + "required": true, + "type": "number", + "description": "The counter value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] +} \ No newline at end of file diff --git a/src/drafts/Button2/Button.features.stories.tsx b/src/drafts/Button2/Button.features.stories.tsx new file mode 100644 index 00000000000..79014edda13 --- /dev/null +++ b/src/drafts/Button2/Button.features.stories.tsx @@ -0,0 +1,41 @@ +import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react' +import React, {useState} from 'react' +import {Button} from '.' + +export default { + title: 'Drafts/Components/Button/Features', +} + +export const Primary = () => + +export const Danger = () => + +export const Invisible = () => + +export const Outline = () => + +export const LeadingVisual = () => + +export const TrailingVisual = () => + +export const TrailingCounter = () => { + const [count, setCount] = useState(0) + return ( + + ) +} + +export const TrailingAction = () => + +export const Block = () => + +export const Disabled = () => + +export const Small = () => + +export const Medium = () => + +export const Large = () => diff --git a/src/drafts/Button2/Button.stories.tsx b/src/drafts/Button2/Button.stories.tsx new file mode 100644 index 00000000000..4f75a6d41cb --- /dev/null +++ b/src/drafts/Button2/Button.stories.tsx @@ -0,0 +1,62 @@ +import React from 'react' +import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import {Button} from '.' +import {OcticonArgType} from '../../utils/story-helpers' + +export default { + title: 'Drafts/Components/Button', + argTypes: { + size: { + control: { + type: 'radio', + }, + options: ['small', 'medium', 'large'], + }, + disabled: { + control: { + type: 'boolean', + }, + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible'], + }, + }, + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'], + }, + }, + block: { + control: { + type: 'boolean', + }, + }, + leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingAction: OcticonArgType([TriangleDownIcon]), + trailingVisualCount: { + control: { + type: 'number', + }, + }, + }, + args: { + block: false, + size: 'medium', + disabled: false, + variant: 'default', + alignContent: 'center', + trailingIcon: null, + leadingIcon: null, + trailingAction: null, + trailingVisualCount: undefined, + }, +} as Meta + +export const Playground: Story = args => + +export const Default = () => diff --git a/src/drafts/Button2/Button.tsx b/src/drafts/Button2/Button.tsx new file mode 100644 index 00000000000..d3cce915480 --- /dev/null +++ b/src/drafts/Button2/Button.tsx @@ -0,0 +1,90 @@ +import React, {forwardRef} from 'react' +import {ButtonProps} from './types' +import {ButtonBase} from './ButtonBase' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' +import {defaultSxProp} from '../../utils/defaultSxProp' +import {BetterSystemStyleObject} from '../../sx' + +const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => { + let sxStyles = sxProp + + // grap the button props that have associated data attributes in the styles + const {block, size, leadingIcon, trailingIcon, trailingAction} = props + + if (sxProp !== null && Object.keys(sxProp).length > 0) { + sxStyles = generateCustomSxProp({block, size, leadingIcon, trailingIcon, trailingAction}, sxProp) + } + + return ( + + {children} + + ) +}) as PolymorphicForwardRefComponent<'button', ButtonProps> + +// This function is used to generate a custom cssSelector for the sxProp + +// The usual sx prop can like this: +// sx={{ +// [`@media (max-width: 768px)`]: { +// '& > ul': { +// backgroundColor: 'deeppink', +// }, +// '&:hover': { +// backgroundColor: 'yellow', +// }, +// }, +// '&:hover': { +// backgroundColor: 'yellow', +// }, +// '&': { +// width : 320px +// } +// }} +//* +/* What we want for Button styles is this: +sx={{ +// [`@media (max-width: 768px)`]: { +// '&[data-attribute="something"] > ul': { +// backgroundColor: 'deeppink', +// }, +// '&[data-attribute="something"]:hover': { +// backgroundColor: 'yellow', +// }, +// }, +// '&[data-attribute="something"]:hover': { +// backgroundColor: 'yellow', +// }, +// '&[data-attribute="something"]': { +// width : 320px +// } +// }} + +// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"] +*/ +export function generateCustomSxProp( + props: Partial>, + providedSx: BetterSystemStyleObject, +) { + // Possible data attributes: data-size, data-block, data-no-visuals + const size = props.size && props.size !== 'medium' ? `[data-size="${props.size}"]` : '' // medium is a default size therefore it doesn't have a data attribute that used for styling + const block = props.block ? `[data-block="block"]` : '' + const noVisuals = props.leadingIcon || props.trailingIcon || props.trailingAction ? '' : '[data-no-visuals="true"]' + + // this is custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]]) + const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals="true"] + + const customSxProp: { + [key: string]: BetterSystemStyleObject + } = {} + + if (!providedSx) return customSxProp + else { + customSxProp[cssSelector] = providedSx + return customSxProp + } +} + +ButtonComponent.displayName = 'Button' + +export {ButtonComponent} diff --git a/src/drafts/Button2/ButtonBase.tsx b/src/drafts/Button2/ButtonBase.tsx new file mode 100644 index 00000000000..44125f7dbd0 --- /dev/null +++ b/src/drafts/Button2/ButtonBase.tsx @@ -0,0 +1,101 @@ +import React, {ComponentPropsWithRef, forwardRef, useMemo} from 'react' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' +import Box from '../../Box' +import {BetterSystemStyleObject, merge} from '../../sx' +import {useTheme} from '../../ThemeProvider' +import {ButtonProps, StyledButton} from './types' +import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles' +import {useRefObjectAsForwardedRef} from '../../hooks/useRefObjectAsForwardedRef' +import {defaultSxProp} from '../../utils/defaultSxProp' + +const ButtonBase = forwardRef( + ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => { + const { + leadingIcon: LeadingIcon, + trailingIcon: TrailingIcon, + trailingAction: TrailingAction, + icon: Icon, + variant = 'default', + size = 'medium', + alignContent = 'center', + block = false, + ...rest + } = props + + const innerRef = React.useRef(null) + useRefObjectAsForwardedRef(forwardedRef, innerRef) + + const {theme} = useTheme() + const baseStyles = useMemo(() => { + return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)]) + }, [theme, variant]) + const sxStyles = useMemo(() => { + return merge(baseStyles, sxProp) + }, [baseStyles, sxProp]) + const iconWrapStyles = { + display: 'flex', + pointerEvents: 'none', + } + + if (__DEV__) { + /** + * The Linter yells because it thinks this conditionally calls an effect, + * but since this is a compile-time flag and not a runtime conditional + * this is safe, and ensures the entire effect is kept out of prod builds + * shaving precious bytes from the output, and avoiding mounting a noop effect + */ + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + if ( + innerRef.current && + !(innerRef.current instanceof HTMLButtonElement) && + !((innerRef.current as unknown) instanceof HTMLAnchorElement) + ) { + // eslint-disable-next-line no-console + console.warn('This component should be an instanceof a semantic button or anchor') + } + }, [innerRef]) + } + + return ( + + {Icon ? ( + + ) : ( + <> + + {LeadingIcon && ( + + + + )} + {children && {children}} + {TrailingIcon && ( + + + + )} + + {TrailingAction && ( + + + + )} + + )} + + ) + }, +) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> + +export type ButtonBaseProps = ComponentPropsWithRef + +export {ButtonBase} diff --git a/src/drafts/Button2/ButtonCounter.tsx b/src/drafts/Button2/ButtonCounter.tsx new file mode 100644 index 00000000000..6f81aeb2aab --- /dev/null +++ b/src/drafts/Button2/ButtonCounter.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import {SxProp} from '../../sx' +import CounterLabel from '../../CounterLabel' +import {defaultSxProp} from '../../utils/defaultSxProp' + +export type CounterProps = { + children: number +} & SxProp + +const Counter = ({children, sx: sxProp = defaultSxProp, ...props}: CounterProps) => { + // we need to make sure we add the sx styles to the css selector that has the highest specificity. + const cssSelector = `&[data-component="ButtonCounter"]` + + const counterButtonStyles = { + [cssSelector]: sxProp, + } + return ( + + {children} + + ) +} + +export {Counter} diff --git a/src/drafts/Button2/IconButton.dev.stories.tsx b/src/drafts/Button2/IconButton.dev.stories.tsx new file mode 100644 index 00000000000..bb64b0552b2 --- /dev/null +++ b/src/drafts/Button2/IconButton.dev.stories.tsx @@ -0,0 +1,27 @@ +import {ChevronDownIcon} from '@primer/octicons-react' +import React from 'react' +import {IconButton} from '.' + +export default { + title: 'Drafts/Components/IconButton/DevOnly', +} + +export const CustomSize = () => ( + +) + +export const CustomSizeWithMedia = () => { + return ( + + ) +} + +export const CustomIconColor = () => ( + +) diff --git a/src/drafts/Button2/IconButton.docs.json b/src/drafts/Button2/IconButton.docs.json new file mode 100644 index 00000000000..c49de7a2661 --- /dev/null +++ b/src/drafts/Button2/IconButton.docs.json @@ -0,0 +1,39 @@ +{ + "id": "icon_button", + "name": "IconButton", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "This will be the Button description." + }, + { + "name": "variant", + "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", + "defaultValue": "", + "description": "Changes the look and feel of the button which is different for each variant" + }, + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "", + "description": "Changes the size of the icon button component" + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "description": "provide an octicon. It will be placed in the center of the button" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] +} \ No newline at end of file diff --git a/src/drafts/Button2/IconButton.features.stories.tsx b/src/drafts/Button2/IconButton.features.stories.tsx new file mode 100644 index 00000000000..5717ba95f83 --- /dev/null +++ b/src/drafts/Button2/IconButton.features.stories.tsx @@ -0,0 +1,21 @@ +import {HeartIcon} from '@primer/octicons-react' +import React from 'react' +import {IconButton} from '.' + +export default { + title: 'Drafts/Components/IconButton/Features', +} + +export const Primary = () => + +export const Danger = () => + +export const Invisible = () => + +export const Disabled = () => + +export const Small = () => + +export const Medium = () => + +export const Large = () => diff --git a/src/drafts/Button2/IconButton.stories.tsx b/src/drafts/Button2/IconButton.stories.tsx new file mode 100644 index 00000000000..578074ab566 --- /dev/null +++ b/src/drafts/Button2/IconButton.stories.tsx @@ -0,0 +1,42 @@ +import React, {ComponentProps} from 'react' +import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import {IconButton} from '.' +import {OcticonArgType} from '../../utils/story-helpers' + +const meta: Meta> = { + title: 'Drafts/Components/IconButton', + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'], + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible'], + }, + }, + icon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + }, + args: { + size: 'medium', + disabled: false, + variant: 'default', + 'aria-label': 'Icon button description', + icon: XIcon, + }, +} + +export default meta + +export const Playground: Story> = args => + +export const Default = () => diff --git a/src/drafts/Button2/IconButton.tsx b/src/drafts/Button2/IconButton.tsx new file mode 100644 index 00000000000..37bc28e8778 --- /dev/null +++ b/src/drafts/Button2/IconButton.tsx @@ -0,0 +1,23 @@ +import React, {forwardRef} from 'react' +import {IconButtonProps} from './types' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' +import {ButtonBase} from './ButtonBase' +import {defaultSxProp} from '../../utils/defaultSxProp' +import {generateCustomSxProp} from './Button' + +const IconButton = forwardRef(({sx: sxProp = defaultSxProp, icon: Icon, ...props}, forwardedRef): JSX.Element => { + let sxStyles = sxProp + // grap the button props that have associated data attributes in the styles + const {size} = props + + if (sxProp !== null && Object.keys(sxProp).length > 0) { + sxStyles = generateCustomSxProp({size}, sxProp) + } + + return ( + // @ts-expect-error StyledButton wants both Anchor and Button refs + + ) +}) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps> + +export {IconButton} diff --git a/src/drafts/Button2/LinkButton.features.stories.tsx b/src/drafts/Button2/LinkButton.features.stories.tsx new file mode 100644 index 00000000000..4ad75929039 --- /dev/null +++ b/src/drafts/Button2/LinkButton.features.stories.tsx @@ -0,0 +1,87 @@ +import {EyeIcon, ChevronRightIcon, HeartIcon} from '@primer/octicons-react' +import React, {forwardRef} from 'react' +import {Button} from '.' + +export default { + title: 'Drafts/Components/LinkButton/Features', +} + +export const Primary = () => ( + +) + +export const Danger = () => ( + +) + +export const Invisible = () => ( + +) + +export const Outline = () => ( + +) + +export const LeadingVisual = () => ( + +) + +export const TrailingVisual = () => ( + +) + +export const TrailingAction = () => ( + +) + +export const Block = () => ( + +) + +export const Small = () => ( + +) + +export const Medium = () => ( + +) + +export const Large = () => ( + +) + +type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} +const ReactRouterLikeLink = forwardRef( + ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { + // eslint-disable-next-line jsx-a11y/anchor-has-content + return + }, +) + +export const WithReactRouter = () => ( + +) diff --git a/src/drafts/Button2/LinkButton.stories.tsx b/src/drafts/Button2/LinkButton.stories.tsx new file mode 100644 index 00000000000..2da394696c3 --- /dev/null +++ b/src/drafts/Button2/LinkButton.stories.tsx @@ -0,0 +1,64 @@ +import React from 'react' +import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon, ChevronRightIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import {Button} from '.' +import {OcticonArgType} from '../../utils/story-helpers' + +export default { + title: 'Drafts/Components/LinkButton', + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'], + }, + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible', 'outline'], + }, + }, + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'], + }, + }, + block: { + control: { + type: 'boolean', + }, + }, + leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingAction: OcticonArgType([ChevronRightIcon]), + trailingVisualCount: { + control: { + type: 'number', + }, + }, + href: {control: 'text'}, + }, + args: { + block: false, + size: 'medium', + variant: 'default', + alignContent: 'center', + trailingIcon: null, + leadingIcon: null, + href: '/', + }, +} as Meta + +export const Playground: Story = args => ( + +) + +export const Default = () => ( + +) diff --git a/src/drafts/Button2/LinkButton.tsx b/src/drafts/Button2/LinkButton.tsx new file mode 100644 index 00000000000..bec625ad6f3 --- /dev/null +++ b/src/drafts/Button2/LinkButton.tsx @@ -0,0 +1,25 @@ +import React, {forwardRef} from 'react' +import {LinkButtonProps} from './types' +import {ButtonBase, ButtonBaseProps} from './ButtonBase' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' +import {defaultSxProp} from '../../utils/defaultSxProp' + +type MyProps = LinkButtonProps & ButtonBaseProps + +const LinkButton = forwardRef( + ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => { + return ( + + {children} + + ) + }, +) as PolymorphicForwardRefComponent<'a', MyProps> + +export {LinkButton} diff --git a/src/drafts/Button2/index.ts b/src/drafts/Button2/index.ts new file mode 100644 index 00000000000..d0519b22e70 --- /dev/null +++ b/src/drafts/Button2/index.ts @@ -0,0 +1,10 @@ +import {ButtonComponent} from './Button' +import {Counter} from './ButtonCounter' +import {IconButton} from './IconButton' +import {LinkButton} from './LinkButton' +export type {ButtonProps, IconButtonProps} from './types' +export {IconButton, LinkButton} + +export const Button = Object.assign(ButtonComponent, { + Counter, +}) diff --git a/src/drafts/Button2/styles.ts b/src/drafts/Button2/styles.ts new file mode 100644 index 00000000000..474a9e81991 --- /dev/null +++ b/src/drafts/Button2/styles.ts @@ -0,0 +1,316 @@ +import {VariantType, AlignContent} from './types' +import {Theme} from '../../ThemeProvider' + +export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => { + const style = { + default: { + color: 'btn.text', + backgroundColor: 'btn.bg', + boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`, + '&:hover:not([disabled])': { + backgroundColor: 'btn.hoverBg', + borderColor: 'btn.hoverBorder', + }, + '&:active:not([disabled])': { + backgroundColor: 'btn.activeBg', + borderColor: 'btn.activeBorder', + }, + '&:disabled': { + color: 'primer.fg.disabled', + '[data-component=ButtonCounter]': { + color: 'inherit', + }, + }, + '&[aria-expanded=true]': { + backgroundColor: 'btn.activeBg', + borderColor: 'btn.activeBorder', + }, + }, + primary: { + color: 'btn.primary.text', + backgroundColor: 'btn.primary.bg', + borderColor: 'btn.primary.border', + boxShadow: `${theme?.shadows.btn.primary.shadow}`, + '&:hover:not([disabled])': { + color: 'btn.primary.hoverText', + backgroundColor: 'btn.primary.hoverBg', + }, + '&:focus:not([disabled])': { + boxShadow: 'inset 0 0 0 3px', + }, + '&:focus-visible:not([disabled])': { + boxShadow: 'inset 0 0 0 3px', + }, + '&:active:not([disabled])': { + backgroundColor: 'btn.primary.selectedBg', + boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, + }, + '&:disabled': { + color: 'btn.primary.disabledText', + backgroundColor: 'btn.primary.disabledBg', + '[data-component=ButtonCounter]': { + color: 'inherit', + }, + }, + '[data-component=ButtonCounter]': { + backgroundColor: 'btn.primary.counterBg', + color: 'btn.primary.text', + }, + '&[aria-expanded=true]': { + backgroundColor: 'btn.primary.selectedBg', + boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, + }, + }, + danger: { + color: 'btn.danger.text', + backgroundColor: 'btn.bg', + boxShadow: `${theme?.shadows.btn.shadow}`, + '&:hover:not([disabled])': { + color: 'btn.danger.hoverText', + backgroundColor: 'btn.danger.hoverBg', + borderColor: 'btn.danger.hoverBorder', + boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`, + '[data-component=ButtonCounter]': { + backgroundColor: 'btn.danger.hoverCounterBg', + color: 'btn.danger.hoverText', + }, + }, + '&:active:not([disabled])': { + color: 'btn.danger.selectedText', + backgroundColor: 'btn.danger.selectedBg', + boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, + borderColor: 'btn.danger.selectedBorder', + }, + '&:disabled': { + color: 'btn.danger.disabledText', + backgroundColor: 'btn.danger.disabledBg', + borderColor: 'btn.danger.disabledBorder', + '[data-component=ButtonCounter]': { + color: 'inherit', + backgroundColor: 'btn.danger.disabledCounterBg', + }, + }, + '[data-component=ButtonCounter]': { + color: 'btn.danger.text', + backgroundColor: 'btn.danger.counterBg', + }, + '&[aria-expanded=true]': { + color: 'btn.danger.selectedText', + backgroundColor: 'btn.danger.selectedBg', + boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, + borderColor: 'btn.danger.selectedBorder', + }, + }, + invisible: { + color: 'accent.fg', + backgroundColor: 'transparent', + borderColor: 'transparent', + boxShadow: 'none', + '&:hover:not([disabled])': { + backgroundColor: 'btn.hoverBg', + }, + '&:active:not([disabled])': { + backgroundColor: 'btn.selectedBg', + }, + '&:disabled': { + color: 'primer.fg.disabled', + '[data-component=ButtonCounter]': { + color: 'inherit', + }, + }, + '&[aria-expanded=true]': { + backgroundColor: 'btn.selectedBg', + }, + '&[data-component="IconButton"][data-no-visuals]': { + color: 'fg.muted', + }, + '[data-component="trailingAction"]': { + color: 'fg.muted', + }, + '[data-component="leadingVisual"]': { + color: 'fg.muted', + }, + '&[data-no-visuals]': { + color: 'accent.fg', + }, + '&:has([data-component="ButtonCounter"])': { + color: 'accent.fg', + }, + }, + outline: { + color: 'btn.outline.text', + boxShadow: `${theme?.shadows.btn.shadow}`, + borderColor: 'btn.border', + backgroundColor: 'btn.bg', + + '&:hover:not([disabled])': { + color: 'btn.outline.hoverText', + backgroundColor: 'btn.outline.hoverBg', + borderColor: 'btn.outline.hoverBorder', + boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`, + '[data-component=ButtonCounter]': { + backgroundColor: 'btn.outline.hoverCounterBg', + color: 'inherit', + }, + }, + '&:active:not([disabled])': { + color: 'btn.outline.selectedText', + backgroundColor: 'btn.outline.selectedBg', + boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, + borderColor: 'btn.outline.selectedBorder', + }, + + '&:disabled': { + color: 'btn.outline.disabledText', + backgroundColor: 'btn.outline.disabledBg', + borderColor: 'btn.border', + '[data-component=ButtonCounter]': { + backgroundColor: 'btn.outline.disabledCounterBg', + color: 'inherit', + }, + }, + '[data-component=ButtonCounter]': { + backgroundColor: 'btn.outline.counterBg', + color: 'btn.outline.text', + }, + '&[aria-expanded=true]': { + color: 'btn.outline.selectedText', + backgroundColor: 'btn.outline.selectedBg', + boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, + borderColor: 'btn.outline.selectedBorder', + }, + }, + } + return style[variant] +} + +export const getBaseStyles = (theme?: Theme) => ({ + borderRadius: '2', + border: '1px solid', + borderColor: theme?.colors.btn.border, + fontFamily: 'inherit', + fontWeight: 'semibold', + fontSize: '1', + cursor: 'pointer', + appearance: 'none', + userSelect: 'none', + textDecoration: 'none', + textAlign: 'center', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + height: '32px', + padding: '0 12px', + gap: '8px', + minWidth: 'max-content', + transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)', + transitionProperty: 'color, fill, background-color, border-color', + '&[href]': { + display: 'inline-flex', + '&:hover': { + textDecoration: 'none', + }, + }, + '&:hover': { + transitionDuration: '80ms', + }, + '&:active': { + transition: 'none', + }, + '&:disabled': { + cursor: 'not-allowed', + boxShadow: 'none', + }, + '@media (forced-colors: active)': { + '&:focus': { + // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips + outline: 'solid 1px transparent', + }, + }, + '[data-component=ButtonCounter]': { + fontSize: '1', + }, + '&[data-component=IconButton]': { + display: 'inline-grid', + padding: 'unset', + placeContent: 'center', + width: '32px', + minWidth: 'unset', + }, + '&[data-size="small"]': { + padding: '0 8px', + height: '28px', + gap: '4px', + fontSize: '0', + + '[data-component="text"]': { + lineHeight: 'calc(20 / 12)', + }, + + '[data-component=ButtonCounter]': { + fontSize: '0', + }, + + '[data-component="buttonContent"] > :not(:last-child)': { + mr: '4px', + }, + + '&[data-component=IconButton]': { + width: '28px', + padding: 'unset', + }, + }, + '&[data-size="large"]': { + padding: '0 16px', + height: '40px', + gap: '8px', + + '[data-component="buttonContent"] > :not(:last-child)': { + mr: '8px', + }, + + '&[data-component=IconButton]': { + width: '40px', + padding: 'unset', + }, + }, +}) + +export const getButtonStyles = (theme?: Theme) => { + const styles = { + ...getBaseStyles(theme), + '&[data-block="block"]': { + width: '100%', + }, + '[data-component="leadingVisual"]': { + gridArea: 'leadingVisual', + }, + '[data-component="text"]': { + gridArea: 'text', + lineHeight: 'calc(20/14)', + whiteSpace: 'nowrap', + }, + '[data-component="trailingVisual"]': { + gridArea: 'trailingVisual', + }, + '[data-component="trailingAction"]': { + marginRight: '-4px', + }, + '[data-component="buttonContent"]': { + flex: '1 0 auto', + display: 'grid', + gridTemplateAreas: '"leadingVisual text trailingVisual"', + gridTemplateColumns: 'min-content minmax(0, auto) min-content', + alignItems: 'center', + alignContent: 'center', + }, + '[data-component="buttonContent"] > :not(:last-child)': { + mr: '8px', + }, + } + return styles +} + +export const getAlignContentSize = (alignContent: AlignContent = 'center') => ({ + justifyContent: alignContent === 'center' ? 'center' : 'flex-start', +}) diff --git a/src/drafts/Button2/types.ts b/src/drafts/Button2/types.ts new file mode 100644 index 00000000000..663cf9c8c7d --- /dev/null +++ b/src/drafts/Button2/types.ts @@ -0,0 +1,81 @@ +import React from 'react' +import styled from 'styled-components' +import sx, {SxProp} from '../../sx' +import getGlobalFocusStyles from '../../_getGlobalFocusStyles' + +export const StyledButton = styled.button` + ${getGlobalFocusStyles('-2px')}; + ${sx}; +` + +export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline' + +export type Size = 'small' | 'medium' | 'large' + +export type AlignContent = 'start' | 'center' + +type ButtonA11yProps = + | {'aria-label': string; 'aria-labelledby'?: undefined} + | {'aria-label'?: undefined; 'aria-labelledby': string} + +export type ButtonBaseProps = { + /** + * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger' + */ + variant?: VariantType + /** + * Size of button and fontSize of text in button + */ + size?: Size + /** + * Items that are disabled can not be clicked, selected, or navigated through. + */ + disabled?: boolean + /** + * Allow button width to fill its container. + */ + block?: boolean +} & SxProp & + React.ButtonHTMLAttributes + +export type ButtonProps = { + /** + * The icon for the IconButton + */ + icon?: React.ComponentType | null | undefined + /** + * The leading icon comes before button content + */ + leadingIcon?: React.ComponentType | null | undefined + /** + * The trailing icon comes after button content + */ + trailingIcon?: React.ComponentType | null | undefined + /** + * Trailing action appears to the right of the trailing visual and is always locked to the end + */ + trailingAction?: React.ComponentType | null | undefined + children: React.ReactNode + /** + * Content alignment for when visuals are present + */ + alignContent?: AlignContent +} & ButtonBaseProps + +export type IconButtonProps = ButtonA11yProps & { + icon: React.ComponentType +} & Omit + +// adopted from React.AnchorHTMLAttributes +export type LinkButtonProps = { + underline?: boolean + download?: string + href?: string + hrefLang?: string + media?: string + ping?: string + rel?: string + target?: string + type?: string + referrerPolicy?: React.AnchorHTMLAttributes['referrerPolicy'] +}