diff --git a/change/@fluentui-react-native-experimental-shimmer-49735c34-7217-4d2e-932f-97badd995c82.json b/change/@fluentui-react-native-experimental-shimmer-49735c34-7217-4d2e-932f-97badd995c82.json new file mode 100644 index 0000000000..00c402a80f --- /dev/null +++ b/change/@fluentui-react-native-experimental-shimmer-49735c34-7217-4d2e-932f-97badd995c82.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Export shimmer consts", + "packageName": "@fluentui-react-native/experimental-shimmer", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.android.ts b/packages/experimental/Shimmer/src/ShimmerTokens.android.ts index eb575a3d33..443d652d4e 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.android.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.android.ts @@ -1,13 +1,14 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; +import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts'; import type { ShimmerTokens } from './Shimmer.types'; export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ - angle: 45, - delay: 0, - duration: 1000, + angle: shimmerDefaultAngle, + delay: shimmerDefaultDelay, + duration: shimmerDefaultDuration, shimmerColor: theme.colors.neutralStencil1, shimmerColorOpacity: 1, shimmerWaveColor: theme.colors.neutralStencil2, diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.ios.ts b/packages/experimental/Shimmer/src/ShimmerTokens.ios.ts index 84bc0c12a7..443d652d4e 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.ios.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.ios.ts @@ -1,13 +1,14 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; +import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts'; import type { ShimmerTokens } from './Shimmer.types'; export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ - angle: 0, - delay: 0, - duration: 1000, + angle: shimmerDefaultAngle, + delay: shimmerDefaultDelay, + duration: shimmerDefaultDuration, shimmerColor: theme.colors.neutralStencil1, shimmerColorOpacity: 1, shimmerWaveColor: theme.colors.neutralStencil2, diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.ts b/packages/experimental/Shimmer/src/ShimmerTokens.ts index 6feb583dbb..6919961dc3 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.ts @@ -2,14 +2,15 @@ import type { Theme } from '@fluentui-react-native/framework'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; +import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts'; import type { ShimmerTokens } from './Shimmer.types'; export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ - angle: 0, + angle: shimmerDefaultAngle, backgroundColor: theme.colors.transparentBackground, - delay: 0, - duration: 7000, + delay: shimmerDefaultDelay, + duration: shimmerDefaultDuration, shimmerColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? '#E1E1E1' : '#404040', shimmerColorOpacity: 1, shimmerWaveColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? 'white' : 'black', diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts b/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts index aa5ffdc418..0ef43eb129 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts @@ -1,14 +1,15 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; +import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts'; import type { ShimmerTokens } from './Shimmer.types'; export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ - angle: 0, + angle: shimmerDefaultAngle, backgroundColor: theme.colors.background, - delay: 500, - duration: 2000, + delay: shimmerDefaultDelay, + duration: shimmerDefaultDuration, shimmerColor: theme.colors.bodyFrameDivider, shimmerColorOpacity: 1, shimmerWaveColor: '#E1E1E1', diff --git a/packages/experimental/Shimmer/src/consts.android.ts b/packages/experimental/Shimmer/src/consts.android.ts new file mode 100644 index 0000000000..b5247213f9 --- /dev/null +++ b/packages/experimental/Shimmer/src/consts.android.ts @@ -0,0 +1,3 @@ +export const shimmerDefaultAngle = 45; +export const shimmerDefaultDelay = 0; +export const shimmerDefaultDuration = 1000; diff --git a/packages/experimental/Shimmer/src/consts.ios.ts b/packages/experimental/Shimmer/src/consts.ios.ts new file mode 100644 index 0000000000..fa88894158 --- /dev/null +++ b/packages/experimental/Shimmer/src/consts.ios.ts @@ -0,0 +1,3 @@ +export const shimmerDefaultAngle = 0; +export const shimmerDefaultDelay = 0; +export const shimmerDefaultDuration = 1000; diff --git a/packages/experimental/Shimmer/src/consts.ts b/packages/experimental/Shimmer/src/consts.ts new file mode 100644 index 0000000000..6799c2779e --- /dev/null +++ b/packages/experimental/Shimmer/src/consts.ts @@ -0,0 +1,3 @@ +export const shimmerDefaultAngle = 0; +export const shimmerDefaultDelay = 0; +export const shimmerDefaultDuration = 7000; diff --git a/packages/experimental/Shimmer/src/consts.win32.ts b/packages/experimental/Shimmer/src/consts.win32.ts new file mode 100644 index 0000000000..ecce63c0fd --- /dev/null +++ b/packages/experimental/Shimmer/src/consts.win32.ts @@ -0,0 +1,3 @@ +export const shimmerDefaultAngle = 0; +export const shimmerDefaultDelay = 500; +export const shimmerDefaultDuration = 2000; diff --git a/packages/experimental/Shimmer/src/index.ts b/packages/experimental/Shimmer/src/index.ts index f3ff837da4..8ae24c7ffa 100644 --- a/packages/experimental/Shimmer/src/index.ts +++ b/packages/experimental/Shimmer/src/index.ts @@ -9,3 +9,4 @@ export type { ShimmerTokens, ShimmerType, } from './Shimmer.types'; +export { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts';