Rename delimiter to separator

src/components/utils/popover/components/popover-item/index.ts

@@ -1,5 +1,5 @@
 import { PopoverItemDefault } from './popover-item-default/popover-item-default';
-import { PopoverItemDelimiter } from './popover-item-delimiter/popover-item-delimiter';
+import { PopoverItemSeparator } from './popover-item-separator/popover-item-separator';
 import { PopoverItem } from './popover-item';
 
 export * from './popover-item-default/popover-item-default.const';
@@ -7,6 +7,6 @@ export * from './popover-item.types';
 
 export {
   PopoverItemDefault,
-  PopoverItemDelimiter,
+  PopoverItemSeparator,
   PopoverItem
 };

src/components/utils/popover/components/popover-item/popover-item-separator/popover-item-separator.const.ts

@@ -1,12 +1,12 @@
 import { bem } from '../../../../bem';
 
 /**
- * Popover delimiter block CSS class constructor
+ * Popover separator block CSS class constructor
  */
-const className = bem('ce-popover-item-delimiter');
+const className = bem('ce-popover-item-separator');
 
 /**
- * CSS class names to be used in popover delimiter class
+ * CSS class names to be used in popover separator class
  */
 export const css = {
   container: className(),

src/components/utils/popover/components/popover-item/popover-item-separator/popover-item-separator.ts

@@ -1,11 +1,11 @@
 import Dom from '../../../../../dom';
 import { PopoverItem } from '../popover-item';
-import { css } from './popover-item-delimiter.const';
+import { css } from './popover-item-separator.const';
 
 /**
- * Represents popover delimiter node
+ * Represents popover separator node
  */
-export class PopoverItemDelimiter extends PopoverItem {
+export class PopoverItemSeparator extends PopoverItem {
   /**
    * Html elements
    */
@@ -26,7 +26,7 @@ export class PopoverItemDelimiter extends PopoverItem {
   }
 
   /**
-   * Returns popover delimiter root element
+   * Returns popover separator root element
    */
   public getElement(): HTMLElement {
     return this.nodes.root;

src/components/utils/popover/components/popover-item/popover-item.types.ts

@@ -1,13 +1,13 @@
 
 /**
- * Represents popover item delimiter.
+ * Represents popover item separator.
  * Special item type that is used to separate items in the popover.
  */
-export interface PopoverItemDelimiterParams {
+export interface PopoverItemSeparatorParams {
   /**
    * Item type
    */
-  type: 'delimiter'
+  type: 'separator'
 }
 
 /**
@@ -109,7 +109,7 @@ export interface PopoverItemWithChildrenParams extends PopoverItemDefaultBasePar
 }
 
 /**
- * Default, non-delimiter popover item type
+ * Default, non-separator popover item type
  */
 export type PopoverItemDefaultParams =
   PopoverItemWithConfirmationParams |
@@ -119,5 +119,5 @@ export type PopoverItemDefaultParams =
 /**
  * Represents single popover item
  */
-export type PopoverItemParams = PopoverItemDefaultParams |  PopoverItemDelimiterParams;
+export type PopoverItemParams = PopoverItemDefaultParams |  PopoverItemSeparatorParams;
 

src/components/utils/popover/popover-abstract.ts

@@ -1,4 +1,4 @@
-import { PopoverItem, PopoverItemDefault, PopoverItemDelimiter } from './components/popover-item';
+import { PopoverItem, PopoverItemDefault, PopoverItemSeparator } from './components/popover-item';
 import Dom from '../../dom';
 import { SearchInput, SearchInputEvent, SearchableItem } from './components/search-input';
 import EventsDispatcher from '../events';
@@ -28,7 +28,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
 
   /**
    * List of usual interactive popover items that can be clicked, hovered, etc.
-   * (excluding delimiters)
+   * (excluding separators)
    */
   protected get itemsInteractive(): PopoverItemDefault[] {
     return this.items.filter(item => item instanceof PopoverItemDefault) as PopoverItemDefault[];
@@ -155,8 +155,8 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
   protected buildItems(items: PopoverItemParams[]): Array<PopoverItem> {
     return items.map(item => {
       switch (item.type) {
-        case 'delimiter':
-          return new PopoverItemDelimiter();
+        case 'separator':
+          return new PopoverItemSeparator();
         default:
           return new PopoverItemDefault(item);
       }
@@ -197,8 +197,8 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
 
         if (item instanceof PopoverItemDefault) {
           isHidden = !data.items.includes(item);
-        } else if (item instanceof PopoverItemDelimiter) {
-          /** Should hide delimiters if nothing found message displayed or if there is some search query applied */
+        } else if (item instanceof PopoverItemSeparator) {
+          /** Should hide separators if nothing found message displayed or if there is some search query applied */
           isHidden = isNothingFound || !isEmptyQuery;
         }
         item.toggleHidden(isHidden);

src/styles/popover.css

@@ -196,7 +196,7 @@
  */
 
 
- .ce-popover-item-delimiter {
+ .ce-popover-item-separator {
    padding: 4px 3px;
 
    &--hidden {

test/cypress/tests/utils/popover.cy.ts

@@ -459,7 +459,7 @@ describe('Popover', () => {
   });
 
 
-  it('should display default (non-delimiter) items without specifying type: default', () => {
+  it('should display default (non-separator) items without specifying type: default', () => {
     /** Tool class to test how it is displayed inside block tunes popover */
     class TestTune {
       public static isTune = true;
@@ -512,7 +512,7 @@ describe('Popover', () => {
       .should('be.visible');
   });
 
-  it('should display delimiter', () => {
+  it('should display separator', () => {
     /** Tool class to test how it is displayed inside block tunes popover */
     class TestTune {
       public static isTune = true;
@@ -529,7 +529,7 @@ describe('Popover', () => {
             name: 'test-item',
           },
           {
-            type: 'delimiter',
+            type: 'separator',
           },
         ];
       }
@@ -569,14 +569,14 @@ describe('Popover', () => {
       .get('[data-item-name="test-item"]')
       .should('be.visible');
 
-    /** Check delimiter displayed */
+    /** Check separator displayed */
     cy.get('[data-cy=editorjs]')
       .get('.ce-popover__container')
-      .get('.ce-popover-item-delimiter')
+      .get('.ce-popover-item-separator')
       .should('be.visible');
   });
 
-  it('should perform keyboard navigation between items ignoring delimiters', () => {
+  it('should perform keyboard navigation between items ignoring separators', () => {
     /** Tool class to test how it is displayed inside block tunes popover */
     class TestTune {
       public static isTune = true;
@@ -592,7 +592,7 @@ describe('Popover', () => {
             name: 'test-item-1',
           },
           {
-            type: 'delimiter',
+            type: 'separator',
           },
           {
             type: 'default',
@@ -663,7 +663,7 @@ describe('Popover', () => {
       .should('exist');
   });
 
-  it('should perform keyboard navigation between items ignoring delimiters when search query is applied', () => {
+  it('should perform keyboard navigation between items ignoring separators when search query is applied', () => {
     /** Tool class to test how it is displayed inside block tunes popover */
     class TestTune {
       public static isTune = true;
@@ -679,7 +679,7 @@ describe('Popover', () => {
             name: 'test-item-1',
           },
           {
-            type: 'delimiter',
+            type: 'separator',
           },
           {
             type: 'default',
@@ -719,10 +719,10 @@ describe('Popover', () => {
       .get('.ce-toolbar__settings-btn')
       .click();
 
-    /** Check delimiter displayed */
+    /** Check separator displayed */
     cy.get('[data-cy=editorjs]')
       .get('.ce-popover__container')
-      .get('.ce-popover-item-delimiter')
+      .get('.ce-popover-item-separator')
       .should('be.visible');
 
     /** Enter search query */
@@ -730,10 +730,10 @@ describe('Popover', () => {
       .get('[data-cy=block-tunes] .cdx-search-field__input')
       .type('Tune');
 
-    /** Check delimiter not displayed */
+    /** Check separator not displayed */
     cy.get('[data-cy=editorjs]')
       .get('.ce-popover__container')
-      .get('.ce-popover-item-delimiter')
+      .get('.ce-popover-item-separator')
       .should('not.be.visible');
 
     /** Press Tab */

types/tools/tool-settings.d.ts

@@ -1,6 +1,6 @@
 import { ToolConfig } from './tool-config';
 import { ToolConstructable, BlockToolData } from './index';
-import { PopoverItemDefaultParams, PopoverItemDelimiterParams, PopoverItemParams } from '../configs';
+import { PopoverItemDefaultParams, PopoverItemSeparatorParams, PopoverItemParams } from '../configs';
 
 /**
  * Tool may specify its toolbox configuration
@@ -29,7 +29,7 @@ export interface ToolboxConfigEntry {
 }
 
 /**
- * Represents single interactive (non-delimiter) Tunes Menu item
+ * Represents single interactive (non-separator) Tunes Menu item
  */
 export type TunesMenuConfigDefaultItem = PopoverItemDefaultParams & {
   /**
@@ -53,14 +53,14 @@ export type TunesMenuConfigDefaultItem = PopoverItemDefaultParams & {
 }
 
 /**
- * Represents single delimiter Tunes Menu item
+ * Represents single separator Tunes Menu item
  */
-export type TunesMenuConfigDelimiterItem = PopoverItemDelimiterParams;
+export type TunesMenuConfigSeparatorItem = PopoverItemSeparatorParams;
 
 /**
  * Union of all Tunes Menu item types
  */
-export type TunesMenuConfigItem = TunesMenuConfigDefaultItem | TunesMenuConfigDelimiterItem;
+export type TunesMenuConfigItem = TunesMenuConfigDefaultItem | TunesMenuConfigSeparatorItem;
 
 /**
  * Tool may specify its tunes configuration