chore(react-card): adopt custom JSX pragma (#27606)

microsoft · Apr 18, 2023 · 2c2438a · 2c2438a
1 parent b495179
commit 2c2438a
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 12 deletions.
diff --git a/change/@fluentui-react-card-9dbc7783-9c6c-4b60-b30d-bf7684587328.json b/change/@fluentui-react-card-9dbc7783-9c6c-4b60-b30d-bf7684587328.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adopt custom JSX pragma",
+  "packageName": "@fluentui/react-card",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-card/package.json b/packages/react-components/react-card/package.json
@@ -41,6 +41,7 @@
     "@fluentui/react-tabster": "^9.6.5",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.8.0",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

diff --git a/packages/react-components/react-card/src/components/Card/renderCard.tsx b/packages/react-components/react-card/src/components/Card/renderCard.tsx
@@ -1,13 +1,17 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { CardContextValue, CardSlots, CardState } from './Card.types';
 import { CardProvider } from './CardContext';
 
 /**
  * Render the final JSX of Card.
  */
 export const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {
-  const { slots, slotProps } = getSlots<CardSlots>(state);
+  const { slots, slotProps } = getSlotsNext<CardSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

diff --git a/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx b/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx
@@ -1,12 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
 /**
  * Render the final JSX of CardFooter.
  */
 export const renderCardFooter_unstable = (state: CardFooterState) => {
-  const { slots, slotProps } = getSlots<CardFooterSlots>(state);
+  const { slots, slotProps } = getSlotsNext<CardFooterSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

diff --git a/packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx b/packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx
@@ -1,12 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
 /**
  * Render the final JSX of CardHeader.
  */
 export const renderCardHeader_unstable = (state: CardHeaderState) => {
-  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);
+  const { slots, slotProps } = getSlotsNext<CardHeaderSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

diff --git a/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx b/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx
@@ -1,12 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
 /**
  * Render the final JSX of CardPreview.
  */
 export const renderCardPreview_unstable = (state: CardPreviewState) => {
-  const { slots, slotProps } = getSlots<CardPreviewSlots>(state);
+  const { slots, slotProps } = getSlotsNext<CardPreviewSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>