feat(react-tags-preview): add useCustomStyleHook_unstable to all comp…

…onents (#29237) * fix * chg * react-provider api change
microsoft · Sep 22, 2023 · 45ab251 · 45ab251
1 parent 0327a2d
commit 45ab251
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 0 deletions.
diff --git a/change/@fluentui-react-provider-620bbb7d-bbdd-4ab0-b360-c0283c23c7b4.json b/change/@fluentui-react-provider-620bbb7d-bbdd-4ab0-b360-c0283c23c7b4.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add custom style hooks for tag components",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-shared-contexts-ab1a52cd-3b1c-4cac-8bac-4d209e594002.json b/change/@fluentui-react-shared-contexts-ab1a52cd-3b1c-4cac-8bac-4d209e594002.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add custom style hooks for tag components",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tags-preview-4b267c6e-2f04-4b1a-b1c8-d4d528449128.json b/change/@fluentui-react-tags-preview-4b267c6e-2f04-4b1a-b1c8-d4d528449128.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add custom style hooks for tag components",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -119,6 +119,11 @@ export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentPro
         useDrawerHeaderTitleStyles_unstable: (state: unknown) => void;
         useDrawerBodyStyles_unstable: (state: unknown) => void;
         useDrawerFooterStyles_unstable: (state: unknown) => void;
+        useInteractionTagStyles_unstable: (state: unknown) => void;
+        useInteractionTagPrimaryStyles_unstable: (state: unknown) => void;
+        useInteractionTagSecondaryStyles_unstable: (state: unknown) => void;
+        useTagStyles_unstable: (state: unknown) => void;
+        useTagGroupStyles_unstable: (state: unknown) => void;
     }> | undefined;
     dir?: "ltr" | "rtl" | undefined;
     targetDocument?: Document | undefined;

diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md
@@ -114,6 +114,11 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerBodyStyles_unstable: CustomStyleHook;
     useDrawerFooterStyles_unstable: CustomStyleHook;
+    useInteractionTagStyles_unstable: CustomStyleHook;
+    useInteractionTagPrimaryStyles_unstable: CustomStyleHook;
+    useInteractionTagSecondaryStyles_unstable: CustomStyleHook;
+    useTagStyles_unstable: CustomStyleHook;
+    useTagGroupStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @public (undocumented)
@@ -209,6 +214,11 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerBodyStyles_unstable: CustomStyleHook;
     useDrawerFooterStyles_unstable: CustomStyleHook;
+    useInteractionTagStyles_unstable: CustomStyleHook;
+    useInteractionTagPrimaryStyles_unstable: CustomStyleHook;
+    useInteractionTagSecondaryStyles_unstable: CustomStyleHook;
+    useTagStyles_unstable: CustomStyleHook;
+    useTagGroupStyles_unstable: CustomStyleHook;
 }>;
 
 // @internal (undocumented)
@@ -304,6 +314,11 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerBodyStyles_unstable: CustomStyleHook;
     useDrawerFooterStyles_unstable: CustomStyleHook;
+    useInteractionTagStyles_unstable: CustomStyleHook;
+    useInteractionTagPrimaryStyles_unstable: CustomStyleHook;
+    useInteractionTagSecondaryStyles_unstable: CustomStyleHook;
+    useTagStyles_unstable: CustomStyleHook;
+    useTagGroupStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @internal (undocumented)

