refactor!: remove on state attribute from pressed toolbar buttons (#9999)

Author: web-padawan

packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js

@@ -529,7 +529,6 @@ export const RichTextEditorMixin = (superClass) =>
         toolbar.controls.forEach((pair) => {
           const input = pair[1];
           const isActive = input.classList.contains('ql-active');
-          input.toggleAttribute('on', isActive);
           input.part.toggle('toolbar-button-pressed', isActive);
         });
       };

packages/rich-text-editor/src/vaadin-rich-text-editor.d.ts

@@ -41,11 +41,10 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled`   | Set to a disabled text editor | :host
- * `readonly`   | Set to a readonly text editor | :host
- * `on`         | Set to a toolbar button applied to the selected text | toolbar-button
+ * Attribute    | Description
+ * -------------|------------------------------
+ * `disabled`   | Set to a disabled text editor
+ * `readonly`   | Set to a readonly text editor
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -54,7 +53,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `content`                            | The content wrapper
  * `toolbar`                            | The toolbar wrapper
  * `toolbar-group`                      | The group for toolbar controls
- * `toolbar-group-history`              | The group for histroy controls
+ * `toolbar-group-history`              | The group for history controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
  * `toolbar-group-style`                | The group for style controls

packages/rich-text-editor/src/vaadin-rich-text-editor.js

@@ -39,11 +39,10 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled`   | Set to a disabled text editor | :host
- * `readonly`   | Set to a readonly text editor | :host
- * `on`         | Set to a toolbar button applied to the selected text | toolbar-button
+ * Attribute    | Description
+ * -------------|------------------------------
+ * `disabled`   | Set to a disabled text editor
+ * `readonly`   | Set to a readonly text editor
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -52,7 +51,7 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
  * `content`                            | The content wrapper
  * `toolbar`                            | The toolbar wrapper
  * `toolbar-group`                      | The group for toolbar controls
- * `toolbar-group-history`              | The group for histroy controls
+ * `toolbar-group-history`              | The group for history controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
  * `toolbar-group-style`                | The group for style controls

packages/rich-text-editor/test/toolbar.test.js

@@ -191,16 +191,7 @@ describe('toolbar controls', () => {
       expect(editor.getFormat(0)).to.deep.equal({});
     });
 
-    describe('on state attribute', () => {
-      it('should toggle "on" attribute when the format button is clicked', () => {
-        btn = getButton('bold');
-
-        btn.click();
-        expect(btn.hasAttribute('on')).to.be.true;
-        btn.click();
-        expect(btn.hasAttribute('on')).to.be.false;
-      });
-
+    describe('pressed button', () => {
       it('should toggle "toolbar-button-pressed" part value when the format button is clicked', () => {
         btn = getButton('bold');
 
@@ -210,7 +201,7 @@ describe('toolbar controls', () => {
         expect(btn.part.contains('toolbar-button-pressed')).to.be.false;
       });
 
-      it('should toggle "on" attribute for corresponding buttons when selection is changed', () => {
+      it('should toggle "toolbar-button-pressed" part value for corresponding buttons when selection is changed', () => {
         const delta = new window.Quill.imports.delta([
           { attributes: { bold: true }, insert: 'Foo\n' },
           { attributes: { italic: true }, insert: 'Bar\n' },
@@ -223,19 +214,19 @@ describe('toolbar controls', () => {
         const linkBtn = getButton('link');
 
         editor.setSelection(0, 1);
-        expect(boldBtn.hasAttribute('on')).to.be.true;
-        expect(italicBtn.hasAttribute('on')).to.be.false;
-        expect(linkBtn.hasAttribute('on')).to.be.false;
+        expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.true;
+        expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.false;
+        expect(linkBtn.part.contains('toolbar-button-pressed')).to.be.false;
 
         editor.setSelection(4, 1);
-        expect(boldBtn.hasAttribute('on')).to.be.false;
-        expect(italicBtn.hasAttribute('on')).to.be.true;
-        expect(linkBtn.hasAttribute('on')).to.be.false;
+        expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.false;
+        expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.true;
+        expect(linkBtn.part.contains('toolbar-button-pressed')).to.be.false;
 
         editor.setSelection(8, 1);
-        expect(boldBtn.hasAttribute('on')).to.be.false;
-        expect(italicBtn.hasAttribute('on')).to.be.false;
-        expect(linkBtn.hasAttribute('on')).to.be.true;
+        expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.false;
+        expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.false;
+        expect(linkBtn.part.contains('toolbar-button-pressed')).to.be.true;
       });
     });