UNSAFE classname test

examples/next-with-app-router/package.json

@@ -15,7 +15,8 @@
     "@lmc-eu/spirit-web-react": "workspace:^",
     "next": "14.2.18",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sass": "^1.83.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.2.18",

examples/next-with-app-router/src/app/globals.scss

@@ -1 +1,13 @@
 @import '@lmc-eu/spirit-web/src/scss';
+
+.test {
+    font-weight: bold;
+
+    &::before {
+        content: '✅ ';
+    }
+}
+
+p:not(.test)::before {
+    content: '❌ ';
+}

examples/next-with-app-router/src/app/test1/components/OutsideComponent.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import React from 'react';
+
+const OutsideComponent = (props: any) => {
+  return <p {...props}>{props.children}</p>;
+};
+
+export default OutsideComponent;

examples/next-with-app-router/src/app/test1/components/TestComponent.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React, { ElementType, ReactNode } from 'react';
+import { StyleProps, TransferProps } from '../../../../../../packages/web-react/src/types';
+// import { useStyleProps } from './originalStyleProps';
+import { useStyleProps } from './newStyleProps';
+import classNames from 'classnames';
+
+interface TestComponentProps extends StyleProps, TransferProps {
+  elementType?: ElementType | string;
+  children?: string | ReactNode;
+}
+
+const defaultProps: TestComponentProps = {
+  elementType: 'p',
+};
+
+const TestComponent = (props: TestComponentProps) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { elementType: ElementTag = 'p', children, ...rest } = propsWithDefaults;
+
+  const { styleProps, props: transferProps } = useStyleProps({ ElementTag, ...rest });
+
+  return (
+    <ElementTag {...transferProps} {...styleProps}>
+      {children}
+    </ElementTag>
+  );
+};
+
+export default TestComponent;

examples/next-with-app-router/src/app/test1/components/newStyleProps.ts

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { CSSProperties, HTMLAttributes, useContext } from 'react';
+import { warning } from '../../../../../../packages/web-react/src//common/utilities';
+import ClassNamePrefixContext from '../../../../../../packages/web-react/src/context/ClassNamePrefixContext';
+import { StyleProps } from '../../../../../../packages/web-react/src//types';
+import { useStyleUtilities } from '../../../../../../packages/web-react/src/hooks/useStyleUtilities';
+
+export type StylePropsResult = {
+  styleProps: HTMLAttributes<HTMLElement>;
+  props: HTMLAttributes<HTMLElement>;
+};
+
+export function useStyleProps<T extends StyleProps & { ElementTag?: any }>(props: T): StylePropsResult {
+  const classNamePrefix = useContext(ClassNamePrefixContext);
+  const { UNSAFE_className, UNSAFE_style, ElementTag, ...otherProps } = props;
+  const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix);
+
+  const style: CSSProperties = { ...UNSAFE_style };
+
+  if (typeof ElementTag !== 'function') {
+    // Want to check if className prop exists, but not to define it in StyleProps type
+    // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
+    if (modifiedProps.className) {
+      warning(
+        false,
+        'The className prop is unsafe and is unsupported in Spirit Web React. ' +
+          'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
+          'Note that this may break in future versions due to DOM structure changes.',
+      );
+
+      // @ts-expect-error same as above, let me live my life
+      delete modifiedProps.className;
+    }
+
+    // Want to check if style prop exists, but not to define it in StyleProps type
+    // @ts-expect-error Property 'style' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
+    if (modifiedProps.style) {
+      warning(
+        false,
+        'The style prop is unsafe and is unsupported in Spirit Web React. ' +
+          'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
+          'Note that this may break in future versions due to DOM structure changes.',
+      );
+
+      // @ts-expect-error same as above, let me live my life
+      delete modifiedProps.style;
+    }
+
+    const styleProps = {
+      style: Object.keys(style).length > 0 ? style : undefined,
+      className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
+    };
+
+    return {
+      styleProps,
+      props: modifiedProps as HTMLAttributes<HTMLElement>,
+    };
+  }
+
+  return {
+    styleProps: {
+      ...(UNSAFE_style !== undefined && { UNSAFE_style }),
+      ...(UNSAFE_className !== undefined && { UNSAFE_className }),
+    },
+    props: { ...modifiedProps },
+  };
+}

