diff --git a/.changeset/lovely-hotels-arrive.md b/.changeset/lovely-hotels-arrive.md new file mode 100644 index 0000000000..996dccdf2b --- /dev/null +++ b/.changeset/lovely-hotels-arrive.md @@ -0,0 +1,7 @@ +--- +"@stackoverflow/stacks": patch +"@stackoverflow/stacks-svelte": minor +--- + +feat(empty-state): new SHINE styles and Svelte Component +fix(expanding-input): expands correctly now after textarea update diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts index 6693e7ecef..39d01d1ee6 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts @@ -1,5 +1,5 @@ import { html } from "@open-wc/testing"; -import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy"; +import { SpotEmpty } from "@stackoverflow/stacks-icons/spots"; import { runA11yTests } from "../../test/a11y-test-utils"; import "../../index"; @@ -7,7 +7,9 @@ describe("empty-state", () => { runA11yTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmptyXL}
Hello! This is a wonderful empty state component.
`, + default: `${SpotEmpty} +This is a wonderful empty state component.
`, }, template: ({ component, testid }) => html`if there are no buttons + &:last-child { + margin-bottom: 0; } - color: var(--fc-light); text-align: center; margin-left: auto; margin-right: auto; diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts index 257c8b03ed..d314d7444e 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts @@ -1,5 +1,5 @@ import { html } from "@open-wc/testing"; -import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy"; +import { SpotEmpty } from "@stackoverflow/stacks-icons/spots"; import { runVisualTests } from "../../test/visual-test-utils"; import "../../index"; @@ -7,7 +7,11 @@ describe("empty-state", () => { runVisualTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmptyXL}
Hello! This is a wonderful empty state component.
`, + "default": `${SpotEmpty.replace("svg-spot", "svg-spot native")} +This is a wonderful empty state component.
`, + "with-title": `${SpotEmpty.replace("svg-spot", "svg-spot native")} +This is a wonderful empty state component.
`, }, template: ({ component, testid }) => html`- Used when a user hasn’t interacted with a feature yet. + Typical use-case for an empty state is when a feature has no data or a search/filter operation yields no results.
- {% header "h3", "No data actionable" %} + {% header "h3", "Actionable" %}- If the user can take an action to fix the situation, it's best to draw attention to it, explain next steps, and provide a call-to-action. + If the user is able to address the situation resulting in an empty state, it is appropriate to include a button for them to do so.
Why is this blank? Explain it.
- Call to action + @Svg.Spot.Empty.With("native") +Try refining your search term or trying something more general.
+We haven’t received any data yet. Have you connected your Stack Overflow account?
- Connect my account + {% spot, "Empty", "native" %} +Try refining your search term or trying something more general.
+- If the user can’t take an action to fix the situation, it’s more appropriate to set expectations. + If the user can’t take an action to fix the situation, it’s appropriate to set expectations.
Why is this blank? Explain it.
+ @Svg.Spot.Empty.With("native") +Please check back in a few days.
There’s no data associated with your account yet. Please check back tomorrow.
-- When someone performs an action that returns nothing, a blank state can explain what happened and help get someone back on track. -
- {% header "h3", "No results actionable" %} -- If the user can take an action to fix the situation, it’s best to draw attention to it and provide a call-to-action. -
-Why is this blank? Explain it.
- Call to action -We couldn’t find any tags matching stacks-1-0-0. It might not exist yet. Would you like to create it?
- Create this tag + {% spot, "Empty", "native" %} +Please check back in a few days.
- If the user can’t take an action to fix the situation, it’s more appropriate to set expectations. + If desired, both the title and call-to-action may be omitted for a minimal look.
Why is this blank? Explain it.
+ @Svg.Spot.Empty.With("native") +There’s no data associated with this account.
We couldn’t match users for Namey McUser. Try refining your search or trying something more general.
+ {% spot, "Empty", "native" %} +There’s no data associated with this account.
.{{ item.class }}{% endif %}{@render description()}
+ {#if actions} + {@render actions()} + {/if} +