Merge pull request #34247 from storybookjs/add-pseudo-state-tailwind-hover-story

Addon-Pseudostates: Add story showing support for media hover syntax

Author: JReinhold

code/addons/pseudo-states/src/stories/Button.stories.tsx

@@ -1,6 +1,7 @@
 import React, { type ComponentProps } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { styled } from 'storybook/theming';
 
 import { Button } from './Button';
 import './grid.css';
@@ -54,6 +55,23 @@ export const Hover: Story = {
   },
 };
 
+const StyledButton = styled(Button)`
+  &:hover {
+    @media (hover: hover) {
+      background-color: limegreen !important;
+    }
+  }
+`;
+
+export const HoverMediaQuery: Story = {
+  parameters: {
+    pseudo: { hover: true },
+  },
+  render: (args) => {
+    return <StyledButton {...args}>Hover (hover: hover)</StyledButton>;
+  },
+};
+
 export const Focus: Story = {
   parameters: {
     pseudo: { focus: true },