From 47b36e993692e8096e3d8fc660cc8c4c073de2e3 Mon Sep 17 00:00:00 2001
From: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:18:36 +0200
Subject: [PATCH] fix: fix `borderBottomRightRadius` value casting error

---
 apps/xplat-v9/stories/Button/ButtonStories.tsx             | 7 +++----
 ...uentui-tokens-d29191c2-f70b-4ad6-98da-b2bb00c91007.json | 7 +++++++
 .../etc/react-platform-adapter-preview.api.md              | 2 +-
 .../src/styling/shorthands.ts                              | 2 +-
 packages/tokens/etc/tokens.api.md                          | 2 +-
 packages/tokens/src/global/borderRadius.ts                 | 2 +-
 packages/tokens/src/types.ts                               | 2 +-
 7 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 change/@fluentui-tokens-d29191c2-f70b-4ad6-98da-b2bb00c91007.json

diff --git a/apps/xplat-v9/stories/Button/ButtonStories.tsx b/apps/xplat-v9/stories/Button/ButtonStories.tsx
index 417f2e9e576de..354f5a19726b4 100644
--- a/apps/xplat-v9/stories/Button/ButtonStories.tsx
+++ b/apps/xplat-v9/stories/Button/ButtonStories.tsx
@@ -1,8 +1,7 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
-import * as React from 'react';
-
+import 'react';
 import { Default } from './ButtonDefault';
 import { Shape } from './ButtonShape';
 import { Appearance } from './ButtonAppearance';
@@ -14,8 +13,8 @@ export const ButtonStories = () => (
   <div>
     <h1>Default</h1>
     <Default />
-    {/* <h1>Shape</h1>
-    <Shape /> */}
+    <h1>Shape</h1>
+    <Shape />
     <h1>Appearance</h1>
     <Appearance />
     <h1>Size</h1>
diff --git a/change/@fluentui-tokens-d29191c2-f70b-4ad6-98da-b2bb00c91007.json b/change/@fluentui-tokens-d29191c2-f70b-4ad6-98da-b2bb00c91007.json
new file mode 100644
index 0000000000000..0e442958c9f65
--- /dev/null
+++ b/change/@fluentui-tokens-d29191c2-f70b-4ad6-98da-b2bb00c91007.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Use 0 instead of '0' to better support RSD",
+  "packageName": "@fluentui/tokens",
+  "email": "4123478+tido64@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md b/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md
index 41a712f0df1d7..c4cf938b0e78b 100644
--- a/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md
+++ b/packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md
@@ -10,7 +10,7 @@ import { makeStyles as makeStylesCore } from '@griffel/core';
 import { mergeClasses } from '@griffel/react';
 import type { PartialTheme } from '@fluentui/react-theme';
 import * as React_2 from 'react';
-import { shorthands } from '@griffel/react';
+import { shorthands } from '@griffel/core';
 import { TextDirectionProvider } from '@griffel/react';
 import type { Theme } from '@fluentui/react-theme';
 import { useRenderer_unstable } from '@griffel/react';
diff --git a/packages/react-components/react-platform-adapter-preview/src/styling/shorthands.ts b/packages/react-components/react-platform-adapter-preview/src/styling/shorthands.ts
index 80410eb446e09..08daec1257a35 100644
--- a/packages/react-components/react-platform-adapter-preview/src/styling/shorthands.ts
+++ b/packages/react-components/react-platform-adapter-preview/src/styling/shorthands.ts
@@ -1 +1 @@
-export { shorthands } from '@griffel/react';
+export { shorthands } from '@griffel/core';
diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md
index 9751ab22c08f6..cb5ec055a6eb0 100644
--- a/packages/tokens/etc/tokens.api.md
+++ b/packages/tokens/etc/tokens.api.md
@@ -6,7 +6,7 @@
 
 // @public (undocumented)
 export type BorderRadiusTokens = {
-    borderRadiusNone: string;
+    borderRadiusNone: string | 0;
     borderRadiusSmall: string;
     borderRadiusMedium: string;
     borderRadiusLarge: string;
diff --git a/packages/tokens/src/global/borderRadius.ts b/packages/tokens/src/global/borderRadius.ts
index 018e0f6a19067..c98b63642cc38 100644
--- a/packages/tokens/src/global/borderRadius.ts
+++ b/packages/tokens/src/global/borderRadius.ts
@@ -1,7 +1,7 @@
 import type { BorderRadiusTokens } from '../types';
 
 export const borderRadius: BorderRadiusTokens = {
-  borderRadiusNone: '0',
+  borderRadiusNone: 0,
   borderRadiusSmall: '2px',
   borderRadiusMedium: '4px',
   borderRadiusLarge: '6px',
diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts
index a33593769759f..c195f615d65be 100644
--- a/packages/tokens/src/types.ts
+++ b/packages/tokens/src/types.ts
@@ -603,7 +603,7 @@ export type TypographyStyles = {
 };
 
 export type BorderRadiusTokens = {
-  borderRadiusNone: string;
+  borderRadiusNone: string | 0;
   borderRadiusSmall: string;
   borderRadiusMedium: string;
   borderRadiusLarge: string;