Skip to content

Commit 1ada690

Browse files
web-padawanweb-padawan
authored
refactor!: remove on state attribute from pressed toolbar buttons (#9999)
1 parent ba5f075 commit 1ada690

File tree

4 files changed

+21
-33
lines changed

4 files changed

+21
-33
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -529,7 +529,6 @@ export const RichTextEditorMixin = (superClass) =>
529529
toolbar.controls.forEach((pair) => {
530530
const input = pair[1];
531531
const isActive = input.classList.contains('ql-active');
532-
input.toggleAttribute('on', isActive);
533532
input.part.toggle('toolbar-button-pressed', isActive);
534533
});
535534
};

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,10 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
4141
*
4242
* The following state attributes are available for styling:
4343
*
44-
* Attribute | Description | Part name
45-
* -------------|-------------|------------
46-
* `disabled` | Set to a disabled text editor | :host
47-
* `readonly` | Set to a readonly text editor | :host
48-
* `on` | Set to a toolbar button applied to the selected text | toolbar-button
44+
* Attribute | Description
45+
* -------------|------------------------------
46+
* `disabled` | Set to a disabled text editor
47+
* `readonly` | Set to a readonly text editor
4948
*
5049
* The following shadow DOM parts are available for styling:
5150
*
@@ -54,7 +53,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
5453
* `content` | The content wrapper
5554
* `toolbar` | The toolbar wrapper
5655
* `toolbar-group` | The group for toolbar controls
57-
* `toolbar-group-history` | The group for histroy controls
56+
* `toolbar-group-history` | The group for history controls
5857
* `toolbar-group-emphasis` | The group for emphasis controls
5958
* `toolbar-group-heading` | The group for heading controls
6059
* `toolbar-group-style` | The group for style controls

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,10 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
3939
*
4040
* The following state attributes are available for styling:
4141
*
42-
* Attribute | Description | Part name
43-
* -------------|-------------|------------
44-
* `disabled` | Set to a disabled text editor | :host
45-
* `readonly` | Set to a readonly text editor | :host
46-
* `on` | Set to a toolbar button applied to the selected text | toolbar-button
42+
* Attribute | Description
43+
* -------------|------------------------------
44+
* `disabled` | Set to a disabled text editor
45+
* `readonly` | Set to a readonly text editor
4746
*
4847
* The following shadow DOM parts are available for styling:
4948
*
@@ -52,7 +51,7 @@ import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
5251
* `content` | The content wrapper
5352
* `toolbar` | The toolbar wrapper
5453
* `toolbar-group` | The group for toolbar controls
55-
* `toolbar-group-history` | The group for histroy controls
54+
* `toolbar-group-history` | The group for history controls
5655
* `toolbar-group-emphasis` | The group for emphasis controls
5756
* `toolbar-group-heading` | The group for heading controls
5857
* `toolbar-group-style` | The group for style controls

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

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -191,16 +191,7 @@ describe('toolbar controls', () => {
191191
expect(editor.getFormat(0)).to.deep.equal({});
192192
});
193193

194-
describe('on state attribute', () => {
195-
it('should toggle "on" attribute when the format button is clicked', () => {
196-
btn = getButton('bold');
197-
198-
btn.click();
199-
expect(btn.hasAttribute('on')).to.be.true;
200-
btn.click();
201-
expect(btn.hasAttribute('on')).to.be.false;
202-
});
203-
194+
describe('pressed button', () => {
204195
it('should toggle "toolbar-button-pressed" part value when the format button is clicked', () => {
205196
btn = getButton('bold');
206197

@@ -210,7 +201,7 @@ describe('toolbar controls', () => {
210201
expect(btn.part.contains('toolbar-button-pressed')).to.be.false;
211202
});
212203

213-
it('should toggle "on" attribute for corresponding buttons when selection is changed', () => {
204+
it('should toggle "toolbar-button-pressed" part value for corresponding buttons when selection is changed', () => {
214205
const delta = new window.Quill.imports.delta([
215206
{ attributes: { bold: true }, insert: 'Foo\n' },
216207
{ attributes: { italic: true }, insert: 'Bar\n' },
@@ -223,19 +214,19 @@ describe('toolbar controls', () => {
223214
const linkBtn = getButton('link');
224215

225216
editor.setSelection(0, 1);
226-
expect(boldBtn.hasAttribute('on')).to.be.true;
227-
expect(italicBtn.hasAttribute('on')).to.be.false;
228-
expect(linkBtn.hasAttribute('on')).to.be.false;
217+
expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.true;
218+
expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.false;
219+
expect(linkBtn.part.contains('toolbar-button-pressed')).to.be.false;
229220

230221
editor.setSelection(4, 1);
231-
expect(boldBtn.hasAttribute('on')).to.be.false;
232-
expect(italicBtn.hasAttribute('on')).to.be.true;
233-
expect(linkBtn.hasAttribute('on')).to.be.false;
222+
expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.false;
223+
expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.true;
224+
expect(linkBtn.part.contains('toolbar-button-pressed')).to.be.false;
234225

235226
editor.setSelection(8, 1);
236-
expect(boldBtn.hasAttribute('on')).to.be.false;
237-
expect(italicBtn.hasAttribute('on')).to.be.false;
238-
expect(linkBtn.hasAttribute('on')).to.be.true;
227+
expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.false;
228+
expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.false;
229+
expect(linkBtn.part.contains('toolbar-button-pressed')).to.be.true;
239230
});
240231
});
241232

0 commit comments

Comments
 (0)