fix(react-message-bar): force links to be underlined (#32850)

mainframev · viktorgenaev · layershifter · web-flow · commit 4fb4983aa51d · 2024-10-01T13:06:41.000+02:00
Co-authored-by: viktorgenaev &lt;viktorgenaev@microsoft.com&gt;
Co-authored-by: Oleksandr Fediashov &lt;alexander.mcgarret@gmail.com&gt;
diff --git a/change/@fluentui-react-link-f1cc3696-e769-47fc-9fed-2ed37e12c28b.json b/change/@fluentui-react-link-f1cc3696-e769-47fc-9fed-2ed37e12c28b.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add LinkContextProvider",
+  "packageName": "@fluentui/react-link",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-message-bar-331d1242-9c7c-49c1-84f0-53757e5e2f45.json b/change/@fluentui-react-message-bar-331d1242-9c7c-49c1-84f0-53757e5e2f45.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use LinkContextProvider to force all links inside MessageBody to be underlined",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-link/library/etc/react-link.api.md b/packages/react-components/react-link/library/etc/react-link.api.md
@@ -18,6 +18,17 @@ export const Link: ForwardRefComponent<LinkProps>;
 // @public (undocumented)
 export const linkClassNames: SlotClassNames<LinkSlots>;
 
+// @public (undocumented)
+export const linkContextDefaultValue: LinkContextValue;
+
+// @public (undocumented)
+export const LinkContextProvider: React_2.Provider<LinkContextValue | undefined>;
+
+// @public (undocumented)
+export type LinkContextValue = {
+    inline?: boolean;
+};
+
 // @public (undocumented)
 export type LinkProps = ComponentProps<LinkSlots> & {
     appearance?: 'default' | 'subtle';
@@ -42,6 +53,9 @@ export const renderLink_unstable: (state: LinkState) => JSX.Element;
 // @public
 export const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkState;
 
+// @public (undocumented)
+export const useLinkContext: () => LinkContextValue;
+
 // @public
 export const useLinkState_unstable: (state: LinkState) => LinkState;
 
diff --git a/packages/react-components/react-link/library/src/Link.ts b/packages/react-components/react-link/library/src/Link.ts
@@ -1 +1,2 @@
 export * from './components/Link/index';
+export * from './contexts';
diff --git a/packages/react-components/react-link/library/src/components/Link/useLink.ts b/packages/react-components/react-link/library/src/components/Link/useLink.ts
@@ -3,6 +3,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 import { useLinkState_unstable } from './useLinkState';
 import type { LinkProps, LinkState } from './Link.types';
+import { useLinkContext } from '../../contexts/linkContext';
 
 /**
  * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.
@@ -14,6 +15,7 @@ export const useLink_unstable = (
   ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,
 ): LinkState => {
   const backgroundAppearance = useBackgroundAppearance();
+  const { inline: inlineContext } = useLinkContext();
   const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
 
   const elementType = props.as || (props.href ? 'a' : 'button');
@@ -31,7 +33,7 @@ export const useLink_unstable = (
     appearance,
     disabled,
     disabledFocusable,
-    inline,
+    inline: inline ?? !!inlineContext,
 
     // Slots definition
     components: {
diff --git a/packages/react-components/react-link/library/src/contexts/index.ts b/packages/react-components/react-link/library/src/contexts/index.ts
@@ -0,0 +1 @@
+export * from './linkContext';
diff --git a/packages/react-components/react-link/library/src/contexts/linkContext.ts b/packages/react-components/react-link/library/src/contexts/linkContext.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export type LinkContextValue = {
+  inline?: boolean;
+};
+
+const LinkContext = React.createContext<LinkContextValue | undefined>(undefined);
+
+export const linkContextDefaultValue: LinkContextValue = {
+  inline: false,
+};
+
+export const LinkContextProvider = LinkContext.Provider;
+export const useLinkContext = () => React.useContext(LinkContext) ?? linkContextDefaultValue;
diff --git a/packages/react-components/react-link/library/src/index.ts b/packages/react-components/react-link/library/src/index.ts
@@ -7,3 +7,5 @@ export {
   useLink_unstable,
 } from './Link';
 export type { LinkProps, LinkSlots, LinkState } from './Link';
+export { linkContextDefaultValue, LinkContextProvider, useLinkContext } from './contexts';
+export type { LinkContextValue } from './contexts';
diff --git a/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md b/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md
@@ -163,7 +163,7 @@ export const renderMessageBar_unstable: (state: MessageBarState, contexts: Messa
 export const renderMessageBarActions_unstable: (state: MessageBarActionsState, contexts: MessageBarActionsContextValues) => JSX.Element;
 
 // @public
-export const renderMessageBarBody_unstable: (state: MessageBarBodyState) => JSX.Element;
+export const renderMessageBarBody_unstable: (state: MessageBarBodyState, contextValues: MessageBarBodyContextValues) => JSX.Element;
 
 // @public
 export const renderMessageBarGroup_unstable: (state: MessageBarGroupState) => JSX.Element;
diff --git a/packages/react-components/react-message-bar/library/package.json b/packages/react-components/react-message-bar/library/package.json
@@ -34,6 +34,7 @@
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.0.44",
     "@fluentui/react-shared-contexts": "^9.20.1",
+    "@fluentui/react-link": "^9.2.32",
     "@fluentui/react-theme": "^9.1.20",
     "@fluentui/react-utilities": "^9.18.15",
     "@griffel/react": "^1.5.22",
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.tsx
@@ -4,17 +4,19 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useMessageBarBody_unstable } from './useMessageBarBody';
 import { renderMessageBarBody_unstable } from './renderMessageBarBody';
 import { useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';
+import { useMessageBarBodyContextValues_unstable } from './useMessageBarBodyContextValues';
 import type { MessageBarBodyProps } from './MessageBarBody.types';
 
 /**
  * MessageBarBody component
  */
 export const MessageBarBody: ForwardRefComponent<MessageBarBodyProps> = React.forwardRef((props, ref) => {
   const state = useMessageBarBody_unstable(props, ref);
+  const ctx = useMessageBarBodyContextValues_unstable(state);
 
   useMessageBarBodyStyles_unstable(state);
   useCustomStyleHook_unstable('useMessageBarBodyStyles_unstable')(state);
-  return renderMessageBarBody_unstable(state);
+  return renderMessageBarBody_unstable(state, ctx);
 });
 
 MessageBarBody.displayName = 'MessageBarBody';
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.types.ts
@@ -1,5 +1,11 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
+export type MessageBarBodyContextValues = {
+  link: {
+    inline?: boolean;
+  };
+};
+
 export type MessageBarBodySlots = {
   root: Slot<'div'>;
 };
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/renderMessageBarBody.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/renderMessageBarBody.tsx
@@ -2,13 +2,21 @@
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
 import { assertSlots } from '@fluentui/react-utilities';
-import type { MessageBarBodyState, MessageBarBodySlots } from './MessageBarBody.types';
+import type { MessageBarBodyState, MessageBarBodySlots, MessageBarBodyContextValues } from './MessageBarBody.types';
+import { LinkContextProvider } from '@fluentui/react-link';
 
 /**
  * Render the final JSX of MessageBarBody
  */
-export const renderMessageBarBody_unstable = (state: MessageBarBodyState) => {
+export const renderMessageBarBody_unstable = (
+  state: MessageBarBodyState,
+  contextValues: MessageBarBodyContextValues,
+) => {
   assertSlots<MessageBarBodySlots>(state);
 
-  return <state.root />;
+  return (
+    <LinkContextProvider value={contextValues.link}>
+      <state.root />
+    </LinkContextProvider>
+  );
 };
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/useMessageBarBodyContextValues.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/useMessageBarBodyContextValues.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { MessageBarBodyState, MessageBarBodyContextValues } from './MessageBarBody.types';
+
+export function useMessageBarBodyContextValues_unstable(state: MessageBarBodyState): MessageBarBodyContextValues {
+  const link = React.useMemo(
+    () => ({
+      inline: true,
+    }),
+    [],
+  );
+
+  return {
+    link,
+  };
+}

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './components/Link/index';`
	`2`	`+export * from './contexts';`