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/Button/Button.tsx

@@ -33,8 +33,8 @@ const _Button = <T extends ElementType = 'button', C = void, S = void>(
   } = propsWithDefaults;
 
   const { buttonProps } = useButtonAriaProps(restProps);
-  const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
-  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+  const { classProps, props: modifiedProps } = useButtonStyleProps({ ElementTag, ...restProps });
+  const { styleProps, props: otherProps } = useStyleProps({ ElementTag, ...modifiedProps });
 
   return (
     <ElementTag
@@ -52,4 +52,6 @@ const _Button = <T extends ElementType = 'button', C = void, S = void>(
 
 const Button = forwardRef<HTMLButtonElement, SpiritButtonProps<ElementType>>(_Button);
 
+Button.isSystemComponent = true;
+
 export default Button;

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

@@ -17,18 +17,25 @@ 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 ElementTag !== 'string' && { useUnsafe: typeof ElementTag === 'string' })}
+    >
       {typeof children === 'function' ? children({ isOpen }) : children}
-    </Component>
+    </ElementTag>
   );
 };
 
+TooltipTrigger.isSystemComponent = true;
+
 export default TooltipTrigger;

packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx

@@ -5,9 +5,16 @@ import { Tooltip, TooltipPopover, TooltipTrigger } from '..';
 const TooltipDefault = () => {
   const [open, setOpen] = useState(true);
 
+  const OutsideComponent = (props: any) => {
+    return <button {...props}>{props.children}</button>;
+  };
+
   return (
     <Tooltip id="tooltip-default" isOpen={open} onToggle={setOpen}>
-      <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
+      {/* <TooltipTrigger elementType="button" UNSAFE_className="unsafe"> */}
+      <TooltipTrigger elementType={Button} UNSAFE_className="unsafe">
+        I have a tooltip 😎
+      </TooltipTrigger>
       <TooltipPopover>Hello there!</TooltipPopover>
     </Tooltip>
   );

packages/web-react/src/components/Tooltip/demo/index.tsx

@@ -22,7 +22,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Default">
         <TooltipDefault />
       </DocsSection>
-      <DocsSection title="Dismissible Tooltip">
+      {/* <DocsSection title="Dismissible Tooltip">
         <TooltipDismissible />
       </DocsSection>
       <DocsSection title="Dismissible Tooltip via JS API">
@@ -42,7 +42,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       </DocsSection>
       <DocsSection title="Advanced Floating Functionality" stackAlignment="stretch">
         <TooltipAdvancedFloating />
-      </DocsSection>
+      </DocsSection> */}
     </IconsProvider>
   </React.StrictMode>,
 );