Skip to content

Commit 4a2d45a

Browse files
matthewlipskimatthewlipski
authored
fix: table cell colors (BLO-1198) (#2770)
1 parent 118d8dc commit 4a2d45a

7 files changed

Lines changed: 58 additions & 23 deletions

File tree

‎packages/core/src/editor/Block.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,92 +583,110 @@ NESTED BLOCKS
583583

584584
/* TEXT COLORS */
585585
[data-style-type="textColor"][data-value="gray"],
586+
[data-text-color="gray"],
586587
.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
587588
color: #9b9a97;
588589
}
589590

590591
[data-style-type="textColor"][data-value="brown"],
592+
[data-text-color="brown"],
591593
.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
592594
color: #64473a;
593595
}
594596

595597
[data-style-type="textColor"][data-value="red"],
598+
[data-text-color="red"],
596599
.bn-block:has(> .bn-block-content[data-text-color="red"]) {
597600
color: #e03e3e;
598601
}
599602

600603
[data-style-type="textColor"][data-value="orange"],
604+
[data-text-color="orange"],
601605
.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
602606
color: #d9730d;
603607
}
604608

605609
[data-style-type="textColor"][data-value="yellow"],
610+
[data-text-color="yellow"],
606611
.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
607612
color: #dfab01;
608613
}
609614

610615
[data-style-type="textColor"][data-value="green"],
616+
[data-text-color="green"],
611617
.bn-block:has(> .bn-block-content[data-text-color="green"]) {
612618
color: #4d6461;
613619
}
614620

615621
[data-style-type="textColor"][data-value="blue"],
622+
[data-text-color="blue"],
616623
.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
617624
color: #0b6e99;
618625
}
619626

620627
[data-style-type="textColor"][data-value="purple"],
628+
[data-text-color="purple"],
621629
.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
622630
color: #6940a5;
623631
}
624632

625633
[data-style-type="textColor"][data-value="pink"],
634+
[data-text-color="pink"],
626635
.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
627636
color: #ad1a72;
628637
}
629638

630639
/* BACKGROUND COLORS */
631640
[data-style-type="backgroundColor"][data-value="gray"],
641+
[data-background-color="gray"],
632642
.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
633643
background-color: #ebeced;
634644
}
635645

636646
[data-style-type="backgroundColor"][data-value="brown"],
647+
[data-background-color="brown"],
637648
.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
638649
background-color: #e9e5e3;
639650
}
640651

641652
[data-style-type="backgroundColor"][data-value="red"],
653+
[data-background-color="red"],
642654
.bn-block:has(> .bn-block-content[data-background-color="red"]) {
643655
background-color: #fbe4e4;
644656
}
645657

646658
[data-style-type="backgroundColor"][data-value="orange"],
659+
[data-background-color="orange"],
647660
.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
648661
background-color: #f6e9d9;
649662
}
650663

651664
[data-style-type="backgroundColor"][data-value="yellow"],
665+
[data-background-color="yellow"],
652666
.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
653667
background-color: #fbf3db;
654668
}
655669

656670
[data-style-type="backgroundColor"][data-value="green"],
671+
[data-background-color="green"],
657672
.bn-block:has(> .bn-block-content[data-background-color="green"]) {
658673
background-color: #ddedea;
659674
}
660675

661676
[data-style-type="backgroundColor"][data-value="blue"],
677+
[data-background-color="blue"],
662678
.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
663679
background-color: #ddebf1;
664680
}
665681

666682
[data-style-type="backgroundColor"][data-value="purple"],
683+
[data-background-color="purple"],
667684
.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
668685
background-color: #eae4f2;
669686
}
670687

671688
[data-style-type="backgroundColor"][data-value="pink"],
689+
[data-background-color="pink"],
672690
.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
673691
background-color: #f4dfeb;
674692
}

‎packages/react/src/editor/styles.css‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -141,109 +141,109 @@
141141

142142
/* Highlight color styling */
143143
[data-style-type="textColor"][data-value="gray"],
144-
.bn-color-icon[data-text-color="gray"],
144+
[data-text-color="gray"],
145145
.bn-block:has(> .bn-block-content[data-text-color="gray"]) {
146146
color: var(--bn-colors-highlights-gray-text);
147147
}
148148

149149
[data-style-type="textColor"][data-value="brown"],
150-
.bn-color-icon[data-text-color="brown"],
150+
[data-text-color="brown"],
151151
.bn-block:has(> .bn-block-content[data-text-color="brown"]) {
152152
color: var(--bn-colors-highlights-brown-text);
153153
}
154154