examples/next-with-app-router/src/app/test1/components/originalStyleProps.ts

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import { CSSProperties, HTMLAttributes, useContext } from 'react';
+import { warning } from '../../../../../../packages/web-react/src//common/utilities';
+import ClassNamePrefixContext from '../../../../../../packages/web-react/src/context/ClassNamePrefixContext';
+import { StyleProps } from '../../../../../../packages/web-react/src//types';
+import { useStyleUtilities } from '../../../../../../packages/web-react/src/hooks/useStyleUtilities';
+
+export type StylePropsResult = {
+  styleProps: HTMLAttributes<HTMLElement>;
+  props: HTMLAttributes<HTMLElement>;
+};
+
+export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult {
+  const classNamePrefix = useContext(ClassNamePrefixContext);
+  const { UNSAFE_className, UNSAFE_style, ...otherProps } = props;
+  const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix);
+
+  const style: CSSProperties = { ...UNSAFE_style };
+
+  // Want to check if className prop exists, but not to define it in StyleProps type
+  // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
+  if (modifiedProps.className) {
+    warning(
+      false,
+      'The className prop is unsafe and is unsupported in Spirit Web React. ' +
+        'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
+        'Note that this may break in future versions due to DOM structure changes.',
+    );
+
+    // @ts-expect-error same as above, let me live my life
+    delete modifiedProps.className;
+  }
+
+  // Want to check if style prop exists, but not to define it in StyleProps type
+  // @ts-expect-error Property 'style' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
+  if (modifiedProps.style) {
+    warning(
+      false,
+      'The style prop is unsafe and is unsupported in Spirit Web React. ' +
+        'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
+        'Note that this may break in future versions due to DOM structure changes.',
+    );
+
+    // @ts-expect-error same as above, let me live my life
+    delete modifiedProps.style;
+  }
+
+  const styleProps = {
+    style: Object.keys(style).length > 0 ? style : undefined,
+    className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
+  };
+
+  return {
+    styleProps,
+    props: modifiedProps as HTMLAttributes<HTMLElement>,
+  };
+}

examples/next-with-app-router/src/app/test1/page.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Container, Heading, Text as SpiritText } from '@lmc-eu/spirit-web-react';
+import TestComponent from './components/TestComponent';
+import OutsideComponent from './components/OutsideComponent';
+
+const page = () => {
+  return (
+    <Container marginTop="space-1000" marginBottom="space-1000">
+      <Heading elementType="h1" size="medium" marginBottom="space-1000">
+        Test component 1
+      </Heading>
+
+      <Heading elementType="h2" size="small" marginBottom="space-1000">
+        Should work
+      </Heading>
+
+      {/* TESTING ⬇ */}
+      <>
+        <TestComponent UNSAFE_className="test" UNSAFE_style={{ color: 'green' }}>
+          Spirit Text component without elementType
+        </TestComponent>
+
+        <TestComponent elementType="p" UNSAFE_className="test" UNSAFE_style={{ color: 'green' }}>
+          HTML element "p" with UNSAFE class and style
+        </TestComponent>
+
+        <TestComponent elementType={SpiritText} UNSAFE_className="test" UNSAFE_style={{ color: 'green' }}>
+          Spirit Text component with UNSAFE class and style
+        </TestComponent>
+
+        <TestComponent elementType={OutsideComponent} className="test" style={{ color: 'green' }}>
+          Random component with class and style
+        </TestComponent>
+      </>
+      {/* TESTING ⬆ */}
+
+      <Heading elementType="h2" size="small" marginBottom="space-1000" marginTop="space-1000">
+        Should not work
+      </Heading>
+
+      {/* TESTING ⬇ */}
+      <>
+        {/* This will not be working - Spirit component accepts only UNSAFE style props */}
+        <TestComponent elementType={SpiritText} className="test" style={{ color: 'green' }}>
+          Spirit Text component with class and style
+        </TestComponent>
+
+        {/* This will not be working - Random component doesn't know what UNSAFE style props are */}
+        <TestComponent elementType={OutsideComponent} UNSAFE_className="test" UNSAFE_style={{ color: 'green' }}>
+          Random component with UNSAFE class and style
+        </TestComponent>
+      </>
+      {/* TESTING ⬆ */}
+    </Container>
+  );
+};
+
+export default page;

packages/web-react/src/components/Tooltip/TooltipTrigger.tsx

