rename class to className

vaadin · Oct 10, 2023 · 0cd9c77 · 0cd9c77
1 parent 3c1ca63
commit 0cd9c77
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/packages/context-menu/src/vaadin-context-menu.d.ts b/packages/context-menu/src/vaadin-context-menu.d.ts
@@ -59,7 +59,7 @@ export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuCus
  *
  * ```javascript
  * contextMenu.items = [
- *   { text: 'Menu Item 1', theme: 'primary', class: 'first', children:
+ *   { text: 'Menu Item 1', theme: 'primary', className: 'first', children:
  *     [
  *       { text: 'Menu Item 1-1', checked: true, keepOpen: true },
  *       { text: 'Menu Item 1-2' }
@@ -72,7 +72,7 @@ export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuCus
  *       { text: 'Menu Item 2-2', disabled: true }
  *     ]
  *   },
- *   { text: 'Menu Item 3', disabled: true, class: 'last' }
+ *   { text: 'Menu Item 3', disabled: true, className: 'last' }
  * ];
  *
  * contextMenu.addEventListener('item-selected', e => {

diff --git a/packages/context-menu/src/vaadin-context-menu.js b/packages/context-menu/src/vaadin-context-menu.js
@@ -31,7 +31,7 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  *
  * ```javascript
  * contextMenu.items = [
- *   { text: 'Menu Item 1', theme: 'primary', class: 'first', children:
+ *   { text: 'Menu Item 1', theme: 'primary', className: 'first', children:
  *     [
  *       { text: 'Menu Item 1-1', checked: true, keepOpen: true },
  *       { text: 'Menu Item 1-2' }
@@ -44,7 +44,7 @@ import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
  *       { text: 'Menu Item 2-2', disabled: true }
  *     ]
  *   },
- *   { text: 'Menu Item 3', disabled: true, class: 'last' }
+ *   { text: 'Menu Item 3', disabled: true, className: 'last' }
  * ];
  *
  * contextMenu.addEventListener('item-selected', e => {

diff --git a/packages/context-menu/src/vaadin-contextmenu-items-mixin.d.ts b/packages/context-menu/src/vaadin-contextmenu-items-mixin.d.ts
@@ -14,7 +14,7 @@ export interface ContextMenuItem {
   checked?: boolean;
   keepOpen?: boolean;
   theme?: string[] | string;
-  class?: string;
+  className?: string;
   children?: ContextMenuItem[];
 }
 
@@ -32,7 +32,7 @@ export declare class ItemsMixinClass {
    *
    * ```javascript
    * contextMenu.items = [
-   *   { text: 'Menu Item 1', theme: 'primary', class: 'first', children:
+   *   { text: 'Menu Item 1', theme: 'primary', className: 'first', children:
    *     [
    *       { text: 'Menu Item 1-1', checked: true, keepOpen: true },
    *       { text: 'Menu Item 1-2' }
@@ -45,7 +45,7 @@ export declare class ItemsMixinClass {
    *       { text: 'Menu Item 2-2', disabled: true }
    *     ]
    *   },
-   *   { text: 'Menu Item 3', disabled: true, class: 'last' }
+   *   { text: 'Menu Item 3', disabled: true, className: 'last' }
    * ];
    * ```
    */

diff --git a/packages/context-menu/src/vaadin-contextmenu-items-mixin.js b/packages/context-menu/src/vaadin-contextmenu-items-mixin.js
@@ -21,7 +21,7 @@ export const ItemsMixin = (superClass) =>
          * @property {boolean} disabled - If true, the item is disabled and cannot be selected
          * @property {boolean} checked - If true, the item shows a checkmark next to it
          * @property {boolean} keepOpen - If true, the menu will not be closed on item selection
-         * @property {string} class - A space-delimited list of CSS class names to be set on the menu item component.
+         * @property {string} className - A space-delimited list of CSS class names to be set on the menu item component.
          * @property {union: string | string[]} theme - If set, sets the given theme(s) as an attribute to the menu item component, overriding any theme set on the context menu.
          * @property {MenuItem[]} children - Array of child menu items
          */
@@ -37,7 +37,7 @@ export const ItemsMixin = (superClass) =>
          *
          * ```javascript
          * contextMenu.items = [
-         *   { text: 'Menu Item 1', theme: 'primary', class: 'first', children:
+         *   { text: 'Menu Item 1', theme: 'primary', className: 'first', children:
          *     [
          *       { text: 'Menu Item 1-1', checked: true, keepOpen: true },
          *       { text: 'Menu Item 1-2' }
@@ -50,7 +50,7 @@ export const ItemsMixin = (superClass) =>
          *       { text: 'Menu Item 2-2', disabled: true }
          *     ]
          *   },
-         *   { text: 'Menu Item 3', disabled: true, class: 'last' }
+         *   { text: 'Menu Item 3', disabled: true, className: 'last' }
          * ];
          * ```
          *
@@ -192,8 +192,8 @@ export const ItemsMixin = (superClass) =>
         component.textContent = item.text;
       }
 
-      if (item.class) {
-        component.setAttribute('class', item.class);
+      if (item.className) {
+        component.setAttribute('class', item.className);
       }
 
       this.__toggleMenuComponentAttribute(component, 'menu-item-checked', item.checked);

diff --git a/packages/context-menu/test/dom/context-menu.test.js b/packages/context-menu/test/dom/context-menu.test.js
@@ -4,10 +4,10 @@ import '../../src/vaadin-context-menu.js';
 import '../not-animated-styles.js';
 import { openSubMenus } from '../helpers.js';
 
-function createComponent(textContent, options) {
+function createComponent(textContent, { className }) {
   const component = document.createElement('div');
   component.textContent = textContent;
-  component.setAttribute('class', options.class);
+  component.setAttribute('class', className);
   return component;
 }
 
@@ -21,27 +21,27 @@ describe('context-menu', () => {
   };
 
   const ITEMS = [
-    { text: 'Menu Item 1', class: 'first' },
+    { text: 'Menu Item 1', className: 'first' },
     { component: 'hr' },
     {
       text: 'Menu Item 2',
       children: [
-        { text: 'Menu Item 2-1', class: 'first' },
+        { text: 'Menu Item 2-1', className: 'first' },
         {
           text: 'Menu Item 2-2',
-          class: 'last',
+          className: 'last',
           children: [
-            { text: 'Menu Item 2-2-1', checked: true, class: 'first' },
+            { text: 'Menu Item 2-2-1', checked: true, className: 'first' },
             { text: 'Menu Item 2-2-2', disabled: true },
             { component: 'hr' },
-            { text: 'Menu Item 2-2-3', class: 'last' },
+            { text: 'Menu Item 2-2-3', className: 'last' },
           ],
         },
       ],
     },
     { text: 'Menu Item 3', disabled: true },
-    { component: createComponent('Menu Item 4', { class: 'custom' }) },
-    { component: createComponent('Menu Item 5', { class: 'custom' }), class: 'last' },
+    { component: createComponent('Menu Item 4', { className: 'custom' }) },
+    { component: createComponent('Menu Item 5', { className: 'custom' }), className: 'last' },
   ];
 
   const contextmenu = (target) => {