diff --git a/.changeset/goofy-toys-attend.md b/.changeset/goofy-toys-attend.md new file mode 100644 index 0000000000..7e7383c7ad --- /dev/null +++ b/.changeset/goofy-toys-attend.md @@ -0,0 +1,6 @@ +--- +"@stackoverflow/stacks": minor +"@stackoverflow/stacks-svelte": minor +--- + +Update Bling component to match SHINE styles diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index a7ffa810a7..9dc4878cb9 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -24,12 +24,19 @@ ### Components +#### Bling (previously *Award Bling*) +The Award Bling component has been renamed to Bling. + #### Popover - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `
`) should be deleted from the codebases as part of the migration. # Migrating from Stacks Svelte v0 to v1 -Coming soon… +## Breaking changes + +### Bling (previously *AwardBling*) + +The `AwardBling` component has been renamed to `Bling`. # Migrating from Stacks v1 to v2 diff --git a/packages/stacks-classic/lib/components/award-bling/award-bling.a11y.test.ts b/packages/stacks-classic/lib/components/award-bling/award-bling.a11y.test.ts deleted file mode 100644 index 41cc2be004..0000000000 --- a/packages/stacks-classic/lib/components/award-bling/award-bling.a11y.test.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { runA11yTests } from "../../test/a11y-test-utils"; -import "../../index"; - -describe("award-bling", () => { - runA11yTests({ - baseClass: "s-award-bling", - variants: ["gold", "silver", "bronze"], - children: { - default: `100Use award bling to indicate the type of award.
-| Example | -Class | -Description | -
|---|---|---|
| - - {{ bling.label }} - {{ bling.repType }} awards - - | -
-
-
- .s-award-bling
- .s-award-bling__{{ bling.repType }}
- |
- {{ bling.description }} | -
Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.
+| Example | +Class | +Description | +
|---|---|---|
| + + {{ bling.name }} bling + + | +
+
+
+ .s-bling
+ {% if bling.name != "default" %}
+ .s-bling__{{ bling.modifier }}
+ {% endif %}
+ |
+ {{ bling.descriptions.base }} | +
Use the filled bling style to represent a specific achievement badge or to display the total count of badges a user has earned.
+| Example | +Class | +Description | +
|---|---|---|
| + + {{ bling.name }} bling + + | +
+
+
+ .s-bling
+ {% if bling.name != "default" %}
+ .s-bling__{{ bling.modifier }}
+ {% endif %}
+ |
+ {{ bling.descriptions.filled }} | +
Use different sizes of the bling.
+| Example | +Class | +Description | +
|---|---|---|
| + + {{ size }} bling + + | +
+
+
+ .s-bling
+ {% if size != "default" %}
+ .s-bling__{{ size }}
+ {% endif %}
+ |
+ A “{{ size }}” bling. | +
| Type | -Example | -
|---|---|
| - {type} - | -
- |
-
| Type | +Example | +
|---|---|
| + {type || "default"} + | +
+ |
+
| Type | +Example | +
|---|---|
| + {type || "default"} + | +
+ |
+
| Type | +Example | +
|---|---|
| + {size || "default"} + | +
+ |
+