@stackoverflow/stacks 2.0.8 → 2.1.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/LICENSE.MD +1 -1
  2. package/README.md +7 -9
  3. package/dist/css/stacks.css +234 -214
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +1 -1
  6. package/lib/atomic/misc.less +1 -1
  7. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +2 -3
  8. package/lib/components/activity-indicator/activity-indicator.less +5 -5
  9. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +2 -3
  10. package/lib/components/anchor/anchor.a11y.test.ts +2 -4
  11. package/lib/components/anchor/anchor.visual.test.ts +2 -4
  12. package/lib/components/avatar/avatar.a11y.test.ts +2 -3
  13. package/lib/components/avatar/avatar.visual.test.ts +2 -3
  14. package/lib/components/award-bling/award-bling.a11y.test.ts +2 -4
  15. package/lib/components/award-bling/award-bling.visual.test.ts +2 -4
  16. package/lib/components/badge/badge.a11y.test.ts +7 -16
  17. package/lib/components/badge/badge.visual.test.ts +8 -21
  18. package/lib/components/banner/banner.a11y.test.ts +2 -3
  19. package/lib/components/banner/banner.visual.test.ts +2 -3
  20. package/lib/components/block-link/block-link.a11y.test.ts +4 -9
  21. package/lib/components/block-link/block-link.less +7 -10
  22. package/lib/components/block-link/block-link.visual.test.ts +4 -9
  23. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +2 -3
  24. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +2 -3
  25. package/lib/components/button/button.a11y.test.ts +2 -3
  26. package/lib/components/button/button.less +70 -35
  27. package/lib/components/button/button.visual.test.ts +2 -3
  28. package/lib/components/card/card.a11y.test.ts +2 -3
  29. package/lib/components/card/card.visual.test.ts +3 -6
  30. package/lib/components/check-control/check-control.a11y.test.ts +2 -4
  31. package/lib/components/check-control/check-control.visual.test.ts +2 -4
  32. package/lib/components/check-group/check-group.a11y.test.ts +2 -4
  33. package/lib/components/check-group/check-group.visual.test.ts +2 -4
  34. package/lib/components/checkbox_radio/checkbox_radio.a11y.test.ts +2 -4
  35. package/lib/components/checkbox_radio/checkbox_radio.less +1 -13
  36. package/lib/components/checkbox_radio/checkbox_radio.visual.test.ts +2 -4
  37. package/lib/components/code-block/code-block.a11y.test.ts +2 -4
  38. package/lib/components/code-block/code-block.visual.test.ts +2 -4
  39. package/lib/components/description/description.a11y.test.ts +2 -4
  40. package/lib/components/description/description.visual.test.ts +2 -4
  41. package/lib/components/empty-state/empty-state.a11y.test.ts +2 -3
  42. package/lib/components/empty-state/empty-state.visual.test.ts +2 -3
  43. package/lib/components/expandable/expandable.a11y.test.ts +2 -3
  44. package/lib/components/expandable/expandable.visual.test.ts +2 -3
  45. package/lib/components/input-fill/input-fill.a11y.test.ts +2 -3
  46. package/lib/components/input-fill/input-fill.visual.test.ts +2 -3
  47. package/lib/components/input-message/input-message.a11y.test.ts +2 -3
  48. package/lib/components/input-message/input-message.visual.test.ts +2 -3
  49. package/lib/components/input_textarea/input_textarea.a11y.test.ts +4 -7
  50. package/lib/components/input_textarea/input_textarea.less +2 -20
  51. package/lib/components/input_textarea/input_textarea.visual.test.ts +4 -7
  52. package/lib/components/label/label.a11y.test.ts +2 -3
  53. package/lib/components/label/label.visual.test.ts +2 -3
  54. package/lib/components/link/link.a11y.test.ts +2 -3
  55. package/lib/components/link/link.visual.test.ts +2 -3
  56. package/lib/components/link-preview/link-preview.a11y.test.ts +2 -3
  57. package/lib/components/link-preview/link-preview.visual.test.ts +3 -3
  58. package/lib/components/menu/menu.a11y.test.ts +2 -3
  59. package/lib/components/menu/menu.visual.test.ts +2 -3
  60. package/lib/components/modal/modal.a11y.test.ts +2 -3
  61. package/lib/components/modal/modal.visual.test.ts +2 -3
  62. package/lib/components/navigation/navigation.a11y.test.ts +2 -3
  63. package/lib/components/navigation/navigation.less +3 -1
  64. package/lib/components/navigation/navigation.visual.test.ts +3 -6
  65. package/lib/components/notice/notice.a11y.test.ts +2 -3
  66. package/lib/components/notice/notice.visual.test.ts +2 -3
  67. package/lib/components/page-title/page-title.a11y.test.ts +2 -3
  68. package/lib/components/page-title/page-title.visual.test.ts +2 -3
  69. package/lib/components/pagination/pagination.a11y.test.ts +2 -3
  70. package/lib/components/pagination/pagination.less +9 -0
  71. package/lib/components/pagination/pagination.visual.test.ts +2 -3
  72. package/lib/components/progress-bar/progress-bar.a11y.test.ts +7 -18
  73. package/lib/components/progress-bar/progress-bar.less +1 -1
  74. package/lib/components/progress-bar/progress-bar.visual.test.ts +7 -18
  75. package/lib/components/select/select.less +1 -15
  76. package/lib/components/spinner/spinner.a11y.test.ts +2 -3
  77. package/lib/components/spinner/spinner.visual.test.ts +4 -7
  78. package/lib/components/table/table.a11y.test.ts +3 -4
  79. package/lib/components/table/table.visual.test.ts +2 -3
  80. package/lib/components/tag/tag.a11y.test.ts +2 -3
  81. package/lib/components/tag/tag.less +27 -21
  82. package/lib/components/tag/tag.visual.test.ts +3 -6
  83. package/lib/components/toast/toast.a11y.test.ts +2 -3
  84. package/lib/components/toast/toast.visual.test.ts +2 -3
  85. package/lib/components/toggle-switch/toggle-switch.a11y.test.ts +3 -6
  86. package/lib/components/toggle-switch/toggle-switch.less +5 -16
  87. package/lib/components/toggle-switch/toggle-switch.visual.test.ts +3 -7
  88. package/lib/components/topbar/topbar.less +61 -39
  89. package/lib/components/topbar/topbar.visual.test.ts +188 -0
  90. package/lib/components/uploader/uploader.less +1 -1
  91. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +12 -0
  92. package/lib/exports/__snapshots__/color.less.test.ts.snap +45 -0
  93. package/lib/exports/color-mixins.less +2 -0
  94. package/lib/exports/color-sets.less +44 -7
  95. package/lib/exports/mixins.less +33 -0
  96. package/lib/input-utils.less +0 -3
  97. package/lib/test/a11y-test-utils.ts +94 -0
  98. package/lib/test/assertions.ts +10 -3
  99. package/lib/test/test-utils.ts +152 -300
  100. package/lib/test/visual-test-utils.ts +58 -0
  101. package/lib/tsconfig.json +3 -3
  102. package/package.json +12 -13
  103. package/lib/components/popover/tooltip.visual.test.ts +0 -31
