Divider: migrate from reakit to @ariakit/react (#55622)

* `components/Divider`: refactor from `reakit` to `@ariakit/react` * add changelog entry * types: exlude `as` & `render` from `SeparatorProps` * storybook: disable `wrapElement` controls * storybook: remove `ref` from props table * move changelog entry to UNRELEASED
WordPress · Nov 6, 2023 · e848ed2 · e848ed2 · github-actions · Nov 6, 2023
1 parent f63b75a
commit e848ed2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622))
+
 ## 25.11.0 (2023-11-02)
 
 ### Enhancements

diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { Separator } from 'reakit';
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -20,8 +20,8 @@ function UnconnectedDivider(
 	const contextProps = useContextSystem( props, 'Divider' );
 
 	return (
-		<Separator
-			as={ DividerView }
+		<Ariakit.Separator
+			render={ <DividerView /> }
 			{ ...contextProps }
 			ref={ forwardedRef }
 		/>

diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx
@@ -23,6 +23,14 @@ const meta: Meta< typeof Divider > = {
 		marginEnd: {
 			control: { type: 'text' },
 		},
+		wrapElement: {
+			control: { type: null },
+		},
+		ref: {
+			table: {
+				disable: true,
+			},
+		},
 	},
 	parameters: {
 		controls: { expanded: true },

diff --git a/packages/components/src/divider/types.ts b/packages/components/src/divider/types.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { SeparatorProps } from 'reakit';
+import type { SeparatorProps } from '@ariakit/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import type { SpaceInput } from '../utils/space';
 
 export type DividerProps = Omit<
 	SeparatorProps,
-	'children' | 'unstable_system' | 'orientation'
+	'children' | 'unstable_system' | 'orientation' | 'as' | 'render'
 > & {
 	/**
 	 * Adjusts all margins on the inline dimension.