diff --git a/...t-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/...t-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
@@ -97,6 +97,11 @@ export type CustomStyleHooksContextValue = Partial<{
   useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
   useDrawerBodyStyles_unstable: CustomStyleHook;
   useDrawerFooterStyles_unstable: CustomStyleHook;
+  useInteractionTagStyles_unstable: CustomStyleHook;
+  useInteractionTagPrimaryStyles_unstable: CustomStyleHook;
+  useInteractionTagSecondaryStyles_unstable: CustomStyleHook;
+  useTagStyles_unstable: CustomStyleHook;
+  useTagGroupStyles_unstable: CustomStyleHook;
 }>;
 
 /**

diff --git a/...ages/react-components/react-tags-preview/src/components/InteractionTag/InteractionTag.tsx b/...ages/react-components/react-tags-preview/src/components/InteractionTag/InteractionTag.tsx
@@ -5,6 +5,7 @@ import { useInteractionTagStyles_unstable } from './useInteractionTagStyles.styl
 import { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';
 import type { InteractionTagProps } from './InteractionTag.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * InteractionTag component - a visual representation of an attribute with primary and secondary actions.
@@ -14,6 +15,9 @@ export const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.fo
   const state = useInteractionTag_unstable(props, ref);
 
   useInteractionTagStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useInteractionTagStyles_unstable')(state);
+
   return renderInteractionTag_unstable(state, useInteractionTagContextValues_unstable(state));
 });
 

diff --git a/...ponents/react-tags-preview/src/components/InteractionTagPrimary/InteractionTagPrimary.tsx b/...ponents/react-tags-preview/src/components/InteractionTagPrimary/InteractionTagPrimary.tsx
@@ -5,6 +5,7 @@ import { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrim
 import { useInteractionTagPrimaryStyles_unstable } from './useInteractionTagPrimaryStyles.styles';
 import type { InteractionTagPrimaryProps } from './InteractionTagPrimary.types';
 import { useTagAvatarContextValues_unstable } from '../../utils';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * InteractionTagPrimary component - used as the first child of the `InteractionTag` component.
@@ -14,6 +15,9 @@ export const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryPro
   const state = useInteractionTagPrimary_unstable(props, ref);
 
   useInteractionTagPrimaryStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useInteractionTagPrimaryStyles_unstable')(state);
+
   return renderInteractionTagPrimary_unstable(state, useTagAvatarContextValues_unstable(state));
 });
 

diff --git a/...nts/react-tags-preview/src/components/InteractionTagSecondary/InteractionTagSecondary.tsx b/...nts/react-tags-preview/src/components/InteractionTagSecondary/InteractionTagSecondary.tsx
@@ -4,6 +4,7 @@ import { useInteractionTagSecondary_unstable } from './useInteractionTagSecondar
 import { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';
 import { useInteractionTagSecondaryStyles_unstable } from './useInteractionTagSecondaryStyles.styles';
 import type { InteractionTagSecondaryProps } from './InteractionTagSecondary.types';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.
@@ -13,6 +14,9 @@ export const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondar
     const state = useInteractionTagSecondary_unstable(props, ref);
 
     useInteractionTagSecondaryStyles_unstable(state);
+
+    useCustomStyleHook_unstable('useInteractionTagSecondaryStyles_unstable')(state);
+
     return renderInteractionTagSecondary_unstable(state);
   },
 );

diff --git a/packages/react-components/react-tags-preview/src/components/Tag/Tag.tsx b/packages/react-components/react-tags-preview/src/components/Tag/Tag.tsx
@@ -4,6 +4,7 @@ import { renderTag_unstable } from './renderTag';
 import { useTagStyles_unstable } from './useTagStyles.styles';
 import type { TagProps } from './Tag.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useTagAvatarContextValues_unstable } from '../../utils';
 
 /**
@@ -14,6 +15,9 @@ export const Tag: ForwardRefComponent<TagProps> = React.forwardRef((props, ref)
   const state = useTag_unstable(props, ref);
 
   useTagStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useTagStyles_unstable')(state);
+
   return renderTag_unstable(state, useTagAvatarContextValues_unstable(state));
 });
 

diff --git a/packages/react-components/react-tags-preview/src/components/TagGroup/TagGroup.tsx b/packages/react-components/react-tags-preview/src/components/TagGroup/TagGroup.tsx
@@ -4,6 +4,7 @@ import { renderTagGroup_unstable } from './renderTagGroup';
 import { useTagGroupStyles_unstable } from './useTagGroupStyles.styles';
 import type { TagGroupProps } from './TagGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useTagGroupContextValues_unstable } from './useTagGroupContextValues';
 
 /**
@@ -14,6 +15,9 @@ export const TagGroup: ForwardRefComponent<TagGroupProps> = React.forwardRef((pr
   const state = useTagGroup_unstable(props, ref);
 
   useTagGroupStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useTagGroupStyles_unstable')(state);
+
   return renderTagGroup_unstable(state, useTagGroupContextValues_unstable(state));
 });