package/LICENSE.MD CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright 2017-2020 Stack Exchange Inc.
3
+ Copyright 2017-2024 Stack Exchange Inc.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
6
 
package/README.md CHANGED
@@ -98,21 +98,19 @@ npm run test:unit:watch
98
98
  - `git lfs` ([installation docs](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage))
99
99
  - `docker` ([installation docs](https://docs.docker.com/engine/install/))
100
100
  - `pwsh` ([Installation docs](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3))
101
+ - Run `git config diff.lfs.textconv cat` to make sure image diff works as expected ([More info](https://github.com/microsoft/vscode/issues/86611#issuecomment-875894108))
101
102
 
102
- 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).
103
+ This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests.
103
104
  Visual regression tests end with this suffix `*.visual.test.ts`.
104
105
 
105
106
  Execute the visual regression tests suite by running:
106
107
  ```sh
107
108
  npm run test:visual
108
109
  ```
110
+ After the first run, if there are failing snapshots, they end up overriding the baseline ones in the filesystem (e.g. `/screenshots/<browser>/baseline/<name>.png`).
111
+ We do this for easier comparison of the dif directly in vscode and to make sure only the failing snapshots get regenerated (see [this GH discussion](https://github.com/modernweb-dev/web/discussions/427#discussioncomment-3543771) that inspired the approach).
109
112
 
110
- Update the visual baseline via:
111
- ```sh
112
- npm run test:visual:update
113
- ```
114
-
115
- Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
113
+ We also recommend to install [this vscode extension](https://marketplace.visualstudio.com/items?itemName=RayWiis.png-image-diff) for getting better diffs.
116
114
 
117
115
  ### Less Tests
118
116
 
@@ -174,9 +172,9 @@ Have a bug or feature request? First search existing or closed issues to make su
174
172
  If you’d like to contribute to Stacks, please read through our [contribution guidelines](/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
175
173
 
176
174
  ## License
177
- Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
175
+ Code and documentation copyright 2017-2024 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
178
176
 
179
177
  [gh-action-url]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml
180
- [gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml/badge.svg?branch=develop
178
+ [gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/workflow.yml/badge.svg?branch=develop
181
179
  [npm-url]: https://npmjs.org/package/@stackoverflow/stacks
182
180
  [npm-badge]: https://img.shields.io/npm/v/@stackoverflow/stacks.svg