From c429c9c9dfb1a55e27290ff50d7318e5f36cd43f Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Mon, 15 Jul 2024 12:46:03 -0700 Subject: [PATCH] [win32] Inline link support (#3682) * Enable inline link support for win32 * Remove win32 inline link test page fork * Fix test * Make child type stricter * Change files * UNdo strict child type --- .../src/TestComponents/LinkV1/InlineLinksTest.tsx | 2 +- .../LinkV1/InlineLinksTest.win32.tsx | 9 --------- ...-link-87d92852-5532-438f-8172-32e95c84fde9.json | 7 +++++++ ...ester-00d5e830-41aa-4ac0-a85c-c0890cc97ab9.json | 7 +++++++ packages/components/Link/SPEC.md | 1 - packages/components/Link/src/Link.tsx | 1 - packages/components/Link/src/Link.types.ts | 1 - packages/components/Link/src/useLink.ts | 14 -------------- 8 files changed, 15 insertions(+), 27 deletions(-) delete mode 100644 apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx create mode 100644 change/@fluentui-react-native-link-87d92852-5532-438f-8172-32e95c84fde9.json create mode 100644 change/@fluentui-react-native-tester-00d5e830-41aa-4ac0-a85c-c0890cc97ab9.json diff --git a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx index 24ba2e6fa..7a0acb760 100644 --- a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx @@ -24,7 +24,7 @@ export const InlineLinks: React.FunctionComponent = () => { link {' '} - is disabled but focusable. + is disabled and not focusable. Follow this{' '} diff --git a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx deleted file mode 100644 index 21655f9a0..000000000 --- a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; - -import { TextV1 as Text } from '@fluentui/react-native'; - -// Platform.select not available for win32 -// Forking test instead -export const InlineLinks: React.FunctionComponent = () => { - return Inline links are not supported on win32.; -}; diff --git a/change/@fluentui-react-native-link-87d92852-5532-438f-8172-32e95c84fde9.json b/change/@fluentui-react-native-link-87d92852-5532-438f-8172-32e95c84fde9.json new file mode 100644 index 000000000..107a9f91d --- /dev/null +++ b/change/@fluentui-react-native-link-87d92852-5532-438f-8172-32e95c84fde9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Enable inline link support for win32", + "packageName": "@fluentui-react-native/link", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-00d5e830-41aa-4ac0-a85c-c0890cc97ab9.json b/change/@fluentui-react-native-tester-00d5e830-41aa-4ac0-a85c-c0890cc97ab9.json new file mode 100644 index 000000000..858525307 --- /dev/null +++ b/change/@fluentui-react-native-tester-00d5e830-41aa-4ac0-a85c-c0890cc97ab9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Enable inline link support for win32", + "packageName": "@fluentui-react-native/tester", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/components/Link/SPEC.md b/packages/components/Link/SPEC.md index 5eac51028..1428edea5 100644 --- a/packages/components/Link/SPEC.md +++ b/packages/components/Link/SPEC.md @@ -90,7 +90,6 @@ export interface LinkProps extends IWithPressableOptions { enableFocusRing?: boolean; /** * Whether the link is inline with text - * Note: Not supported for win32 * @default false */ inline?: boolean; diff --git a/packages/components/Link/src/Link.tsx b/packages/components/Link/src/Link.tsx index fff9bf86e..9e7bb2d8d 100644 --- a/packages/components/Link/src/Link.tsx +++ b/packages/components/Link/src/Link.tsx @@ -1,6 +1,5 @@ /** @jsxRuntime classic */ /** @jsx withSlots */ -import * as React from 'react'; import { Platform, View } from 'react-native'; import type { UseSlots } from '@fluentui-react-native/framework'; diff --git a/packages/components/Link/src/Link.types.ts b/packages/components/Link/src/Link.types.ts index 031cd8110..d87829c51 100644 --- a/packages/components/Link/src/Link.types.ts +++ b/packages/components/Link/src/Link.types.ts @@ -70,7 +70,6 @@ export interface LinkProps extends IWithPressableOptions { enableFocusRing?: boolean; /** * Whether the link is inline with text - * Note: Not supported for win32 * @default false */ inline?: boolean; diff --git a/packages/components/Link/src/useLink.ts b/packages/components/Link/src/useLink.ts index 0ea0fbcb1..1ad3484e3 100644 --- a/packages/components/Link/src/useLink.ts +++ b/packages/components/Link/src/useLink.ts @@ -82,19 +82,6 @@ export const useLink = (props: LinkProps): LinkInfo => { const linkTooltip = tooltip ?? url ?? undefined; - let inline = props.inline; - const supportsInlineLinks = Platform.OS !== ('win32' as any); - if (inline && !supportsInlineLinks) { - if (__DEV__) { - throw new Error('Inline Links are not supported on ' + Platform.OS + '. Component will fail to render.'); - } - - // Force Links to not be inline on win32. - // This will cause errors to be thrown in RN code if the Link is placed inline with Text, - // since Views are not allows to be children of Text components. - inline = false; - } - return { props: { ...rest, @@ -110,7 +97,6 @@ export const useLink = (props: LinkProps): LinkInfo => { cursor: isDisabled ? 'not-allowed' : 'pointer', ref: useViewCommandFocus(componentRef), tooltip: linkTooltip, - inline, }, state: newState, };