155155
[data-style-type="textColor"][data-value="red"],
156-
.bn-color-icon[data-text-color="red"],
156+
[data-text-color="red"],
157157
.bn-block:has(> .bn-block-content[data-text-color="red"]) {
158158
color: var(--bn-colors-highlights-red-text);
159159
}
160160

161161
[data-style-type="textColor"][data-value="orange"],
162-
.bn-color-icon[data-text-color="orange"],
162+
[data-text-color="orange"],
163163
.bn-block:has(> .bn-block-content[data-text-color="orange"]) {
164164
color: var(--bn-colors-highlights-orange-text);
165165
}
166166

167167
[data-style-type="textColor"][data-value="yellow"],
168-
.bn-color-icon[data-text-color="yellow"],
168+
[data-text-color="yellow"],
169169
.bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
170170
color: var(--bn-colors-highlights-yellow-text);
171171
}
172172

173173
[data-style-type="textColor"][data-value="green"],
174-
.bn-color-icon[data-text-color="green"],
174+
[data-text-color="green"],
175175
.bn-block:has(> .bn-block-content[data-text-color="green"]) {
176176
color: var(--bn-colors-highlights-green-text);
177177
}
178178

179179
[data-style-type="textColor"][data-value="blue"],
180-
.bn-color-icon[data-text-color="blue"],
180+
[data-text-color="blue"],
181181
.bn-block:has(> .bn-block-content[data-text-color="blue"]) {
182182
color: var(--bn-colors-highlights-blue-text);
183183
}
184184

185185
[data-style-type="textColor"][data-value="purple"],
186-
.bn-color-icon[data-text-color="purple"],
186+
[data-text-color="purple"],
187187
.bn-block:has(> .bn-block-content[data-text-color="purple"]) {
188188
color: var(--bn-colors-highlights-purple-text);
189189
}
190190

191191
[data-style-type="textColor"][data-value="pink"],
192-
.bn-color-icon[data-text-color="pink"],
192+
[data-text-color="pink"],
193193
.bn-block:has(> .bn-block-content[data-text-color="pink"]) {
194194
color: var(--bn-colors-highlights-pink-text);
195195
}
196196

197197
[data-style-type="backgroundColor"][data-value="gray"],
198-
.bn-color-icon[data-background-color="gray"],
198+
[data-background-color="gray"],
199199
.bn-block:has(> .bn-block-content[data-background-color="gray"]) {
200200
background-color: var(--bn-colors-highlights-gray-background);
201201
}
202202

203203
[data-style-type="backgroundColor"][data-value="brown"],
204-
.bn-color-icon[data-background-color="brown"],
204+
[data-background-color="brown"],
205205
.bn-block:has(> .bn-block-content[data-background-color="brown"]) {
206206
background-color: var(--bn-colors-highlights-brown-background);
207207
}
208208

209209
[data-style-type="backgroundColor"][data-value="red"],
210-
.bn-color-icon[data-background-color="red"],
210+
[data-background-color="red"],
211211
.bn-block:has(> .bn-block-content[data-background-color="red"]) {
212212
background-color: var(--bn-colors-highlights-red-background);
213213
}
214214

215215
[data-style-type="backgroundColor"][data-value="orange"],
216-
.bn-color-icon[data-background-color="orange"],
216+
[data-background-color="orange"],
217217
.bn-block:has(> .bn-block-content[data-background-color="orange"]) {
218218
background-color: var(--bn-colors-highlights-orange-background);
219219
}
220220

221221
[data-style-type="backgroundColor"][data-value="yellow"],
222-
.bn-color-icon[data-background-color="yellow"],
222+
[data-background-color="yellow"],
223223
.bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
224224
background-color: var(--bn-colors-highlights-yellow-background);
225225
}
226226

227227
[data-style-type="backgroundColor"][data-value="green"],
228-
.bn-color-icon[data-background-color="green"],
228+
[data-background-color="green"],
229229
.bn-block:has(> .bn-block-content[data-background-color="green"]) {
230230
background-color: var(--bn-colors-highlights-green-background);
231231
}
232232

233233
[data-style-type="backgroundColor"][data-value="blue"],
234-
.bn-color-icon[data-background-color="blue"],
234+
[data-background-color="blue"],
235235
.bn-block:has(> .bn-block-content[data-background-color="blue"]) {
236236
background-color: var(--bn-colors-highlights-blue-background);
237237
}
238238

239239
[data-style-type="backgroundColor"][data-value="purple"],
240-
.bn-color-icon[data-background-color="purple"],
240+
[data-background-color="purple"],
241241
.bn-block:has(> .bn-block-content[data-background-color="purple"]) {
242242
background-color: var(--bn-colors-highlights-purple-background);
243243
}
244244

