From e5fe01b444689fa5306a58e7b1367975f3c46981 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Sat, 4 Mar 2023 09:22:11 -0800 Subject: [PATCH 1/3] Custom style react-image --- ...i-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json | 7 +++++++ packages/react-components/react-image/package.json | 1 + .../react-image/src/components/Image/Image.tsx | 5 +++++ 3 files changed, 13 insertions(+) create mode 100644 change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json diff --git a/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json b/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json new file mode 100644 index 00000000000000..75769116b86bdf --- /dev/null +++ b/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: custom styles", + "packageName": "@fluentui/react-image", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-image/package.json b/packages/react-components/react-image/package.json index 816cecfc64c9eb..988f8c0ea4baf6 100644 --- a/packages/react-components/react-image/package.json +++ b/packages/react-components/react-image/package.json @@ -34,6 +34,7 @@ "dependencies": { "@griffel/react": "^1.5.2", "@fluentui/react-utilities": "^9.6.0", + "@fluentui/react-shared-contexts": "^9.2.0", "@fluentui/react-theme": "^9.1.5", "tslib": "^2.1.0" }, diff --git a/packages/react-components/react-image/src/components/Image/Image.tsx b/packages/react-components/react-image/src/components/Image/Image.tsx index bfdd900be55496..69965888d83c71 100644 --- a/packages/react-components/react-image/src/components/Image/Image.tsx +++ b/packages/react-components/react-image/src/components/Image/Image.tsx @@ -4,14 +4,19 @@ import { useImage_unstable } from './useImage'; import { useImageStyles_unstable } from './useImageStyles'; import type { ImageProps } from './Image.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; /** * The Image component ensures the consistent styling of images. */ export const Image: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useImage_unstable(props, ref); + useImageStyles_unstable(state); + const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); + useCustomStyles(state); + return renderImage_unstable(state); }); From 082362cdc1815aa7401f06c160561ba49717b6b4 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Mon, 6 Mar 2023 15:23:45 -0800 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Makoto Morimoto --- ...uentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json b/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json index 75769116b86bdf..16b55ab06ee9b2 100644 --- a/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json +++ b/change/@fluentui-react-image-8d658a2f-4b6b-49a2-9dbc-3d36b80f40b9.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "feat: custom styles", + "comment": "feat: Adding calls to custom style hooks derived from context.", "packageName": "@fluentui/react-image", "email": "gcox@microsoft.com", "dependentChangeType": "patch" From 3e3f280693bddab1f9fae2ec060e8494adafd0a8 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 14 Mar 2023 09:33:15 -0700 Subject: [PATCH 3/3] syncpack fix --- packages/react-components/react-image/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-image/package.json b/packages/react-components/react-image/package.json index ff84e4f49710f3..83ddbade3a3d56 100644 --- a/packages/react-components/react-image/package.json +++ b/packages/react-components/react-image/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@griffel/react": "^1.5.2", - "@fluentui/react-shared-contexts": "^9.2.0", + "@fluentui/react-shared-contexts": "^9.3.0", "@fluentui/react-utilities": "^9.7.0", "@fluentui/react-theme": "^9.1.5", "tslib": "^2.1.0"