@stackoverflow/stacks 1.6.6 → 1.6.7

package/README.md

@@ -1,5 +1,7 @@
 # Stacks
 
+[![ci status][gh-action-badge]][gh-action-url] [![npm version][npm-badge]][npm-url]
+
 Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
 
 Our documentation is built with Stacks itself, using its [immutable, atomic classes](http://johnpolacek.com/rethinking/) and components.
@@ -55,9 +57,47 @@ npm run lint:format
 ```
 
 ## Testing Stacks
-Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
 
-Individual routes to test are found in [backstop.json](/backstop.json)
+Run all test suites by running:
+```sh
+npm test
+```
+### Unit/Component Tests
+
+Unit/Component tests are written with [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Please follow the library's principles and documentation to write tests.
+
+Stacks uses [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and [Playwright](https://modern-web.dev/docs/test-runner/browser-launchers/playwright/) to run tests in a real browser context.
+
+Execute the unit/component tests suite by running:
+```sh
+npm run test:unit
+```
+or if you prefer watch mode run:
+```sh
+npm run test:unit:watch
+```
+
+### Visual Regression Tests
+
+**Prerequisite:** 
+In order to pull and upload baseline images you need to have `git lfs` installed in your local machine. Please follow [this guide](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) to install that.
+
+
+This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Visual regression tests end with this suffix `*.visual.test.ts`.
+
+Execute the visual regression tests suite by running:
+```sh
+npm run test:visual
+```
+
+Update the visual baseline via:
+```sh
+npm run test:visual:update
+```
+
+Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
 
 ## Bugs and feature requests
 Have a bug or feature request? First search existing or closed issues to make sure the issue hasn’t been noted yet. If not, review our [issue guidelines](/CONTRIBUTING.md#open-an-issue) for submitting [a bug report](/CONTRIBUTING.md#reporting-bugs) or [feature request](/CONTRIBUTING.md#feature-requests).
@@ -67,3 +107,8 @@ If you’d like to contribute to Stacks, please read through our [contribution g
 
 ## License
 Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
+
+[gh-action-url]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml
+[gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml/badge.svg?branch=develop
+[npm-url]: https://npmjs.org/package/@stackoverflow/stacks
+[npm-badge]: https://img.shields.io/npm/v/@stackoverflow/stacks.svg

package/dist/css/stacks.css

@@ -1060,7 +1060,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
 }
 @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
   .s-expandable:not(.is-expanded) .s-expandable--content {
-    --_ex-content-o: 1;
+    --_ex-content-o: 0;
     --_ex-content-transform: none;
   }
 }
@@ -21233,6 +21233,7 @@ body *:after {
   --_bu-filled-bg: var(--theme-button-filled-background-color);
   --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
   --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
+  --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
   --_bu-filled-fc: var(--theme-button-filled-color);
   --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
   --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
@@ -21267,12 +21268,14 @@ body *:after {
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-btn {
     --_bu-bs: none;
+    --_bu-filled-bs: var(--_bu-bs);
   }
 }
 body.theme-dark .s-btn,
 .theme-dark__forced .s-btn,
 body.theme-system .theme-dark__forced .s-btn {
   --_bu-bs: none;
+  --_bu-filled-bs: var(--_bu-bs);
 }
 body.theme-highcontrast .s-btn {
   --_bu-bc: currentColor;
@@ -21284,6 +21287,7 @@ body.theme-highcontrast .s-btn {
 .s-btn[disabled],
 .s-btn[aria-disabled="true"] {
   --_bu-bs: none !important;
+  --_bu-filled-bs: var(--_bu-bs);
   opacity: var(--_o-disabled-static);
   pointer-events: none;
   text-decoration: none;
@@ -21334,9 +21338,9 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
   box-shadow: none;
 }
 .s-btn.s-btn__filled {
-  --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
   border-color: var(--_bu-filled-bc);
   background-color: var(--_bu-filled-bg);
+  box-shadow: var(--_bu-filled-bs);
   color: var(--_bu-filled-fc);
 }
 .s-btn.s-btn__outlined {
@@ -21357,6 +21361,7 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
   --_bu-baw: 0;
   --_bu-br: 0;
   --_bu-bs: none;
+  --_bu-filled-bs: var(--_bu-bs);
   --_bu-focus-ring: none;
   --_bu-p: 0;
   text-decoration: none;
@@ -21462,6 +21467,7 @@ body.theme-highcontrast .s-btn.s-btn__link {
   --_bu-bg: none;
   --_bu-br: 0;
   --_bu-bs: none;
+  --_bu-filled-bs: var(--_bu-bs);
   --_bu-fc: unset;
   --_bu-focus-ring: none;
   --_bu-p: 0;
@@ -21511,7 +21517,6 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-bg-active: var(--red-100);
   --_bu-bg-hover: var(--red-050);
   --_bu-bg-selected: var(--red-200);
-  --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-fc: var(--red-600);
   --_bu-fc-active: var(--_bu-fc);
   --_bu-fc-hover: var(--red-700);
@@ -21523,6 +21528,7 @@ body.theme-highcontrast .s-btn.s-btn__muted {
   --_bu-filled-bg-active: var(--red-700);
   --_bu-filled-bg-hover: var(--red-600);
   --_bu-filled-bg-selected: var(--red-800);
+  --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-filled-fc: var(--white);
   --_bu-filled-fc-active: var(--_bu-filled-fc);
   --_bu-filled-fc-hover: var(--_bu-filled-fc);
@@ -21567,7 +21573,6 @@ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
   --_bu-bg-active: var(--black-050);
   --_bu-bg-hover: var(--black-025);
   --_bu-bg-selected: var(--black-075);
-  --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-fc: var(--black-500);
   --_bu-fc-active: var(--_bu-fc);
   --_bu-fc-hover: var(--black-600);
@@ -21579,6 +21584,7 @@ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
   --_bu-filled-bg-active: var(--black-200);
   --_bu-filled-bg-hover: var(--black-150);
   --_bu-filled-bg-selected: var(--black-350);
+  --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
   --_bu-filled-fc: var(--black-700);
   --_bu-filled-fc-active: var(--_bu-filled-fc);
   --_bu-filled-fc-hover: var(--_bu-filled-fc);