UNSAFE classname test

[pavelklibani]

Description

• All components are working with UNSAFE_className and UNSAFE_style (html, spirit components, other components)

Additional context

Issue reference

(UNSAFE_)className v elementType komponentach

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	96b1267
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/679ba23396272e00080b9518
😎 Deploy Preview	https://deploy-preview-1826--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 91 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-storybook ready!

Name	Link
🔨 Latest commit	96b1267
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/679ba233384c6b00089a3617
😎 Deploy Preview	https://deploy-preview-1826--spirit-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[literat]

suggestion: I think we should pass here only the bool value and not the entire ElementTag/Component.

[pavelklibani]

squashed and rebased with main

[crishpeen]

I am still having a hard time doing what I want to do.

1. I need output of DropdownTrigger (I added the needed stuff you introduce here to TooltipTrigger) <button class="button-unstyled" type="button">Trigger</button>
   a. <DropdownTrigger elementType="button" UNSAFE_className="button-unstyled" type="button"> I get this error
   Warning: React does not recognize the UNSAFE_className prop on a DOM element. and actually both UNSAFE_className and className are on the rendered element.
   b. <DropdownTrigger elementType="button" className="button-unstyled" type="button">, no className or UNSAFE_className applied at all
   c. const AvatarButtonAsDropdownTrigger = (props: SpiritNavigationActionProps) => ( <button {...props} className="button-unstyled" type="button" />); as local component and passed to DropdownTrigger as elementType works, but it is too much stuff to write.

2. I need output of DropdownTrigger <button type="button" class="NavigationAction">trigger</button> (please note, that default elementType of NavigationAction is a)
   a. <DropdownTrigger elementType={NavigationAction} elementType="button"> does not work of course
   b. <DropdownTrigger elementType={(props) => <NavigationAction elementType="button" {...props} /> does not work
   c. const NavigationActionAsDropdownTrigger = (props: SpiritNavigationActionProps) => ( <NavigationAction {...props} elementType="button" />); works, but I am getting forwardref error
   d. code below works, but it is too much code again

const _NavigationActionAsDropdownTrigger = <E extends ElementType = 'a'>(
  props: SpiritNavigationActionProps<E>,
  ref: PolymorphicRef<E>,
): JSX.Element => {
  return <NavigationAction ref={ref} {...props} elementType="button" />;
};

const NavigationActionAsDropdownTrigger = forwardRef<HTMLButtonElement, SpiritNavigationActionProps<ElementType>>(
  _NavigationActionAsDropdownTrigger,
);

...
<DropdownTrigger elementType={NavigationActionAsDropdownTrigger as unknown as HTMLButtonElement}>

Simple example to try this is to rebase integration/header branch over this branch and try to simplify HeaderWithNavigation.tsx

[pavelklibani]

ℹ️ Added changes (f759c87) from branch test/header-unsafe (d351b46, cae240a)
cc @literat @crishpeen

[github-actions]

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/13009496181/artifacts/2496840913

[coveralls]

coverage: 79.469%. remained the same
when pulling 5d066d4 on refactor/ds-1176-unsafe-classname
into 068cb65 on main.

[literat]

@pavelklibani Please, resolve the suggestions and rebase this with main and make it ready for review :-)

[literat]

Good Job! 👍