Skip to content

Commit 654cf0e

Browse files
dancormierdancormier
authored
Merge branch 'beta' into changeset-release/beta
2 parents 80e7b92 + 1407fb5 commit 654cf0e

102 files changed

Lines changed: 1717 additions & 134 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/eight-pants-worry.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@stackoverflow/stacks": minor
3+
"@stackoverflow/stacks-svelte": minor
4+
---
5+
6+
Add Vote component

‎.changeset/lovely-hotels-arrive.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@stackoverflow/stacks": patch
3+
"@stackoverflow/stacks-svelte": minor
4+
---
5+
6+
feat(empty-state): new SHINE styles and Svelte Component
7+
fix(expanding-input): expands correctly now after textarea update

‎package-lock.json‎

Lines changed: 29 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
"storybook": "^9.1.5",
8686
"stylelint": "^16.25.0",
8787
"stylelint-config-recommended": "^16.0.0",
88-
"stylelint-config-standard": "^38.0.0",
88+
"stylelint-config-standard": "^39.0.1",
8989
"svelte": "^5.39.11",
9090
"svelte-check": "^4.3.3",
9191
"svelte-preprocess": "^6.0.3",

‎packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { html } from "@open-wc/testing";
2-
import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy";
2+
import { SpotEmpty } from "@stackoverflow/stacks-icons/spots";
33
import { runA11yTests } from "../../test/a11y-test-utils";
44
import "../../index";
55

