Feat(web-react): UNSAFE_classname in elementTypes components

- `styleProps` updated to handle `UNSAFE_classname` in elementTypes components - `DropdownTrigger` duplicated classNames fixed and marked as spirit component - `Button` component marked as spirit component - Added global types for `spiritComponent` prop
lmc-eu · Feb 4, 2025 · d407e78 · d407e78
1 parent 9b9c1fc
commit d407e78
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 73 deletions.
diff --git a/examples/next-with-app-router/package.json b/examples/next-with-app-router/package.json
@@ -15,7 +15,8 @@
     "@lmc-eu/spirit-web-react": "workspace:^",
     "next": "14.2.23",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sass": "^1.83.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.2.23",

diff --git a/packages/web-react/src/components/Button/Button.tsx b/packages/web-react/src/components/Button/Button.tsx
@@ -34,7 +34,7 @@ const _Button = <T extends ElementType = 'button', C = void, S = void>(
 
   const { buttonProps } = useButtonAriaProps(restProps);
   const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
-  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+  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.spiritComponent = 'Button';
+
 export default Button;
diff --git a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
 import { DropdownTriggerProps } from '../../types';
@@ -14,25 +13,23 @@ const defaultProps = {
 
 const DropdownTrigger = <T extends ElementType = 'button'>(props: DropdownTriggerProps<T>) => {
   const propsWithDefaults = { ...defaultProps, ...props };
-  const { elementType = 'button', children, ...rest } = propsWithDefaults;
+  const { elementType: ElementTag = 'button', children, ...rest } = propsWithDefaults;
   const { id, isOpen, onToggle, fullWidthMode, triggerRef } = useDropdownContext();
-  const Component = elementType;
   const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });
-  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+  const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps({
+    ElementTag,
+    transferClassName: classProps.trigger,
+    ...modifiedProps,
+  });
   const { triggerProps } = useDropdownAriaProps({ id, isOpen, toggleHandler: onToggle, fullWidthMode });
 
   return (
-    <Component
-      {...rest} // ⚠️ This is maybe a bug, when component is pass via `elementType` prop, the rest props are passed to the component
-      {...otherProps}
-      {...triggerProps}
-      ref={triggerRef}
-      className={classNames(classProps.trigger, styleProps.className)}
-      style={styleProps.style}
-    >
+    <ElementTag {...transferProps} {...triggerProps} {...triggerStyleProps} id={id} ref={triggerRef}>
       {typeof children === 'function' ? children({ isOpen }) : children}
-    </Component>
+    </ElementTag>
   );
 };
 
+DropdownTrigger.spiritComponent = 'DropdownTrigger';
+
 export default DropdownTrigger;
