(core) Enable the 'none' option in ColorSelect for cell and header text styles

Test Plan: Added a test case

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D4120

app/client/ui2018/ColorSelect.ts

@@ -324,7 +324,7 @@ class PickerComponent extends Disposable {
           )
         ),
         cssEmptyBox(
-          cssEmptyBox.cls('-selected', (use) => !use(this._colorCss)),
+          cssEmptyBox.cls('-selected', (use) => !use(this._colorHex)),
           dom.on('click', () => this._setValue(undefined)),
           dom.hide(!this._options.allowsNone),
           cssNoneIcon('Empty'),

app/client/widgets/CellStyle.ts

@@ -54,6 +54,7 @@ export class CellStyle extends Disposable {
                   textColor: new ColorOption({
                     color: headerTextColor,
                     defaultColor: theme.tableHeaderFg.toString(),
+                    allowsNone: true,
                     noneText: 'default',
                   }),
                   fillColor: new ColorOption({
@@ -109,6 +110,7 @@ export class CellStyle extends Disposable {
               textColor: new ColorOption({
                 color: textColor,
                 defaultColor: this._defaultTextColor,
+                allowsNone: true,
                 noneText: 'default',
               }),
               fillColor: new ColorOption({

package.json

@@ -95,7 +95,7 @@
     "i18next-scanner": "4.1.0",
     "jsdom": "16.5.0",
     "mocha": "10.2.0",
-    "mocha-webdriver": "0.3.1",
+    "mocha-webdriver": "0.3.2",
     "moment-locales-webpack-plugin": "^1.2.0",
     "nodemon": "^2.0.4",
     "otplib": "12.0.1",

test/nbrowser/CellColor.ts

@@ -458,6 +458,10 @@ describe('CellColor', function() {
     assert.equal(await cell.getCssValue('background-color'), 'rgba(0, 0, 255, 1)');
   });
 
+  const toggleDefaultColor = 'rgba(96, 96, 96, 1)';
+  const switchDefaultColor = 'rgba(44, 176, 175, 1)';
+  const getPickerCurrentTextColor = () => driver.find('.test-text-color-square').getCssValue('background-color');
+
   it('should handle correctly default text color', async function() {
     // Create new checkbox column
     await driver.find('.mod-add-column').click();
@@ -470,8 +474,7 @@ describe('CellColor', function() {
 
     // check color preview is correct
     assert.equal(await driver.find('.test-text-hex').value(), 'default');
-    assert.equal(await driver.find('.test-text-color-square').getCssValue('background-color'),
-      'rgba(96, 96, 96, 1)');
+    assert.equal(await getPickerCurrentTextColor(), toggleDefaultColor);
 
     // close color picker
     await driver.sendKeys(Key.ENTER);
@@ -486,13 +489,41 @@ describe('CellColor', function() {
 
     // check color preview is correct
     assert.equal(await driver.find('.test-text-hex').value(), 'default');
-    assert.equal(await driver.find('.test-text-color-square').getCssValue('background-color'),
-      'rgba(44, 176, 175, 1)');
+    assert.equal(await getPickerCurrentTextColor(), switchDefaultColor);
 
     // close picker
     await driver.sendKeys(Key.ESCAPE);
   });
 
+  it('should allow reverting to default text color', async function() {
+    // Continuing on the previous test case, change Switch widget from default to an explicit color.
+    await gu.openCellColorPicker();
+    assert.equal(await driver.find('.test-text-hex').value(), 'default');
+    assert.equal(await getPickerCurrentTextColor(), switchDefaultColor);
+    await gu.setTextColor('rgb(255, 0, 0)');
+    assert.equal(await driver.find('.test-text-hex').value(), '#FF0000');
+    assert.equal(await getPickerCurrentTextColor(), 'rgba(255, 0, 0, 1)');
+    await driver.sendKeys(Key.ENTER);
+    await gu.waitForServer();
+
+    // Change widget to Toggle
+    await driver.find('.test-fbuilder-widget-select').click();
+    await driver.findContent('.test-select-row', /CheckBox/).click();
+    await gu.waitForServer();
+
+    // Check the saved color applies.
+    await gu.openCellColorPicker();
+    assert.equal(await driver.find('.test-text-hex').value(), '#FF0000');
+    assert.equal(await getPickerCurrentTextColor(), 'rgba(255, 0, 0, 1)');
+
+    // Revert to default; the new widget has a different default.
+    await driver.find('.test-text-empty').click();
+    assert.equal(await driver.find('.test-text-hex').value(), 'default');
+    assert.equal(await getPickerCurrentTextColor(), toggleDefaultColor);
+    await driver.sendKeys(Key.ENTER);
+    await gu.waitForServer();
+  });
+
   it('should not save default color', async function() {
     // This test catch a bug that used to save the default color to server when changing widget format
 

yarn.lock

@@ -5734,10 +5734,10 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mocha-webdriver@0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/mocha-webdriver/-/mocha-webdriver-0.3.1.tgz#5ed238e710ee2e4dfe72208cdd1dc4a15d2aa644"
-  integrity sha512-4apKuGdB72aEqnT2LdspLCOGXpWui5EJ/mVsw9UcI8ps2SkKHAhHZtHf05CKuTmQJJZcDa2mpcP4oXNXXDsZlA==
+mocha-webdriver@0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/mocha-webdriver/-/mocha-webdriver-0.3.2.tgz#cfaf7cab18335993eeaccbd43f2547a236d0cd26"
+  integrity sha512-hUM9g/Z8RYebRrCHGfmSMfi/EfPcm1ETzJxFA4XfKOu0xp9HumEo38qkiIbb724eZ0kwLy3X97hMjLIOuc5ihQ==
   dependencies:
     chai "^4.1.2"
     chai-as-promised "^7.1.1"