diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts index 2ba5f7dbe..630c00c04 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts @@ -353,7 +353,6 @@ export class Example12 { formatter: () => `
`, cellMenu: { hideCloseButton: false, - width: 175, commandTitle: 'Commands', commandItems: [ { diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts index 2d6e84df8..025a6611e 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts @@ -313,7 +313,6 @@ export class Example14 { formatter: () => `
`, cellMenu: { hideCloseButton: false, - width: 175, commandTitle: 'Commands', commandItems: [ { diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index f26e3d366..607cfcf7d 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -29,6 +29,7 @@ const gridOptionsMock = { autoAlignSideOffset: 0, hideMenuOnScroll: true, maxHeight: 'none', + maxWidth: 'none', width: 175, onExtensionRegistered: jest.fn(), onCommand: () => { }, @@ -156,7 +157,6 @@ describe('CellMenu Plugin', () => { autoAdjustDropOffset: 0, autoAlignSideOffset: 0, hideMenuOnScroll: true, - maxHeight: 'none', width: 'auto', }); }); @@ -273,11 +273,11 @@ describe('CellMenu Plugin', () => { expect(cellMenuElm.classList.contains('dropright')); expect(commandListElm.querySelectorAll('.slick-cell-menu-item').length).toBe(5); expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces( - `
- + `
+
+ +
  • Command 1 @@ -328,7 +328,7 @@ describe('CellMenu Plugin', () => { it('should expect a Cell Menu to be created when cell is clicked with a list of commands defined but without "Command 1" when "itemVisibilityOverride" and "itemUsabilityOverride" return false', () => { plugin.dispose(); - plugin.init(); + plugin.init({ maxHeight: 290 }); (columnsMock[3].cellMenu.commandItems[1] as MenuCommandItem).itemVisibilityOverride = () => false; (columnsMock[3].cellMenu.commandItems[1] as MenuCommandItem).itemUsabilityOverride = () => false; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -341,6 +341,7 @@ describe('CellMenu Plugin', () => { const commandIconElm1 = commandItemElm1.querySelector('.slick-cell-menu-icon') as HTMLDivElement; expect(closeBtnElm).toBeTruthy(); + expect(cellMenuElm.style.maxHeight).toBe('290px'); expect(commandListElm.querySelectorAll('.slick-cell-menu-item').length).toBe(4); expect(commandItemElm1.classList.contains('orange')).toBeTruthy(); expect(commandIconElm1.className).toBe('slick-cell-menu-icon'); @@ -350,7 +351,7 @@ describe('CellMenu Plugin', () => { it('should create a Cell Menu and a 2nd button item usability callback returns false and expect button to be disabled', () => { plugin.dispose(); - plugin.init(); + plugin.init({ maxWidth: 310 }); (columnsMock[3].cellMenu.commandItems[1] as MenuCommandItem).itemVisibilityOverride = () => true; (columnsMock[3].cellMenu.commandItems[1] as MenuCommandItem).itemUsabilityOverride = () => false; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -363,6 +364,7 @@ describe('CellMenu Plugin', () => { const commandIconElm1 = commandItemElm1.querySelector('.slick-cell-menu-icon') as HTMLDivElement; expect(closeBtnElm).toBeTruthy(); + expect(cellMenuElm.style.maxWidth).toBe('310px'); expect(commandListElm.querySelectorAll('.slick-cell-menu-item').length).toBe(5); expect(commandItemElm1.classList.contains('orange')).toBeTruthy(); expect(commandIconElm1.className).toBe('slick-cell-menu-icon'); @@ -662,11 +664,11 @@ describe('CellMenu Plugin', () => { expect(optionListElm.querySelectorAll('.slick-cell-menu-item').length).toBe(5); expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces( - `
    - + `
    +
    + +
  • Option 1 diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index 35426b130..9ac733ec7 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -180,7 +180,6 @@ describe('ContextMenu Plugin', () => { autoAlignSideOffset: 0, commandItems: [], hideMenuOnScroll: false, - maxHeight: 'none', width: 'auto', optionShownOverColumnIds: [], commandShownOverColumnIds: [], @@ -304,11 +303,11 @@ describe('ContextMenu Plugin', () => { expect(contextMenuElm.classList.contains('dropright')); expect(commandListElm.querySelectorAll('.slick-context-menu-item').length).toBe(5); expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces( - `
    - + `
    +
    + +
  • Command 1 @@ -415,7 +414,7 @@ describe('ContextMenu Plugin', () => { it('should create a Context Menu and a 2nd item is "disabled" and expect button to be disabled', () => { plugin.dispose(); - plugin.init({ commandItems: deepCopy(commandItemsMock) }); + plugin.init({ commandItems: deepCopy(commandItemsMock), maxHeight: 290 }); (gridOptionsMock.contextMenu.commandItems[1] as MenuCommandItem).disabled = true; gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); @@ -424,6 +423,7 @@ describe('ContextMenu Plugin', () => { const commandItemElm2 = commandListElm.querySelector('[data-command="command2"]') as HTMLDivElement; const commandContentElm2 = commandItemElm2.querySelector('.slick-context-menu-content') as HTMLDivElement; + expect(contextMenuElm.style.maxHeight).toBe('290px'); expect(commandListElm.querySelectorAll('.slick-context-menu-item').length).toBe(5); expect(commandContentElm2.textContent).toBe('Command 2'); expect(commandItemElm2.classList.contains('slick-context-menu-item-disabled')).toBeTruthy(); @@ -431,7 +431,7 @@ describe('ContextMenu Plugin', () => { it('should create a Context Menu and expect button to be disabled when command property is hidden', () => { plugin.dispose(); - plugin.init({ commandItems: deepCopy(commandItemsMock) }); + plugin.init({ commandItems: deepCopy(commandItemsMock), maxWidth: 310 }); (gridOptionsMock.contextMenu.commandItems[1] as MenuCommandItem).hidden = true; gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); @@ -440,6 +440,7 @@ describe('ContextMenu Plugin', () => { const commandItemElm2 = commandListElm.querySelector('[data-command="command2"]') as HTMLDivElement; const commandContentElm2 = commandItemElm2.querySelector('.slick-context-menu-content') as HTMLDivElement; + expect(contextMenuElm.style.maxWidth).toBe('310px'); expect(commandListElm.querySelectorAll('.slick-context-menu-item').length).toBe(5); expect(commandContentElm2.textContent).toBe('Command 2'); expect(commandItemElm2.classList.contains('slick-context-menu-item-hidden')).toBeTruthy(); @@ -1226,11 +1227,11 @@ describe('ContextMenu Plugin', () => { expect(optionListElm.querySelectorAll('.slick-context-menu-item').length).toBe(5); expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces( - `
    - + `
    +
    + +
  • Option 1 diff --git a/packages/common/src/extensions/extensionCommonUtils.ts b/packages/common/src/extensions/extensionCommonUtils.ts index 4963fecb2..fb3be3ca6 100644 --- a/packages/common/src/extensions/extensionCommonUtils.ts +++ b/packages/common/src/extensions/extensionCommonUtils.ts @@ -10,13 +10,10 @@ export function addCloseButtomElement(this: SlickColumnPicker | SlickGridMenu, m const context: any = this; const closePickerButtonElm = createDomElement('button', { type: 'button', className: 'close', + innerHTML: '×', dataset: { dismiss: context instanceof SlickColumnPicker ? 'slick-columnpicker' : 'slick-grid-menu' } }); closePickerButtonElm.setAttribute('aria-label', 'Close'); - - const closeSpanElm = createDomElement('span', { className: 'close', innerHTML: '×' }); - closeSpanElm.setAttribute('aria-hidden', 'true'); - closePickerButtonElm.appendChild(closeSpanElm); menuElm.appendChild(closePickerButtonElm); } diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index b995373d4..319d7ca88 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -38,12 +38,12 @@ export class MenuBaseClass, type: MenuType, item: ExtractMenuType, columnDef?: Column) => void ) { if (args && commandOrOptionItems && menuOptions) { + const menuHeaderElm = this._menuElm?.querySelector(`.${itemType}-header`) ?? createDomElement('div', { className: `${itemType}-header` }); // user could pass a title on top of the Commands/Options section - const titleProp = itemType === 'command' ? 'commandTitle' : 'optionTitle'; + const titleProp: 'commandTitle' | 'optionTitle' = `${itemType}Title`; if ((menuOptions as CellMenu | ContextMenu)?.[titleProp]) { - this[`_${itemType}TitleElm`] = createDomElement('div', { - className: 'title', - textContent: (menuOptions as never)[titleProp], - }); - commandOrOptionMenuElm.appendChild(this[`_${itemType}TitleElm`]!); + this[`_${itemType}TitleElm`] = createDomElement('span', { className: 'title', textContent: (menuOptions as never)[titleProp] }); + menuHeaderElm.appendChild(this[`_${itemType}TitleElm`]!); + menuHeaderElm.classList.add('with-title'); + } else { + menuHeaderElm.classList.add('no-title'); } + commandOrOptionMenuElm.appendChild(menuHeaderElm); for (const item of commandOrOptionItems) { this.populateSingleCommandOrOptionItem(itemType, menuOptions, commandOrOptionMenuElm, item, args, itemClickCallback); } diff --git a/packages/common/src/extensions/menuFromCellBaseClass.ts b/packages/common/src/extensions/menuFromCellBaseClass.ts index 4551ffeb7..60c3a21a9 100644 --- a/packages/common/src/extensions/menuFromCellBaseClass.ts +++ b/packages/common/src/extensions/menuFromCellBaseClass.ts @@ -80,35 +80,38 @@ export class MenuFromCellBaseClass extends Men } } - const maxHeight = isNaN(this.addonOptions.maxHeight as any) ? this.addonOptions.maxHeight : `${this.addonOptions.maxHeight ?? 0}px`; - // create a new Menu this._menuElm = createDomElement('div', { + className: `${this._menuCssPrefix} ${this.gridUid}`, style: { display: 'none', left: `${event.pageX}px`, top: `${event.pageY + 5}px`, width: findWidthOrDefault(this.addonOptions?.width), } }); - this._menuElm.classList.add(this._menuCssPrefix); - this._menuElm.classList.add(this.gridUid); + + const maxHeight = isNaN(this.addonOptions.maxHeight as any) ? this.addonOptions.maxHeight : `${this.addonOptions.maxHeight ?? 0}px`; + const maxWidth = isNaN(this.addonOptions.maxWidth as any) ? this.addonOptions.maxWidth : `${this.addonOptions.maxWidth ?? 0}px`; + if (maxHeight) { this._menuElm.style.maxHeight = maxHeight as string; } + if (maxWidth) { + this._menuElm.style.maxWidth = maxWidth as string; + } - const closeButtonElm = createDomElement('button', { className: 'close', type: 'button', dataset: { dismiss: this._menuCssPrefix } }); + const closeButtonElm = createDomElement('button', { className: 'close', type: 'button', innerHTML: '×', dataset: { dismiss: this._menuCssPrefix } }); closeButtonElm.setAttribute('aria-label', 'Close'); - const closeSpanElm = createDomElement('span', { className: 'close', innerHTML: '×' }); - closeSpanElm.setAttribute('aria-hidden', 'true'); - closeButtonElm.appendChild(closeSpanElm); - // -- Option List section if (!(this.addonOptions as CellMenu | ContextMenu).hideOptionSection && isColumnOptionAllowed && optionItems.length > 0) { const optionMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-option-list` }); if (!this.addonOptions.hideCloseButton) { this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent) => this.handleCloseButtonClicked(e)) as EventListener); - this._menuElm.appendChild(closeButtonElm); + const optionMenuHeaderElm = createDomElement('div', { className: 'option-header' }); + optionMenuHeaderElm?.appendChild(closeButtonElm); + optionMenuElm.appendChild(optionMenuHeaderElm); + optionMenuHeaderElm.classList.add('with-close'); } this._menuElm.appendChild(optionMenuElm); this.populateCommandOrOptionItems( @@ -126,7 +129,10 @@ export class MenuFromCellBaseClass extends Men const commandMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-command-list` }); if (!this.addonOptions.hideCloseButton && (!isColumnOptionAllowed || optionItems.length === 0 || (this.addonOptions as CellMenu | ContextMenu).hideOptionSection)) { this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent) => this.handleCloseButtonClicked(e)) as EventListener); - this._menuElm.appendChild(closeButtonElm); + const commandMenuHeaderElm = createDomElement('div', { className: 'command-header' }); + commandMenuHeaderElm?.appendChild(closeButtonElm); + commandMenuElm.appendChild(commandMenuHeaderElm); + commandMenuHeaderElm.classList.add('with-close'); } this._menuElm.appendChild(commandMenuElm); this.populateCommandOrOptionItems( diff --git a/packages/common/src/extensions/slickCellMenu.ts b/packages/common/src/extensions/slickCellMenu.ts index 173e30206..7feb46da3 100644 --- a/packages/common/src/extensions/slickCellMenu.ts +++ b/packages/common/src/extensions/slickCellMenu.ts @@ -37,7 +37,6 @@ export class SlickCellMenu extends MenuFromCellBaseClass { autoAdjustDropOffset: 0, autoAlignSideOffset: 0, hideMenuOnScroll: true, - maxHeight: 'none', width: 'auto', } as unknown as CellMenuOption; pluginName: 'CellMenu' = 'CellMenu'; diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index 8384c7816..a071cc1d3 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -41,7 +41,6 @@ export class SlickContextMenu extends MenuFromCellBaseClass { autoAdjustDropOffset: 0, autoAlignSideOffset: 0, hideMenuOnScroll: false, - maxHeight: 'none', width: 'auto', optionShownOverColumnIds: [], commandShownOverColumnIds: [], diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index aa74b54f5..43af7b1f4 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -226,26 +226,17 @@ export class SlickGridMenu extends MenuBaseClass { this._menuElm.classList.add('slick-grid-menu', this._gridUid); this._menuElm.style.display = 'none'; - // add Close button - addCloseButtomElement.call(this, this._menuElm); - this._commandMenuElm = createDomElement('div', { className: 'slick-grid-menu-command-list' }); this._menuElm.appendChild(this._commandMenuElm); - this.populateCommandOrOptionItems( - 'command', - this._gridMenuOptions, - this._commandMenuElm, - (this._gridMenuOptions?.commandItems || this._gridMenuOptions?.customItems) || [] as any[], - { - grid: this.grid, - menu: this._menuElm, - columns: this.columns, - allColumns: this.getAllColumns(), - visibleColumns: this.getVisibleColumns() - } as GridMenuEventWithElementCallbackArgs, - this.handleMenuItemCommandClick, - ); + this.recreateCommandList(this._gridMenuOptions, { + grid: this.grid, + menu: this._menuElm, + columns: this.columns, + allColumns: this.getAllColumns(), + visibleColumns: this.getVisibleColumns() + } as GridMenuEventWithElementCallbackArgs); + this.createColumnPickerContainer(); document.body.appendChild(this._menuElm); @@ -394,14 +385,7 @@ export class SlickGridMenu extends MenuBaseClass { const addonOptions: GridMenu = { ...this._gridMenuOptions, ...options }; // merge optional picker option addonOptions.customTitle = addonOptions.commandTitle; - this.populateCommandOrOptionItems( - 'command', - addonOptions, - this._commandMenuElm, - (addonOptions?.commandItems || addonOptions?.customItems) || [] as any[], - callbackArgs, - this.handleMenuItemCommandClick , - ); + this.recreateCommandList(addonOptions, callbackArgs); updateColumnPickerOrder.call(this); this._columnCheckboxes = []; @@ -818,4 +802,23 @@ export class SlickGridMenu extends MenuBaseClass { event.preventDefault(); event.stopPropagation(); } + + /** Re/Create Command List by adding title, close & list of commands */ + recreateCommandList(addonOptions: GridMenu, callbackArgs: GridMenuEventWithElementCallbackArgs) { + // add Close button + const commandMenuHeaderElm = createDomElement('div', { className: 'command-header' }); + commandMenuHeaderElm.classList.add('with-close'); + addCloseButtomElement.call(this, commandMenuHeaderElm); + this._commandMenuElm.appendChild(commandMenuHeaderElm); + + // populate the command list + this.populateCommandOrOptionItems( + 'command', + addonOptions, + this._commandMenuElm, + (addonOptions?.commandItems || addonOptions?.customItems) || [] as any[], + callbackArgs, + this.handleMenuItemCommandClick, + ); + } } \ No newline at end of file diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts index 1b2322755..84c1f4711 100644 --- a/packages/common/src/interfaces/cellMenuOption.interface.ts +++ b/packages/common/src/interfaces/cellMenuOption.interface.ts @@ -44,9 +44,12 @@ export interface CellMenuOption { /** Defaults to false, Hide the Options section even when the optionItems array is filled */ hideOptionSection?: boolean; - /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */ + /** Maximum height that the drop menu can have, it could be a number (250) or text ("none") */ maxHeight?: number | string; + /** Maximum width that the drop menu can have, it could be a number (250) or text ("none") */ + maxWidth?: number | string; + /** * Width that the drop menu can have. * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$cell-menu-min-width` diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts index 0dbab229b..5cf6347c4 100644 --- a/packages/common/src/interfaces/contextMenuOption.interface.ts +++ b/packages/common/src/interfaces/contextMenuOption.interface.ts @@ -89,9 +89,12 @@ export interface ContextMenuOption { /** icon for the "Export to Text Delimited" command */ iconExportTextDelimitedCommand?: string; - /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */ + /** Maximum height that the drop menu can have, it could be a number (250) or text ("none") */ maxHeight?: number | string; + /** Maximum width that the drop menu can have, it could be a number (250) or text ("none") */ + maxWidth?: number | string; + /** * Width that the drop menu can have. * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$context-menu-min-width` diff --git a/packages/common/src/services/domUtilities.ts b/packages/common/src/services/domUtilities.ts index 098207477..49884b329 100644 --- a/packages/common/src/services/domUtilities.ts +++ b/packages/common/src/services/domUtilities.ts @@ -251,8 +251,14 @@ export function findFirstElementAttribute(inputElm: Element | null | undefined, return null; } -export function findWidthOrDefault(inputWidth?: number | string, defaultVal = 'auto'): string { - return (/^[0-9]+$/i.test(`${inputWidth}`) ? `${+(inputWidth as number)}px` : inputWidth as string) || defaultVal; +/** + * Provide a width as a number or a string and find associated value in valid css style format or use default value when provided (or "auto" otherwise). + * @param {Number|String} inputWidth - input width, could be a string or number + * @param {Number | String} defaultValue [defaultValue=auto] - optional default value or use "auto" when nothing is provided + * @returns {String} string output + */ +export function findWidthOrDefault(inputWidth?: number | string, defaultValue = 'auto'): string { + return (/^[0-9]+$/i.test(`${inputWidth}`) ? `${+(inputWidth as number)}px` : inputWidth as string) || defaultValue; } /** diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 5f467b375..764d910ff 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -80,8 +80,7 @@ $column-picker-checkbox-width: 13px !default; $column-picker-close-btn-font-size: 23px !default; $column-picker-title-font-size: 18px !default; $cell-menu-icon-margin-right: 6px !default; -$cell-menu-close-btn-height: 14px !default; -$cell-menu-close-btn-margin: -8px 1px 1px 1px !default; +$cell-menu-close-btn-height: 18px !default; $cell-menu-min-width: 75px !default; $cell-menu-title-font-size: 18px !default; $context-menu-item-font-size: 16px !default; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 76ccb2836..c0b7932ce 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -319,15 +319,15 @@ $grid-menu-checkbox-width: 13px !default; $grid-menu-close-btn-cursor: pointer !default; $grid-menu-close-btn-bg-color: #ffffff !default; $grid-menu-close-btn-border: 0px solid #9c9c9c !default; -$grid-menu-close-btn-color: $column-picker-close-btn-color !default; -$grid-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; +$grid-menu-close-btn-color: darken($column-picker-close-btn-color, 20%) !default; $grid-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; $grid-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; -$grid-menu-close-btn-height: 21px !default; -$grid-menu-close-btn-width: 15px !default; +$grid-menu-close-btn-height: 18px !default; +$grid-menu-close-btn-width: 18px !default; $grid-menu-close-btn-margin: 1px !default; $grid-menu-close-btn-padding: 0px !default; -$grid-menu-close-btn-opacity: 0.9 !default; +$grid-menu-close-btn-opacity: 0.5 !default; +$grid-menu-close-btn-opacity-hover: 1 !default; $grid-menu-close-btn-position-right: 5px !default; $grid-menu-close-btn-position-top: 0px !default; $grid-menu-label-margin: 4px !default; @@ -355,6 +355,7 @@ $grid-menu-title-border-bottom: solid 1px #d6d6d6 !default $grid-menu-title-font-size: calc(#{$grid-menu-item-font-size} + 2px) !default; $grid-menu-title-font-weight: normal !default; $grid-menu-title-margin-bottom: 10px !default; +$grid-menu-title-margin-right: 7px !default; $grid-menu-title-width: calc(100% - #{$grid-menu-close-btn-width} - 10px) !default; $grid-menu-z-index: 500 !default; @@ -363,16 +364,16 @@ $cell-menu-bg-color: #ffffff !default; $cell-menu-border: 1px solid #BFBDBD !default; $cell-menu-border-radius: 2px !default; $cell-menu-close-btn-bg-color: #ffffff !default; -$cell-menu-close-btn-border: 0px solid #9c9c9c !default; -$cell-menu-close-btn-color: $column-picker-close-btn-color !default; -$cell-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; +$cell-menu-close-btn-border: 0px solid #dfdfdf !default; +$cell-menu-close-btn-color: darken($column-picker-close-btn-color, 20%) !default; $cell-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; $cell-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; -$cell-menu-close-btn-height: 21px !default; -$cell-menu-close-btn-width: 15px !default; -$cell-menu-close-btn-margin: 1px !default; +$cell-menu-close-btn-height: 18px !default; +$cell-menu-close-btn-width: 18px !default; +$cell-menu-close-btn-margin: 0px !default; $cell-menu-close-btn-padding: 0px !default; -$cell-menu-close-btn-opacity: 0.9 !default; +$cell-menu-close-btn-opacity: 0.5 !default; +$cell-menu-close-btn-opacity-hover: 1 !default; $cell-menu-min-width: 125px !default; $cell-menu-padding: 6px !default; $cell-menu-item-border: 1px solid transparent !default; @@ -386,7 +387,7 @@ $cell-menu-item-padding: 2px 4px !default; $cell-menu-item-width: 100% !default; $cell-menu-icon-font-size: $icon-font-size !default; $cell-menu-icon-line-height: calc(#{$cell-menu-icon-font-size} + 2px) !default; -$cell-menu-item-width-when-button: calc(100% - #{$cell-menu-close-btn-width} - 3px) !default; +$cell-menu-item-width-when-button: calc(100% - #{$cell-menu-close-btn-width}) !default; $cell-menu-icon-margin-right: 4px !default; $cell-menu-icon-width: 16px !default; $cell-menu-divider-height: 1px !default; @@ -398,6 +399,7 @@ $cell-menu-title-border-bottom: 1px solid #d6d6d6 !default $cell-menu-title-font-size: calc(#{$cell-menu-item-font-size} + 2px) !default; $cell-menu-title-font-weight: normal !default; $cell-menu-title-margin-bottom: 10px !default; +$cell-menu-title-margin-right: 7px !default; $cell-menu-title-width: calc(100% - #{$cell-menu-close-btn-width} - 10px) !default; /* Context Menu Plugin */ @@ -406,15 +408,15 @@ $context-menu-border: 1px solid #BFBDBD !default $context-menu-border-radius: 2px !default; $context-menu-close-btn-bg-color: #ffffff !default; $context-menu-close-btn-border: 0px solid #9c9c9c !default; -$context-menu-close-btn-color: $column-picker-close-btn-color !default; -$context-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; +$context-menu-close-btn-color: darken($column-picker-close-btn-color, 20%) !default; $context-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; $context-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; -$context-menu-close-btn-height: 21px !default; -$context-menu-close-btn-width: 15px !default; -$context-menu-close-btn-margin: 1px !default; +$context-menu-close-btn-height: 18px !default; +$context-menu-close-btn-width: 18px !default; +$context-menu-close-btn-margin: 0px !default; $context-menu-close-btn-padding: 0px !default; -$context-menu-close-btn-opacity: 0.9 !default; +$context-menu-close-btn-opacity: 0.5 !default; +$context-menu-close-btn-opacity-hover: 1 !default; $context-menu-min-width: 175px !default; $context-menu-padding: 6px !default; $context-menu-item-border: 1px solid transparent !default; @@ -425,7 +427,7 @@ $context-menu-item-hover-border: 1px solid #BFBDBD !default $context-menu-item-hover-color: #fafafa !default; $context-menu-item-padding: 2px 4px !default; $context-menu-item-width: 100% !default; -$context-menu-item-width-when-button: calc(100% - #{$context-menu-close-btn-width} - 3px) !default; +$context-menu-item-width-when-button: calc(100% - #{$context-menu-close-btn-width}) !default; $context-menu-icon-font-size: $icon-font-size !default; $context-menu-icon-height: 16px !default; $context-menu-icon-line-height: 14px !default; @@ -440,6 +442,7 @@ $context-menu-title-border-bottom: 1px solid #d6d6d6 !default $context-menu-title-font-size: calc(#{$context-menu-item-font-size} + 2px) !default; $context-menu-title-font-weight: normal !default; $context-menu-title-margin-bottom: 10px !default; +$context-menu-title-margin-right: 7px !default; $context-menu-title-width: calc(100% - #{$context-menu-close-btn-width} - 10px) !default; /* Header Button Plugin */ diff --git a/packages/common/src/styles/slick-controls.scss b/packages/common/src/styles/slick-controls.scss index bb8aede3f..a0a71511c 100644 --- a/packages/common/src/styles/slick-controls.scss +++ b/packages/common/src/styles/slick-controls.scss @@ -160,36 +160,43 @@ overflow: auto; width: max-content; - > .close { - float: right; - position: absolute; - color: var(--slick-grid-menu-close-btn-color, $grid-menu-close-btn-color); - cursor: var(--slick-grid-menu-close-btn-cursor, $grid-menu-close-btn-cursor); - width: var(--slick-grid-menu-close-btn-width, $grid-menu-close-btn-width); - height: var(--slick-grid-menu-close-btn-height, $grid-menu-close-btn-height); - margin: var(--slick-grid-menu-close-btn-margin, $grid-menu-close-btn-margin); - padding: var(--slick-grid-menu-close-btn-padding, $grid-menu-close-btn-padding); - font-family: var(--slick-grid-menu-close-btn-font-family, $grid-menu-close-btn-font-family); - font-size: var(--slick-grid-menu-close-btn-font-size, $grid-menu-close-btn-font-size); - background-color: var(--slick-grid-menu-close-btn-bg-color, $grid-menu-close-btn-bg-color); - border: var(--slick-grid-menu-close-btn-border, $grid-menu-close-btn-border); - right: var(--slick-grid-menu-close-btn-position-right, $grid-menu-close-btn-position-right); - top: var(--slick-grid-menu-close-btn-position-top, $grid-menu-close-btn-position-top); - - &:hover { - color: var(--slick-grid-menu-close-btn-color-hover, $grid-menu-close-btn-color-hover); + .slick-grid-menu-option-list, + .slick-grid-menu-command-list { + .command-header, .option-header { + overflow-y: hidden; } - > span { + .command-header.with-title, .option-header.with-title { + overflow-y: auto; + } + + .close { + cursor: pointer; + float: right; + background-color: var(--slick-grid-menu-close-btn-bg-color, $grid-menu-close-btn-bg-color); + border: var(--slick-grid-menu-close-btn-border, $grid-menu-close-btn-border); + color: var(--slick-grid-menu-close-btn-color, $grid-menu-close-btn-color); + font-family: var(--slick-grid-menu-close-btn-font-family, $grid-menu-close-btn-font-family); + font-size: var(--slick-grid-menu-close-btn-font-size, $grid-menu-close-btn-font-size); + height: var(--slick-grid-menu-close-btn-height, $grid-menu-close-btn-height); + line-height: calc(var(--slick-grid-menu-close-btn-height, $grid-menu-close-btn-height) - 2px); + margin: var(--slick-grid-menu-close-btn-margin, $grid-menu-close-btn-margin); + padding: var(--slick-grid-menu-close-btn-padding, $grid-menu-close-btn-padding); + width: var(--slick-grid-menu-close-btn-width, $grid-menu-close-btn-width); opacity: var(--slick-grid-menu-close-btn-opacity, $grid-menu-close-btn-opacity); + &:hover { + opacity: var(--slick-grid-menu-close-btn-opacity-hover, $grid-menu-close-btn-opacity-hover); + } } } - div.title { + span.title, div.title { + display: inline-block; font-size: var(--slick-grid-menu-title-font-size, $grid-menu-title-font-size); font-weight: var(--slick-grid-menu-title-font-weight, $grid-menu-title-font-weight); width: var(--slick-grid-menu-title-width, $grid-menu-title-width); border-bottom: var(--slick-grid-menu-title-border-bottom, $grid-menu-title-border-bottom); margin-bottom: var(--slick-grid-menu-title-margin-bottom, $grid-menu-title-margin-bottom); + margin-right: var(--grid-menu-title-margin-right, $grid-menu-title-margin-right); } li { diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 00576a813..54441368a 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -27,35 +27,41 @@ position: absolute; } - > .close { - float: right; - cursor: pointer; - color: var(--slick-cell-menu-close-btn-color, $cell-menu-close-btn-color); - background-color: var(--slick-cell-menu-close-btn-bg-color, $cell-menu-close-btn-bg-color); - width: var(--slick-cell-menu-close-btn-width, $cell-menu-close-btn-width); - height: var(--slick-cell-menu-close-btn-height, $cell-menu-close-btn-height); - margin: var(--slick-cell-menu-close-btn-margin, $cell-menu-close-btn-margin); - padding: var(--slick-cell-menu-close-btn-padding, $cell-menu-close-btn-padding); - border: var(--slick-cell-menu-close-btn-border, $cell-menu-close-btn-border); - font-family: var(--slick-cell-menu-close-btn-font-family, $cell-menu-close-btn-font-family); - font-size: var(--slick-cell-menu-close-btn-font-size, $cell-menu-close-btn-font-size); - - &:hover { - color: var(--slick-cell-menu-close-btn-color-hover, $cell-menu-close-btn-color-hover); + .slick-cell-menu-option-list, + .slick-cell-menu-command-list { + .command-header, .option-header { + overflow-y: hidden; + } + .command-header.with-title, .option-header.with-title { + overflow-y: auto; + border-bottom: var(--slick-cell-menu-title-border-bottom, $cell-menu-title-border-bottom); + margin-bottom: var(--slick-cell-menu-title-margin-bottom, $cell-menu-title-margin-bottom); } - > span { + + .close { + cursor: pointer; + float: right; + background-color: var(--slick-cell-menu-close-btn-bg-color, $cell-menu-close-btn-bg-color); + border: var(--slick-cell-menu-close-btn-border, $cell-menu-close-btn-border); + color: var(--slick-cell-menu-close-btn-color, $cell-menu-close-btn-color); + font-family: var(--slick-cell-menu-close-btn-font-family, $cell-menu-close-btn-font-family); + font-size: var(--slick-cell-menu-close-btn-font-size, $cell-menu-close-btn-font-size); + height: var(--slick-cell-menu-close-btn-height, $cell-menu-close-btn-height); + line-height: calc(var(--slick-cell-menu-close-btn-height, $cell-menu-close-btn-height) - 2px); + margin: var(--slick-cell-menu-close-btn-margin, $cell-menu-close-btn-margin); + padding: var(--slick-cell-menu-close-btn-padding, $cell-menu-close-btn-padding); + width: var(--slick-cell-menu-close-btn-width, $cell-menu-close-btn-width); opacity: var(--slick-cell-menu-close-btn-opacity, $cell-menu-close-btn-opacity); + &:hover { + opacity: var(--slick-cell-menu-close-btn-opacity-hover, $cell-menu-close-btn-opacity-hover); + } } - } - .slick-cell-menu-option-list, - .slick-cell-menu-command-list { .title { font-size: var(--slick-cell-menu-title-font-size, $cell-menu-title-font-size); font-weight: var(--slick-cell-menu-title-font-weight, $cell-menu-title-font-weight); + margin-right: var(--cell-menu-title-margin-right, $cell-menu-title-margin-right); width: var(--slick-cell-menu-title-width, $cell-menu-title-width); - border-bottom: var(--slick-cell-menu-title-border-bottom, $cell-menu-title-border-bottom); - margin-bottom: var(--slick-cell-menu-title-margin-bottom, $cell-menu-title-margin-bottom); } } @@ -129,12 +135,6 @@ .slick-cell-menu-option-list { margin-bottom: var(--slick-cell-menu-option-list-margin-bottom, $cell-menu-option-list-margin-bottom); } - - /* resize cell menu item width when there's a close button on same line */ - button + .slick-cell-menu-command-list .slick-cell-menu-item:first-child, - button + .slick-cell-menu-option-list .slick-cell-menu-item:first-child { - width: var(--slick-cell-menu-item-width-when-button, $cell-menu-item-width-when-button); - } } // ---------------------------------------------- @@ -162,32 +162,42 @@ position: absolute; } - > .close { - float: right; - color: var(--slick-context-menu-close-btn-color, $context-menu-close-btn-color); - background-color: var(--slick-context-menu-close-btn-bg-color, $context-menu-close-btn-bg-color); - width: var(--slick-context-menu-close-btn-width, $context-menu-close-btn-width); - height: var(--slick-context-menu-close-btn-height, $context-menu-close-btn-height); - margin: var(--slick-context-menu-close-btn-margin, $context-menu-close-btn-margin); - padding: var(--slick-context-menu-close-btn-padding, $context-menu-close-btn-padding); - border: var(--slick-context-menu-close-btn-border, $context-menu-close-btn-border); - font-family: var(--slick-context-menu-close-btn-font-family, $context-menu-close-btn-font-family); - font-size: var(--slick-context-menu-close-btn-font-size, $context-menu-close-btn-font-size); - - &:hover { - color: var(--slick-context-menu-close-btn-color-hover, $context-menu-close-btn-color-hover); + .slick-context-menu-option-list, + .slick-context-menu-command-list { + .command-header, .option-header { + overflow-y: hidden; + } + .command-header.with-title, .option-header.with-title { + overflow-y: auto; + border-bottom: var(--slick-context-menu-title-border-bottom, $context-menu-title-border-bottom); + margin-bottom: var(--slick-context-menu-title-margin-bottom, $context-menu-title-margin-bottom); } - > span { + + .close { + cursor: pointer; + float: right; + background-color: var(--slick-context-menu-close-btn-bg-color, $context-menu-close-btn-bg-color); + border: var(--slick-context-menu-close-btn-border, $context-menu-close-btn-border); + color: var(--slick-context-menu-close-btn-color, $context-menu-close-btn-color); + font-family: var(--slick-context-menu-close-btn-font-family, $context-menu-close-btn-font-family); + font-size: var(--slick-context-menu-close-btn-font-size, $context-menu-close-btn-font-size); + height: var(--slick-context-menu-close-btn-height, $context-menu-close-btn-height); + line-height: calc(var(--slick-context-menu-close-btn-height, $context-menu-close-btn-height) - 2px); + margin: var(--slick-context-menu-close-btn-margin, $context-menu-close-btn-margin); + padding: var(--slick-context-menu-close-btn-padding, $context-menu-close-btn-padding); + width: var(--slick-context-menu-close-btn-width, $context-menu-close-btn-width); opacity: var(--slick-context-menu-close-btn-opacity, $context-menu-close-btn-opacity); + &:hover { + opacity: var(--slick-context-menu-close-btn-opacity-hover, $context-menu-close-btn-opacity-hover); + } } - } - .title { - font-size: var(--slick-context-menu-title-font-size, $context-menu-title-font-size); - font-weight: var(--slick-context-menu-title-font-weight, $context-menu-title-font-weight); - width: var(--slick-context-menu-title-width, $context-menu-title-width); - border-bottom: var(--slick-context-menu-title-border-bottom, $context-menu-title-border-bottom); - margin-bottom: var(--slick-context-menu-title-margin-bottom, $context-menu-title-margin-bottom); + .title { + font-size: var(--slick-context-menu-title-font-size, $context-menu-title-font-size); + font-weight: var(--slick-context-menu-title-font-weight, $context-menu-title-font-weight); + margin-right: var(--context-menu-title-margin-right, $context-menu-title-margin-right); + width: var(--slick-context-menu-title-width, $context-menu-title-width); + } } .slick-context-menu-item { @@ -259,12 +269,6 @@ .slick-context-menu-option-list { margin-bottom: var(--slick-context-menu-option-list-margin-bottom, $context-menu-option-list-margin-bottom); } - - /* resize context menu item width when there's a close button on same line */ - button + .slick-context-menu-command-list .slick-context-menu-item:first-child, - button + .slick-context-menu-option-list .slick-context-menu-item:first-child { - width: var(--slick-context-menu-item-width-when-button, $context-menu-item-width-when-button); - } } // ---------------------------------------------- diff --git a/test/cypress/integration/example01.spec.js b/test/cypress/integration/example01.spec.js index 13debdf39..f823f9d40 100644 --- a/test/cypress/integration/example01.spec.js +++ b/test/cypress/integration/example01.spec.js @@ -52,7 +52,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(4)') + .children('.slick-header-menu-item:nth-of-type(4)') .children('.slick-header-menu-content') .should('contain', 'Sort Descending') .click(); @@ -87,7 +87,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(3)') + .children('.slick-header-menu-item:nth-of-type(3)') .children('.slick-header-menu-content') .should('contain', 'Sort Ascending') .click(); @@ -101,7 +101,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { it('should hover over the "Duration" column of 2nd grid, Sort Ascending and have 2 sorts', () => { cy.get('.grid2') - .find('.slick-header-column:nth-child(2)') + .find('.slick-header-column:nth-of-type(2)') .trigger('mouseover') .children('.slick-header-menu-button') .invoke('show') @@ -110,7 +110,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.grid2') .find('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(4)') + .children('.slick-header-menu-item:nth-of-type(4)') .click(); cy.get('.grid2') @@ -283,7 +283,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.grid1') .get('.slick-grid-menu:visible') - .find('span.close') + .find('.close') .click({ force: true }); cy.get('.grid1') @@ -331,7 +331,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.grid2') .get('.slick-grid-menu:visible') - .find('span.close') + .find('.close') .click({ force: true }); cy.get('.grid2') @@ -373,7 +373,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.grid1') .get('.slick-grid-menu:visible') - .find('span.close') + .find('.close') .click({ force: true }); cy.get('.grid1') @@ -401,14 +401,14 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.slick-columnpicker') .find('.slick-columnpicker-list') - .children('li:nth-child(3)') + .children('li:nth-of-type(3)') .children('label') .should('contain', '% Complete') .click(); cy.get('.grid2') .get('.slick-columnpicker:visible') - .find('span.close') + .find('.close') .click(); cy.get('.grid2') @@ -494,7 +494,7 @@ describe('Example 01 - Basic Grids', { retries: 1 }, () => { cy.get('.grid1') .get('.slick-grid-menu:visible') - .find('span.close') + .find('.close') .click({ force: true }); }); diff --git a/test/cypress/integration/example04.spec.js b/test/cypress/integration/example04.spec.js index a27965ceb..376377cf9 100644 --- a/test/cypress/integration/example04.spec.js +++ b/test/cypress/integration/example04.spec.js @@ -77,7 +77,7 @@ describe('Example 04 - Frozen Grid', { retries: 1 }, () => { cy.get('.grid4') .get('.slick-grid-menu:visible') - .find('span.close') + .find('.close') .click({ force: true }); cy.get('.grid4') @@ -106,7 +106,7 @@ describe('Example 04 - Frozen Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(9)') + .children('.slick-header-menu-item:nth-of-type(9)') .children('.slick-header-menu-content') .should('contain', 'Hide Column') .click(); @@ -134,13 +134,13 @@ describe('Example 04 - Frozen Grid', { retries: 1 }, () => { cy.get('.slick-columnpicker') .find('.slick-columnpicker-list') - .children('li:nth-child(2)') + .children('li:nth-of-type(2)') .children('label') .should('contain', 'Title') .click(); cy.get('.slick-columnpicker:visible') - .find('span.close') + .find('.close') .trigger('click') .click(); diff --git a/test/cypress/integration/example07.spec.js b/test/cypress/integration/example07.spec.js index 492947064..cccdfff1d 100644 --- a/test/cypress/integration/example07.spec.js +++ b/test/cypress/integration/example07.spec.js @@ -251,7 +251,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click(); @@ -421,7 +421,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries .click(); cy.get('.slick-header-menu') - .children() + .children('.slick-header-menu-item') .each(($child, index) => { const commandTitle = $child.text(); expect(commandTitle).to.eq(expectedFullHeaderMenuCommands[index]); @@ -464,13 +464,13 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); cy.get('.grid7') - .find('.slick-header-column:nth(8)') + .find('.slick-header-column:nth-of-type(8)') .trigger('mouseover') .children('.slick-header-menu-button') .click(); cy.get('.slick-header-menu') - .children() + .children('.slick-header-menu-item') .each(($child, index) => { const commandTitle = $child.text(); expect(commandTitle).to.eq(expectedFullHeaderMenuCommands[index]); @@ -515,7 +515,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries .click(); cy.get('.slick-header-menu') - .children() + .children('.slick-header-menu-item') .each(($child, index) => { const commandTitle = $child.text(); expect(commandTitle).to.eq(expectedFullHeaderMenuCommands[index]); @@ -539,7 +539,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries .click(); cy.get('.slick-header-menu') - .children() + .children('.slick-header-menu-item') .each(($child, index) => { const commandTitle = $child.text(); expect(commandTitle).to.eq(expectedFullHeaderMenuCommands[index]); @@ -594,14 +594,14 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries cy.get('.slick-columnpicker') .find('.slick-columnpicker-list') - .children('li:nth-child(7)') + .children('li:nth-of-type(7)') .children('label') .should('contain', 'Finish') .click(); cy.get('.grid7') .get('.slick-columnpicker:visible') - .find('span.close') + .find('.close') .trigger('click') .click(); @@ -762,13 +762,13 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries cy.get('.slick-columnpicker') .find('.slick-columnpicker-list') - .children('li:nth-child(6)') + .children('li:nth-of-type(6)') .children('label') .should('contain', 'Finish') .click(); cy.get('.slick-columnpicker:visible') - .find('span.close') + .find('.close') .trigger('click') .click(); }); @@ -831,7 +831,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries .click(); cy.get('.slick-header-menu') - .children() + .children('.slick-header-menu-item') .each(($child, index) => { const commandTitle = $child.text(); expect(commandTitle).to.eq(expectedFullHeaderMenuCommands[index]); @@ -870,7 +870,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries }); cy.get('.slick-grid-menu') - .find('span.close') + .find('.close') .click(); }); @@ -949,7 +949,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries }); it('should click on Select All checkbox in filter header row and expect all 500 items to be selected and full selection count show in left footer', () => { - cy.get('.slick-header-column:nth-child(2)') + cy.get('.slick-header-column:nth-of-type(2)') .find('label') .click({ force: true }); diff --git a/test/cypress/integration/example08.spec.js b/test/cypress/integration/example08.spec.js index d3d262799..d91216b47 100644 --- a/test/cypress/integration/example08.spec.js +++ b/test/cypress/integration/example08.spec.js @@ -165,7 +165,7 @@ describe('Example 08 - Column Span & Header Grouping', { retries: 1 }, () => { cy.wait(50); cy.get('.grid2') - .find('.slick-row .slick-cell:nth-child(6):visible') + .find('.slick-row .slick-cell:nth-of-type(6):visible') .each(($child, index) => { if (index > 8) { return; diff --git a/test/cypress/integration/example09.spec.js b/test/cypress/integration/example09.spec.js index 267ab4214..a03939080 100644 --- a/test/cypress/integration/example09.spec.js +++ b/test/cypress/integration/example09.spec.js @@ -697,7 +697,7 @@ describe('Example 09 - OData Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click(); diff --git a/test/cypress/integration/example10.spec.js b/test/cypress/integration/example10.spec.js index 5f62cdbcd..5a3636c6b 100644 --- a/test/cypress/integration/example10.spec.js +++ b/test/cypress/integration/example10.spec.js @@ -175,7 +175,7 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click(); @@ -205,7 +205,7 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click(); @@ -234,7 +234,7 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click(); @@ -408,27 +408,27 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(3)') + .children('.slick-header-menu-item:nth-of-type(3)') .children('.slick-header-menu-content') .should('contain', 'Sort Ascending'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(4)') + .children('.slick-header-menu-item:nth-of-type(4)') .children('.slick-header-menu-content') .should('contain', 'Sort Descending'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(7)') + .children('.slick-header-menu-item:nth-of-type(7)') .children('.slick-header-menu-content') .should('contain', 'Remove Sort'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(8)') + .children('.slick-header-menu-item:nth-of-type(8)') .children('.slick-header-menu-content') .should('contain', 'Hide Column'); }); @@ -456,7 +456,7 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-grid-menu-list li:nth(1)') .contains('Customer Information - Gender'); - cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu] > span.close') + cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close') .click({ force: true }); }); @@ -515,27 +515,27 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(3)') + .children('.slick-header-menu-item:nth-of-type(3)') .children('.slick-header-menu-content') .should('contain', 'Trier par ordre croissant'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(4)') + .children('.slick-header-menu-item:nth-of-type(4)') .children('.slick-header-menu-content') .should('contain', 'Trier par ordre décroissant'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Supprimer le filtre'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(7)') + .children('.slick-header-menu-item:nth-of-type(7)') .children('.slick-header-menu-content') .should('contain', 'Supprimer le tri'); cy.get('.slick-header-menu') - .children('.slick-header-menu-item:nth-child(8)') + .children('.slick-header-menu-item:nth-of-type(8)') .children('.slick-header-menu-content') .should('contain', 'Cacher la colonne'); }); @@ -563,7 +563,7 @@ describe('Example 10 - GraphQL Grid', { retries: 1 }, () => { cy.get('.slick-grid-menu-list li:nth(1)') .contains('Information Client - Sexe'); - cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu] > span.close') + cy.get('.slick-grid-menu [data-dismiss=slick-grid-menu].close') .click({ force: true }); }); diff --git a/test/cypress/integration/example11.spec.js b/test/cypress/integration/example11.spec.js index 5448ed9f6..7bb71bac8 100644 --- a/test/cypress/integration/example11.spec.js +++ b/test/cypress/integration/example11.spec.js @@ -263,7 +263,7 @@ describe('Example 11 - Batch Editing', { retries: 1 }, () => { .find('input[type="checkbox"]:checked') .should('have.length', 11 - 2); - cy.get('.slick-columnpicker > button.close > .close') + cy.get('.slick-columnpicker > button.close') .click(); }); @@ -521,7 +521,7 @@ describe('Example 11 - Batch Editing', { retries: 1 }, () => { .find('input[type="checkbox"]:checked') .should('have.length', 11); - cy.get('.slick-columnpicker > button.close > .close') + cy.get('.slick-columnpicker > button.close') .click(); }); @@ -608,7 +608,7 @@ describe('Example 11 - Batch Editing', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(1)') + .children('.slick-header-menu-item:nth-of-type(1)') .children('.slick-header-menu-content') .should('contain', 'Freeze Column') .click(); diff --git a/test/cypress/integration/example13.spec.js b/test/cypress/integration/example13.spec.js index 5256d70e9..d5bbfb1b0 100644 --- a/test/cypress/integration/example13.spec.js +++ b/test/cypress/integration/example13.spec.js @@ -363,7 +363,7 @@ describe('Example 13 - Header Button Plugin', { retries: 1 }, () => { cy.get('.grid13-2 .slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click(); @@ -393,7 +393,7 @@ describe('Example 13 - Header Button Plugin', { retries: 1 }, () => { cy.get('.grid13-2 .slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(3)') + .children('.slick-header-menu-item:nth-of-type(3)') .children('.slick-header-menu-content') .should('contain', 'Sort Ascending') .click(); diff --git a/test/cypress/integration/example14.spec.js b/test/cypress/integration/example14.spec.js index 857646f23..40390f94f 100644 --- a/test/cypress/integration/example14.spec.js +++ b/test/cypress/integration/example14.spec.js @@ -64,7 +64,7 @@ describe('Example 14 - Columns Resize by Content', { retries: 1 }, () => { it('should double-click on the "Complexity" column resize handle and expect the column to become wider and show all text', () => { cy.get('.slick-row').find('.slick-cell:nth(5)').invoke('width').should('be.lt', 80); - cy.get('.slick-header-column:nth-child(6) .slick-resizable-handle') + cy.get('.slick-header-column:nth-of-type(6) .slick-resizable-handle') .dblclick(); cy.get('.slick-row').find('.slick-cell:nth(5)').invoke('width').should('be.gt', 95); @@ -74,7 +74,7 @@ describe('Example 14 - Columns Resize by Content', { retries: 1 }, () => { cy.get('.slick-row').find('.slick-cell:nth(9)').invoke('width').should('be.lt', 120); cy.get('.grid14') - .find('.slick-header-column:nth-child(10)') + .find('.slick-header-column:nth-of-type(10)') .trigger('mouseover') .children('.slick-header-menu-button') .invoke('show') @@ -82,7 +82,7 @@ describe('Example 14 - Columns Resize by Content', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(2)') + .children('.slick-header-menu-item:nth-of-type(2)') .children('.slick-header-menu-content') .should('contain', 'Resize by Content') .click(); diff --git a/test/cypress/integration/example15.spec.js b/test/cypress/integration/example15.spec.js index 6bed7c497..c39065fb5 100644 --- a/test/cypress/integration/example15.spec.js +++ b/test/cypress/integration/example15.spec.js @@ -800,7 +800,7 @@ describe('Example 15 - OData Grid using RxJS', { retries: 1 }, () => { cy.get('.slick-header-menu') .should('be.visible') - .children('.slick-header-menu-item:nth-child(6)') + .children('.slick-header-menu-item:nth-of-type(6)') .children('.slick-header-menu-content') .should('contain', 'Remove Filter') .click();