Add more styled examples (#3308)

Author: devongovett

packages/@react-aria/dialog/docs/tailwind.png

@@ -17,6 +17,8 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/dialog/package.json';
 import Anatomy from './anatomy.svg';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import tailwindPreview from 'url:./tailwind.png';
 
 ---
 category: Overlays
@@ -217,3 +219,11 @@ function Example() {
   <Example />
 </OverlayProvider>
 ```
+
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/delicate-hill-j4p5vs?file=/src/AlertDialog.tsx"
+  preview={tailwindPreview}
+  title="Tailwind CSS"
+  description="An animated alert dialog using Tailwind and react-transition-group." />

packages/@react-aria/dialog/docs/useDialog.mdx

@@ -19,6 +19,8 @@ import statelyDocs from 'docs:@react-stately/menu';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs';
 import packageData from '@react-aria/menu/package.json';
 import Anatomy from './menu-trigger-anatomy.svg';
+import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import tailwindPreview from 'url:./tailwind.png';
 
 ---
 category: Overlays
@@ -219,6 +221,14 @@ function MenuItem({item, state, onAction, onClose}) {
 </MenuButton>
 ```
 
+## Styled examples
+
+<ExampleCard
+  url="https://codesandbox.io/s/awesome-boyd-c0gbv5?file=/src/Menu.tsx"
+  preview={tailwindPreview}
+  title="Tailwind CSS"
+  description="An example of styling a Menu with Tailwind." />
+
 ## Internationalization
 
 ### RTL

packages/@react-aria/menu/docs/tailwind.png

@@ -24,6 +24,7 @@ import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
 import examplePreview from 'url:./example.png';
 import styledExamplePreview from 'url:./styled-components.png';
+import popupExamplePreview from 'url:./popup-example.png';
 
 ---
 category: Pickers
@@ -350,6 +351,12 @@ function Option({item, state}) {
   title="Styled Components"
   description="A Select with complex item content built with Styled Components." />
 
+<ExampleCard
+  url="https://codesandbox.io/s/heuristic-margulis-uz3d4d?file=/src/Select.tsx"
+  preview={popupExamplePreview}
+  title="Popup positioning"
+  description="A Select with custom macOS-style popup positioning." />
+
 ## Internationalization
 
 `useSelect` and `useListBox` handle some aspects of internationalization automatically.