feat(react-card): bump to stable

change/@fluentui-react-card-f45d3afa-a234-4c11-95e8-da55807adff1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: release 9.0.0",
+  "packageName": "@fluentui/react-card",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-4a5380f7-4474-4a90-878e-750586d9c9bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Release Card as stable",
+  "packageName": "@fluentui/react-components",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-card/README.md

@@ -11,7 +11,7 @@ These are not production-ready components and **should never be used in a produc
 To import React Card components:
 
 ```js
-import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components/unstable';
+import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components';
 ```
 
 Example Card usage:
@@ -21,7 +21,7 @@ Example Card usage:
 ```jsx
 import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
 import { Button, Body1, Caption1 } from '@fluentui/react-components';
-import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
+import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';
 
 const App = () => (
   <>

packages/react-components/react-card/package.json

@@ -52,9 +52,7 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
+      "major"
     ]
   },
   "exports": {

packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx

@@ -11,7 +11,7 @@ import {
   mergeClasses,
 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
-import { Card, CardHeader, CardProps } from '@fluentui/react-card';
+import { Card, CardHeader, CardProps } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardBestPractices.md

@@ -7,4 +7,5 @@
 
 - By default, each card is of role="group".
 - Provide meaningful `aria-label`, `aria-describedby` and `aria-labelledby` whenever needed, specially for selectable cards.
-- </details>
+
+</details>

packages/react-components/react-card/stories/Card/CardDefault.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { makeStyles, Body1, Caption1, Button, shorthands } from '@fluentui/react-components';
 import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
-import { Card, CardFooter, CardHeader, CardPreview } from '@fluentui/react-card';
+import { Card, CardFooter, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardFocusMode.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, shorthands, Button, Caption1, Body1, Subtitle1 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled, Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Card, CardHeader, CardFooter, CardPreview, CardProps } from '@fluentui/react-card';
+import { Card, CardHeader, CardFooter, CardPreview, CardProps } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, shorthands, Button, Caption1, Text, tokens, Subtitle1 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
-import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
+import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardSelectable.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, shorthands, Button, Caption1, tokens, Text } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
-import { Card, CardHeader, CardPreview, CardProps } from '@fluentui/react-card';
+import { Card, CardHeader, CardPreview, CardProps } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardSelectableIndicator.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, shorthands, Button, Caption1, tokens, Checkbox, Text } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
-import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
+import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardSize.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, tokens, shorthands, Caption1, Subtitle1, mergeClasses, Text } from '@fluentui/react-components';
-import { Card, CardHeader, CardProps } from '@fluentui/react-card';
+import { Card, CardHeader, CardProps } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx

@@ -19,7 +19,7 @@ import {
   Comment16Regular,
   MoreHorizontal20Filled,
 } from '@fluentui/react-icons';
-import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
+import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   container: {

packages/react-components/react-card/stories/Card/index.stories.tsx

@@ -1,7 +1,6 @@
-import { Card } from '@fluentui/react-card';
+import { Card } from '@fluentui/react-components';
 import descriptionMd from './CardDescription.md';
 import cardBestpracticesMd from './CardBestPractices.md';
-import previewMd from './CardPreview.md';
 
 export { Default } from './CardDefault.stories';
 export { Orientation } from './CardOrientation.stories';
@@ -18,7 +17,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd, cardBestpracticesMd, previewMd].join('\n'),
+        component: [descriptionMd, cardBestpracticesMd].join('\n'),
       },
     },
   },

packages/react-components/react-card/stories/CardFooter/CardFooterDefault.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, Button } from '@fluentui/react-components';
 import { ArrowReply16Regular, MoreHorizontal16Filled, Share16Regular } from '@fluentui/react-icons';
-import { CardFooter } from '@fluentui/react-card';
+import { CardFooter } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   footer: {

packages/react-components/react-card/stories/CardFooter/CardFooterDescription.md

@@ -1,14 +1 @@
 The CardFooter component, used inside of a Card, uses a flex layout to organize actions the user can take with a Card, like sharing the contents or replying to a message.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { CardFooter } from '@fluentui/react-components/unstable';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product

packages/react-components/react-card/stories/CardFooter/index.stories.tsx

@@ -1,4 +1,4 @@
-import { CardFooter } from '@fluentui/react-card';
+import { CardFooter } from '@fluentui/react-components';
 import descriptionMd from './CardFooterDescription.md';
 
 export { Default } from './CardFooterDefault.stories';

packages/react-components/react-card/stories/CardHeader/CardHeaderDefault.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CardHeader } from '@fluentui/react-card';
+import { CardHeader } from '@fluentui/react-components';
 import { makeStyles, shorthands, Button, Body1, Caption1 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
 

packages/react-components/react-card/stories/CardHeader/CardHeaderDescription.md

@@ -1,14 +1 @@
 The CardHeader component, used inside of a Card, represents a Fluent UI compliant card header.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { CardHeader } from '@fluentui/react-components/unstable';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product

packages/react-components/react-card/stories/CardHeader/index.stories.tsx

@@ -1,4 +1,4 @@
-import { CardHeader } from '@fluentui/react-card';
+import { CardHeader } from '@fluentui/react-components';
 import descriptionMd from './CardHeaderDescription.md';
 
 export { Default } from './CardHeaderDefault.stories';

packages/react-components/react-card/stories/CardPreview/CardPreviewDefault.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CardPreview } from '@fluentui/react-card';
+import { CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =

packages/react-components/react-card/stories/CardPreview/CardPreviewDescription.md

@@ -1,14 +1 @@
 The CardPreview component, used inside of a Card, allows the user to better visualize what the card's contents are.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { CardPreview } from '@fluentui/react-components/unstable';
->
-> ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product

packages/react-components/react-card/stories/CardPreview/index.stories.tsx

@@ -1,4 +1,4 @@
-import { CardPreview } from '@fluentui/react-card';
+import { CardPreview } from '@fluentui/react-components';
 import descriptionMd from './CardPreviewDescription.md';
 
 export { Default } from './CardPreviewDefault.stories';

packages/react-components/react-components/etc/react-components.api.md

@@ -100,6 +100,28 @@ import { Caption2 } from '@fluentui/react-text';
 import { caption2ClassNames } from '@fluentui/react-text';
 import { Caption2Strong } from '@fluentui/react-text';
 import { caption2StrongClassNames } from '@fluentui/react-text';
+import { Card } from '@fluentui/react-card';
+import { cardClassNames } from '@fluentui/react-card';
+import { cardCSSVars } from '@fluentui/react-card';
+import { CardFooter } from '@fluentui/react-card';
+import { cardFooterClassNames } from '@fluentui/react-card';
+import { CardFooterProps } from '@fluentui/react-card';
+import { CardFooterSlots } from '@fluentui/react-card';
+import { CardFooterState } from '@fluentui/react-card';
+import { CardHeader } from '@fluentui/react-card';
+import { cardHeaderClassNames } from '@fluentui/react-card';
+import { cardHeaderCSSVars } from '@fluentui/react-card';
+import { CardHeaderProps } from '@fluentui/react-card';
+import { CardHeaderSlots } from '@fluentui/react-card';
+import { CardHeaderState } from '@fluentui/react-card';
+import { CardPreview } from '@fluentui/react-card';
+import { cardPreviewClassNames } from '@fluentui/react-card';
+import { CardPreviewProps } from '@fluentui/react-card';
+import { CardPreviewSlots } from '@fluentui/react-card';
+import { CardPreviewState } from '@fluentui/react-card';
+import { CardProps } from '@fluentui/react-card';
+import { CardSlots } from '@fluentui/react-card';
+import { CardState } from '@fluentui/react-card';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { checkboxClassNames } from '@fluentui/react-checkbox';
 import { CheckboxOnChangeData } from '@fluentui/react-checkbox';
@@ -446,6 +468,10 @@ import { renderAvatarGroupItem_unstable } from '@fluentui/react-avatar';
 import { renderAvatarGroupPopover_unstable } from '@fluentui/react-avatar';
 import { renderBadge_unstable } from '@fluentui/react-badge';
 import { renderButton_unstable } from '@fluentui/react-button';
+import { renderCard_unstable } from '@fluentui/react-card';
+import { renderCardFooter_unstable } from '@fluentui/react-card';
+import { renderCardHeader_unstable } from '@fluentui/react-card';
+import { renderCardPreview_unstable } from '@fluentui/react-card';
 import { renderCheckbox_unstable } from '@fluentui/react-checkbox';
 import { renderCombobox_unstable } from '@fluentui/react-combobox';
 import { renderCompoundButton_unstable } from '@fluentui/react-button';
@@ -756,6 +782,14 @@ import { useBadge_unstable } from '@fluentui/react-badge';
 import { useBadgeStyles_unstable } from '@fluentui/react-badge';
 import { useButton_unstable } from '@fluentui/react-button';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
+import { useCard_unstable } from '@fluentui/react-card';
+import { useCardFooter_unstable } from '@fluentui/react-card';
+import { useCardFooterStyles_unstable } from '@fluentui/react-card';
+import { useCardHeader_unstable } from '@fluentui/react-card';
+import { useCardHeaderStyles_unstable } from '@fluentui/react-card';
+import { useCardPreview_unstable } from '@fluentui/react-card';
+import { useCardPreviewStyles_unstable } from '@fluentui/react-card';
+import { useCardStyles_unstable } from '@fluentui/react-card';
 import { useCheckbox_unstable } from '@fluentui/react-checkbox';
 import { useCheckboxStyles_unstable } from '@fluentui/react-checkbox';
 import { useCheckmarkStyles_unstable } from '@fluentui/react-menu';
@@ -1144,6 +1178,50 @@ export { Caption2Strong }
 
 export { caption2StrongClassNames }
 
+export { Card }
+
+export { cardClassNames }
+
+export { cardCSSVars }
+
+export { CardFooter }
+
+export { cardFooterClassNames }
+
+export { CardFooterProps }
+
+export { CardFooterSlots }
+
+export { CardFooterState }
+
+export { CardHeader }
+
+export { cardHeaderClassNames }
+
+export { cardHeaderCSSVars }
+
+export { CardHeaderProps }
+
+export { CardHeaderSlots }
+
+export { CardHeaderState }
+
+export { CardPreview }
+
+export { cardPreviewClassNames }
+
+export { CardPreviewProps }
+
+export { CardPreviewSlots }
+
+export { CardPreviewState }
+
+export { CardProps }
+
+export { CardSlots }
+
+export { CardState }
+
 export { Checkbox }
 
 export { checkboxClassNames }
@@ -1836,6 +1914,14 @@ export { renderBadge_unstable }
 
 export { renderButton_unstable }
 
+export { renderCard_unstable }
+
+export { renderCardFooter_unstable }
+
+export { renderCardHeader_unstable }
+
+export { renderCardPreview_unstable }
+
 export { renderCheckbox_unstable }
 
 export { renderCombobox_unstable }
@@ -2456,6 +2542,22 @@ export { useButton_unstable }
 
 export { useButtonStyles_unstable }
 
+export { useCard_unstable }
+
+export { useCardFooter_unstable }
+
+export { useCardFooterStyles_unstable }
+
+export { useCardHeader_unstable }
+
+export { useCardHeaderStyles_unstable }
+
+export { useCardPreview_unstable }
+
+export { useCardPreviewStyles_unstable }
+
+export { useCardStyles_unstable }
+
 export { useCheckbox_unstable }
 
 export { useCheckboxStyles_unstable }