chore: vrt enhancements for button & actionbutton (#2578)

Author: castastrophe

.storybook/decorators/contextsWrapper.js

@@ -43,7 +43,15 @@ export const withContextWrapper = makeDecorator({
 			for (const s of scales) {
 				container.classList.toggle(`spectrum--${s}`, s === scale);
 			}
-		}, [color, scale, isExpress]);
+
+			if (args.staticColor === "black") {
+				container.style.backgroundColor = "rgb(181, 209, 211)";
+			} else if (args.staticColor === "white") {
+				 container.style.backgroundColor = "rgb(15, 121, 125)";
+			} else {
+				container.style.removeProperty("background-color");
+			}
+		}, [color, scale, isExpress, args.staticColor]);
 
 		return StoryFn(context);
 	},

.storybook/main.js

@@ -132,6 +132,14 @@ module.exports = {
 									implementation: require("postcss"),
 									postcssOptions: {
 										config: resolve(__dirname, "../postcss.config.js"),
+										additionalPlugins: {
+											"postcss-pseudo-classes": {
+												restrictTo: ['focus-visible', 'focus-within', 'hover', 'active', 'disabled'],
+												allCombinations: true,
+												preserveBeforeAfter: false,
+												prefix: 'is-'
+											},
+										}
 									},
 								},
 							},

.storybook/manager.js

@@ -49,5 +49,8 @@ addons.setConfig({
 	}),
 	sidebar: {
 		showRoots: false,
+		filters: {
+			patterns: (item) => !item.id.includes('forced-colors'),
+		}
 	},
 });

.storybook/package.json

@@ -43,6 +43,7 @@
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.35",
     "postcss-loader": "^8.1.1",
+    "postcss-pseudo-classes": "^0.4.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

.storybook/preview.js

@@ -187,6 +187,7 @@ export const parameters = {
 	panelPosition: "bottom",
 	showToolbar: true,
 	isFullscreen: false,
+	actions: { argTypesRegex: '^on.*' },
 	options: {
 		storySort: {
 			method: "alphabetical",