fix(text): correctly handle variants that are not on the element object

.changeset/nervous-dingos-unite.md

@@ -0,0 +1,5 @@
+---
+'@twilio-paste/text': patch
+---
+
+[Text] Text now handles the case where a variant being set on the component, does not appear in the elements object set on the Customization Provider

packages/paste-core/primitives/text/__tests__/StyleFunctions.spec.tsx

@@ -171,4 +171,24 @@ describe('getCustomElementStyles', () => {
       });
     }
   });
+
+  it('should not throw when variants that are not present on the theme are set on a component', () => {
+    // this just covers a bug where Text would be looking for a variant that is not present on the theme
+    // and rather than gracefully handle this, it would throw an error
+
+    const primaryAlertProps = {
+      'data-paste-element': 'ALERT',
+      variant: 'noneexistantvariant',
+      ...mockTheme,
+    };
+    // @ts-expect-error because I'm not setting the whole theme
+    const alertCSSFun = getCustomElementStyles(primaryAlertProps);
+    if (typeof alertCSSFun === 'function') {
+      // eslint-disable-next-line jest/no-conditional-expect
+      expect(alertCSSFun()).toEqual({
+        padding: '10px',
+        textDecoration: 'underline',
+      });
+    }
+  });
 });

packages/paste-core/primitives/text/src/StyleFunctions.ts

@@ -1,5 +1,6 @@
 import {css, system} from '@twilio-paste/styling-library';
 import type {CSSObject} from '@twilio-paste/styling-library';
+import type {PasteCustomCSS} from '@twilio-paste/customization';
 import {PseudoPropStyles} from './PseudoPropStyles';
 import type {StyledTextProps} from './types';
 
@@ -61,12 +62,11 @@ export const getCustomElementStyles = (props: StyledTextProps): (() => CSSObject
 
     if (themeElements[targetElement] != null) {
       const elementOverrides = themeElements[targetElement];
-      const computedStyles = css(elementOverrides)(props);
+      const computedStyles = css(elementOverrides)(props) as PasteCustomCSS;
       const {variants, ...elementStyles} = computedStyles;
       let variantStyles = {};
 
-      if (props.variant != null && variants != null) {
-        // @ts-ignore typing of css function returns a cssObject which doesn't think variants exists
+      if (props.variant != null && variants != null && variants[props.variant] != null) {
         variantStyles = variants[props.variant];
       }