fix(KeyboardSearch): allow custom key styles inside a preset Keyboard (#484)

* fix(Keyboard): add nested Keyboard Search styles for number keys

* fix(withThemeStyles): update tone/mode filtering for colors to return value

* fix: roll back base theme changes

* fix(KeyboardSearch): remove unused imports from story

* fix: update withThemeStyles utils tests

---------

Co-authored-by: David Richards, Jr <[email protected]>

Author: erautenberg

packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.js

@@ -151,26 +151,24 @@ export default class Keyboard extends Base {
       };
 
       if (typeof keyProps === 'object') {
-        // keyId is used to account for localization
-        const iconName = keyProps.keyId || keyProps.title;
-        const keyIcon =
-          this.style.keyProps?.[keyboard]?.[iconName] ||
-          this.style.keyProps?.[iconName];
-
-        if (keyIcon && keyIcon.icon) {
-          return {
-            ...key,
-            ...keyProps,
-            ...this.style.keyProps?.[iconName],
-            style: {
-              iconStyle: {
-                ...keyIcon.iconStyle
-              }
-            },
-            size: keyIcon.size || keyProps.size
+        // keyId is used to account for style overrides on individual keys,
+        // icon updates, and localization
+        const keyName = keyProps.keyId || keyProps.title;
+        const keyOverrides =
+          this.style.keyProps?.[keyboard]?.[keyName] ||
+          this.style.keyProps?.[keyName] ||
+          {};
+        const keyPatch = { ...key, ...keyProps, ...keyOverrides };
+
+        if (keyOverrides?.icon) {
+          keyPatch.style = {
+            ...keyOverrides.style,
+            iconStyle: {
+              ...keyOverrides.iconStyle
+            }
           };
         }
-        return { ...key, ...keyProps };
+        return keyPatch;
       }
       return { ...key, title: keyProps };
     });

packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.js

@@ -40,8 +40,22 @@ export default class KeyboardSearch extends Keyboard {
         ['G', 'H', 'I', 'J', 'K', 'L'],
         ['M', 'N', 'O', 'P', 'Q', 'R'],
         ['S', 'T', 'U', 'V', 'W', 'X'],
-        ['Y', 'Z', '1', '2', '3', '4'],
-        ['5', '6', '7', '8', '9', '0'],
+        [
+          'Y',
+          'Z',
+          { title: '1', keyId: 'number' },
+          { title: '2', keyId: 'number' },
+          { title: '3', keyId: 'number' },
+          { title: '4', keyId: 'number' }
+        ],
+        [
+          { title: '5', keyId: 'number' },
+          { title: '6', keyId: 'number' },
+          { title: '7', keyId: 'number' },
+          { title: '8', keyId: 'number' },
+          { title: '9', keyId: 'number' },
+          { title: '0', keyId: 'number' }
+        ],
         [
           {
             title: 'Space',

packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.stories.js

@@ -17,8 +17,6 @@
  */
 
 import lng from '@lightningjs/core';
-import context from '../../globals/context/index';
-import utils from '../../utils';
 import { default as KeyboardSearchComponent } from './KeyboardSearch';
 import { Keyboard } from './Keyboard.stories';
 
@@ -31,10 +29,8 @@ export const KeyboardSearch = () =>
     static _template() {
       return {
         Keyboard: {
-          type: KeyboardSearchComponent,
-          defaultFormat: 'uppercase'
-        },
-        w: utils.getWidthByUpCount(context.theme, 3)
+          type: KeyboardSearchComponent
+        }
       };
     }
   };

packages/@lightningjs/ui-components/src/mixins/withThemeStyles/utils.js

@@ -556,7 +556,7 @@ export const colorParser = (targetObject, styleObj) => {
 
   // Process style object and remove unnecessary properties
   const processedStyle = JSON.stringify(styleObj, (_, value) => {
-    if (-1 < ['tone', 'mode'].indexOf(_)) return undefined; // Remove any tone/mode or mode/tone properties as they have already been processed
+    if (-1 < ['tone', 'mode'].indexOf(_)) return value; // Remove any tone/mode or mode/tone properties as they have already been processed
     if ('string' === typeof value && value.startsWith('theme.')) {
       // Support theme strings example: theme.radius.md
       return getValFromObjPath(targetObject, value); // If no theme value exists, the property will be removed from the object

packages/@lightningjs/ui-components/src/mixins/withThemeStyles/utils.test.js

@@ -880,15 +880,40 @@ describe('generateComponentStyleSource', () => {
     });
 
     expect(source).toStrictEqual({
-      unfocused_neutral: { color: 'primary' },
-      unfocused_inverse: { color: 'primary' },
-      unfocused_brand: { color: 'primary' },
-      focused_neutral: { color: 'primary' },
-      focused_inverse: { color: 'primary' },
-      focused_brand: { color: 'primary' },
-      disabled_neutral: { color: 'primary' },
-      disabled_inverse: { color: 'primary' },
-      disabled_brand: { color: 'primary' }
+      unfocused_neutral: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      unfocused_inverse: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      unfocused_brand: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      focused_neutral: {
+        mode: { unfocused: { color: 'primary' } }
+      },
+      focused_inverse: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      focused_brand: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      disabled_neutral: {
+        mode: { unfocused: { color: 'primary' } }
+      },
+      disabled_inverse: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      },
+      disabled_brand: {
+        color: 'primary',
+        mode: { unfocused: { color: 'primary' } }
+      }
     });
   });
 
@@ -908,15 +933,40 @@ describe('generateComponentStyleSource', () => {
     });
 
     expect(source).toStrictEqual({
-      unfocused_neutral: { color: 'primary' },
-      unfocused_inverse: { color: 'primary' },
-      unfocused_brand: { color: 'primary' },
-      focused_neutral: { color: 'primary' },
-      focused_inverse: { color: 'primary' },
-      focused_brand: { color: 'primary' },
-      disabled_neutral: { color: 'primary' },
-      disabled_inverse: { color: 'primary' },
-      disabled_brand: { color: 'primary' }
+      unfocused_neutral: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      unfocused_inverse: {
+        tone: { neutral: { color: 'primary' } }
+      },
+      unfocused_brand: {
+        tone: { neutral: { color: 'primary' } }
+      },
+      focused_neutral: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      focused_inverse: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      focused_brand: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      disabled_neutral: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      disabled_inverse: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      },
+      disabled_brand: {
+        color: 'primary',
+        tone: { neutral: { color: 'primary' } }
+      }
     });
   });
 });