fix: color picker icons (BLO-1189) (#2762)

Author: matthewlipski

packages/react/src/editor/styles.css

@@ -141,91 +141,109 @@
 
 /* Highlight color styling */
 [data-style-type="textColor"][data-value="gray"],
+.bn-color-icon[data-text-color="gray"],
 .bn-block:has(> .bn-block-content[data-text-color="gray"]) {
   color: var(--bn-colors-highlights-gray-text);
 }
 
 [data-style-type="textColor"][data-value="brown"],
+.bn-color-icon[data-text-color="brown"],
 .bn-block:has(> .bn-block-content[data-text-color="brown"]) {
   color: var(--bn-colors-highlights-brown-text);
 }
 
 [data-style-type="textColor"][data-value="red"],
+.bn-color-icon[data-text-color="red"],
 .bn-block:has(> .bn-block-content[data-text-color="red"]) {
   color: var(--bn-colors-highlights-red-text);
 }
 
 [data-style-type="textColor"][data-value="orange"],
+.bn-color-icon[data-text-color="orange"],
 .bn-block:has(> .bn-block-content[data-text-color="orange"]) {
   color: var(--bn-colors-highlights-orange-text);
 }
 
 [data-style-type="textColor"][data-value="yellow"],
+.bn-color-icon[data-text-color="yellow"],
 .bn-block:has(> .bn-block-content[data-text-color="yellow"]) {
   color: var(--bn-colors-highlights-yellow-text);
 }
 
 [data-style-type="textColor"][data-value="green"],
+.bn-color-icon[data-text-color="green"],
 .bn-block:has(> .bn-block-content[data-text-color="green"]) {
   color: var(--bn-colors-highlights-green-text);
 }
 
 [data-style-type="textColor"][data-value="blue"],
+.bn-color-icon[data-text-color="blue"],
 .bn-block:has(> .bn-block-content[data-text-color="blue"]) {
   color: var(--bn-colors-highlights-blue-text);
 }
 
 [data-style-type="textColor"][data-value="purple"],
+.bn-color-icon[data-text-color="purple"],
 .bn-block:has(> .bn-block-content[data-text-color="purple"]) {
   color: var(--bn-colors-highlights-purple-text);
 }
 
 [data-style-type="textColor"][data-value="pink"],
+.bn-color-icon[data-text-color="pink"],
 .bn-block:has(> .bn-block-content[data-text-color="pink"]) {
   color: var(--bn-colors-highlights-pink-text);
 }
 
 [data-style-type="backgroundColor"][data-value="gray"],
+.bn-color-icon[data-background-color="gray"],
 .bn-block:has(> .bn-block-content[data-background-color="gray"]) {
   background-color: var(--bn-colors-highlights-gray-background);
 }
 
 [data-style-type="backgroundColor"][data-value="brown"],
+.bn-color-icon[data-background-color="brown"],
 .bn-block:has(> .bn-block-content[data-background-color="brown"]) {
   background-color: var(--bn-colors-highlights-brown-background);
 }
 
 [data-style-type="backgroundColor"][data-value="red"],
+.bn-color-icon[data-background-color="red"],
 .bn-block:has(> .bn-block-content[data-background-color="red"]) {
   background-color: var(--bn-colors-highlights-red-background);
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
+.bn-color-icon[data-background-color="orange"],
 .bn-block:has(> .bn-block-content[data-background-color="orange"]) {
   background-color: var(--bn-colors-highlights-orange-background);
 }
 
 [data-style-type="backgroundColor"][data-value="yellow"],
+.bn-color-icon[data-background-color="yellow"],
 .bn-block:has(> .bn-block-content[data-background-color="yellow"]) {
   background-color: var(--bn-colors-highlights-yellow-background);
 }
 
 [data-style-type="backgroundColor"][data-value="green"],
+.bn-color-icon[data-background-color="green"],
 .bn-block:has(> .bn-block-content[data-background-color="green"]) {
   background-color: var(--bn-colors-highlights-green-background);
 }
 
 [data-style-type="backgroundColor"][data-value="blue"],
+.bn-color-icon[data-background-color="blue"],
 .bn-block:has(> .bn-block-content[data-background-color="blue"]) {
   background-color: var(--bn-colors-highlights-blue-background);
 }
 
 [data-style-type="backgroundColor"][data-value="purple"],
+.bn-color-icon[data-background-color="purple"],
 .bn-block:has(> .bn-block-content[data-background-color="purple"]) {
   background-color: var(--bn-colors-highlights-purple-background);
 }
 
 [data-style-type="backgroundColor"][data-value="pink"],
+.bn-color-icon[data-background-color="pink"],
 .bn-block:has(> .bn-block-content[data-background-color="pink"]) {
   background-color: var(--bn-colors-highlights-pink-background);
 }

tests/src/end-to-end/colors/colors.test.ts

@@ -6,6 +6,7 @@ import {
   COLORS_BUTTON_SELECTOR,
   DRAG_HANDLE_MENU_SELECTOR,
   DRAG_HANDLE_SELECTOR,
+  H_ONE_BLOCK_SELECTOR,
   H_TWO_BLOCK_SELECTOR,
   TABLE_SELECTOR,
   TEXT_COLOR_SELECTOR,
@@ -19,6 +20,42 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe("Check Background & Text Color Functionality", () => {
+  test("Should be able to open the color picker from the formatting toolbar", async ({
+    page,
+  }) => {
+    await focusOnEditor(page);
+
+    await insertHeading(page, 1);
+    await page.keyboard.press("Shift+ArrowLeft");
+
+    await page.locator(COLORS_BUTTON_SELECTOR).click();
+
+    // Waits for the color picker dropdown to open & its animation to finish.
+    await page.waitForSelector(TEXT_COLOR_SELECTOR("red"));
+    await page.waitForTimeout(500);
+
+    expect(await page.screenshot()).toMatchSnapshot(
+      "colorPickerFormattingToolbar.png",
+    );
+  });
+  test("Should be able to open the color picker from the side menu", async ({
+    page,
+  }) => {
+    await focusOnEditor(page);
+
+    await insertHeading(page, 1);
+
+    await page.hover(H_ONE_BLOCK_SELECTOR);
+    await page.click(DRAG_HANDLE_SELECTOR);
+    await page.waitForSelector(DRAG_HANDLE_MENU_SELECTOR);
+    await page.hover("text=Colors");
+
+    // Waits for the color picker submenu to open & its animation to finish.
+    await page.waitForSelector(TEXT_COLOR_SELECTOR("red"));
+    await page.waitForTimeout(500);
+
+    expect(await page.screenshot()).toMatchSnapshot("colorPickerSideMenu.png");
+  });
   test("Should be able to apply a text color mark", async ({ page }) => {
     await focusOnEditor(page);