Add orientation prop

docs/reference/generated/separator.json

@@ -2,6 +2,11 @@
   "name": "Separator",
   "description": "A separator element accessible to screen readers.\nRenders a `<div>` element.",
   "props": {
+    "orientation": {
+      "type": "'horizontal' | 'vertical'",
+      "default": "'horizontal'",
+      "description": "The component orientation."
+    },
     "className": {
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."

docs/src/app/(public)/(content)/react/components/separator/demos/hero/css-modules/index.tsx

@@ -18,7 +18,7 @@ export default function ExampleSeparator() {
         Support
       </a>
 
-      <Separator className={styles.Separator} />
+      <Separator orientation="vertical" className={styles.Separator} />
 
       <a href="#" className={styles.Link}>
         Log in

docs/src/app/(public)/(content)/react/components/separator/demos/hero/tailwind/index.tsx

@@ -29,7 +29,7 @@ export default function ExampleSeparator() {
         Support
       </a>
 
-      <Separator className="w-px bg-gray-300" />
+      <Separator orientation="vertical" className="w-px bg-gray-300" />
 
       <a
         href="#"

packages/react/src/separator/Separator.test.tsx

@@ -15,4 +15,13 @@ describe('<Separator />', () => {
     const { getByRole } = await render(<Separator />);
     expect(getByRole('separator')).toBeVisible();
   });
+
+  describe('prop: orientation', () => {
+    ['horizontal', 'vertical'].forEach((orientation) => {
+      it(orientation, async () => {
+        const { getByRole } = await render(<Separator orientation={orientation} />);
+        expect(getByRole('separator')).to.have.attribute('aria-orientation', orientation);
+      });
+    });
+  });
 });

packages/react/src/separator/Separator.tsx

@@ -2,10 +2,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { BaseUIComponentProps } from '../utils/types';
+import { mergeReactProps } from '../utils/mergeReactProps';
 import { useComponentRenderer } from '../utils/useComponentRenderer';
 
-const EMPTY_OBJECT = {};
-
 /**
  * A separator element accessible to screen readers.
  * Renders a `<div>` element.
@@ -16,19 +15,51 @@ const Separator = React.forwardRef(function SeparatorComponent(
   props: Separator.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { className, render, ...other } = props;
+  const { className, render, orientation = 'horizontal', ...other } = props;
+
+  const state: Separator.State = React.useMemo(() => ({ orientation }), [orientation]);
+
+  const getSeparatorProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        'aria-orientation': orientation,
+      }),
+    [orientation],
+  );
 
   const { renderElement } = useComponentRenderer({
+    propGetter: getSeparatorProps,
     render: render ?? 'div',
     className,
-    state: EMPTY_OBJECT,
+    state,
     extraProps: { role: 'separator', ...other },
     ref: forwardedRef,
   });
 
   return renderElement();
 });
 
+type Orientation = 'horizontal' | 'vertical';
+
+namespace Separator {
+  export interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The component orientation.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+  }
+
+  export interface State {
+    /**
+     * The component orientation.
+     */
+    orientation: Orientation;
+  }
+}
+
+export { Separator };
+
 Separator.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -43,6 +74,11 @@ Separator.propTypes /* remove-proptypes */ = {
    * returns a class based on the component’s state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.
@@ -51,11 +87,3 @@ Separator.propTypes /* remove-proptypes */ = {
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
-
-namespace Separator {
-  export interface Props extends BaseUIComponentProps<'div', State> {}
-
-  export interface State {}
-}
-
-export { Separator };