docs: React Aria separator docs (#9288)

* update starter example

* add separator docs

* fix css conflict

* add min height

Author: yihuiliao

packages/dev/s2-docs/pages/react-aria/Separator.mdx

@@ -0,0 +1,37 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+import docs from 'docs:react-aria-components';
+import {Separator as VanillaSeparator} from 'vanilla-starter/Separator';
+import {Separator as TailwindSeparator} from 'tailwind-starter/Separator';
+import tailwindDocs from 'docs:tailwind-starter/Separator';
+import vanillaDocs from 'docs:vanilla-starter/Separator';
+import '../../tailwind/tailwind.css';
+
+export const relatedPages = [{'title': 'useSeparator', 'url': 'https://react-spectrum.adobe.com/react-aria/useSeparator.html'}];
+export const description = 'A separator is a visual divider between two groups of content.';
+
+# Separator
+
+<PageDescription>{docs.exports.Separator.description}</PageDescription>
+
+<ExampleSwitcher examples={['Vanilla', 'Tailwind']}>
+  <VisualExample
+    component={VanillaSeparator}
+    docs={vanillaDocs.exports.Separator}
+    links={vanillaDocs.links}
+    props={['orientation']}
+    type="vanilla"
+    files={["starters/docs/src/Separator.tsx", "starters/docs/src/Separator.css"]} />
+  <VisualExample
+    component={TailwindSeparator}
+    docs={tailwindDocs.exports.Separator}
+    links={tailwindDocs.links}
+    props={['orientation']}
+    type="tailwind"
+    files={["starters/tailwind/src/Separator.tsx"]} />
+</ExampleSwitcher>
+
+## API
+
+<PropTable component={docs.exports.Separator} links={docs.links}/>

packages/react-aria-components/src/Separator.tsx

@@ -42,6 +42,9 @@ export class SeparatorNode extends CollectionNode<any> {
   }
 }
 
+/**
+ * A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
+ */
 export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 

starters/docs/src/Menu.css

@@ -170,12 +170,14 @@
   }
 }
 
-.react-aria-Separator {
+.react-aria-Menu .react-aria-Separator {
   grid-column-start: 1;
   grid-column-end: -1;
   margin: 0 var(--spacing-2);
   border: 0;
   border-top: 0.5px solid var(--border-color);
+  height: auto;
+  width: auto;
 
   .react-aria-MenuItem + & {
     margin-block-start: var(--spacing-1);

starters/docs/src/Separator.css

@@ -0,0 +1,15 @@
+@import "./theme.css";
+
+.react-aria-Separator {
+  background-color: var(--gray-800);
+  border-style: none;
+  border-radius: 1px;
+  height: 2px;
+  width: 100%;
+  
+  &[aria-orientation="vertical"] {
+    width: 2px;
+    min-height: 32px;
+    height: 100%;
+  }
+}

starters/docs/src/Separator.tsx

@@ -0,0 +1,8 @@
+'use client';
+import {Separator as RACSeparator, SeparatorProps} from 'react-aria-components';
+import React from 'react';
+import './Separator.css';
+
+export function Separator(props: SeparatorProps) {
+  return <RACSeparator {...props} />
+}

starters/tailwind/src/Separator.tsx

@@ -4,11 +4,11 @@ import { Separator as RACSeparator, SeparatorProps } from 'react-aria-components
 import { tv } from 'tailwind-variants';
 
 const styles = tv({
-  base: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[ButtonBorder]',
+  base: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[ButtonBorder] border-none',
   variants: {
     orientation: {
       horizontal: 'h-px w-full',
-      vertical: 'w-px'
+      vertical: 'w-px min-h-8 h-full'
     }
   },
   defaultVariants: {