feat(storybook): expand argEvents API; resolve lint warnings (#4165)

Author: castastrophe

.changeset/kind-cycles-check.md

@@ -0,0 +1,6 @@
+---
+"@spectrum-css/preview": minor
+---
+
+- _feature_: Add the `resetArgs` function to the argEvents decorator
+- _fix_: Resolve minor lint warnings in the Storybook CSS assets

.storybook/assets/base.css

@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -31,7 +29,7 @@ body {
 .spectrum {
 	color: var(--spectrum-neutral-content-color-default);
 	background-color: var(--spectrum-background-base-color);
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+	-webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
 }
 
 .spectrum .spectrum-examples-static-black {
@@ -61,7 +59,7 @@ svg:has(symbol):not(:has(use)) {
 	line-height: normal;
 	letter-spacing: normal;
 	text-transform: none;
-	border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
+	border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%);
 }
 
 /* Force the modal wrapper to be contained by the frame not the viewport */
@@ -77,4 +75,14 @@ svg:has(symbol):not(:has(use)) {
 	overflow: visible !important;
 }
 
-/* stylelint-enable selector-class-pattern */
+#panel-tab-content tr th:nth-child(1),
+#panel-tab-content tr th:nth-child(3),
+#panel-tab-content tr td:nth-child(1),
+#panel-tab-content tr td:nth-child(3) {
+	min-inline-size: 100px !important;
+}
+
+#panel-tab-content tr th:nth-child(2),
+#panel-tab-content tr td:nth-child(2) {
+	max-inline-size: 500px !important;
+}

.storybook/assets/index.css

@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -72,6 +70,13 @@ div.sb-bar > div > div > span:first-child {
 .docblock-argstable-body tr td {
 	letter-spacing: unset;
 	font-size: 11px;
+	max-inline-size: 400px;
+	overflow-x: auto;
+}
+
+.docblock-argstable-body tr td code {
+	white-space: pre-wrap;
+	line-height: inherit;
 }
 
 .docblock-argstable-body td > span:has(select),
@@ -125,5 +130,3 @@ div.sb-bar {
 	color: var(--spectrum-neutral-content-color-default) !important;
 	background-color: var(--spectrum-background-layer-2-color) !important;
 }
-
-/* stylelint-enable selector-class-pattern */

.storybook/decorators/utilities.js

@@ -556,12 +556,12 @@ export const renderContent = (content = [], {
 	if (content.length === 0) return nothing;
 
 	return html`
-		${content.map((c) => {
+		${content.map((c, idx) => {
 			if (typeof c === "undefined") return nothing;
 
 			/* If the content is an object (but not a lit object), we need to merge the object with the template */
 			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
-				return callback({ ...args, ...c }, context);
+				return callback({ ...args, ...c, idx }, context);
 			}
 
 			if (typeof c === "function") {