feat(separator): rename component

thomasguillot · thomasguillot · commit c58758ab33f8 · 2026-02-06T20:23:18.000Z
diff --git a/packages/components/src/action-card/style.scss b/packages/components/src/action-card/style.scss
@@ -488,7 +488,7 @@
 		}
 	}
 
-	hr:not(.newspack-separator) {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-100;
 		margin: 0;
 	}
diff --git a/packages/components/src/card/style.scss b/packages/components/src/card/style.scss
@@ -133,7 +133,7 @@
 
 	// Thematic Break
 
-	hr:not(.newspack-separator) {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
diff --git a/packages/components/src/divider/README.md b/packages/components/src/divider/README.md
@@ -1,4 +1,4 @@
-# Separator
+# Divider
 
 Horizontal rule component with alignment, variant, and margin options.
 
@@ -15,11 +15,11 @@ Horizontal rule component with alignment, variant, and margin options.
 ## Usage
 
 ```jsx
-import { Separator } from '@newspack/components';
+import { Divider } from 'newspack-components';
 
-<Separator />
+<Divider />
 
-<Separator alignment="full-width" variant="primary" />
+<Divider alignment="full-width" variant="primary" />
 
-<Separator marginBottom={ 48 } marginTop={ 32 } variant="secondary" />
+<Divider marginBottom={ 48 } marginTop={ 32 } variant="secondary" />
 ```
diff --git a/packages/components/src/divider/index.js b/packages/components/src/divider/index.js
@@ -0,0 +1,31 @@
+/**
+ * Divider
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const Divider = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
+	const classes = classNames(
+		'newspack-divider',
+		className,
+		alignment && `newspack-divider--alignment-${ alignment }`,
+		variant && `newspack-divider--variant-${ variant }`
+	);
+
+	const style = {
+		'--divider-margin-bottom': typeof marginBottom === 'number' ? `${ marginBottom }px` : marginBottom,
+		'--divider-margin-top': typeof marginTop === 'number' ? `${ marginTop }px` : marginTop,
+	};
+
+	return <hr className={ classes } style={ style } { ...otherProps } />;
+};
+
+export default Divider;
diff --git a/packages/components/src/divider/style.scss b/packages/components/src/divider/style.scss
@@ -1,23 +1,23 @@
 /**
- * Separator
+ * Divider
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
-.newspack-separator {
+.newspack-divider {
 	background: transparent;
 	border: 0;
 	display: block;
 	height: 1px;
-	margin-bottom: min(32px, var(--separator-margin-bottom, 64px));
+	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
 	margin-left: 0;
 	margin-right: 0;
-	margin-top: min(32px, var(--separator-margin-top, 64px));
+	margin-top: min(32px, var(--divider-margin-top, 64px));
 	padding: 0;
 
 	@media screen and (min-width: 783px) {
-		margin-bottom: var(--separator-margin-bottom, 64px);
-		margin-top: var(--separator-margin-top, 64px);
+		margin-bottom: var(--divider-margin-bottom, 64px);
+		margin-top: var(--divider-margin-top, 64px);
 	}
 
 	// Alignment
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -10,6 +10,7 @@ export { default as Card } from './card';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
 export { default as CustomSelectControl } from './custom-select-control';
+export { default as Divider } from './divider';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
@@ -29,7 +30,6 @@ export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
-export { default as Separator } from './separator';
 export { default as Settings } from './settings';
 export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';
diff --git a/packages/components/src/separator/index.js b/packages/components/src/separator/index.js
diff --git a/packages/components/src/with-wizard-screen/style.scss b/packages/components/src/with-wizard-screen/style.scss
@@ -141,7 +141,7 @@
 
 		// Thematic Break
 
-		hr:not(.newspack-separator) {
+		hr:not(.newspack-divider) {
 			background: wp-colors.$gray-300;
 			border: 0;
 			height: 1px;
diff --git a/src/wizards/audience/components/nrh-settings/index.js b/src/wizards/audience/components/nrh-settings/index.js
@@ -8,7 +8,7 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { AutocompleteWithSuggestions, Button, Grid, Separator, TextControl } from '../../../../../packages/components/src';
+import { AutocompleteWithSuggestions, Button, Divider, Grid, TextControl } from '../../../../../packages/components/src';
 import { useWizardData } from '../../../../../packages/components/src/wizard/store/utils';
 import { WIZARD_STORE_NAMESPACE } from '../../../../../packages/components/src/wizard/store';
 import WizardsSection from '../../../wizards-section';
@@ -100,7 +100,7 @@ const NRHSettings = () => {
 					{ __( 'Save Settings' ) }
 				</Button>
 			</div>
-			<Separator alignment="full-width" variant="tertiary" />
+			<Divider alignment="full-width" variant="tertiary" />
 		</WizardsSection>
 	);
 };
diff --git a/src/wizards/audience/views/setup/setup.js b/src/wizards/audience/views/setup/setup.js
@@ -16,7 +16,7 @@ import {
 	Card,
 	Grid,
 	Notice,
-	Separator,
+	Divider,
 	PluginInstaller,
 	SectionHeader,
 	TextControl,
@@ -125,7 +125,7 @@ export default withWizardScreen(
 					) ) }
 				{ config.enabled && (
 					<Card noBorder>
-						<Separator alignment="full-width" variant="tertiary" />
+						<Divider alignment="full-width" variant="tertiary" />
 						<ActionCard
 							title={ __( 'Present newsletter signup after checkout and registration', 'newspack-plugin' ) }
 							description={ __(
@@ -171,7 +171,7 @@ export default withWizardScreen(
 							toggleOnChange={ value => updateConfig( 'oauth_redirect_to_ras', value ) }
 						/>
 
-						<Separator alignment="full-width" variant="tertiary" />
+						<Divider alignment="full-width" variant="tertiary" />
 
 						<SectionHeader
 							title={ __( 'Email Service Provider (ESP) Advanced Settings', 'newspack-plugin' ) }
@@ -314,7 +314,7 @@ export default withWizardScreen(
 				) }
 				{ newspackAudience.can_use_salesforce && (
 					<Card noBorder>
-						<Separator alignment="full-width" variant="tertiary" />
+						<Divider alignment="full-width" variant="tertiary" />
 						<Salesforce />
 					</Card>
 				) }
diff --git a/src/wizards/componentsDemo/index.js b/src/wizards/componentsDemo/index.js
@@ -38,7 +38,7 @@ import {
 	PluginToggle,
 	ProgressBar,
 	SelectControl,
-	Separator,
+	Divider,
 	Waiting,
 	WebPreview,
 } from '../../../packages/components/src';
@@ -123,7 +123,7 @@ class ComponentsDemo extends Component {
 							selectedItems={ selectedPostForAutocompleteWithSuggestions }
 						/>
 
-						<Separator marginTop={ 32 } marginBottom={ 32 } />
+						<Divider marginTop={ 32 } marginBottom={ 32 } />
 
 						<h2>{ __( 'Autocomplete with Suggestions (multi-select)', 'newspack-plugin' ) }</h2>
 						<AutocompleteWithSuggestions
@@ -154,7 +154,7 @@ class ComponentsDemo extends Component {
 							selectedItems={ selectedPostForAutocompleteWithLatestPosts }
 						/>
 
-						<Separator marginTop={ 32 } marginBottom={ 32 } />
+						<Divider marginTop={ 32 } marginBottom={ 32 } />
 
 						<h2>{ __( 'Autocomplete with Latest Posts (multi-select)', 'newspack-plugin' ) }</h2>
 						<AutocompleteWithLatestPosts
@@ -613,7 +613,7 @@ class ComponentsDemo extends Component {
 								<Button>{ __( 'Default', 'newspack-plugin' ) }</Button>
 								<Button isLink>{ __( 'isLink', 'newspack-plugin' ) }</Button>
 							</Card>
-							<Separator variant="tertiary" />
+							<Divider variant="tertiary" />
 							<p>
 								<strong>{ __( 'Disabled', 'newspack-plugin' ) }</strong>
 							</p>
@@ -632,7 +632,7 @@ class ComponentsDemo extends Component {
 									{ __( 'isLink', 'newspack-plugin' ) }
 								</Button>
 							</Card>
-							<Separator variant="tertiary" />
+							<Divider variant="tertiary" />
 							<p>
 								<strong>{ __( 'Small', 'newspack-plugin' ) }</strong>
 							</p>
diff --git a/src/wizards/newspack/views/dashboard/index.tsx b/src/wizards/newspack/views/dashboard/index.tsx
@@ -18,7 +18,7 @@ import sections from './sections';
 import BrandHeader from '../../components/brand-header';
 import QuickActions from '../../components/quick-actions';
 import SiteStatuses from '../../components/site-statuses';
-import { GlobalNotices, Notice, Separator, Wizard } from '../../../../../packages/components/src';
+import { Divider, GlobalNotices, Notice, Wizard } from '../../../../../packages/components/src';
 
 const {
 	newspack_aux_data: { is_debug_mode: isDebugMode = false },
@@ -36,7 +36,7 @@ function Dashboard() {
 					<>
 						<BrandHeader />
 						<SiteStatuses />
-						<Separator variant="tertiary" />
+						<Divider variant="tertiary" />
 						<QuickActions />
 					</>
 				) }
diff --git a/src/wizards/newspack/views/dashboard/sections.tsx b/src/wizards/newspack/views/dashboard/sections.tsx
@@ -16,7 +16,7 @@ import { Icon } from '@wordpress/icons';
  */
 /* eslint import/namespace: ['error', { allowComputed: true }] */
 import { icons } from '../../components/icons';
-import { Card, Grid, Separator } from '../../../../../packages/components/src';
+import { Card, Divider, Grid } from '../../../../../packages/components/src';
 
 const {
 	newspackDashboard: { sections: dashSections },
@@ -38,7 +38,7 @@ export default [
 			return dashSectionsKeys.map( sectionKey => {
 				return (
 					<Fragment key={ sectionKey }>
-						<Separator variant="tertiary" />
+						<Divider variant="tertiary" />
 						<div className="newspack-dashboard__section">
 							<h3>{ dashSections[ sectionKey ].title }</h3>
 							<p>{ dashSections[ sectionKey ].desc }</p>
diff --git a/src/wizards/newspack/views/settings/connections/webhooks/modals/upsert.tsx b/src/wizards/newspack/views/settings/connections/webhooks/modals/upsert.tsx
@@ -14,7 +14,7 @@ import { CheckboxControl as WpCheckboxControl, TextControl } from '@wordpress/co
  */
 import { ENDPOINTS_CACHE_KEY } from '../constants';
 import { WizardApiError } from '../../../../../../errors';
-import { Card, Button, Notice, Modal, Grid, Separator } from '../../../../../../../../packages/components/src';
+import { Card, Button, Notice, Modal, Grid, Divider } from '../../../../../../../../packages/components/src';
 import { validateEndpoint, validateUrl } from '../utils';
 
 /**
@@ -153,7 +153,7 @@ const Upsert = ( {
 						</Button>
 					</Card>
 				</Grid>
-				<Separator alignment="full-width" variant="tertiary" />
+				<Divider alignment="full-width" variant="tertiary" />
 				<TextControl
 					label={ __( 'Label (optional)', 'newspack-plugin' ) }
 					help={ __( 'A label to help you identify this endpoint. It will not be sent to the endpoint.', 'newspack-plugin' ) }

Original file line number	Diff line number	Diff line change
`@@ -488,7 +488,7 @@`
`488`	`488`	`}`
`489`	`489`	`}`
`490`	`490`
`491`		`- hr:not(.newspack-separator) {`
	`491`	`+ hr:not(.newspack-divider) {`
`492`	`492`	`background: wp-colors.$gray-100;`
`493`	`493`	`margin: 0;`
`494`	`494`	`}`