245245
[data-style-type="backgroundColor"][data-value="pink"],
246-
.bn-color-icon[data-background-color="pink"],
246+
[data-background-color="pink"],
247247
.bn-block:has(> .bn-block-content[data-background-color="pink"]) {
248248
background-color: var(--bn-colors-highlights-pink-background);
249249
}

‎tests/src/end-to-end/tables/tables.test.ts‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import { expect } from "@playwright/test";
22
import { test } from "../../setup/setupScript.js";
3-
import { BASE_URL, TABLE_SELECTOR } from "../../utils/const.js";
3+
import {
4+
ADVANCED_TABLES_URL,
5+
BASE_URL,
6+
TABLE_SELECTOR,
7+
} from "../../utils/const.js";
48
import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js";
59
import { executeSlashCommand } from "../../utils/slashmenu.js";
610

7-
test.beforeEach(async ({ page }) => {
8-
await page.goto(BASE_URL);
9-
});
10-
1111
test.describe("Check Table interactions", () => {
1212
test("Should be able to type in cell", async ({ page }) => {
13+
await page.goto(BASE_URL);
1314
await focusOnEditor(page);
1415
await executeSlashCommand(page, "table");
1516
await page.keyboard.type("Table Cell");
1617

1718
await compareDocToSnapshot(page, "cellTyping.json");
1819
});
1920
test("Tab should cycle cells", async ({ page }) => {
21+
await page.goto(BASE_URL);
2022
await focusOnEditor(page);
2123
await executeSlashCommand(page, "table");
2224
// Cycle to sixth (last) cell.
@@ -33,6 +35,7 @@ test.describe("Check Table interactions", () => {
3335
await compareDocToSnapshot(page, "tabCells.json");
3436
});
3537
test("Arrow keys should move cells", async ({ page }) => {
38+
await page.goto(BASE_URL);
3639
await focusOnEditor(page);
3740
await executeSlashCommand(page, "table");
3841
// Move down to second (last) cell in column and third (last) cell in row.
@@ -51,6 +54,7 @@ test.describe("Check Table interactions", () => {
5154
await compareDocToSnapshot(page, "arrowKeyCells.json");
5255
});
5356
test("Enter should move to cell below", async ({ page }) => {
57+
await page.goto(BASE_URL);
5458
await focusOnEditor(page);
5559
await executeSlashCommand(page, "table");
5660
await page.keyboard.type("Top");
@@ -60,6 +64,7 @@ test.describe("Check Table interactions", () => {
6064
await compareDocToSnapshot(page, "enterMovesToCellBelow.json");
6165
});
6266
test("Shift+Enter should create a new line within cell", async ({ page }) => {
67+
await page.goto(BASE_URL);
6368
await focusOnEditor(page);
6469
await executeSlashCommand(page, "table");
6570
await page.keyboard.type("Line 1");
@@ -83,6 +88,7 @@ test.describe("Check Table interactions", () => {
8388
"Playwright doesn't correctly simulate drag events in Firefox.",
8489
);
8590

91+
await page.goto(BASE_URL);
8692
await focusOnEditor(page);
8793
await executeSlashCommand(page, "table");
8894

@@ -184,4 +190,11 @@ test.describe("Check Table interactions", () => {
184190
// Expected: only R2 moved. Buggy (#2691): R3 follows along.
185191
expect(order).toEqual(["R1", "R3", "R4", "R5", "R2"]);
186192
});
193+
// Regression test for table cell colors.
194+
test("Should render table cell colors", async ({ page }) => {
195+
await page.goto(ADVANCED_TABLES_URL, { waitUntil: "networkidle" });
196+
await page.waitForSelector(TABLE_SELECTOR);
197+
198+
expect(await page.screenshot()).toMatchSnapshot("tableCellColors.png");
199+
});
187200
});

‎tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-chromium-linux.png‎

30.2 KB
Loading

‎tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-firefox-linux.png‎

53.5 KB
Loading

‎tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-webkit-linux.png‎

98.6 KB
Loading

‎tests/src/utils/const.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ export const NO_TRAILING_BLOCK_URL = !process.env.RUN_IN_DOCKER
5959
? `http://localhost:${PORT}/basic/no-trailing-block?hideMenu`
6060
: `http://host.docker.internal:${PORT}/basic/no-trailing-block?hideMenu`;
6161

62+
export const ADVANCED_TABLES_URL = !process.env.RUN_IN_DOCKER
63+
? `http://localhost:${PORT}/ui-components/advanced-tables?hideMenu`
64+
: `http://host.docker.internal:${PORT}/ui-components/advanced-tables?hideMenu`;
65+
6266
export const PASTE_ZONE_SELECTOR = "#pasteZone";
6367

6468
export const EDITOR_SELECTOR = `.bn-editor`;

0 commit comments

Comments
 (0)