diff --git a/packages/web-react/src/components/Dropdown/__tests__/DropdownTrigger.test.tsx b/packages/web-react/src/components/Dropdown/__tests__/DropdownTrigger.test.tsx
@@ -8,8 +8,16 @@ import DropdownTrigger from '../DropdownTrigger';
 jest.mock('../../../hooks/useIcon');
 
 describe('DropdownTrigger', () => {
+  // pass style props to the default trigger
+  stylePropsTest((props) => <DropdownTrigger {...props} />);
+
+  // pass style props to the custom trigger
   stylePropsTest((props) => <DropdownTrigger elementType={Button} {...props} />);
 
+  // pass rest props to the default trigger
+  restPropsTest((props) => <DropdownTrigger {...props} />, 'button');
+
+  // pass rest props to the custom trigger
   restPropsTest((props) => <DropdownTrigger elementType={Button} {...props} />, 'button');
 
   it('should have Button elementType', () => {

diff --git a/packages/web-react/src/components/Tooltip/README.md b/packages/web-react/src/components/Tooltip/README.md
@@ -30,7 +30,7 @@ const [open, setOpen] = React.useState(false);
 </Tooltip>;
 ```
 
-### Trigger
+### TooltipTrigger
 
 You can choose whether you want to open the tooltip on `click` and/or `hover`.
 By default, both options are active, e.g., `trigger={['click', 'hover']}`.
@@ -60,6 +60,7 @@ const [open, setOpen] = React.useState(false);
 | Attribute                       | Type                                                              | Default              | Required | Description                                                                                                                                                                                                                                                                |
 | ------------------------------- | ----------------------------------------------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `children`                      | `ReactNode`                                                       | —                    | ✓        | Tooltip children's nodes - `TooltipTrigger` and `TooltipPopover`                                                                                                                                                                                                           |
+| `elementType`                   | `ElementType`                                                     | "button"             | ✕        | Type of element used as trigger                                                                                                                                                                                                                                            |
 | `enableFlipping`                | `bool`                                                            | true                 | ✕        | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`.                                                                                                                |
 | `enableFlippingCrossAxis`       | `bool`                                                            | true                 | ✕        | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`.                                                                                                           |
 | `enableShifting`                | `bool`                                                            | true                 | ✕        | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position.                                                                                                                                                        |
@@ -68,11 +69,11 @@ const [open, setOpen] = React.useState(false);
 | `flipFallbackPlacements`        | `string`                                                          | -                    | ✕        | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"`                                                  |
 | `id`                            | `string`                                                          | -                    | ✓        | Tooltip id                                                                                                                                                                                                                                                                 |
 | `isDismissible`                 | `bool`                                                            | false                | ✕        | Make tooltip dismissible                                                                                                                                                                                                                                                   |
+| `isFocusableOnHover`            | `bool`                                                            | false                | ✕        | Allows you to mouse over a tooltip without closing it. We suggest turning off the `click` trigger if you use this feature.                                                                                                                                                 |
 | `isOpen`                        | `bool`                                                            | -                    | ✓        | Open state                                                                                                                                                                                                                                                                 |
 | `onToggle`                      | `() => void`                                                      | -                    | ✓        | Function for toggle open state of dropdown                                                                                                                                                                                                                                 |
 | `placement`                     | [Placement Dictionary][dictionary-placement]                      | "bottom"             | ✕        | Placement of tooltip                                                                                                                                                                                                                                                       |
 | `positionStrategy`              | \[`absolute` \| `fixed`] ([Strategy type][use-floating-strategy]) | "absolute"           | ✕        | This is the type of CSS position property to use.                                                                                                                                                                                                                          |
-| `isFocusableOnHover`            | `bool`                                                            | false                | ✕        | Allows you to mouse over a tooltip without closing it. We suggest turning off the `click` trigger if you use this feature.                                                                                                                                                 |
 | `trigger`                       | \[`click` \| `hover` \| `manual`]                                 | \["click", "hover" ] | ✕        | How tooltip is triggered: `click`, `hover`, `manual`. You may pass multiple triggers. If you pass `manual`, there will be no toggle functionality and you should provide your own toggle solution.                                                                         |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].

diff --git a/packages/web-react/src/components/Tooltip/TooltipTrigger.tsx b/packages/web-react/src/components/Tooltip/TooltipTrigger.tsx
@@ -1,34 +1,29 @@
 'use client';
 
-import React, { ElementType, ReactNode } from 'react';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
-import { StyleProps, TransferProps } from '../../types';
+import { TooltipTriggerProps } from '../../types';
 import { useTooltipContext } from './TooltipContext';
 
-interface TooltipTriggerProps extends StyleProps, TransferProps {
-  elementType?: ElementType | string;
-  children?: string | ReactNode | ((props: { isOpen: boolean }) => ReactNode);
-}
-
-const defaultProps: TooltipTriggerProps = {
+const defaultProps: Partial<TooltipTriggerProps> = {
   elementType: 'button',
   children: null,
 };
 
 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>
   );
 };
 
+TooltipTrigger.spiritComponent = 'TooltipTrigger';
+
 export default TooltipTrigger;
diff --git a/packages/web-react/src/global.d.ts b/packages/web-react/src/global.d.ts
@@ -1,7 +1,5 @@
-declare module '*.md' {
-  const content: string;
-  export default content;
-}
+/* eslint-disable @typescript-eslint/ban-types */
+import type { ExoticComponent, FC, StaticLifecycle } from 'react';
 
 interface Window {
   console: Console;
@@ -15,6 +13,28 @@ interface Window {
  *  Try `npm i --save-dev @types/prettier` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier';`
  * 5 import { BuiltInParserName } from 'prettier';
  */
-declare module 'prettier' {
-  export type BuiltInParserName = unknown;
+
+declare global {
+  module '*.md' {
+    const content: string;
+    export default content;
+  }
+
+  module 'prettier' {
+    export type BuiltInParserName = unknown;
+  }
+
+  namespace React {
+    interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
+      spiritComponent?: string;
+    }
+
+    interface FunctionComponent<P = {}> extends FC<P> {
+      spiritComponent?: string;
+    }
+
+    interface ComponentClass<P = {}, S = {}> extends StaticLifecycle<P, S> {
+      spiritComponent?: string;
+    }
+  }
 }
diff --git a/packages/web-react/src/hooks/__tests__/styleProps.test.ts b/packages/web-react/src/hooks/__tests__/styleProps.test.ts
@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { Button } from '../../components/Button';
 import { StyleProps } from '../../types';
 import { useStyleProps } from '../styleProps';
 
@@ -15,6 +16,10 @@ describe('styleProps', () => {
         { className: undefined, style: { 'vertical-align': 'center' } },
       ],
       [{ role: 'button' }, { className: undefined, style: undefined }],
+      [
+        { ElementTag: Button, UNSAFE_className: 'test-class' },
+        { UNSAFE_className: 'test-class', style: undefined },
+      ],
     ])('should use UNSAFE_style and UNSAFE_className props', (input, expected) => {
       const { result } = renderHook(() => useStyleProps(input as StyleProps));
 
@@ -125,6 +130,10 @@ describe('styleProps', () => {
         { margin: 'space-100', UNSAFE_className: 'm-500' },
         { className: 'm-500 m-100', style: undefined },
       ],
+      [
+        { ElementTag: Button, margin: 'space-100', UNSAFE_className: 'm-500' },
+        { UNSAFE_className: 'm-500 m-100', style: undefined },
+      ],
     ])('should return correct combination of class and style', (input, expected) => {
       const { result } = renderHook(() => useStyleProps(input as StyleProps));
 

diff --git a/packages/web-react/src/hooks/styleProps.ts b/packages/web-react/src/hooks/styleProps.ts
@@ -5,8 +5,15 @@ import ClassNamePrefixContext from '../context/ClassNamePrefixContext';
 import { StyleProps } from '../types';
 import { useStyleUtilities } from './useStyleUtilities';
 
+export type UnsafeStylePropsResult = {
+  UNSAFE_className?: string;
+  UNSAFE_style?: CSSProperties;
+  className?: string;
+  style?: CSSProperties;
+};
+
 export type StylePropsResult = {
-  styleProps: HTMLAttributes<HTMLElement>;
+  styleProps: HTMLAttributes<HTMLElement> | UnsafeStylePropsResult;
   props: HTMLAttributes<HTMLElement>;
 };
 
@@ -15,46 +22,61 @@ export function useStyleProps<T extends StyleProps>(
   additionalUtilities?: Record<string, string>,
 ): StylePropsResult {
   const classNamePrefix = useContext(ClassNamePrefixContext);
-  const { UNSAFE_className, UNSAFE_style, ...otherProps } = props;
+  const { UNSAFE_className, UNSAFE_style, ElementTag, transferClassName, ...otherProps } = props;
   const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix, additionalUtilities);
 
   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 component is not Spirit component and is HTML element, we need to handle className and style props
+  if (typeof ElementTag === 'string' || !ElementTag?.spiritComponent) {
+    // 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, transferClassName) || undefined,
+    };
+
+    return {
+      styleProps,
+      props: { ...(modifiedProps as HTMLAttributes<HTMLElement>) },
+    };
+  }
 
+  // If component is a Spirit component, we can safely pass the UNSAFE props
+  // transferClassName: you can send internal component classes as 'transferClassName' prop to add them to the component className list
   return {
-    styleProps,
+    styleProps: {
+      ...(UNSAFE_style !== undefined && { UNSAFE_style }),
+      ...((UNSAFE_className !== undefined || styleUtilities !== undefined) && {
+        UNSAFE_className: classNames(UNSAFE_className, ...styleUtilities, transferClassName),
+      }),
+    },
     props: modifiedProps as HTMLAttributes<HTMLElement>,
   };
 }