diff --git a/docs/_data/buttons.json b/docs/_data/buttons.json index cfc74740a5..5094382d07 100755 --- a/docs/_data/buttons.json +++ b/docs/_data/buttons.json @@ -66,6 +66,17 @@ ] } ], + "vote": [ + { + "title": "Vote", + "class": "s-btn__vote", + "classes": [ + { + "title": "default" + } + ] + } + ], "loading": [ { "title": "Loaders", diff --git a/docs/product/components/buttons.html b/docs/product/components/buttons.html index c2a924a75f..dabded3d27 100644 --- a/docs/product/components/buttons.html +++ b/docs/product/components/buttons.html @@ -233,6 +233,92 @@ +
+ {% header "h2", "Vote" %} +

TODO describe

+ +
+{% highlight html %} + + + + + +{% endhighlight %} +
+
+ + + + + + + + + + + + {% for btn in buttons.vote %} + {% assign types = btn.classes %} + {% for class in types %} + + + + + + + + {% endfor %} + {% endfor %} + +
TypeClassDefault StateSelected StateDisabled State
{{ class.title }} +
+ .s-btn + {% if btn.class != nil %} + .{{ btn.class }} + {% endif %} + {% if class.class != nil %} + .{{ class.class }} + {% endif %} +
+ 		+ + + + + +
+
+
+
+
+
{% header "h2", "Loading" %}

Any button can have a loading state applied by adding the .is-loading state class.

diff --git a/lib/components/button/button.a11y.test.ts b/lib/components/button/button.a11y.test.ts index 9e78f1b118..bc23debe02 100644 --- a/lib/components/button/button.a11y.test.ts +++ b/lib/components/button/button.a11y.test.ts @@ -1,4 +1,4 @@ -import testArgs from "./button.test.setup"; +import { testArgs, voteBtnTestArgs } from "./button.test.setup"; import { runA11yTests } from "../../test/a11y-test-utils"; import "../../index"; @@ -18,4 +18,7 @@ describe("button", () => { /s-btn-highcontrast-light-(?:muted-outlined-|muted-|outlined-)?(?:sm|xs).*?badge/, ], }); + + // `vote` variant + runA11yTests(voteBtnTestArgs); }); diff --git a/lib/components/button/button.less b/lib/components/button/button.less index 6da68364d8..6dff45bae2 100644 --- a/lib/components/button/button.less +++ b/lib/components/button/button.less @@ -64,6 +64,15 @@ --_bu-outlined-fc-selected: var(--white); --_bu-badge-o: 0.8; --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600)); + + &.s-btn__vote { + --_bu-bc-focus: var(--theme-secondary-400); + --_bu-bg-focus: var(--theme-secondary-400); + --_bu-fc-focus: var(--white); + --_bu-bc-selected: var(--theme-primary-400); + --_bu-bg-selected: var(--theme-primary-400); + --_bu-fc-selected: var(--white); + } }); // STATES @@ -374,6 +383,42 @@ --_bu-hc-bc: transparent; } + // Vote + &&__vote { + &.is-selected { + &:focus-visible, + &.focus-inset-bordered { + --_bu-bg-selected: var(--theme-primary-400); + --_bu-fc-selected: var(--white); + } + } + + // Base + --_bu-bc: var(--black-225); + --_bu-bg: transparent; + --_bu-br: var(--br-circle); + --_bu-fc: var(--black-500); + + // Active + --_bu-bc-active: var(--theme-primary-500); + --_bu-bg-active: var(--theme-primary-200); + --_bu-fc-active: var(--theme-primary-500); + + // Focus + --_bu-bg-focus: var(--theme-secondary-400); + --_bu-fc-focus: var(--white); + + // Hover + --_bu-bc-hover: var(--black-300); + --_bu-bg-hover: var(--theme-primary-200); + --_bu-fc-hover: var(--black-600); + + // Selected + --_bu-bc-selected: var(--theme-primary-400); + --_bu-bg-selected: var(--theme-primary-100); + --_bu-fc-selected: var(--theme-primary-400); + } + // CHILD ELEMENTS & &--badge { opacity: var(--_bu-badge-o); diff --git a/lib/components/button/button.test.setup.ts b/lib/components/button/button.test.setup.ts index dd1efc2b04..464a04566d 100644 --- a/lib/components/button/button.test.setup.ts +++ b/lib/components/button/button.test.setup.ts @@ -1,5 +1,7 @@ import type { TestVariationArgs } from "../../test/test-utils"; +import { IconArrowUp } from "@stackoverflow/stacks-icons/icons"; import "../../index"; +import { html } from "@open-wc/testing"; const getChild = (child?: string): string => { switch (child) { @@ -8,6 +10,11 @@ const getChild = (child?: string): string => { 198 `; + case "vote": + return ` + ${IconArrowUp} + Vote + `; default: return "Ask question"; } @@ -20,7 +27,7 @@ const testArgs: TestVariationArgs = { modifiers: { primary: ["filled", "outlined"], secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]], - global: ["is-loading"], + global: ["is-loading"], // TODO add `is-selected` global modifier standalone: [...["link", "unset"], ...["facebook", "github", "google"]], }, attributes: { @@ -33,4 +40,30 @@ const testArgs: TestVariationArgs = { tag: "button", }; -export default testArgs; +const voteBtnTestArgs: TestVariationArgs = { + baseClass: "s-btn", + variants: ["vote"], + modifiers: { + global: ["is-selected"], + }, + attributes: { + type: "button", + }, + children: { + default: getChild("vote"), + }, + tag: "button", + options: { + includeNullVariant: false, + }, + template: ({ component, testid }) => html` +
+ ${component} +
+ `, +}; + +export { testArgs, voteBtnTestArgs }; diff --git a/lib/components/button/button.visual.test.ts b/lib/components/button/button.visual.test.ts index f801287a85..0109adb88b 100644 --- a/lib/components/button/button.visual.test.ts +++ b/lib/components/button/button.visual.test.ts @@ -1,4 +1,4 @@ -import testArgs from "./button.test.setup"; +import { testArgs, voteBtnTestArgs } from "./button.test.setup"; import { runVisualTests } from "../../test/visual-test-utils"; import "../../index"; import { html } from "@open-wc/testing"; @@ -15,4 +15,7 @@ describe("button", () => { `, }); + + // `vote` variant + runVisualTests(voteBtnTestArgs); }); diff --git a/screenshots/Chromium/baseline/s-btn-dark-vote-is-selected.png b/screenshots/Chromium/baseline/s-btn-dark-vote-is-selected.png new file mode 100644 index 0000000000..76081ef2fd --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-dark-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ea2c25674ec15a85bc1b705a1134f424c13dd5f93cd4e39ad5217176e58d7244 +size 1431 diff --git a/screenshots/Chromium/baseline/s-btn-dark-vote.png b/screenshots/Chromium/baseline/s-btn-dark-vote.png new file mode 100644 index 0000000000..04f1291c8a --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-dark-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:86d75390040c0dfbbff180f190df2c5a6ad8a2fd7e0616934bf2951c3aa31ac5 +size 1217 diff --git a/screenshots/Chromium/baseline/s-btn-highcontrast-dark-vote-is-selected.png b/screenshots/Chromium/baseline/s-btn-highcontrast-dark-vote-is-selected.png new file mode 100644 index 0000000000..6c00864a19 --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-highcontrast-dark-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5e40caf90b7d70e83347f543e57b208585d1b51dfdd9277a089fab821e0bfdc5 +size 1228 diff --git a/screenshots/Chromium/baseline/s-btn-highcontrast-dark-vote.png b/screenshots/Chromium/baseline/s-btn-highcontrast-dark-vote.png new file mode 100644 index 0000000000..b3ba99d4d4 --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-highcontrast-dark-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:adc9ca70ef365214d4d935c778a861d894986c6820154af16c19ea270f0d152f +size 1298 diff --git a/screenshots/Chromium/baseline/s-btn-highcontrast-light-vote-is-selected.png b/screenshots/Chromium/baseline/s-btn-highcontrast-light-vote-is-selected.png new file mode 100644 index 0000000000..235bc4930b --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-highcontrast-light-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:add0d5c2355e4101d7d2bec888d24ed574bed1db417a088a11a1e971895e5736 +size 1250 diff --git a/screenshots/Chromium/baseline/s-btn-highcontrast-light-vote.png b/screenshots/Chromium/baseline/s-btn-highcontrast-light-vote.png new file mode 100644 index 0000000000..c6ee38a019 --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-highcontrast-light-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d24bdec593c1c0dbb78072befdce75b8e597430f630ddd46442c62d4a7cd2056 +size 1364 diff --git a/screenshots/Chromium/baseline/s-btn-light-vote-is-selected.png b/screenshots/Chromium/baseline/s-btn-light-vote-is-selected.png new file mode 100644 index 0000000000..88000269dc --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-light-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ee1d203f1aa347b11badbac013cfae55622c6f5aaf4c29390f1dc115d08b14c3 +size 1413 diff --git a/screenshots/Chromium/baseline/s-btn-light-vote.png b/screenshots/Chromium/baseline/s-btn-light-vote.png new file mode 100644 index 0000000000..5d9d33b712 --- /dev/null +++ b/screenshots/Chromium/baseline/s-btn-light-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d27df084590b23d32b05feb17c517ecd3ed4ab539d1ac97e309797cc0f549992 +size 1165 diff --git a/screenshots/Firefox/baseline/s-btn-dark-vote-is-selected.png b/screenshots/Firefox/baseline/s-btn-dark-vote-is-selected.png new file mode 100644 index 0000000000..095a70bd68 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-dark-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e81c6da62301c0b37dd64dbd36eec444ca9536d99cdd02bbc56a895b37ea911d +size 1308 diff --git a/screenshots/Firefox/baseline/s-btn-dark-vote.png b/screenshots/Firefox/baseline/s-btn-dark-vote.png new file mode 100644 index 0000000000..31fc4ca6e2 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-dark-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:52cf896f25020d3e6c73432f2f6eff77ee92d46f22088463b3fe6e9e8229bd8a +size 992 diff --git a/screenshots/Firefox/baseline/s-btn-highcontrast-dark-vote-is-selected.png b/screenshots/Firefox/baseline/s-btn-highcontrast-dark-vote-is-selected.png new file mode 100644 index 0000000000..2f82767885 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-highcontrast-dark-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0093d269a2d0e0a2fd3364bb180fd2d527f4a36cf47f79f6ea01f5a77f5f80bb +size 1174 diff --git a/screenshots/Firefox/baseline/s-btn-highcontrast-dark-vote.png b/screenshots/Firefox/baseline/s-btn-highcontrast-dark-vote.png new file mode 100644 index 0000000000..5fc319d800 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-highcontrast-dark-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a22be995142d6977ce7f9629f4bd3219ab25f1a7f88ecdcf91cf4f1f3b226dd6 +size 1086 diff --git a/screenshots/Firefox/baseline/s-btn-highcontrast-light-vote-is-selected.png b/screenshots/Firefox/baseline/s-btn-highcontrast-light-vote-is-selected.png new file mode 100644 index 0000000000..e71f6a3840 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-highcontrast-light-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5250149970ed9cd68242e92844e5b74c8346933fdc7cad591dbc61485f4d9cc1 +size 1126 diff --git a/screenshots/Firefox/baseline/s-btn-highcontrast-light-vote.png b/screenshots/Firefox/baseline/s-btn-highcontrast-light-vote.png new file mode 100644 index 0000000000..4370d04805 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-highcontrast-light-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fc9a7f4945df9afa0d63ae69defdab83b3ba25b66202b4d3362fdc110cc75205 +size 1162 diff --git a/screenshots/Firefox/baseline/s-btn-light-vote-is-selected.png b/screenshots/Firefox/baseline/s-btn-light-vote-is-selected.png new file mode 100644 index 0000000000..7de4eac19b --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-light-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7575b17b589261fe7bbf7ff32e1b680fa6de2a7008de002901d071e1e27ac35c +size 1334 diff --git a/screenshots/Firefox/baseline/s-btn-light-vote.png b/screenshots/Firefox/baseline/s-btn-light-vote.png new file mode 100644 index 0000000000..ae51b582e7 --- /dev/null +++ b/screenshots/Firefox/baseline/s-btn-light-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:617ff4e32303e042bf52b2428c4aaf7da29082381547a03ca7606cfdd37cbae1 +size 972 diff --git a/screenshots/Webkit/baseline/s-btn-dark-vote-is-selected.png b/screenshots/Webkit/baseline/s-btn-dark-vote-is-selected.png new file mode 100644 index 0000000000..799fcc6eac --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-dark-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f5d2746a4fa4dd42e6fbed16275d2bd3f3b5ed1e1dac5c691feb16dc83ba5245 +size 1482 diff --git a/screenshots/Webkit/baseline/s-btn-dark-vote.png b/screenshots/Webkit/baseline/s-btn-dark-vote.png new file mode 100644 index 0000000000..0a14156ca6 --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-dark-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6b24bb7fbf3ed8a79f9600c74b89f9866bcb7cead2d3aeaa665f10a49c7aea35 +size 1256 diff --git a/screenshots/Webkit/baseline/s-btn-highcontrast-dark-vote-is-selected.png b/screenshots/Webkit/baseline/s-btn-highcontrast-dark-vote-is-selected.png new file mode 100644 index 0000000000..2fd178c7aa --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-highcontrast-dark-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e77bff61b6d1f91e87189ab8f073e5638d727a3debc549afbb6b1fda754de40f +size 1158 diff --git a/screenshots/Webkit/baseline/s-btn-highcontrast-dark-vote.png b/screenshots/Webkit/baseline/s-btn-highcontrast-dark-vote.png new file mode 100644 index 0000000000..37074978e6 --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-highcontrast-dark-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8e7e603753f6f53317a65fc743d6a55121bacbb18999b610063dcffeb84dd0b5 +size 1235 diff --git a/screenshots/Webkit/baseline/s-btn-highcontrast-light-vote-is-selected.png b/screenshots/Webkit/baseline/s-btn-highcontrast-light-vote-is-selected.png new file mode 100644 index 0000000000..c75607458e --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-highcontrast-light-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:35707b7a204268f898511a1633cccc948e89129c72e9ddeb7f51a02460550780 +size 1125 diff --git a/screenshots/Webkit/baseline/s-btn-highcontrast-light-vote.png b/screenshots/Webkit/baseline/s-btn-highcontrast-light-vote.png new file mode 100644 index 0000000000..f4e6650a28 --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-highcontrast-light-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ab63e5d3875b34e0ad52122f3961fd12f8802fafc4b0220ab65d50f7720ae447 +size 1406 diff --git a/screenshots/Webkit/baseline/s-btn-light-vote-is-selected.png b/screenshots/Webkit/baseline/s-btn-light-vote-is-selected.png new file mode 100644 index 0000000000..1ccdadda11 --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-light-vote-is-selected.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fd829f2122f82aab7ba7ba390d688cb49e2c5a7495661e014c5cbda460ca8360 +size 1435 diff --git a/screenshots/Webkit/baseline/s-btn-light-vote.png b/screenshots/Webkit/baseline/s-btn-light-vote.png new file mode 100644 index 0000000000..c1e0684891 --- /dev/null +++ b/screenshots/Webkit/baseline/s-btn-light-vote.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3ae1eee82dba5613beb5a07bff59652b6a339c0368344406fea0ae6fba79456f +size 1112