66
describe("empty-state", () => {
77
runA11yTests({
88
baseClass: "s-empty-state",
99
children: {
10-
default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
10+
default: `${SpotEmpty}
11+
<h4 class="s-empty-state--title">No questions match your result.</h4>
12+
<p>This is a wonderful empty state component.</p>`,
1113
},
1214
template: ({ component, testid }) => html`
1315
<div class="ws3 p16" data-testid="${testid}">${component}</div>

‎packages/stacks-classic/lib/components/empty-state/empty-state.less‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
.s-empty-state {
22
// CHILD ELEMENTS
33
p {
4-
strong {
5-
color: var(--fc-dark);
6-
}
4+
color: var(--black-400);
5+
margin-bottom: var(--su32);
6+
}
7+
8+
&--title {
9+
font-weight: 600;
10+
font-size: var(--fs-body3);
11+
margin-bottom: var(--su8);
12+
color: var(--black-400);
13+
}
14+
15+
.svg-spot {
16+
margin-bottom: var(--su24);
17+
}
718

8-
font-size: var(--fs-body1);
9-
margin-bottom: var(--su12);
19+
// Remove margin from <p> if there are no buttons
20+
&:last-child {
21+
margin-bottom: 0;
1022
}
1123

12-
color: var(--fc-light);
1324
text-align: center;
1425
margin-left: auto;
1526
margin-right: auto;

‎packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { html } from "@open-wc/testing";
2-
import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy";
2+
import { SpotEmpty } from "@stackoverflow/stacks-icons/spots";
33
import { runVisualTests } from "../../test/visual-test-utils";
44
import "../../index";
55

66
describe("empty-state", () => {
77
runVisualTests({
88
baseClass: "s-empty-state",
99
children: {
10-
default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
10+
"default": `${SpotEmpty.replace("svg-spot", "svg-spot native")}
11+
<p>This is a wonderful empty state component.</p>`,
12+
"with-title": `${SpotEmpty.replace("svg-spot", "svg-spot native")}
13+
<h4 class="s-empty-state--title">Amazing title for this empty state.</h4>
14+
<p>This is a wonderful empty state component.</p>`,
1115
},
1216
template: ({ component, testid }) => html`
1317
<div class="ws3 p16" data-testid="${testid}">${component}</div>

‎packages/stacks-classic/lib/components/modal/modal.test.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,9 @@ describe("modal", () => {
139139

140140
await user.click(trigger);
141141
expect(modal).to.be.visible;
142-
143-
await waitFor(() => expect(initialFocusEl).to.have.focus);
142+
await waitFor(() => expect(initialFocusEl).to.have.focus, {
143+
timeout: 20000,
144+
});
144145
});
145146

146147
it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {

‎packages/stacks-classic/lib/components/vote/vote.a11y.test.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { runA11yTests } from "../../test/a11y-test-utils";
2+
import {
3+
IconVote16Up,
4+
IconVote16Down,
5+
} from "@stackoverflow/stacks-icons/icons";
6+
import "../../index";
7+
8+
const children = {
9+
default: `
10+
<button class="s-vote--btn">
11+
${IconVote16Up}
12+
<span class="v-visible-sr">upvote</span>
13+
</button>
14+
<span class="s-vote--votes">
15+
<span class="s-vote--total">12</span>
16+
<span class="s-vote--upvotes">+20</span>
17+
<span class="s-vote--downvotes">-8</span>
18+
</span>
19+
<button class="s-vote--btn">
20+
${IconVote16Down}
21+
<span class="v-visible-sr">downvote</span>
22+
</button>
23+
`,
24+
upvoteOnly: `
25+
<button class="s-vote--btn">
26+
${IconVote16Up}
27+
<span class="v-visible-sr">upvote</span>
28+
</button>
29+
<span class="s-vote--votes">
30+
<span class="s-vote--total">12</span>
31+
<span class="s-vote--upvotes">+20</span>
32+
<span class="s-vote--downvotes">-8</span>
33+
</span>
34+
`,
35+
};
36+
37+
describe("vote", () => {
38+
runA11yTests({
39+
baseClass: "s-vote",
40+
modifiers: {
41+
primary: ["expanded"],
42+
},
43+
children: {
44+
default: children.default,
45+
},
46+
});
47+
48+
// Horizontal with and without downvote
49+
runA11yTests({
50+
baseClass: "s-vote",
51+
modifiers: {
52+
primary: ["horizontal"],
53+
},
54+
options: {
55+
includeNullModifier: false,
56+
},
57+
children,
58+
});
59+
});

‎packages/stacks-classic/lib/components/vote/vote.less‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
.s-vote {
2+
--_vo-fd: column;
3+
--_vo-child-bg: var(--black-150);
4+
--_vo-child-br: unset;
5+
--_vo-child-fd: var(--_vo-fd);
6+
--_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
7+
--_vo-child-h: unset;
8+
--_vo-child-w: calc(var(--su48) + var(--su2)); // 50px
9+
--_vo-child-p: unset;
10+
11+
// CHILD ELEMENTS
12+
&:not(&__horizontal){
13+
:first-child {
14+
--_vo-child-p: calc(var(--su12) + var(--su2)) 0 calc(var(--su12) - var(--su2)); // 14px 0 10px
15+
--_vo-child-br: var(--br-pill) var(--br-pill) 0 0;
16+
}
17+
18+
:last-child {
19+
--_vo-child-p: calc(var(--su12) - var(--su2)) 0 calc(var(--su12) + var(--su2)); // 10px 0 14px
20+
--_vo-child-br: 0 0 var(--br-pill) var(--br-pill);
21+
}
22+
23+
:only-child {
24+
--_vo-child-br: var(--br-pill);
25+
--_vo-child-g: calc(var(--su16) + var(--su4)); // 18px
26+
--_vo-child-p: calc(var(--su12) + var(--su2)) 0; // 14px 0
27+
}
28+
}
29+
30+
// MODIFIERS
31+
&&__expanded {
32+
--_vo-child-g: var(--su2);
33+
--_vo-child-p: 0;
34+
35+
.s-vote {
36+
&--total {
37+
display: none;
38+
}
39+
&--upvotes,
40+
&--downvotes {
41+
display: block;
42+
}
43+
}
44+
}
45+
46+
&&__horizontal {
47+
--_vo-fd: row;
48+
--_vo-child-h: var(--su32);
49+
--_vo-child-p: 0 var(--su4);
50+
--_vo-child-w: unset;
51+
52+
:first-child {
53+
--_vo-child-p: 0 var(--su6) 0 calc(var(--su8) + var(--su2)); // 0 6px 0 10px
54+
--_vo-child-br: var(--br-pill) 0 0 var(--br-pill);
55+
}
56+
57+
:last-child {
58+
--_vo-child-p: 0 calc(var(--su8) + var(--su2)) 0 var(--su6); // 0 10px 0 6px
59+
--_vo-child-br: 0 var(--br-pill) var(--br-pill) 0;
60+
}
61+
62+
.s-vote--votes:last-child:not(:only-child) {
63+
--_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 var(--su4); // 0 14px 0 4px
64+
}
65+
66+
:only-child {
67+
--_vo-child-br: var(--br-pill);
68+
--_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
69+
--_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 calc(var(--su8) + var(--su2)); // 0 10px
70+
}
71+
}
72+
73+
// CHILD ELEMENTS
74+
> button {
75+
// Reset button styles
76+
appearance: none;
77+
-webkit-appearance: none;
78+
background: none;
79+
border: 0;
80+
color: inherit;
81+
cursor: pointer;
82+
font: inherit;
83+
margin: 0;
84+
padding: 0;
85+
}
86+
87+
& &--btn,
88+
& > &--votes {
89+
background-color: var(--_vo-child-bg);
90+
border-radius: var(--_vo-child-br);
91+
flex-direction: var(--_vo-child-fd);
92+
gap: var(--_vo-child-g);
93+
height: var(--_vo-child-h);
94+
padding: var(--_vo-child-p);
95+
width: var(--_vo-child-w);
96+
97+
align-items: center;
98+
display: inline-flex;
99+
justify-content: center;
100+
overflow: hidden;
101+
font-weight: 600;
102+
text-align: center;
103+
white-space: nowrap;
104+
}
105+
106+
& &--upvotes,
107+
& &--downvotes {
108+
display: none;
109+
}
110+
111+
& &--upvotes {
112+
color: var(--green-500);
113+
}
114+
115+
& &--downvotes {
116+
color: var(--red-500);
117+
}
118+
119+
// INTERACTION
120+
> button,
121+
& &--btn {
122+
&:focus-visible {
123+
.focus-styles(true, false);
124+
}
125+
126+
&:hover {
127+
--_vo-child-bg: var(--black-200);
128+
}
129+
}
130+
131+
flex-direction: var(--_vo-fd);
132+
133+
display: flex;
134+
}

0 commit comments

Comments
 (0)