@@ -17,17 +17,15 @@ const defaultProps: TooltipTriggerProps = {
 
 const TooltipTrigger = (props: TooltipTriggerProps) => {
   const propsWithDefaults = { ...defaultProps, ...props };
-  const { elementType = 'button', children, ...rest } = propsWithDefaults;
+  const { elementType: ElementTag = 'button', children, ...rest } = propsWithDefaults;
   const { id, isOpen, triggerRef, getReferenceProps } = useTooltipContext();
 
-  const Component = elementType;
-
-  const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps(rest);
+  const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps({ ElementTag, ...rest });
 
   return (
-    <Component {...transferProps} {...triggerStyleProps} id={id} ref={triggerRef} {...getReferenceProps()}>
+    <ElementTag {...transferProps} {...triggerStyleProps} id={id} ref={triggerRef} {...getReferenceProps()}>
       {typeof children === 'function' ? children({ isOpen }) : children}
-    </Component>
+    </ElementTag>
   );
 };
 

packages/web-react/src/hooks/styleProps.ts

@@ -5,53 +5,68 @@ import ClassNamePrefixContext from '../context/ClassNamePrefixContext';
 import { StyleProps } from '../types';
 import { useStyleUtilities } from './useStyleUtilities';
 
+export type UnsafeStylePropsResult = {
+  UNSAFE_className?: string;
+  UNSAFE_style?: CSSProperties;
+};
+
 export type StylePropsResult = {
-  styleProps: HTMLAttributes<HTMLElement>;
+  styleProps: HTMLAttributes<HTMLElement> | UnsafeStylePropsResult;
   props: HTMLAttributes<HTMLElement>;
 };
 
 export function useStyleProps<T extends StyleProps>(props: T): StylePropsResult {
   const classNamePrefix = useContext(ClassNamePrefixContext);
-  const { UNSAFE_className, UNSAFE_style, ...otherProps } = props;
+  const { UNSAFE_className, UNSAFE_style, ElementTag, ...otherProps } = props;
   const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix);
 
   const style: CSSProperties = { ...UNSAFE_style };
 
-  // Want to check if className prop exists, but not to define it in StyleProps type
-  // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
-  if (modifiedProps.className) {
-    warning(
-      false,
-      'The className prop is unsafe and is unsupported in Spirit Web React. ' +
-        'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
-        'Note that this may break in future versions due to DOM structure changes.',
-    );
-
-    // @ts-expect-error same as above, let me live my life
-    delete modifiedProps.className;
-  }
+  if (typeof ElementTag !== 'function') {
+    // Want to check if className prop exists, but not to define it in StyleProps type
+    // @ts-expect-error Property 'className' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
+    if (modifiedProps.className) {
+      warning(
+        false,
+        'The className prop is unsafe and is unsupported in Spirit Web React. ' +
+          'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
+          'Note that this may break in future versions due to DOM structure changes.',
+      );
 
-  // Want to check if style prop exists, but not to define it in StyleProps type
-  // @ts-expect-error Property 'style' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
-  if (modifiedProps.style) {
-    warning(
-      false,
-      'The style prop is unsafe and is unsupported in Spirit Web React. ' +
-        'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
-        'Note that this may break in future versions due to DOM structure changes.',
-    );
-
-    // @ts-expect-error same as above, let me live my life
-    delete modifiedProps.style;
-  }
+      // @ts-expect-error same as above, let me live my life
+      delete modifiedProps.className;
+    }
 
-  const styleProps = {
-    style: Object.keys(style).length > 0 ? style : undefined,
-    className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
-  };
+    // Want to check if style prop exists, but not to define it in StyleProps type
+    // @ts-expect-error Property 'style' does not exist on type 'Omit<T, "UNSAFE_className" | "UNSAFE_style">'.
+    if (modifiedProps.style) {
+      warning(
+        false,
+        'The style prop is unsafe and is unsupported in Spirit Web React. ' +
+          'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
+          'Note that this may break in future versions due to DOM structure changes.',
+      );
+
+      // @ts-expect-error same as above, let me live my life
+      delete modifiedProps.style;
+    }
+
+    const styleProps = {
+      style: Object.keys(style).length > 0 ? style : undefined,
+      className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
+    };
+
+    return {
+      styleProps,
+      props: modifiedProps as HTMLAttributes<HTMLElement>,
+    };
+  }
 
   return {
-    styleProps,
-    props: modifiedProps as HTMLAttributes<HTMLElement>,
+    styleProps: {
+      ...(UNSAFE_style !== undefined && { UNSAFE_style }),
+      ...(UNSAFE_className !== undefined && { UNSAFE_className }),
+    },
+    props: { ...modifiedProps } as HTMLAttributes<HTMLElement>,
   };
 }

packages/web-react/src/types/shared/style.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ElementType } from 'react';
 import { SpacingStyleProp } from '../../constants';
 import { BreakpointToken, SpaceToken } from './tokens';
 
@@ -20,7 +20,10 @@ export interface SpacingCSSProperties extends CSSProperties {
   [index: `--${string}`]: string | undefined | number;
 }
 
+type ElementTagType = string | ElementType;
+
 export interface StyleProps extends SpacingProps {
+  ElementTag?: ElementTagType;
   // For backward compatibility!
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */
   UNSAFE_className?: string;