From 5abe49fed928de91438bb5f009ad6d5326515a16 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Fri, 9 Sep 2022 14:05:32 +0530 Subject: [PATCH 01/23] add android ripple on button --- .../Button/src/Button.styling.android.ts | 116 ++++++++++++++++++ packages/components/Button/src/Button.tsx | 68 +++++++++- .../components/Button/src/Button.types.ts | 3 +- 3 files changed, 180 insertions(+), 7 deletions(-) create mode 100644 packages/components/Button/src/Button.styling.android.ts diff --git a/packages/components/Button/src/Button.styling.android.ts b/packages/components/Button/src/Button.styling.android.ts new file mode 100644 index 0000000000..4918343932 --- /dev/null +++ b/packages/components/Button/src/Button.styling.android.ts @@ -0,0 +1,116 @@ +import { buttonName, ButtonCoreTokens, ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize } from './Button.types'; +import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework'; +import { borderStyles, layoutStyles, fontStyles, FontTokens } from '@fluentui-react-native/tokens'; +import { defaultButtonTokens } from './ButtonTokens'; +import { defaultButtonColorTokens } from './ButtonColorTokens'; +import { Platform, ColorValue } from 'react-native'; +import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; +import { defaultButtonFontTokens } from './ButtonFontTokens'; + +export const buttonCoreStates: (keyof ButtonCoreTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'hasContent', 'hasIconBefore']; + +export const buttonStates: (keyof ButtonTokens)[] = [ + 'block', + 'primary', + 'subtle', + 'hovered', + 'small', + 'medium', + 'large', + 'hasContent', + 'hasIconAfter', + 'hasIconBefore', + 'rounded', + 'circular', + 'square', + 'focused', + 'pressed', + 'disabled', +]; + +export const stylingSettings: UseStylingOptions = { + tokens: [defaultButtonTokens, defaultButtonFontTokens, defaultButtonColorTokens, buttonName], + states: buttonStates, + slotProps: { + root: buildProps( + (tokens: ButtonTokens, theme: Theme) => { + return { + style: { + flexDirection: 'row', + alignSelf: 'baseline', + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + overflow: 'hidden', + }, + }; + }, + ['backgroundColor', ...borderStyles.keys], + ), + ripple: buildProps( + (tokens: ButtonTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + ...layoutStyles.from(tokens, theme), + }, + android_ripple: { + color: 'buttonbackgroundpressed', + }, + }), + ['backgroundColor', 'width', ...layoutStyles.keys], + ), + content: buildProps( + (tokens: ButtonTokens, theme: Theme) => { + return { + style: { + ...contentStyling(tokens, theme, tokens.color, tokens), + }, + }; + }, + ['color', 'spacingIconContentAfter', 'spacingIconContentBefore', ...fontStyles.keys], + ), + icon: buildProps( + (tokens: ButtonTokens) => ({ + color: tokens.iconColor, + height: tokens.iconSize, + width: tokens.iconSize, + }), + ['iconColor', 'iconSize'], + ), + }, +}; + +export const getDefaultSize = (): ButtonSize => { + if (Platform.OS === 'windows') { + return 'medium'; + } else if ((Platform.OS as any) === 'win32') { + return 'small'; + } + + return 'medium'; +}; + +export const contentStyling = (tokens: ButtonTokens, theme: Theme, contentColor: ColorValue, fontStylesTokens: FontTokens) => { + const textAdjustment = getTextMarginAdjustment(); + const spacingIconContentBefore = tokens.spacingIconContentBefore + ? { + marginStart: textAdjustment.marginStart + tokens.spacingIconContentBefore, + } + : {}; + const spacingIconContentAfter = tokens.spacingIconContentAfter + ? { + marginEnd: textAdjustment.marginEnd + tokens.spacingIconContentAfter, + } + : {}; + return { + color: contentColor, + ...getTextMarginAdjustment(), + ...spacingIconContentBefore, + ...spacingIconContentAfter, + ...fontStyles.from(fontStylesTokens, theme), + }; +}; diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index c28de7c20f..8927310ad2 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -1,6 +1,6 @@ /** @jsx withSlots */ import * as React from 'react'; -import { View } from 'react-native'; +import { Platform, Pressable, View } from 'react-native'; import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; import { buttonName, ButtonType, ButtonProps } from './Button.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; @@ -34,19 +34,46 @@ export const buttonLookup = (layer: string, state: IPressableState, userProps: B ); }; +const extractMarginAndroid = (style) => { + const marginKeys = [ + 'margin', + 'marginTop', + 'marginBottom', + 'marginLeft', + 'marginRight', + 'marginStart', + 'marginEnd', + 'marginVertical', + 'marginHorizontal', + ]; + const extractedMargin = {}, + mask = {}; + marginKeys.forEach((key) => { + if (style && style[key]) { + extractedMargin[key] = style[key]; + mask[key] = 0; + } + }); + return [extractedMargin, { ...style, ...mask }]; +}; + export const Button = compose({ displayName: buttonName, ...stylingSettings, slots: { root: View, + ripple: Pressable, icon: Icon, content: Text, }, useRender: (userProps: ButtonProps, useSlots: UseSlots) => { + const [rippledPressed, setRippleState] = React.useState(false); const button = useButton(userProps); const iconProps = createIconProps(userProps.icon); // grab the styled slots - const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); + const Slots = useSlots(userProps, (layer) => + buttonLookup(layer, { ...button.state, pressed: rippledPressed || button.state.pressed }, userProps), + ); // now return the handler for finishing render return (final: ButtonProps, ...children: React.ReactNode[]) => { @@ -70,17 +97,46 @@ export const Button = compose({ }); } const label = accessibilityLabel ?? childText; - - return ( - + const buttonContent = ( + {loading && } {shouldShowIcon && iconPosition === 'before' && } {React.Children.map(children, (child) => typeof child === 'string' ? {child} : child, )} {shouldShowIcon && iconPosition === 'after' && } - + ); + + const hasRipple = Platform.OS === 'android'; + if (hasRipple) { + const [extractedMargin, styleWithoutMargin] = extractMarginAndroid(mergedProps.style); + return ( + + { + setRippleState(true); + mergedProps.onPressIn?.(); + }} + onPressOut={() => { + setRippleState(false); + mergedProps.onPressOut?.(); + }} + > + {buttonContent} + + + ); + } else { + return ( + + {buttonContent} + + ); + } }; }, }); diff --git a/packages/components/Button/src/Button.types.ts b/packages/components/Button/src/Button.types.ts index 825712aa5e..982d987bd7 100644 --- a/packages/components/Button/src/Button.types.ts +++ b/packages/components/Button/src/Button.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ViewProps, ViewStyle, ColorValue } from 'react-native'; +import { ViewProps, ViewStyle, ColorValue, PressableProps } from 'react-native'; import { TextProps } from '@fluentui-react-native/text'; import { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; import { IFocusable, IPressableHooks, IWithPressableOptions, InteractionEvent } from '@fluentui-react-native/interactive-hooks'; @@ -152,6 +152,7 @@ export type ButtonState = IPressableHooks; + ripple?: PressableProps; icon: IconProps; content: TextProps; } From 895ab385b4a27b58b0a9cbe2b7d5d25b87963d67 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Fri, 9 Sep 2022 14:07:32 +0530 Subject: [PATCH 02/23] Change files --- ...native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json diff --git a/change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json b/change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json new file mode 100644 index 0000000000..9c0f436a38 --- /dev/null +++ b/change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "android ripple on button", + "packageName": "@fluentui-react-native/button", + "email": "email not defined", + "dependentChangeType": "patch" +} From dcf7d92fd7e2b35f3e1c9a1d9980fc0424c8dd8e Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Wed, 14 Sep 2022 20:13:04 +0530 Subject: [PATCH 03/23] ripple\fixes on FAB, Button --- .../Button/ButtonVariantTestSection.tsx | 3 +- .../Button/src/Button.styling.android.ts | 116 ------------------ .../components/Button/src/Button.styling.ts | 69 ++++++++--- packages/components/Button/src/Button.tsx | 21 ++-- .../components/Button/src/FAB/FAB.styling.ts | 80 ++++++++---- packages/components/Button/src/FAB/FAB.tsx | 7 +- .../components/Button/src/FAB/FAB.types.ts | 9 +- .../components/Button/src/FAB/FABCore.tsx | 69 ++++++++--- packages/components/Button/src/useButton.ts | 5 +- 9 files changed, 190 insertions(+), 189 deletions(-) delete mode 100644 packages/components/Button/src/Button.styling.android.ts diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx index fd07db35ce..2a0ea2b191 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx @@ -12,6 +12,7 @@ export const ButtonVariantTest: React.FunctionComponent = () => { viewBox: '0 0 500 500', }; const iconProps = { svgSource: svgProps, width: 20, height: 20 }; + const [showFABText, setShowFABText] = React.useState(true); return ( @@ -48,7 +49,7 @@ export const ButtonVariantTest: React.FunctionComponent = () => { Subtle - + setShowFABText(!showFABText)}> FAB diff --git a/packages/components/Button/src/Button.styling.android.ts b/packages/components/Button/src/Button.styling.android.ts deleted file mode 100644 index 4918343932..0000000000 --- a/packages/components/Button/src/Button.styling.android.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { buttonName, ButtonCoreTokens, ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize } from './Button.types'; -import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, layoutStyles, fontStyles, FontTokens } from '@fluentui-react-native/tokens'; -import { defaultButtonTokens } from './ButtonTokens'; -import { defaultButtonColorTokens } from './ButtonColorTokens'; -import { Platform, ColorValue } from 'react-native'; -import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { defaultButtonFontTokens } from './ButtonFontTokens'; - -export const buttonCoreStates: (keyof ButtonCoreTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'hasContent', 'hasIconBefore']; - -export const buttonStates: (keyof ButtonTokens)[] = [ - 'block', - 'primary', - 'subtle', - 'hovered', - 'small', - 'medium', - 'large', - 'hasContent', - 'hasIconAfter', - 'hasIconBefore', - 'rounded', - 'circular', - 'square', - 'focused', - 'pressed', - 'disabled', -]; - -export const stylingSettings: UseStylingOptions = { - tokens: [defaultButtonTokens, defaultButtonFontTokens, defaultButtonColorTokens, buttonName], - states: buttonStates, - slotProps: { - root: buildProps( - (tokens: ButtonTokens, theme: Theme) => { - return { - style: { - flexDirection: 'row', - alignSelf: 'baseline', - backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), - overflow: 'hidden', - }, - }; - }, - ['backgroundColor', ...borderStyles.keys], - ), - ripple: buildProps( - (tokens: ButtonTokens, theme: Theme) => ({ - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - ...layoutStyles.from(tokens, theme), - }, - android_ripple: { - color: 'buttonbackgroundpressed', - }, - }), - ['backgroundColor', 'width', ...layoutStyles.keys], - ), - content: buildProps( - (tokens: ButtonTokens, theme: Theme) => { - return { - style: { - ...contentStyling(tokens, theme, tokens.color, tokens), - }, - }; - }, - ['color', 'spacingIconContentAfter', 'spacingIconContentBefore', ...fontStyles.keys], - ), - icon: buildProps( - (tokens: ButtonTokens) => ({ - color: tokens.iconColor, - height: tokens.iconSize, - width: tokens.iconSize, - }), - ['iconColor', 'iconSize'], - ), - }, -}; - -export const getDefaultSize = (): ButtonSize => { - if (Platform.OS === 'windows') { - return 'medium'; - } else if ((Platform.OS as any) === 'win32') { - return 'small'; - } - - return 'medium'; -}; - -export const contentStyling = (tokens: ButtonTokens, theme: Theme, contentColor: ColorValue, fontStylesTokens: FontTokens) => { - const textAdjustment = getTextMarginAdjustment(); - const spacingIconContentBefore = tokens.spacingIconContentBefore - ? { - marginStart: textAdjustment.marginStart + tokens.spacingIconContentBefore, - } - : {}; - const spacingIconContentAfter = tokens.spacingIconContentAfter - ? { - marginEnd: textAdjustment.marginEnd + tokens.spacingIconContentAfter, - } - : {}; - return { - color: contentColor, - ...getTextMarginAdjustment(), - ...spacingIconContentBefore, - ...spacingIconContentAfter, - ...fontStyles.from(fontStylesTokens, theme), - }; -}; diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index df7fcfcde6..d80697035d 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -32,22 +32,59 @@ export const stylingSettings: UseStylingOptions ({ - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - }, - }), - ['backgroundColor', 'width', ...borderStyles.keys, ...layoutStyles.keys], - ), + ...Platform.select({ + android: { + root: buildProps( + (tokens: ButtonTokens, theme: Theme) => { + return { + style: { + flexDirection: 'row', + alignSelf: 'baseline', + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + overflow: 'hidden', + }, + }; + }, + ['backgroundColor', ...borderStyles.keys], + ), + ripple: buildProps( + (tokens: ButtonTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + ...layoutStyles.from(tokens, theme), + }, + android_ripple: { + color: 'buttonbackgroundpressed', + }, + }), + ['backgroundColor', 'width', ...layoutStyles.keys], + ), + }, + default: { + root: buildProps( + (tokens: ButtonTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + ...layoutStyles.from(tokens, theme), + }, + }), + ['backgroundColor', 'width', ...borderStyles.keys, ...layoutStyles.keys], + ), + }, + }), content: buildProps( (tokens: ButtonTokens, theme: Theme) => { return { diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 8927310ad2..1b057fc499 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -5,7 +5,7 @@ import { ActivityIndicator } from '@fluentui-react-native/experimental-activity- import { buttonName, ButtonType, ButtonProps } from './Button.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { stylingSettings, getDefaultSize } from './Button.styling'; -import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; +import { compose, mergeProps, withSlots, UseSlots, memoize } from '@fluentui-react-native/framework'; import { useButton } from './useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; @@ -34,7 +34,7 @@ export const buttonLookup = (layer: string, state: IPressableState, userProps: B ); }; -const extractMarginAndroid = (style) => { +export const extractMarginAndroid = (style) => { const marginKeys = [ 'margin', 'marginTop', @@ -67,13 +67,10 @@ export const Button = compose({ content: Text, }, useRender: (userProps: ButtonProps, useSlots: UseSlots) => { - const [rippledPressed, setRippleState] = React.useState(false); const button = useButton(userProps); const iconProps = createIconProps(userProps.icon); // grab the styled slots - const Slots = useSlots(userProps, (layer) => - buttonLookup(layer, { ...button.state, pressed: rippledPressed || button.state.pressed }, userProps), - ); + const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); // now return the handler for finishing render return (final: ButtonProps, ...children: React.ReactNode[]) => { @@ -117,14 +114,14 @@ export const Button = compose({ accessibilityLabel={label} {...mergedProps} style={styleWithoutMargin} - onPressIn={() => { - setRippleState(true); + onPressIn={memoize(() => { + mergedProps.setRippleStateAndroid(true); mergedProps.onPressIn?.(); - }} - onPressOut={() => { - setRippleState(false); + })} + onPressOut={memoize(() => { + mergedProps.setRippleStateAndroid(false); mergedProps.onPressOut?.(); - }} + })} > {buttonContent} diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index dc0f2d1c4c..9cf8160770 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -1,34 +1,72 @@ -import { ButtonCoreTokens, ButtonCoreProps } from '../Button.types'; -import { FABSlotProps } from './FAB.types'; +import { ButtonCoreTokens } from '../Button.types'; +import { FABProps, FABSlotProps } from './FAB.types'; import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework'; import { borderStyles, layoutStyles, fontStyles, shadowStyles } from '@fluentui-react-native/tokens'; import { buttonCoreStates } from '../Button.styling'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; +import { Platform } from 'react-native'; import { defaultFABTokens } from './FABTokens'; import { defaultFABColorTokens } from './FABColorTokens'; -export const stylingSettings: UseStylingOptions = { +export const stylingSettings: UseStylingOptions = { tokens: [defaultFABTokens, defaultFABColorTokens], states: [...buttonCoreStates], slotProps: { - root: buildProps( - (tokens: ButtonCoreTokens, theme: Theme) => ({ - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - ...shadowStyles.from(tokens, theme), - }, - elevation: tokens.elevation, - }), - ['backgroundColor', 'width', ...borderStyles.keys, ...layoutStyles.keys], - ), + ...Platform.select({ + android: { + root: buildProps( + (tokens: ButtonCoreTokens, theme: Theme) => { + return { + style: { + flexDirection: 'row', + alignSelf: 'baseline', + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + overflow: 'hidden', + }, + }; + }, + ['backgroundColor', ...borderStyles.keys], + ), + ripple: buildProps( + (tokens: ButtonCoreTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + ...layoutStyles.from(tokens, theme), + }, + android_ripple: { + color: 'buttonbackgroundpressed', + }, + }), + ['backgroundColor', 'width', ...layoutStyles.keys], + ), + }, + default: { + root: buildProps( + (tokens: ButtonCoreTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + ...layoutStyles.from(tokens, theme), + ...shadowStyles.from(tokens, theme), + }, + elevation: tokens.elevation, + }), + ['backgroundColor', 'width', ...borderStyles.keys, ...layoutStyles.keys], + ), + }, + }), content: buildProps( (tokens: ButtonCoreTokens, theme: Theme) => ({ style: { diff --git a/packages/components/Button/src/FAB/FAB.tsx b/packages/components/Button/src/FAB/FAB.tsx index c12abe0899..666deb5ccb 100644 --- a/packages/components/Button/src/FAB/FAB.tsx +++ b/packages/components/Button/src/FAB/FAB.tsx @@ -1,11 +1,10 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import { fabName, FABType } from './FAB.types'; +import { fabName, FABProps, FABType } from './FAB.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { compose, UseSlots } from '@fluentui-react-native/framework'; import { Icon } from '@fluentui-react-native/icon'; -import { ButtonCoreProps } from '../Button.types'; export const FAB = compose({ displayName: fabName, @@ -14,8 +13,8 @@ export const FAB = compose({ icon: Icon, content: Text, }, - useRender: (_userProps: ButtonCoreProps, _useSlots: UseSlots) => { - return (_final: ButtonCoreProps, ..._children: React.ReactNode[]) => { + useRender: (_userProps: FABProps, _useSlots: UseSlots) => { + return (_final: FABProps, ..._children: React.ReactNode[]) => { return null; // Only implemented for mobile endpoints }; }, diff --git a/packages/components/Button/src/FAB/FAB.types.ts b/packages/components/Button/src/FAB/FAB.types.ts index 34841df592..b007d6fdcf 100644 --- a/packages/components/Button/src/FAB/FAB.types.ts +++ b/packages/components/Button/src/FAB/FAB.types.ts @@ -1,13 +1,20 @@ import { ButtonSlotProps, ButtonCoreTokens, ButtonCoreProps } from '../Button.types'; import { ShadowProps } from '@fluentui-react-native/experimental-shadow'; +import { PressableProps } from 'react-native'; export const fabName = 'FAB'; export interface FABSlotProps extends ButtonSlotProps { shadow?: ShadowProps; + ripple?: PressableProps; } + +export interface FABProps extends ButtonCoreProps { + showChildren?: boolean; +} + export interface FABType { - props: ButtonCoreProps; + props: FABProps; tokens: ButtonCoreTokens; slotProps: FABSlotProps; } diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index 6a87718b0f..27cd3f6023 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -1,15 +1,15 @@ /** @jsx withSlots */ import * as React from 'react'; -import { Platform, View } from 'react-native'; -import { fabName, FABType } from './FAB.types'; +import { Platform, Pressable, View } from 'react-native'; +import { fabName, FABProps, FABType } from './FAB.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { stylingSettings } from './FAB.styling'; -import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; +import { compose, mergeProps, withSlots, UseSlots, memoize } from '@fluentui-react-native/framework'; import { useButton } from '../useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; -import { ButtonCoreProps } from '../Button.types'; import { Shadow } from '@fluentui-react-native/experimental-shadow'; +import { extractMarginAndroid } from '../Button'; /** * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. @@ -19,7 +19,7 @@ import { Shadow } from '@fluentui-react-native/experimental-shadow'; * @param userProps The props that were passed into the button * @returns Whether the styles that are assigned to the layer should be applied to the button */ -const buttonLookup = (layer: string, state: IPressableState, userProps: ButtonCoreProps): boolean => { +const buttonLookup = (layer: string, state: IPressableState, userProps: FABProps): boolean => { return ( state[layer] || userProps[layer] || (layer === 'hasContent' && !userProps.iconOnly) || (layer === 'hasIconBefore' && userProps.icon) ); @@ -32,10 +32,11 @@ export const FAB = compose({ root: View, icon: Icon, content: Text, + ripple: Pressable, shadow: Shadow, }, - useRender: (userProps: ButtonCoreProps, useSlots: UseSlots) => { - const { icon, onClick, ...rest } = userProps; + useRender: (userProps: FABProps, useSlots: UseSlots) => { + const { icon, ...rest } = userProps; const iconProps = createIconProps(userProps.icon); const button = useButton(rest); @@ -44,8 +45,8 @@ export const FAB = compose({ const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); // now return the handler for finishing render - return (final: ButtonCoreProps, ...children: React.ReactNode[]) => { - const { iconOnly, accessibilityLabel, ...mergedProps } = mergeProps(button.props, final); + return (final: FABProps, ...children: React.ReactNode[]) => { + const { iconOnly, accessibilityLabel, showChildren = true, ...mergedProps } = mergeProps(button.props, final); if (__DEV__ && iconOnly) { React.Children.forEach(children, (child) => { @@ -65,20 +66,54 @@ export const FAB = compose({ } const label = accessibilityLabel ?? childText; - const fabWithoutShadow = ( - + const buttonContent = ( + {icon && } - {React.Children.map(children, (child) => - typeof child === 'string' ? {child} : child, - )} - + {showChildren && + React.Children.map(children, (child) => + typeof child === 'string' ? {child} : child, + )} + ); const hasShadow = Platform.OS === 'ios'; + const hasRipple = Platform.OS === 'android'; + if (hasShadow) { - return {fabWithoutShadow}; + return ( + + + {buttonContent} + + + ); + } else if (hasRipple) { + const [extractedMargin, styleWithoutMargin] = extractMarginAndroid(mergedProps.style); + return ( + + { + mergedProps.setRippleStateAndroid(true); + mergedProps.onPressIn?.(); + })} + onPressOut={memoize(() => { + mergedProps.setRippleStateAndroid(false); + mergedProps.onPressOut?.(); + })} + > + {buttonContent} + + + ); } else { - return fabWithoutShadow; + return ( + + {buttonContent} + + ); } }; }, diff --git a/packages/components/Button/src/useButton.ts b/packages/components/Button/src/useButton.ts index 470a54d66d..22123e4510 100644 --- a/packages/components/Button/src/useButton.ts +++ b/packages/components/Button/src/useButton.ts @@ -16,6 +16,8 @@ export const useButton = (props: ButtonProps): ButtonState => { const onKeyUpProps = useKeyProps(onClick, ' ', 'Enter'); const hasTogglePattern = props.accessibilityActions && !!props.accessibilityActions.find((action) => action.name === 'Toggle'); + const [rippledPressedAndroid, setRippleStateAndroid] = React.useState(false); + return { props: { ...onKeyUpProps, @@ -30,8 +32,9 @@ export const useButton = (props: ButtonProps): ButtonState => { ref: useViewCommandFocus(componentRef), iconPosition: props.iconPosition || 'before', loading, + setRippleStateAndroid, }, - state: pressable.state, + state: { ...pressable.state, pressed: rippledPressedAndroid || pressable.state.pressed }, }; }; From 121b5afc3aaa49fb40c7f6fda36d29645473063c Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Wed, 14 Sep 2022 20:15:42 +0530 Subject: [PATCH 04/23] Change files --- ...native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json diff --git a/change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json b/change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json new file mode 100644 index 0000000000..4a50204358 --- /dev/null +++ b/change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Ripple/Fix on FAB, Review changes on Button", + "packageName": "@fluentui-react-native/tester", + "email": "email not defined", + "dependentChangeType": "patch" +} From 0b8aadb97c8025bb52b3f33dcf2f45b878a8aad1 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Thu, 15 Sep 2022 12:33:40 +0530 Subject: [PATCH 05/23] make fab collapsible / fix fab bugs --- .../Button/ButtonVariantTestSection.tsx | 3 ++- .../components/Button/src/FAB/FAB.styling.ts | 2 +- packages/components/Button/src/FAB/FAB.tsx | 7 +++---- .../components/Button/src/FAB/FAB.types.ts | 7 ++++++- .../components/Button/src/FAB/FABCore.tsx | 20 +++++++++---------- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx index fd07db35ce..2a0ea2b191 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx @@ -12,6 +12,7 @@ export const ButtonVariantTest: React.FunctionComponent = () => { viewBox: '0 0 500 500', }; const iconProps = { svgSource: svgProps, width: 20, height: 20 }; + const [showFABText, setShowFABText] = React.useState(true); return ( @@ -48,7 +49,7 @@ export const ButtonVariantTest: React.FunctionComponent = () => { Subtle - + setShowFABText(!showFABText)}> FAB diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index dc0f2d1c4c..97e23d40f1 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -27,7 +27,7 @@ export const stylingSettings: UseStylingOptions ({ diff --git a/packages/components/Button/src/FAB/FAB.tsx b/packages/components/Button/src/FAB/FAB.tsx index c12abe0899..666deb5ccb 100644 --- a/packages/components/Button/src/FAB/FAB.tsx +++ b/packages/components/Button/src/FAB/FAB.tsx @@ -1,11 +1,10 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import { fabName, FABType } from './FAB.types'; +import { fabName, FABProps, FABType } from './FAB.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { compose, UseSlots } from '@fluentui-react-native/framework'; import { Icon } from '@fluentui-react-native/icon'; -import { ButtonCoreProps } from '../Button.types'; export const FAB = compose({ displayName: fabName, @@ -14,8 +13,8 @@ export const FAB = compose({ icon: Icon, content: Text, }, - useRender: (_userProps: ButtonCoreProps, _useSlots: UseSlots) => { - return (_final: ButtonCoreProps, ..._children: React.ReactNode[]) => { + useRender: (_userProps: FABProps, _useSlots: UseSlots) => { + return (_final: FABProps, ..._children: React.ReactNode[]) => { return null; // Only implemented for mobile endpoints }; }, diff --git a/packages/components/Button/src/FAB/FAB.types.ts b/packages/components/Button/src/FAB/FAB.types.ts index 34841df592..2affcc2577 100644 --- a/packages/components/Button/src/FAB/FAB.types.ts +++ b/packages/components/Button/src/FAB/FAB.types.ts @@ -6,8 +6,13 @@ export const fabName = 'FAB'; export interface FABSlotProps extends ButtonSlotProps { shadow?: ShadowProps; } + +export interface FABProps extends ButtonCoreProps { + showChildren?: boolean; +} + export interface FABType { - props: ButtonCoreProps; + props: FABProps; tokens: ButtonCoreTokens; slotProps: FABSlotProps; } diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index 6a87718b0f..6bbd5c134c 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -1,14 +1,13 @@ /** @jsx withSlots */ import * as React from 'react'; import { Platform, View } from 'react-native'; -import { fabName, FABType } from './FAB.types'; +import { fabName, FABProps, FABType } from './FAB.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { stylingSettings } from './FAB.styling'; import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; import { useButton } from '../useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; -import { ButtonCoreProps } from '../Button.types'; import { Shadow } from '@fluentui-react-native/experimental-shadow'; /** @@ -19,7 +18,7 @@ import { Shadow } from '@fluentui-react-native/experimental-shadow'; * @param userProps The props that were passed into the button * @returns Whether the styles that are assigned to the layer should be applied to the button */ -const buttonLookup = (layer: string, state: IPressableState, userProps: ButtonCoreProps): boolean => { +const buttonLookup = (layer: string, state: IPressableState, userProps: FABProps): boolean => { return ( state[layer] || userProps[layer] || (layer === 'hasContent' && !userProps.iconOnly) || (layer === 'hasIconBefore' && userProps.icon) ); @@ -34,8 +33,8 @@ export const FAB = compose({ content: Text, shadow: Shadow, }, - useRender: (userProps: ButtonCoreProps, useSlots: UseSlots) => { - const { icon, onClick, ...rest } = userProps; + useRender: (userProps: FABProps, useSlots: UseSlots) => { + const { icon, ...rest } = userProps; const iconProps = createIconProps(userProps.icon); const button = useButton(rest); @@ -44,8 +43,8 @@ export const FAB = compose({ const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); // now return the handler for finishing render - return (final: ButtonCoreProps, ...children: React.ReactNode[]) => { - const { iconOnly, accessibilityLabel, ...mergedProps } = mergeProps(button.props, final); + return (final: FABProps, ...children: React.ReactNode[]) => { + const { iconOnly, accessibilityLabel, showChildren = true, ...mergedProps } = mergeProps(button.props, final); if (__DEV__ && iconOnly) { React.Children.forEach(children, (child) => { @@ -68,9 +67,10 @@ export const FAB = compose({ const fabWithoutShadow = ( {icon && } - {React.Children.map(children, (child) => - typeof child === 'string' ? {child} : child, - )} + {showChildren && + React.Children.map(children, (child) => + typeof child === 'string' ? {child} : child, + )} ); From 43c7cbc2a67670099d2fde98f76f10ef907d2c66 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Thu, 15 Sep 2022 12:36:45 +0530 Subject: [PATCH 06/23] Change files --- ...native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json | 6 ++++++ ...native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json | 7 +++++++ 2 files changed, 13 insertions(+) create mode 100644 change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json create mode 100644 change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json diff --git a/change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json b/change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json new file mode 100644 index 0000000000..8666686140 --- /dev/null +++ b/change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json @@ -0,0 +1,6 @@ +{ + "type": "minor", + "packageName": "@fluentui-react-native/button", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json b/change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json new file mode 100644 index 0000000000..eeac3d48b7 --- /dev/null +++ b/change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "make fab collapsible, fix fab bugs", + "packageName": "@fluentui-react-native/tester", + "email": "email not defined", + "dependentChangeType": "patch" +} From 42d152f43b66276d1eb24775bf6721d8a0e9eb34 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Wed, 21 Sep 2022 23:14:40 +0530 Subject: [PATCH 07/23] Renamed FAB showChildren to showContent --- .../src/TestComponents/Button/ButtonVariantTestSection.tsx | 4 +++- packages/components/Button/src/FAB/FAB.types.ts | 2 +- packages/components/Button/src/FAB/FABCore.tsx | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx index 2a0ea2b191..cdf832149b 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx @@ -12,7 +12,9 @@ export const ButtonVariantTest: React.FunctionComponent = () => { viewBox: '0 0 500 500', }; const iconProps = { svgSource: svgProps, width: 20, height: 20 }; + const [showFABText, setShowFABText] = React.useState(true); + const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]); return ( @@ -49,7 +51,7 @@ export const ButtonVariantTest: React.FunctionComponent = () => { Subtle - setShowFABText(!showFABText)}> + FAB diff --git a/packages/components/Button/src/FAB/FAB.types.ts b/packages/components/Button/src/FAB/FAB.types.ts index 2affcc2577..b5b1370c9a 100644 --- a/packages/components/Button/src/FAB/FAB.types.ts +++ b/packages/components/Button/src/FAB/FAB.types.ts @@ -8,7 +8,7 @@ export interface FABSlotProps extends ButtonSlotProps { } export interface FABProps extends ButtonCoreProps { - showChildren?: boolean; + showContent?: boolean; } export interface FABType { diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index 6bbd5c134c..dc3fc58d1c 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -44,7 +44,7 @@ export const FAB = compose({ // now return the handler for finishing render return (final: FABProps, ...children: React.ReactNode[]) => { - const { iconOnly, accessibilityLabel, showChildren = true, ...mergedProps } = mergeProps(button.props, final); + const { iconOnly, accessibilityLabel, showContent = true, ...mergedProps } = mergeProps(button.props, final); if (__DEV__ && iconOnly) { React.Children.forEach(children, (child) => { @@ -67,7 +67,7 @@ export const FAB = compose({ const fabWithoutShadow = ( {icon && } - {showChildren && + {showContent && React.Children.map(children, (child) => typeof child === 'string' ? {child} : child, )} From 6842dbeea3ffd8f9f09290e67e7754d6a830f7a1 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Wed, 21 Sep 2022 23:32:59 +0530 Subject: [PATCH 08/23] Change files --- ...-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json | 7 +++++++ ...android-theme-1f55406a-8490-4697-a264-72f99de15576.json | 7 +++++++ ...e-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json | 7 +++++++ ...native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json | 7 +++++++ ...-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json | 7 +++++++ ...ative-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json | 7 +++++++ ...tive-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json | 7 +++++++ ...ntextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json | 7 +++++++ ...default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json | 7 +++++++ ...tive-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json | 7 +++++++ ...ity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json | 7 +++++++ ...mental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json | 7 +++++++ ...mental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json | 7 +++++++ ...ntal-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json | 7 +++++++ ...mental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json | 7 +++++++ ...ntal-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json | 7 +++++++ ...l-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json | 7 +++++++ ...e-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json | 7 +++++++ ...l-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json | 7 +++++++ ...mental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json | 7 +++++++ ...ental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json | 7 +++++++ ...rimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json | 7 +++++++ ...rimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json | 7 +++++++ ...cus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json | 7 +++++++ ...ve-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json | 7 +++++++ ...ive-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json | 7 +++++++ ...t-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json | 7 +++++++ ...ractive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json | 7 +++++++ ...t-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json | 7 +++++++ ...t-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json | 7 +++++++ ...e-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json | 7 +++++++ ...-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json | 7 +++++++ ...ative-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json | 7 +++++++ ...-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json | 7 +++++++ ...ative-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json | 7 +++++++ ...ive-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json | 7 +++++++ ...e-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json | 7 +++++++ ...ive-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json | 7 +++++++ ...-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json | 7 +++++++ ...native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json | 7 +++++++ ...t-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json | 7 +++++++ ...-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json | 7 +++++++ ...t-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json | 7 +++++++ ...-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json | 7 +++++++ ...e-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json | 7 +++++++ ...theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json | 7 +++++++ ...native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json | 7 +++++++ ...e-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json | 7 +++++++ ...ation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json | 7 +++++++ ...dation-tokens-b238d201-11b2-4274-981f-6441e5736363.json | 7 +++++++ ...-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json | 7 +++++++ ...-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json | 7 +++++++ 52 files changed, 364 insertions(+) create mode 100644 change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json create mode 100644 change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json create mode 100644 change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json create mode 100644 change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json create mode 100644 change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json create mode 100644 change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json create mode 100644 change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json create mode 100644 change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json create mode 100644 change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json create mode 100644 change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json create mode 100644 change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json create mode 100644 change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json create mode 100644 change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json create mode 100644 change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json create mode 100644 change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json create mode 100644 change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json create mode 100644 change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json create mode 100644 change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json create mode 100644 change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json create mode 100644 change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json create mode 100644 change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json create mode 100644 change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json create mode 100644 change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json create mode 100644 change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json create mode 100644 change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json create mode 100644 change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json create mode 100644 change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json create mode 100644 change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json create mode 100644 change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json create mode 100644 change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json create mode 100644 change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json create mode 100644 change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json create mode 100644 change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json create mode 100644 change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json create mode 100644 change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json create mode 100644 change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json create mode 100644 change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json create mode 100644 change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json create mode 100644 change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json create mode 100644 change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json create mode 100644 change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json create mode 100644 change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json create mode 100644 change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json create mode 100644 change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json create mode 100644 change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json create mode 100644 change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json create mode 100644 change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json create mode 100644 change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json create mode 100644 change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json create mode 100644 change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json create mode 100644 change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json create mode 100644 change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json diff --git a/change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json b/change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json new file mode 100644 index 0000000000..b8b71da352 --- /dev/null +++ b/change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui/react-native", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json b/change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json new file mode 100644 index 0000000000..f22811f9e8 --- /dev/null +++ b/change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/android-theme", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json b/change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json new file mode 100644 index 0000000000..f0df3b1725 --- /dev/null +++ b/change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/apple-theme", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json b/change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json new file mode 100644 index 0000000000..f2e90debdd --- /dev/null +++ b/change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/avatar", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json b/change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json new file mode 100644 index 0000000000..864282f7b4 --- /dev/null +++ b/change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/badge", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json b/change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json new file mode 100644 index 0000000000..165bb225c1 --- /dev/null +++ b/change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/callout", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json b/change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json new file mode 100644 index 0000000000..c4720e88aa --- /dev/null +++ b/change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/checkbox", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json b/change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json new file mode 100644 index 0000000000..7d06579423 --- /dev/null +++ b/change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/contextual-menu", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json b/change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json new file mode 100644 index 0000000000..357af7b34f --- /dev/null +++ b/change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/default-theme", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json b/change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json new file mode 100644 index 0000000000..1344f8d876 --- /dev/null +++ b/change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/dropdown", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json b/change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json new file mode 100644 index 0000000000..920ead4ac0 --- /dev/null +++ b/change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-activity-indicator", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json b/change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json new file mode 100644 index 0000000000..7d2ec99bdc --- /dev/null +++ b/change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-avatar", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json b/change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json new file mode 100644 index 0000000000..921b9f00c6 --- /dev/null +++ b/change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-button", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json b/change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json new file mode 100644 index 0000000000..f822188e9a --- /dev/null +++ b/change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-checkbox", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json b/change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json new file mode 100644 index 0000000000..89636dcc97 --- /dev/null +++ b/change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-drawer", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json b/change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json new file mode 100644 index 0000000000..1062080576 --- /dev/null +++ b/change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-expander", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json b/change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json new file mode 100644 index 0000000000..59072ea551 --- /dev/null +++ b/change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-menu-button", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json b/change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json new file mode 100644 index 0000000000..018082283e --- /dev/null +++ b/change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-native-date-picker", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json b/change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json new file mode 100644 index 0000000000..884561bb02 --- /dev/null +++ b/change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-radio-group", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json b/change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json new file mode 100644 index 0000000000..09bd77f97b --- /dev/null +++ b/change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-shadow", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json b/change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json new file mode 100644 index 0000000000..7c278e8300 --- /dev/null +++ b/change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-shimmer", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json b/change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json new file mode 100644 index 0000000000..95fc5e0859 --- /dev/null +++ b/change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-tabs", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json b/change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json new file mode 100644 index 0000000000..c02fec16d9 --- /dev/null +++ b/change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/experimental-text", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json b/change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json new file mode 100644 index 0000000000..daab805466 --- /dev/null +++ b/change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/focus-trap-zone", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json b/change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json new file mode 100644 index 0000000000..c1d7518e5a --- /dev/null +++ b/change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/focus-zone", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json b/change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json new file mode 100644 index 0000000000..6b27011017 --- /dev/null +++ b/change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/framework", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json b/change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json new file mode 100644 index 0000000000..31c4038572 --- /dev/null +++ b/change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/icon", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json b/change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json new file mode 100644 index 0000000000..00cfda7353 --- /dev/null +++ b/change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/interactive-hooks", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json b/change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json new file mode 100644 index 0000000000..5918acee51 --- /dev/null +++ b/change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/link", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json b/change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json new file mode 100644 index 0000000000..5145ad00f7 --- /dev/null +++ b/change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/menu", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json b/change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json new file mode 100644 index 0000000000..0d63de2f8b --- /dev/null +++ b/change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/menu-button", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json b/change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json new file mode 100644 index 0000000000..c8a6c4330d --- /dev/null +++ b/change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/notification", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json b/change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json new file mode 100644 index 0000000000..ed66dc2efe --- /dev/null +++ b/change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/persona", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json b/change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json new file mode 100644 index 0000000000..af97c2de62 --- /dev/null +++ b/change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/persona-coin", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json b/change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json new file mode 100644 index 0000000000..a2eb00027d --- /dev/null +++ b/change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/popover", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json b/change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json new file mode 100644 index 0000000000..7f70e81931 --- /dev/null +++ b/change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/pressable", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json b/change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json new file mode 100644 index 0000000000..496ce81c28 --- /dev/null +++ b/change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/radio-group", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json b/change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json new file mode 100644 index 0000000000..3ecee41585 --- /dev/null +++ b/change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/separator", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json b/change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json new file mode 100644 index 0000000000..92b4ace2d6 --- /dev/null +++ b/change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/stack", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json b/change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json new file mode 100644 index 0000000000..fe4faf7cb5 --- /dev/null +++ b/change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/switch", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json b/change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json new file mode 100644 index 0000000000..04c1473eb7 --- /dev/null +++ b/change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/tabs", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json b/change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json new file mode 100644 index 0000000000..e98c56d43b --- /dev/null +++ b/change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/tester-win32", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json b/change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json new file mode 100644 index 0000000000..1cf5a765b5 --- /dev/null +++ b/change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/text", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json b/change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json new file mode 100644 index 0000000000..b3d6127c48 --- /dev/null +++ b/change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/theme", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json b/change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json new file mode 100644 index 0000000000..27a3b9f66b --- /dev/null +++ b/change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/theme-types", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json b/change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json new file mode 100644 index 0000000000..99af666c51 --- /dev/null +++ b/change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/theming-utils", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json b/change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json new file mode 100644 index 0000000000..7c4f6796d9 --- /dev/null +++ b/change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/tokens", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json b/change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json new file mode 100644 index 0000000000..7f04a6e0e0 --- /dev/null +++ b/change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@fluentui-react-native/win32-theme", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json b/change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json new file mode 100644 index 0000000000..6a5299699a --- /dev/null +++ b/change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@uifabricshared/foundation-compose", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json b/change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json new file mode 100644 index 0000000000..e87ff9772a --- /dev/null +++ b/change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@uifabricshared/foundation-tokens", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json b/change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json new file mode 100644 index 0000000000..44c8c5f8e2 --- /dev/null +++ b/change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@uifabricshared/theming-ramp", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json b/change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json new file mode 100644 index 0000000000..a5fcf9d0e9 --- /dev/null +++ b/change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Renamed FAB showChildren to showContent", + "packageName": "@uifabricshared/theming-react-native", + "email": "email not defined", + "dependentChangeType": "patch" +} From 769f7b3a3705df4f775ed70d482e10f62479105b Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Thu, 22 Sep 2022 10:47:58 +0530 Subject: [PATCH 09/23] Revert "Change files" This reverts commit 6842dbeea3ffd8f9f09290e67e7754d6a830f7a1. --- ...-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json | 7 ------- ...android-theme-1f55406a-8490-4697-a264-72f99de15576.json | 7 ------- ...e-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json | 7 ------- ...native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json | 7 ------- ...-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json | 7 ------- ...ative-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json | 7 ------- ...tive-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json | 7 ------- ...ntextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json | 7 ------- ...default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json | 7 ------- ...tive-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json | 7 ------- ...ity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json | 7 ------- ...mental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json | 7 ------- ...mental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json | 7 ------- ...ntal-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json | 7 ------- ...mental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json | 7 ------- ...ntal-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json | 7 ------- ...l-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json | 7 ------- ...e-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json | 7 ------- ...l-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json | 7 ------- ...mental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json | 7 ------- ...ental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json | 7 ------- ...rimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json | 7 ------- ...rimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json | 7 ------- ...cus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json | 7 ------- ...ve-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json | 7 ------- ...ive-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json | 7 ------- ...t-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json | 7 ------- ...ractive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json | 7 ------- ...t-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json | 7 ------- ...t-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json | 7 ------- ...e-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json | 7 ------- ...-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json | 7 ------- ...ative-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json | 7 ------- ...-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json | 7 ------- ...ative-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json | 7 ------- ...ive-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json | 7 ------- ...e-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json | 7 ------- ...ive-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json | 7 ------- ...-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json | 7 ------- ...native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json | 7 ------- ...t-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json | 7 ------- ...-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json | 7 ------- ...t-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json | 7 ------- ...-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json | 7 ------- ...e-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json | 7 ------- ...theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json | 7 ------- ...native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json | 7 ------- ...e-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json | 7 ------- ...ation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json | 7 ------- ...dation-tokens-b238d201-11b2-4274-981f-6441e5736363.json | 7 ------- ...-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json | 7 ------- ...-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json | 7 ------- 52 files changed, 364 deletions(-) delete mode 100644 change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json delete mode 100644 change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json delete mode 100644 change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json delete mode 100644 change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json delete mode 100644 change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json delete mode 100644 change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json delete mode 100644 change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json delete mode 100644 change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json delete mode 100644 change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json delete mode 100644 change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json delete mode 100644 change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json delete mode 100644 change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json delete mode 100644 change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json delete mode 100644 change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json delete mode 100644 change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json delete mode 100644 change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json delete mode 100644 change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json delete mode 100644 change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json delete mode 100644 change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json delete mode 100644 change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json delete mode 100644 change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json delete mode 100644 change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json delete mode 100644 change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json delete mode 100644 change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json delete mode 100644 change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json delete mode 100644 change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json delete mode 100644 change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json delete mode 100644 change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json delete mode 100644 change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json delete mode 100644 change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json delete mode 100644 change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json delete mode 100644 change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json delete mode 100644 change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json delete mode 100644 change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json delete mode 100644 change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json delete mode 100644 change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json delete mode 100644 change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json delete mode 100644 change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json delete mode 100644 change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json delete mode 100644 change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json delete mode 100644 change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json delete mode 100644 change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json delete mode 100644 change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json delete mode 100644 change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json delete mode 100644 change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json delete mode 100644 change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json delete mode 100644 change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json delete mode 100644 change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json delete mode 100644 change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json delete mode 100644 change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json delete mode 100644 change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json delete mode 100644 change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json diff --git a/change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json b/change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json deleted file mode 100644 index b8b71da352..0000000000 --- a/change/@fluentui-react-native-9a5d3ccb-fb2a-4efd-a9d0-e4744822489c.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui/react-native", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json b/change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json deleted file mode 100644 index f22811f9e8..0000000000 --- a/change/@fluentui-react-native-android-theme-1f55406a-8490-4697-a264-72f99de15576.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/android-theme", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json b/change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json deleted file mode 100644 index f0df3b1725..0000000000 --- a/change/@fluentui-react-native-apple-theme-738ca4f1-73f5-43c0-b2c3-fbfa1dc30dbf.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/apple-theme", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json b/change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json deleted file mode 100644 index f2e90debdd..0000000000 --- a/change/@fluentui-react-native-avatar-b4b77853-30cb-4fdf-b532-c3b73b4fa1ec.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/avatar", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json b/change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json deleted file mode 100644 index 864282f7b4..0000000000 --- a/change/@fluentui-react-native-badge-0105f5d4-65c3-4c3a-b63a-ef0b9bb90a73.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/badge", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json b/change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json deleted file mode 100644 index 165bb225c1..0000000000 --- a/change/@fluentui-react-native-callout-b78bfd17-06e0-4c8e-a746-9bc4407970cd.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/callout", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json b/change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json deleted file mode 100644 index c4720e88aa..0000000000 --- a/change/@fluentui-react-native-checkbox-9d461b0b-bebb-45a4-a601-566ca87571ed.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/checkbox", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json b/change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json deleted file mode 100644 index 7d06579423..0000000000 --- a/change/@fluentui-react-native-contextual-menu-d38e2a89-1dae-4613-b0e0-31dfc8ad10fe.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/contextual-menu", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json b/change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json deleted file mode 100644 index 357af7b34f..0000000000 --- a/change/@fluentui-react-native-default-theme-00f25151-7b2c-4b31-a33a-0c7ddfbfa470.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/default-theme", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json b/change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json deleted file mode 100644 index 1344f8d876..0000000000 --- a/change/@fluentui-react-native-dropdown-7a878d8f-4ed6-44e9-b682-b02514bcc20f.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/dropdown", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json b/change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json deleted file mode 100644 index 920ead4ac0..0000000000 --- a/change/@fluentui-react-native-experimental-activity-indicator-7aff634f-b4cf-4e7e-a8aa-bc82c8939502.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-activity-indicator", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json b/change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json deleted file mode 100644 index 7d2ec99bdc..0000000000 --- a/change/@fluentui-react-native-experimental-avatar-2392da3f-a437-40e9-b120-b9ac2f4e2c62.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-avatar", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json b/change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json deleted file mode 100644 index 921b9f00c6..0000000000 --- a/change/@fluentui-react-native-experimental-button-0bfdfb04-5ae1-41e1-b52e-b4bb2199a432.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-button", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json b/change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json deleted file mode 100644 index f822188e9a..0000000000 --- a/change/@fluentui-react-native-experimental-checkbox-dc0a97ad-307c-4542-aadf-df46c822bf7f.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-checkbox", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json b/change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json deleted file mode 100644 index 89636dcc97..0000000000 --- a/change/@fluentui-react-native-experimental-drawer-b074a467-4be6-445e-a362-114f3eea1595.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-drawer", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json b/change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json deleted file mode 100644 index 1062080576..0000000000 --- a/change/@fluentui-react-native-experimental-expander-2beae0a7-6334-4d1f-a487-ff72b1bf1ed9.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-expander", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json b/change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json deleted file mode 100644 index 59072ea551..0000000000 --- a/change/@fluentui-react-native-experimental-menu-button-acf7de0b-7d19-46f8-89c2-b38d2fdac54f.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-menu-button", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json b/change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json deleted file mode 100644 index 018082283e..0000000000 --- a/change/@fluentui-react-native-experimental-native-date-picker-04b26bb3-16db-4260-a783-2b385f9aa597.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-native-date-picker", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json b/change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json deleted file mode 100644 index 884561bb02..0000000000 --- a/change/@fluentui-react-native-experimental-radio-group-643e2d74-5eec-4cf0-99c7-ad23f01b6dd3.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-radio-group", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json b/change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json deleted file mode 100644 index 09bd77f97b..0000000000 --- a/change/@fluentui-react-native-experimental-shadow-a4e42f32-4b5c-4134-9744-87a104257f00.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-shadow", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json b/change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json deleted file mode 100644 index 7c278e8300..0000000000 --- a/change/@fluentui-react-native-experimental-shimmer-892efe2a-1777-4095-99f0-d95dfb30f316.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-shimmer", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json b/change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json deleted file mode 100644 index 95fc5e0859..0000000000 --- a/change/@fluentui-react-native-experimental-tabs-34247196-19dc-4d14-bea9-43c7ac571a22.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-tabs", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json b/change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json deleted file mode 100644 index c02fec16d9..0000000000 --- a/change/@fluentui-react-native-experimental-text-8d378d49-1299-468b-9b8a-609cdd27b3d5.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/experimental-text", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json b/change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json deleted file mode 100644 index daab805466..0000000000 --- a/change/@fluentui-react-native-focus-trap-zone-68b7bfe9-53f9-40c6-85d7-f7ddaeb98370.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/focus-trap-zone", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json b/change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json deleted file mode 100644 index c1d7518e5a..0000000000 --- a/change/@fluentui-react-native-focus-zone-79b056be-f737-4641-b01a-51402df7e4d0.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/focus-zone", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json b/change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json deleted file mode 100644 index 6b27011017..0000000000 --- a/change/@fluentui-react-native-framework-ae3eefbf-f3d8-4bd1-9dae-e8ec18bd3bfa.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/framework", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json b/change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json deleted file mode 100644 index 31c4038572..0000000000 --- a/change/@fluentui-react-native-icon-19ddaa59-e3ed-4577-9cf3-a4b8d8230249.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/icon", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json b/change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json deleted file mode 100644 index 00cfda7353..0000000000 --- a/change/@fluentui-react-native-interactive-hooks-decb3d95-31fd-4d5c-8fb5-c6c1012cba53.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/interactive-hooks", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json b/change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json deleted file mode 100644 index 5918acee51..0000000000 --- a/change/@fluentui-react-native-link-8cc741e2-3669-472d-992b-3f93bbfcb6c0.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/link", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json b/change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json deleted file mode 100644 index 5145ad00f7..0000000000 --- a/change/@fluentui-react-native-menu-6960152c-3bef-48e4-a138-9ddcb0d2018b.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/menu", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json b/change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json deleted file mode 100644 index 0d63de2f8b..0000000000 --- a/change/@fluentui-react-native-menu-button-02847e57-71c7-4771-9a32-4bfc21bc849d.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/menu-button", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json b/change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json deleted file mode 100644 index c8a6c4330d..0000000000 --- a/change/@fluentui-react-native-notification-fc85b7ac-8540-427a-93e2-4cac18dee2cf.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/notification", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json b/change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json deleted file mode 100644 index ed66dc2efe..0000000000 --- a/change/@fluentui-react-native-persona-966be833-09e6-4ae1-b639-c7c53fa8a0e2.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/persona", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json b/change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json deleted file mode 100644 index af97c2de62..0000000000 --- a/change/@fluentui-react-native-persona-coin-b2a7cf0f-7754-4737-9db0-fa4ad0f0eb0e.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/persona-coin", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json b/change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json deleted file mode 100644 index a2eb00027d..0000000000 --- a/change/@fluentui-react-native-popover-6a9dba41-914c-4a09-871a-f8e019b71c0d.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/popover", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json b/change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json deleted file mode 100644 index 7f70e81931..0000000000 --- a/change/@fluentui-react-native-pressable-eed5df63-2f3c-4d26-a88c-c1493f483c1c.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/pressable", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json b/change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json deleted file mode 100644 index 496ce81c28..0000000000 --- a/change/@fluentui-react-native-radio-group-0de392b1-ad9f-498c-b94e-0a8c1cd6cac8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/radio-group", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json b/change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json deleted file mode 100644 index 3ecee41585..0000000000 --- a/change/@fluentui-react-native-separator-3baceb03-fdb2-4203-bbc4-93b13325a03a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/separator", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json b/change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json deleted file mode 100644 index 92b4ace2d6..0000000000 --- a/change/@fluentui-react-native-stack-3d1594ed-aaab-4fe3-b1c9-c26401698dd7.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/stack", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json b/change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json deleted file mode 100644 index fe4faf7cb5..0000000000 --- a/change/@fluentui-react-native-switch-5699ea22-43a0-4f1e-b4b8-b35b59316d75.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/switch", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json b/change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json deleted file mode 100644 index 04c1473eb7..0000000000 --- a/change/@fluentui-react-native-tabs-e2da16f8-4c74-4d32-8d0b-961852480132.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/tabs", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json b/change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json deleted file mode 100644 index e98c56d43b..0000000000 --- a/change/@fluentui-react-native-tester-win32-f1249af4-0554-4e26-a80c-4aa7a822f8f5.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/tester-win32", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json b/change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json deleted file mode 100644 index 1cf5a765b5..0000000000 --- a/change/@fluentui-react-native-text-809dd924-4c9a-471c-9b69-660836ce4a7a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/text", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json b/change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json deleted file mode 100644 index b3d6127c48..0000000000 --- a/change/@fluentui-react-native-theme-a56474e4-706f-49a7-bccd-010b1b527d30.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/theme", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json b/change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json deleted file mode 100644 index 27a3b9f66b..0000000000 --- a/change/@fluentui-react-native-theme-types-d64b73dc-a231-4984-a8fb-479e2e9db054.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/theme-types", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json b/change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json deleted file mode 100644 index 99af666c51..0000000000 --- a/change/@fluentui-react-native-theming-utils-467041f8-f3c0-4b56-b5f0-71777520966c.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/theming-utils", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json b/change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json deleted file mode 100644 index 7c4f6796d9..0000000000 --- a/change/@fluentui-react-native-tokens-68266dc0-0012-4f00-85ba-03e4eed0710b.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/tokens", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json b/change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json deleted file mode 100644 index 7f04a6e0e0..0000000000 --- a/change/@fluentui-react-native-win32-theme-192679d8-1e73-4261-b5f2-ed352c97018a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@fluentui-react-native/win32-theme", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json b/change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json deleted file mode 100644 index 6a5299699a..0000000000 --- a/change/@uifabricshared-foundation-compose-b7405d94-1e6a-428a-abd2-b55d176f9ecf.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@uifabricshared/foundation-compose", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json b/change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json deleted file mode 100644 index e87ff9772a..0000000000 --- a/change/@uifabricshared-foundation-tokens-b238d201-11b2-4274-981f-6441e5736363.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@uifabricshared/foundation-tokens", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json b/change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json deleted file mode 100644 index 44c8c5f8e2..0000000000 --- a/change/@uifabricshared-theming-ramp-52eb5538-d2dd-4068-b8f6-5d980813fa60.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@uifabricshared/theming-ramp", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json b/change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json deleted file mode 100644 index a5fcf9d0e9..0000000000 --- a/change/@uifabricshared-theming-react-native-c1aa0c63-8bba-4106-9db1-3a4c39107acb.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Renamed FAB showChildren to showContent", - "packageName": "@uifabricshared/theming-react-native", - "email": "email not defined", - "dependentChangeType": "patch" -} From 289f4c64577c7149ad6163b3507b2ac0ab4f10d5 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Thu, 29 Sep 2022 12:27:03 +0530 Subject: [PATCH 10/23] Resolved comments --- .../Button/ButtonVariantTestSection.tsx | 4 ---- packages/components/Button/src/Button.styling.ts | 11 ++++++----- packages/components/Button/src/Button.tsx | 11 ++++++----- packages/components/Button/src/FAB/FAB.styling.ts | 11 ++++++----- packages/components/Button/src/FAB/FABCore.tsx | 2 +- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx index 9a29a1b2cb..cdf832149b 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx @@ -12,10 +12,6 @@ export const ButtonVariantTest: React.FunctionComponent = () => { viewBox: '0 0 500 500', }; const iconProps = { svgSource: svgProps, width: 20, height: 20 }; - const [showFABText, setShowFABText] = React.useState(true); - - const [showFABText, setShowFABText] = React.useState(true); - const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]); const [showFABText, setShowFABText] = React.useState(true); const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]); diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index d80697035d..7c2081568c 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -35,18 +35,18 @@ export const stylingSettings: UseStylingOptions { + (tokens: ButtonTokens) => { return { style: { flexDirection: 'row', alignSelf: 'baseline', backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), + borderRadius: tokens.borderRadius, overflow: 'hidden', }, }; }, - ['backgroundColor', ...borderStyles.keys], + ['backgroundColor', 'borderRadius'], ), ripple: buildProps( (tokens: ButtonTokens, theme: Theme) => ({ @@ -57,13 +57,14 @@ export const stylingSettings: UseStylingOptions { +export const extractMarginAndroid = memoize((style) => { const marginKeys = [ 'margin', 'marginTop', @@ -47,15 +47,15 @@ export const extractMarginAndroid = (style) => { 'marginHorizontal', ]; const extractedMargin = {}, - mask = {}; + resetMargin = {}; marginKeys.forEach((key) => { if (style && style[key]) { extractedMargin[key] = style[key]; - mask[key] = 0; + resetMargin[key] = 0; } }); - return [extractedMargin, { ...style, ...mask }]; -}; + return [extractedMargin, { ...style, ...resetMargin }]; +}); export const Button = compose({ displayName: buttonName, @@ -110,6 +110,7 @@ export const Button = compose({ const [extractedMargin, styleWithoutMargin] = extractMarginAndroid(mergedProps.style); return ( + {/* RN Pressable needs to be wrapped with a root view to support curved edges */} { + (tokens: ButtonCoreTokens) => { return { style: { flexDirection: 'row', alignSelf: 'baseline', backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), + borderRadius: tokens.borderRadius, overflow: 'hidden', }, }; }, - ['backgroundColor', ...borderStyles.keys], + ['backgroundColor', 'borderRadius'], ), ripple: buildProps( (tokens: ButtonCoreTokens, theme: Theme) => ({ @@ -37,13 +37,14 @@ export const stylingSettings: UseStylingOptions({ const buttonContent = ( {icon && } - {showChildren && + {showContent && React.Children.map(children, (child) => typeof child === 'string' ? {child} : child, )} From 295df7d54bc4e36ab389e527e888141bb2032f09 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Thu, 29 Sep 2022 14:16:22 +0530 Subject: [PATCH 11/23] Resolve conflicts --- .../components/Button/src/FAB/FAB.styling.ts | 21 ------------------- .../components/Button/src/FAB/FABCore.tsx | 8 ------- 2 files changed, 29 deletions(-) diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index 35d2ca2641..f2a70007f9 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -12,7 +12,6 @@ export const stylingSettings: UseStylingOptions ({ - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - ...shadowStyles.from(tokens, theme), - }, - elevation: tokens.elevation, - }), - ['backgroundColor', 'width', 'elevation', ...borderStyles.keys, ...layoutStyles.keys, ...shadowStyles.keys], - ), ->>>>>>> 62b0f3d5c5d04004dafba11b9690536c78b59e2c content: buildProps( (tokens: ButtonCoreTokens, theme: Theme) => ({ style: { diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index f00d5f52cc..c02723cfde 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -1,10 +1,6 @@ /** @jsx withSlots */ import * as React from 'react'; -<<<<<<< HEAD import { Platform, Pressable, View } from 'react-native'; -======= -import { Platform, View } from 'react-native'; ->>>>>>> 62b0f3d5c5d04004dafba11b9690536c78b59e2c import { fabName, FABProps, FABType } from './FAB.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { stylingSettings } from './FAB.styling'; @@ -77,11 +73,7 @@ export const FAB = compose({ React.Children.map(children, (child) => typeof child === 'string' ? {child} : child, )} -<<<<<<< HEAD -======= - ->>>>>>> 62b0f3d5c5d04004dafba11b9690536c78b59e2c ); const hasShadow = Platform.OS === 'ios'; From 5093cddb89682ed86f6450075db52ff936af518e Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Thu, 29 Sep 2022 10:25:09 -0700 Subject: [PATCH 12/23] Change files --- ...ative-button-6a251b28-f044-4844-b8ba-d6c1847178d9.json} | 3 ++- ...native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json | 7 ------- ...native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json | 7 ------- ...native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json | 7 ------- 4 files changed, 2 insertions(+), 22 deletions(-) rename change/{@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json => @fluentui-react-native-button-6a251b28-f044-4844-b8ba-d6c1847178d9.json} (60%) delete mode 100644 change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json delete mode 100644 change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json delete mode 100644 change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json diff --git a/change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json b/change/@fluentui-react-native-button-6a251b28-f044-4844-b8ba-d6c1847178d9.json similarity index 60% rename from change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json rename to change/@fluentui-react-native-button-6a251b28-f044-4844-b8ba-d6c1847178d9.json index 8666686140..543f255f9c 100644 --- a/change/@fluentui-react-native-button-f29f27da-f6a8-404a-8776-9c106db287a1.json +++ b/change/@fluentui-react-native-button-6a251b28-f044-4844-b8ba-d6c1847178d9.json @@ -1,6 +1,7 @@ { "type": "minor", + "comment": "Ripple/Fix on FAB", "packageName": "@fluentui-react-native/button", - "email": "email not defined", + "email": "ruaraki@microsoft.com", "dependentChangeType": "patch" } diff --git a/change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json b/change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json deleted file mode 100644 index 9c0f436a38..0000000000 --- a/change/@fluentui-react-native-button-d2ac1a4d-2675-42ce-b4ed-edd5a4bbf811.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "android ripple on button", - "packageName": "@fluentui-react-native/button", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json b/change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json deleted file mode 100644 index 4a50204358..0000000000 --- a/change/@fluentui-react-native-tester-331c91fb-dbab-43f9-a4c7-2433bd52dc21.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Ripple/Fix on FAB, Review changes on Button", - "packageName": "@fluentui-react-native/tester", - "email": "email not defined", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json b/change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json deleted file mode 100644 index eeac3d48b7..0000000000 --- a/change/@fluentui-react-native-tester-7e5bb39b-d78e-4de4-bf11-3ce6ace83a68.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "make fab collapsible, fix fab bugs", - "packageName": "@fluentui-react-native/tester", - "email": "email not defined", - "dependentChangeType": "patch" -} From 3a8891063cf8e74b538a287aa7a7561dca5a5b4f Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Sat, 8 Oct 2022 00:21:45 +0530 Subject: [PATCH 13/23] Ripple changes and tests updation --- packages/components/Button/src/Button.tsx | 37 +- .../components/Button/src/FAB/FAB.styling.ts | 4 +- .../components/Button/src/FAB/FABCore.tsx | 17 +- .../src/FAB/__snapshots__/FAB.test.tsx.snap | 33 +- .../src/__snapshots__/Button.test.tsx.snap | 901 ++++++++++-------- packages/components/Button/src/useButton.ts | 5 +- .../__snapshots__/Menu.test.tsx.snap | 808 +++++++++------- .../__snapshots__/MenuButton.test.tsx.snap | 155 +-- .../__snapshots__/Notification.test.tsx.snap | 117 +-- .../__snapshots__/MenuButton.test.tsx.snap | 189 ++-- 10 files changed, 1234 insertions(+), 1032 deletions(-) diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index e5eaec3ed5..49f78bfca4 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -34,7 +34,7 @@ export const buttonLookup = (layer: string, state: IPressableState, userProps: B ); }; -export const extractMarginAndroid = memoize((style) => { +export const extractOuterStylePropsAndroid = memoize((style) => { const marginKeys = [ 'margin', 'marginTop', @@ -45,16 +45,25 @@ export const extractMarginAndroid = memoize((style) => { 'marginEnd', 'marginVertical', 'marginHorizontal', + 'start', + 'end', + 'left', + 'right', + 'top', + 'bottom', ]; - const extractedMargin = {}, - resetMargin = {}; + const outerStyleProps = {}, + resetProps = {}; marginKeys.forEach((key) => { if (style && style[key]) { - extractedMargin[key] = style[key]; - resetMargin[key] = 0; + outerStyleProps[key] = style[key]; + resetProps[key] = 0; } }); - return [extractedMargin, { ...style, ...resetMargin }]; + return [ + { ...outerStyleProps, display: style ? style.display : 'flex' }, + { ...style, ...resetProps }, + ]; }); export const Button = compose({ @@ -68,9 +77,13 @@ export const Button = compose({ }, useRender: (userProps: ButtonProps, useSlots: UseSlots) => { const button = useButton(userProps); + const [ripplePressedAndroid, setRippleStateAndroid] = React.useState(false); + const iconProps = createIconProps(userProps.icon); // grab the styled slots - const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); + const Slots = useSlots(userProps, (layer) => + buttonLookup(layer, { ...button.state, pressed: ripplePressedAndroid || button.state.pressed }, userProps), + ); // now return the handler for finishing render return (final: ButtonProps, ...children: React.ReactNode[]) => { @@ -107,20 +120,20 @@ export const Button = compose({ const hasRipple = Platform.OS === 'android'; if (hasRipple) { - const [extractedMargin, styleWithoutMargin] = extractMarginAndroid(mergedProps.style); + const [outerStyleProps, innerStyleProps] = extractOuterStylePropsAndroid(mergedProps.style); return ( - + {/* RN Pressable needs to be wrapped with a root view to support curved edges */} { - mergedProps.setRippleStateAndroid(true); + setRippleStateAndroid(true); mergedProps.onPressIn?.(); })} onPressOut={memoize(() => { - mergedProps.setRippleStateAndroid(false); + setRippleStateAndroid(false); mergedProps.onPressOut?.(); })} > diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index f2a70007f9..25b1bf3338 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -39,12 +39,14 @@ export const stylingSettings: UseStylingOptions({ }, useRender: (userProps: FABProps, useSlots: UseSlots) => { const { icon, ...rest } = userProps; + const [ripplePressedAndroid, setRippleStateAndroid] = React.useState(false); const iconProps = createIconProps(userProps.icon); const button = useButton(rest); // grab the styled slots - const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); + const Slots = useSlots(userProps, (layer) => + buttonLookup(layer, { ...button.state, pressed: ripplePressedAndroid || button.state.pressed }, userProps), + ); // now return the handler for finishing render return (final: FABProps, ...children: React.ReactNode[]) => { @@ -88,19 +91,19 @@ export const FAB = compose({ ); } else if (hasRipple) { - const [extractedMargin, styleWithoutMargin] = extractMarginAndroid(mergedProps.style); + const [outerStyleProps, innerStyleProps] = extractOuterStylePropsAndroid(mergedProps.style); return ( - + { - mergedProps.setRippleStateAndroid(true); + setRippleStateAndroid(true); mergedProps.onPressIn?.(); })} onPressOut={memoize(() => { - mergedProps.setRippleStateAndroid(false); + setRippleStateAndroid(false); mergedProps.onPressOut?.(); })} > diff --git a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap index 49e4dd1d4f..fb2bbce99c 100644 --- a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap +++ b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap @@ -26,18 +26,11 @@ exports[`Custom FAB with no shadow(iOS) 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignItems": "center", - "alignSelf": "flex-start", + "alignSelf": "baseline", "backgroundColor": "#0078d4", - "borderColor": "#005a9e", "borderRadius": 9999, - "display": "flex", "flexDirection": "row", - "justifyContent": "center", - "minHeight": 56, - "minWidth": 56, - "padding": 16, - "width": undefined, + "overflow": "hidden", } } > @@ -67,14 +60,11 @@ exports[`Default FAB (iOS) 1`] = ` @@ -126,11 +114,10 @@ exports[`Default FAB (iOS) 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignItems": "center", - "alignSelf": "flex-start", + "alignItems": undefined, + "alignSelf": "baseline", "backgroundColor": "#0078d4", "borderBottomWidth": undefined, - "borderColor": "#005a9e", "borderEndWidth": undefined, "borderLeftWidth": undefined, "borderRadius": 9999, @@ -138,13 +125,10 @@ exports[`Default FAB (iOS) 1`] = ` "borderStartWidth": undefined, "borderTopWidth": undefined, "borderWidth": undefined, - "display": "flex", "flexDirection": "row", "flexWrap": undefined, - "justifyContent": "center", - "minHeight": 56, - "minWidth": 56, - "padding": 16, + "overflow": "hidden", + "padding": undefined, "paddingBottom": undefined, "paddingEnd": undefined, "paddingHorizontal": undefined, @@ -160,7 +144,6 @@ exports[`Default FAB (iOS) 1`] = ` }, "shadowOpacity": 0.14, "shadowRadius": 4, - "width": undefined, } } > diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap index 44dae9f246..237686ee27 100644 --- a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap @@ -2,572 +2,671 @@ exports[`Button component tests Button circular 1`] = ` - - Circular Button - + + Circular Button + + `; exports[`Button component tests Button composed 1`] = ` - - Composed Button with RNText - + + Composed Button with RNText + + `; exports[`Button component tests Button customized 1`] = ` - - Custom Button - + + Custom Button + + `; exports[`Button component tests Button default 1`] = ` - - Default Button - + + Default Button + + `; exports[`Button component tests Button large 1`] = ` - - Large Button - + + Large Button + + `; exports[`Button component tests Button primary 1`] = ` - - Primary Button - + + Primary Button + + `; exports[`Button component tests Button small 1`] = ` - - Small Button - + + Small Button + + `; exports[`Button component tests Button square 1`] = ` - - Square Button - + + Square Button + + `; exports[`Button component tests Button subtle 1`] = ` - - Subtle Button - + + Subtle Button + + `; diff --git a/packages/components/Button/src/useButton.ts b/packages/components/Button/src/useButton.ts index 22123e4510..470a54d66d 100644 --- a/packages/components/Button/src/useButton.ts +++ b/packages/components/Button/src/useButton.ts @@ -16,8 +16,6 @@ export const useButton = (props: ButtonProps): ButtonState => { const onKeyUpProps = useKeyProps(onClick, ' ', 'Enter'); const hasTogglePattern = props.accessibilityActions && !!props.accessibilityActions.find((action) => action.name === 'Toggle'); - const [rippledPressedAndroid, setRippleStateAndroid] = React.useState(false); - return { props: { ...onKeyUpProps, @@ -32,9 +30,8 @@ export const useButton = (props: ButtonProps): ButtonState => { ref: useViewCommandFocus(componentRef), iconPosition: props.iconPosition || 'before', loading, - setRippleStateAndroid, }, - state: { ...pressable.state, pressed: rippledPressedAndroid || pressable.state.pressed }, + state: pressable.state, }; }; diff --git a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap index 7606e914b3..82b0c79a66 100644 --- a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap @@ -2,87 +2,29 @@ exports[`Checkbox component tests Menu default 1`] = ` - - Default - - -`; - -exports[`Checkbox component tests Menu defaultOpen 1`] = ` -Array [ - Open + Default + + +`; + +exports[`Checkbox component tests Menu defaultOpen 1`] = ` +Array [ + + + + Open + + , - - Open - + + Open + + , - - Open - + + Open + + , - - Open - + + Open + + , - - Open - + + Open + + , - - Open - + + Open + + , - - Default - + + Default + + , - " - > - - - - + > + + + + + `; diff --git a/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap b/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap index 3d6be0bae5..01f0942242 100644 --- a/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap +++ b/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap @@ -112,74 +112,85 @@ exports[`Notification component tests Notification default 1`] = ` - - Undo - + + Undo + + diff --git a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap index e6b7896d79..d90ad42ed3 100644 --- a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -2,112 +2,123 @@ exports[`ContextualMenu default 1`] = ` - - Press for Nested MenuButton - - + Press for Nested MenuButton + + " - > - - - - + > + + + + + `; From 23dcc69fc6a515e1d7d0d8382703d3954ccc1188 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Mon, 17 Oct 2022 23:42:30 +0530 Subject: [PATCH 14/23] Resolved comments on ripple --- packages/components/Button/src/Button.tsx | 71 +++++++++++-------- .../components/Button/src/FAB/FABCore.tsx | 19 ++--- 2 files changed, 49 insertions(+), 41 deletions(-) diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 49f78bfca4..a682fb6143 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -1,6 +1,6 @@ /** @jsx withSlots */ import * as React from 'react'; -import { Platform, Pressable, View } from 'react-native'; +import { Platform, Pressable, View, ViewStyle } from 'react-native'; import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; import { buttonName, ButtonType, ButtonProps } from './Button.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; @@ -34,35 +34,47 @@ export const buttonLookup = (layer: string, state: IPressableState, userProps: B ); }; -export const extractOuterStylePropsAndroid = memoize((style) => { - const marginKeys = [ - 'margin', - 'marginTop', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginStart', - 'marginEnd', - 'marginVertical', - 'marginHorizontal', - 'start', - 'end', - 'left', - 'right', - 'top', - 'bottom', - ]; - const outerStyleProps = {}, - resetProps = {}; - marginKeys.forEach((key) => { - if (style && style[key]) { - outerStyleProps[key] = style[key]; - resetProps[key] = 0; - } - }); +export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [outerStyleProps: ViewStyle, innerStyleProps: ViewStyle] => { + const { + margin, + marginTop, + marginBottom, + marginLeft, + marginRight, + marginStart, + marginEnd, + marginVertical, + marginHorizontal, + start, + end, + left, + right, + top, + bottom, + display, + ...restOfProps + } = style; + return [ - { ...outerStyleProps, display: style ? style.display : 'flex' }, - { ...style, ...resetProps }, + { + margin, + marginTop, + marginBottom, + marginLeft, + marginRight, + marginStart, + marginEnd, + marginVertical, + marginHorizontal, + start, + end, + left, + right, + top, + bottom, + display, + }, + { ...restOfProps }, ]; }); @@ -106,6 +118,7 @@ export const Button = compose({ } }); } + const label = accessibilityLabel ?? childText; const buttonContent = ( diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index e292cf6657..d7a624a7e0 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -78,18 +78,17 @@ export const FAB = compose({ )} ); + const buttonContentWithRoot = ( + + {buttonContent} + + ); const hasShadow = Platform.OS === 'ios'; const hasRipple = Platform.OS === 'android'; if (hasShadow) { - return ( - - - {buttonContent} - - - ); + return {buttonContentWithRoot}; } else if (hasRipple) { const [outerStyleProps, innerStyleProps] = extractOuterStylePropsAndroid(mergedProps.style); return ( @@ -112,11 +111,7 @@ export const FAB = compose({ ); } else { - return ( - - {buttonContent} - - ); + return buttonContentWithRoot; } }; }, From fb4ceb98a71e390a29bc3d9108e51fe4d942288b Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Mon, 17 Oct 2022 23:53:30 +0530 Subject: [PATCH 15/23] Change files --- ...l-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json | 7 +++++++ ...e-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json | 7 +++++++ ...t-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json | 7 +++++++ ...-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json | 7 +++++++ 4 files changed, 28 insertions(+) create mode 100644 change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json create mode 100644 change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json create mode 100644 change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json create mode 100644 change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json diff --git a/change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json b/change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json new file mode 100644 index 0000000000..ff3c14b1f7 --- /dev/null +++ b/change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "ripple\\fixes on FAB, Button", + "packageName": "@fluentui-react-native/experimental-menu-button", + "email": "singh.ayush@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json b/change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json new file mode 100644 index 0000000000..35dcc87522 --- /dev/null +++ b/change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "ripple\\fixes on FAB, Button", + "packageName": "@fluentui-react-native/menu-button", + "email": "singh.ayush@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json b/change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json new file mode 100644 index 0000000000..678792803b --- /dev/null +++ b/change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "ripple\\fixes on FAB, Button", + "packageName": "@fluentui-react-native/menu", + "email": "singh.ayush@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json b/change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json new file mode 100644 index 0000000000..755c1ecd39 --- /dev/null +++ b/change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "ripple\\fixes on FAB, Button", + "packageName": "@fluentui-react-native/notification", + "email": "singh.ayush@microsoft.com", + "dependentChangeType": "none" +} From 6d998da86a91c4c591ac9e4c6a801b7fdaaa29a3 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Tue, 18 Oct 2022 01:02:33 +0530 Subject: [PATCH 16/23] Revert "Change files" This reverts commit fb4ceb98a71e390a29bc3d9108e51fe4d942288b. --- ...l-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json | 7 ------- ...e-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json | 7 ------- ...t-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json | 7 ------- ...-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json | 7 ------- 4 files changed, 28 deletions(-) delete mode 100644 change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json delete mode 100644 change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json delete mode 100644 change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json delete mode 100644 change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json diff --git a/change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json b/change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json deleted file mode 100644 index ff3c14b1f7..0000000000 --- a/change/@fluentui-react-native-experimental-menu-button-50cae08d-9661-4619-9a44-25d09b72e25c.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "ripple\\fixes on FAB, Button", - "packageName": "@fluentui-react-native/experimental-menu-button", - "email": "singh.ayush@microsoft.com", - "dependentChangeType": "none" -} diff --git a/change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json b/change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json deleted file mode 100644 index 35dcc87522..0000000000 --- a/change/@fluentui-react-native-menu-button-6d17eef9-768d-4af3-b49c-0e5d210acea6.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "ripple\\fixes on FAB, Button", - "packageName": "@fluentui-react-native/menu-button", - "email": "singh.ayush@microsoft.com", - "dependentChangeType": "none" -} diff --git a/change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json b/change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json deleted file mode 100644 index 678792803b..0000000000 --- a/change/@fluentui-react-native-menu-f9094c7d-1163-469a-bf7f-c8902f8a0d28.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "ripple\\fixes on FAB, Button", - "packageName": "@fluentui-react-native/menu", - "email": "singh.ayush@microsoft.com", - "dependentChangeType": "none" -} diff --git a/change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json b/change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json deleted file mode 100644 index 755c1ecd39..0000000000 --- a/change/@fluentui-react-native-notification-da156aa6-aa66-4b54-ad0b-9057e4b15ed0.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "ripple\\fixes on FAB, Button", - "packageName": "@fluentui-react-native/notification", - "email": "singh.ayush@microsoft.com", - "dependentChangeType": "none" -} From 853bacf1d2f3cfa00a0243f5097c918689cbaa58 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Fri, 21 Oct 2022 21:32:42 +0530 Subject: [PATCH 17/23] Ripple changes for RN Pressable --- .../components/Button/src/Button.styling.ts | 4 +- packages/components/Button/src/Button.tsx | 55 +- .../components/Button/src/Button.types.ts | 6 +- .../components/Button/src/FAB/FAB.styling.ts | 4 +- .../components/Button/src/FAB/FAB.types.ts | 2 - .../components/Button/src/FAB/FABCore.tsx | 14 +- .../src/FAB/__snapshots__/FAB.test.tsx.snap | 59 +- .../src/__snapshots__/Button.test.tsx.snap | 516 +++++------------- .../components/Button/src/utils.android.ts | 48 ++ .../__snapshots__/Menu.test.tsx.snap | 462 ++++------------ .../__snapshots__/MenuButton.test.tsx.snap | 44 +- .../__snapshots__/Notification.test.tsx.snap | 71 +-- .../__snapshots__/MenuButton.test.tsx.snap | 35 +- 13 files changed, 372 insertions(+), 948 deletions(-) create mode 100644 packages/components/Button/src/utils.android.ts diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index 7c2081568c..878de87a79 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -34,7 +34,7 @@ export const stylingSettings: UseStylingOptions { return { style: { @@ -48,7 +48,7 @@ export const stylingSettings: UseStylingOptions ({ style: { display: 'flex', diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index ea64ef98f5..6e41651ab7 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -1,6 +1,6 @@ /** @jsx withSlots */ import * as React from 'react'; -import { Platform, Pressable, View, ViewStyle } from 'react-native'; +import { Platform, Pressable, View } from 'react-native'; import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; import { buttonName, ButtonType, ButtonProps } from './Button.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; @@ -9,6 +9,7 @@ import { compose, mergeProps, withSlots, UseSlots, memoize } from '@fluentui-rea import { useButton } from './useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; +import { extractOuterStylePropsAndroid } from './utils.android'; /** * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. @@ -34,50 +35,6 @@ export const buttonLookup = (layer: string, state: IPressableState, userProps: B ); }; -export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [outerStyleProps: ViewStyle, innerStyleProps: ViewStyle] => { - const { - margin, - marginTop, - marginBottom, - marginLeft, - marginRight, - marginStart, - marginEnd, - marginVertical, - marginHorizontal, - start, - end, - left, - right, - top, - bottom, - display, - ...restOfProps - } = style; - - return [ - { - margin, - marginTop, - marginBottom, - marginLeft, - marginRight, - marginStart, - marginEnd, - marginVertical, - marginHorizontal, - start, - end, - left, - right, - top, - bottom, - display, - }, - { ...restOfProps }, - ]; -}); - export const Button = compose({ displayName: buttonName, ...stylingSettings, @@ -135,9 +92,9 @@ export const Button = compose({ if (hasRipple) { const [outerStyleProps, innerStyleProps] = extractOuterStylePropsAndroid(mergedProps.style); return ( - + {/* RN Pressable needs to be wrapped with a root view to support curved edges */} - ({ })} > {buttonContent} - - + + ); } else { return ( diff --git a/packages/components/Button/src/Button.types.ts b/packages/components/Button/src/Button.types.ts index f9164d322c..38855fa6fd 100644 --- a/packages/components/Button/src/Button.types.ts +++ b/packages/components/Button/src/Button.types.ts @@ -1,11 +1,11 @@ import * as React from 'react'; -import { ViewProps, ViewStyle, ColorValue, PressableProps } from 'react-native'; +import { ViewStyle, ColorValue } from 'react-native'; import { TextProps } from '@fluentui-react-native/text'; import { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; import { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import { ShadowToken } from '@fluentui-react-native/theme-types'; -import { View } from '@office-iss/react-native-win32'; +import { IViewProps } from '@fluentui-react-native/adapters'; export const buttonName = 'Button'; export type ButtonSize = 'small' | 'medium' | 'large'; @@ -155,7 +155,7 @@ export interface ButtonInfo { export interface ButtonSlotProps { root: React.PropsWithRef; - rippleContainer: View; + rippleContainer?: IViewProps; icon: IconProps; content: TextProps; } diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index 25b1bf3338..b934c5287e 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -14,7 +14,7 @@ export const stylingSettings: UseStylingOptions { return { style: { @@ -28,7 +28,7 @@ export const stylingSettings: UseStylingOptions ({ style: { display: 'flex', diff --git a/packages/components/Button/src/FAB/FAB.types.ts b/packages/components/Button/src/FAB/FAB.types.ts index c113e6158a..b5b1370c9a 100644 --- a/packages/components/Button/src/FAB/FAB.types.ts +++ b/packages/components/Button/src/FAB/FAB.types.ts @@ -1,12 +1,10 @@ import { ButtonSlotProps, ButtonCoreTokens, ButtonCoreProps } from '../Button.types'; import { ShadowProps } from '@fluentui-react-native/experimental-shadow'; -import { PressableProps } from 'react-native'; export const fabName = 'FAB'; export interface FABSlotProps extends ButtonSlotProps { shadow?: ShadowProps; - ripple?: PressableProps; } export interface FABProps extends ButtonCoreProps { diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index d7a624a7e0..5de94321d4 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -9,7 +9,7 @@ import { useButton } from '../useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; import { Shadow } from '@fluentui-react-native/experimental-shadow'; -import { extractOuterStylePropsAndroid } from '../Button'; +import { extractOuterStylePropsAndroid } from '../utils.android'; /** * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. @@ -29,10 +29,10 @@ export const FAB = compose({ displayName: fabName, ...stylingSettings, slots: { - root: View, + root: Pressable, icon: Icon, content: Text, - ripple: Pressable, + rippleContainer: View, shadow: Shadow, }, useRender: (userProps: FABProps, useSlots: UseSlots) => { @@ -92,8 +92,8 @@ export const FAB = compose({ } else if (hasRipple) { const [outerStyleProps, innerStyleProps] = extractOuterStylePropsAndroid(mergedProps.style); return ( - - + ({ })} > {buttonContent} - - + + ); } else { return buttonContentWithRoot; diff --git a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap index 350b45f290..4ba3b960a8 100644 --- a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap +++ b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap @@ -5,23 +5,33 @@ exports[`Custom FAB with no shadow(iOS) 1`] = ` accessibilityLabel="Custom FAB with no shadow(iOS)" accessibilityRole="button" accessible={true} + collapsable={false} enableFocusRing={true} focusable={true} iconPosition="before" onBlur={[Function]} + onClick={[Function]} onFocus={[Function]} - onHoverIn={[Function]} - onHoverOut={[Function]} - onPress={[Function]} - onPressIn={[Function]} - onPressOut={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#0078d4", + "borderColor": "#005a9e", "borderRadius": 9999, + "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minHeight": 56, + "minWidth": 56, + "padding": 16, + "width": undefined, } } > @@ -51,11 +61,14 @@ exports[`Default FAB (iOS) 1`] = ` @@ -84,22 +99,26 @@ exports[`Default FAB (iOS) 1`] = ` accessibilityLabel="Default FAB (iOS)" accessibilityRole="button" accessible={true} + collapsable={false} enableFocusRing={true} focusable={true} iconPosition="before" onBlur={[Function]} + onClick={[Function]} onFocus={[Function]} - onHoverIn={[Function]} - onHoverOut={[Function]} - onPress={[Function]} - onPressIn={[Function]} - onPressOut={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ Object { - "alignItems": undefined, - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#0078d4", "borderBottomWidth": undefined, + "borderColor": "#005a9e", "borderEndWidth": undefined, "borderLeftWidth": undefined, "borderRadius": 9999, @@ -107,10 +126,13 @@ exports[`Default FAB (iOS) 1`] = ` "borderStartWidth": undefined, "borderTopWidth": undefined, "borderWidth": undefined, + "display": "flex", "flexDirection": "row", "flexWrap": undefined, - "overflow": "hidden", - "padding": undefined, + "justifyContent": "center", + "minHeight": 56, + "minWidth": 56, + "padding": 16, "paddingBottom": undefined, "paddingEnd": undefined, "paddingHorizontal": undefined, @@ -126,6 +148,7 @@ exports[`Default FAB (iOS) 1`] = ` }, "shadowOpacity": 0.14, "shadowRadius": 4, + "width": undefined, } } > diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap index 39293b73f9..1551cdcd45 100644 --- a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/components/Button/src/__snapshots__/Button.test.tsx.snap @@ -20,37 +20,25 @@ exports[`Button component tests Button circular 1`] = ` shape="circular" style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 9999, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Circular Button - - + Circular Button + `; @@ -107,36 +77,23 @@ exports[`Button component tests Button composed 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Composed Button with RNText - - + Composed Button with RNText + `; @@ -193,36 +133,25 @@ exports[`Button component tests Button customized 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "pink", + "borderColor": "#8a8886", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Custom Button - - + Custom Button + `; @@ -279,36 +190,25 @@ exports[`Button component tests Button default 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Default Button - - + Default Button + `; @@ -428,37 +310,25 @@ exports[`Button component tests Button large 1`] = ` size="large" style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 7, + "paddingHorizontal": 15, + "width": undefined, } } > - - - Large Button - - + Large Button + `; @@ -516,37 +368,25 @@ exports[`Button component tests Button primary 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#0078d4", + "borderColor": "#005a9e", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Primary Button - - + Primary Button + `; @@ -604,37 +426,25 @@ exports[`Button component tests Button small 1`] = ` size="small" style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 64, + "padding": 3, + "paddingHorizontal": 7, + "width": undefined, } } > - - - Small Button - - + Small Button + `; @@ -692,37 +484,25 @@ exports[`Button component tests Button square 1`] = ` shape="square" style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 0, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Square Button - - + Square Button + `; @@ -780,37 +542,25 @@ exports[`Button component tests Button subtle 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#ffffff", + "borderColor": "#ffffff", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > - - - Subtle Button - - + Subtle Button + `; diff --git a/packages/components/Button/src/utils.android.ts b/packages/components/Button/src/utils.android.ts new file mode 100644 index 0000000000..c3f0075032 --- /dev/null +++ b/packages/components/Button/src/utils.android.ts @@ -0,0 +1,48 @@ +import { memoize } from '@fluentui-react-native/framework'; +import { ViewStyle } from '@office-iss/react-native-win32'; + +export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [outerStyleProps: ViewStyle, innerStyleProps: ViewStyle] => { + const { + margin, + marginTop, + marginBottom, + marginLeft, + marginRight, + marginStart, + marginEnd, + marginVertical, + marginHorizontal, + start, + end, + left, + right, + top, + bottom, + display, + opacity, + ...restOfProps + } = style; + + return [ + { + margin, + marginTop, + marginBottom, + marginLeft, + marginRight, + marginStart, + marginEnd, + marginVertical, + marginHorizontal, + start, + end, + left, + right, + top, + bottom, + display, + opacity, + }, + { ...restOfProps }, + ]; +}); diff --git a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap index 660b9fdbe0..fb4f47d76c 100644 --- a/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/packages/components/Menu/src/__tests__/__snapshots__/Menu.test.tsx.snap @@ -27,12 +27,19 @@ exports[`Checkbox component tests Menu default 1`] = ` onStartShouldSetResponder={[Function]} style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "flex-start", "backgroundColor": "#f3f2f1", + "borderColor": "#8a8886", "borderRadius": 4, + "borderWidth": 1, "display": "flex", "flexDirection": "row", - "overflow": "hidden", + "justifyContent": "center", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, + "width": undefined, } } > @@ -62,7 +69,7 @@ exports[`Checkbox component tests Menu defaultOpen 1`] = ` Array [ - Default + Open - - -`; - -exports[`Checkbox component tests Menu defaultOpen 1`] = ` -Array [ - - - - Open - - , - - - Open - - + Open + , - - - Open - - + Open + , - - - Open - - + Open + , - - - Open - - + Open + , - - - Open - - + Open + , - - - Default - - + Default + , @@ -60,23 +65,22 @@ exports[`ContextualMenu default 1`] = ` " - > - - - - - + > + + + + `; diff --git a/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap b/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap index 0abc2c775c..a4250d9145 100644 --- a/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap +++ b/packages/components/Notification/src/__tests__/__snapshots__/Notification.test.tsx.snap @@ -186,44 +186,25 @@ exports[`Notification component tests Notification default 1`] = ` } style={ Object { - "alignSelf": "baseline", + "alignItems": "center", + "alignSelf": "center", "backgroundColor": "transparent", + "borderColor": "#ffffff", "borderRadius": 4, + "borderWidth": 1, + "display": "flex", "flexDirection": "row", + "justifyContent": "center", "marginStart": 16, - "overflow": "hidden", + "minWidth": 96, + "padding": 5, + "paddingHorizontal": 11, } } > - - - Undo - - + Undo + diff --git a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap index 439fe34bf7..0e34cd2272 100644 --- a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -2,46 +2,19 @@ exports[`ContextualMenu default 1`] = ` Date: Fri, 21 Oct 2022 21:34:48 +0530 Subject: [PATCH 18/23] Change files --- ...l-menu-button-e367c22f-dc11-4398-9c6f-f2bd3641e4e1.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-experimental-menu-button-e367c22f-dc11-4398-9c6f-f2bd3641e4e1.json diff --git a/change/@fluentui-react-native-experimental-menu-button-e367c22f-dc11-4398-9c6f-f2bd3641e4e1.json b/change/@fluentui-react-native-experimental-menu-button-e367c22f-dc11-4398-9c6f-f2bd3641e4e1.json new file mode 100644 index 0000000000..e3a6f4b276 --- /dev/null +++ b/change/@fluentui-react-native-experimental-menu-button-e367c22f-dc11-4398-9c6f-f2bd3641e4e1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Ripple changes for RN Pressable", + "packageName": "@fluentui-react-native/experimental-menu-button", + "email": "ayushsinghs@yahoo.in", + "dependentChangeType": "patch" +} From 697d180ffc4346dc893cfbdd8614c20630aef913 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Sat, 22 Oct 2022 00:58:48 +0530 Subject: [PATCH 19/23] Resolved comments --- packages/components/Button/src/Button.tsx | 23 ++++--------------- ...ils.android.ts => ExtractStyle.android.ts} | 3 ++- .../components/Button/src/FAB/FABCore.tsx | 23 ++++--------------- 3 files changed, 10 insertions(+), 39 deletions(-) rename packages/components/Button/src/{utils.android.ts => ExtractStyle.android.ts} (86%) diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 6e41651ab7..50e3b31fca 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -5,11 +5,11 @@ import { ActivityIndicator } from '@fluentui-react-native/experimental-activity- import { buttonName, ButtonType, ButtonProps } from './Button.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { stylingSettings, getDefaultSize } from './Button.styling'; -import { compose, mergeProps, withSlots, UseSlots, memoize } from '@fluentui-react-native/framework'; +import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; import { useButton } from './useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; -import { extractOuterStylePropsAndroid } from './utils.android'; +import { extractOuterStylePropsAndroid } from './ExtractStyle.android'; /** * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. @@ -46,13 +46,10 @@ export const Button = compose({ }, useRender: (userProps: ButtonProps, useSlots: UseSlots) => { const button = useButton(userProps); - const [ripplePressedAndroid, setRippleStateAndroid] = React.useState(false); const iconProps = createIconProps(userProps.icon); // grab the styled slots - const Slots = useSlots(userProps, (layer) => - buttonLookup(layer, { ...button.state, pressed: ripplePressedAndroid || button.state.pressed }, userProps), - ); + const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); // now return the handler for finishing render return (final: ButtonProps, ...children: React.ReactNode[]) => { @@ -94,19 +91,7 @@ export const Button = compose({ return ( {/* RN Pressable needs to be wrapped with a root view to support curved edges */} - { - setRippleStateAndroid(true); - mergedProps.onPressIn?.(); - })} - onPressOut={memoize(() => { - setRippleStateAndroid(false); - mergedProps.onPressOut?.(); - })} - > + {buttonContent} diff --git a/packages/components/Button/src/utils.android.ts b/packages/components/Button/src/ExtractStyle.android.ts similarity index 86% rename from packages/components/Button/src/utils.android.ts rename to packages/components/Button/src/ExtractStyle.android.ts index c3f0075032..f7b56b3662 100644 --- a/packages/components/Button/src/utils.android.ts +++ b/packages/components/Button/src/ExtractStyle.android.ts @@ -1,6 +1,7 @@ import { memoize } from '@fluentui-react-native/framework'; -import { ViewStyle } from '@office-iss/react-native-win32'; +import { ViewStyle } from 'react-native'; +// This function is used to seperate out inner and outer styles for the RippleContainer export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [outerStyleProps: ViewStyle, innerStyleProps: ViewStyle] => { const { margin, diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index 5de94321d4..b65a482293 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -4,12 +4,12 @@ import { Platform, Pressable, View } from 'react-native'; import { fabName, FABProps, FABType } from './FAB.types'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { stylingSettings } from './FAB.styling'; -import { compose, mergeProps, withSlots, UseSlots, memoize } from '@fluentui-react-native/framework'; +import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; import { useButton } from '../useButton'; import { Icon } from '@fluentui-react-native/icon'; import { createIconProps, IPressableState } from '@fluentui-react-native/interactive-hooks'; import { Shadow } from '@fluentui-react-native/experimental-shadow'; -import { extractOuterStylePropsAndroid } from '../utils.android'; +import { extractOuterStylePropsAndroid } from '../ExtractStyle.android'; /** * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. @@ -37,15 +37,12 @@ export const FAB = compose({ }, useRender: (userProps: FABProps, useSlots: UseSlots) => { const { icon, ...rest } = userProps; - const [ripplePressedAndroid, setRippleStateAndroid] = React.useState(false); const iconProps = createIconProps(userProps.icon); const button = useButton(rest); // grab the styled slots - const Slots = useSlots(userProps, (layer) => - buttonLookup(layer, { ...button.state, pressed: ripplePressedAndroid || button.state.pressed }, userProps), - ); + const Slots = useSlots(userProps, (layer) => buttonLookup(layer, button.state, userProps)); // now return the handler for finishing render return (final: FABProps, ...children: React.ReactNode[]) => { @@ -93,19 +90,7 @@ export const FAB = compose({ const [outerStyleProps, innerStyleProps] = extractOuterStylePropsAndroid(mergedProps.style); return ( - { - setRippleStateAndroid(true); - mergedProps.onPressIn?.(); - })} - onPressOut={memoize(() => { - setRippleStateAndroid(false); - mergedProps.onPressOut?.(); - })} - > + {buttonContent} From fe2e26c33bfd476da0e4a4d72e74ab108454b362 Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Mon, 24 Oct 2022 11:56:09 +0530 Subject: [PATCH 20/23] Resolve comments --- .../Button/src/ExtractStyle.android.ts | 6 +- .../__snapshots__/MenuButton.test.tsx.snap | 144 ++++++++++-------- 2 files changed, 82 insertions(+), 68 deletions(-) diff --git a/packages/components/Button/src/ExtractStyle.android.ts b/packages/components/Button/src/ExtractStyle.android.ts index f7b56b3662..332f5a4839 100644 --- a/packages/components/Button/src/ExtractStyle.android.ts +++ b/packages/components/Button/src/ExtractStyle.android.ts @@ -1,7 +1,11 @@ import { memoize } from '@fluentui-react-native/framework'; import { ViewStyle } from 'react-native'; -// This function is used to seperate out inner and outer styles for the RippleContainer +/** + * React Native's Pressable needs to be wrapped with a root view to support curved edges. + * This function seperates out inner and outer styles for the Container. + */ + export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [outerStyleProps: ViewStyle, innerStyleProps: ViewStyle] => { const { margin, diff --git a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap index 598eb4b465..bb4aa6b333 100644 --- a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -2,87 +2,97 @@ exports[`ContextualMenu default 1`] = ` - - Press for Nested MenuButton - - + Press for Nested MenuButton + + " From 66053e4c4ee3dc4bfafb086eff7a762f8a7f9c1f Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Mon, 24 Oct 2022 12:21:37 +0530 Subject: [PATCH 21/23] Typo Fix --- .../component-templates/ComponentTemplate/src/ComponentName.tsx | 2 +- packages/components/Avatar/src/Avatar.tsx | 2 +- packages/components/Button/src/Button.tsx | 2 +- packages/components/Button/src/FAB/FABCore.tsx | 2 +- packages/experimental/RadioGroup/src/Radio/Radio.tsx | 2 +- packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.tsx b/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.tsx index c1688b3fd8..e9adee1bd2 100644 --- a/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.tsx +++ b/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.tsx @@ -7,7 +7,7 @@ import { stylingSettings } from './ComponentName.styling'; import { compose, mergeProps, withSlots, UseSlots } from '@fluentui-react-native/framework'; import { useComponentName } from './useComponentName'; /** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the component-name. + * A function which determines if a set of styles should be applied to the component given the current state and props of the component-name. * * @param layer The name of the state that is being checked for * @param userProps The props that were passed into the component-name diff --git a/packages/components/Avatar/src/Avatar.tsx b/packages/components/Avatar/src/Avatar.tsx index 66605d3fcd..f2559c17c6 100644 --- a/packages/components/Avatar/src/Avatar.tsx +++ b/packages/components/Avatar/src/Avatar.tsx @@ -10,7 +10,7 @@ import { Icon } from '@fluentui-react-native/icon'; import { Svg, Path } from 'react-native-svg'; /** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar. + * A function which determines if a set of styles should be applied to the component given the current state and props of the avatar. * * @param layer The name of the state that is being checked for * @param state The current state of the avatar diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 50e3b31fca..90002d1f90 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -12,7 +12,7 @@ import { createIconProps, IPressableState } from '@fluentui-react-native/interac import { extractOuterStylePropsAndroid } from './ExtractStyle.android'; /** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. + * A function which determines if a set of styles should be applied to the component given the current state and props of the button. * * @param layer The name of the state that is being checked for * @param state The current state of the button diff --git a/packages/components/Button/src/FAB/FABCore.tsx b/packages/components/Button/src/FAB/FABCore.tsx index b65a482293..0b774ae1f0 100644 --- a/packages/components/Button/src/FAB/FABCore.tsx +++ b/packages/components/Button/src/FAB/FABCore.tsx @@ -12,7 +12,7 @@ import { Shadow } from '@fluentui-react-native/experimental-shadow'; import { extractOuterStylePropsAndroid } from '../ExtractStyle.android'; /** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the button. + * A function which determines if a set of styles should be applied to the component given the current state and props of the button. * * @param layer The name of the state that is being checked for * @param state The current state of the button diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.tsx b/packages/experimental/RadioGroup/src/Radio/Radio.tsx index 2ee1f71807..cc29bbe535 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.tsx +++ b/packages/experimental/RadioGroup/src/Radio/Radio.tsx @@ -9,7 +9,7 @@ import { filterViewProps } from '@fluentui-react-native/adapters'; import { PressableState } from '@fluentui-react-native/interactive-hooks'; /** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the Radio. + * A function which determines if a set of styles should be applied to the component given the current state and props of the Radio. * * @param layer The name of the state that is being checked for * @param state The current state of the Radio diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx index a4e62b1533..552fca6ef3 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx @@ -11,7 +11,7 @@ import { RadioGroupProvider } from './radioGroupContext'; import { useRadioGroupContextValue } from './useRadioGroupContextValue'; /** - * A function which determines if a set of styles should be applied to the compoent given the current state and props of the radiogroup. + * A function which determines if a set of styles should be applied to the component given the current state and props of the radiogroup. * * @param layer The name of the state that is being checked for * @param state The current state of the radiogroup From 4a47854741273aae28efea79d6f3fc21f8dceb7b Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Wed, 26 Oct 2022 15:53:42 +0530 Subject: [PATCH 22/23] Final Ripple Changes --- .../components/Button/src/Button.styling.ts | 80 +++----- .../components/Button/src/Button.types.ts | 7 +- .../Button/src/ButtonColorTokens.ts | 1 + .../Button/src/ExtractStyle.android.ts | 10 +- .../components/Button/src/FAB/FAB.styling.ts | 86 ++++----- .../Button/src/FAB/FABColorTokens.ts | 1 + .../experimental/MenuButton/jest.config.js | 2 +- .../__snapshots__/MenuButton.test.tsx.snap | 179 ++++++++---------- 8 files changed, 162 insertions(+), 204 deletions(-) diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index 878de87a79..40a3436c05 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -32,60 +32,40 @@ export const stylingSettings: UseStylingOptions { - return { - style: { - flexDirection: 'row', - alignSelf: 'baseline', - backgroundColor: tokens.backgroundColor, - borderRadius: tokens.borderRadius, - overflow: 'hidden', - }, - }; - }, - ['backgroundColor', 'borderRadius'], - ), - root: buildProps( - (tokens: ButtonTokens, theme: Theme) => ({ + ...(Platform.OS == 'android' && { + rippleContainer: buildProps( + (tokens: ButtonTokens) => { + return { style: { - display: 'flex', - alignItems: 'center', flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - }, - android_ripple: { - color: tokens.pressed.backgroundColor, + alignSelf: 'baseline', + borderRadius: tokens.borderRadius, + overflow: 'hidden', }, - }), - ['pressed', 'width', ...layoutStyles.keys, ...borderStyles.keys], - ), - }, - default: { - root: buildProps( - (tokens: ButtonTokens, theme: Theme) => ({ - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - }, - }), - ['backgroundColor', 'width', ...borderStyles.keys, ...layoutStyles.keys], - ), - }, + }; + }, + ['borderRadius'], + ), }), + root: buildProps( + (tokens: ButtonTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + ...layoutStyles.from(tokens, theme), + }, + android_ripple: { + color: tokens.rippleColor, + }, + }), + ['backgroundColor', 'width', 'rippleColor', ...borderStyles.keys, ...layoutStyles.keys], + ), content: buildProps( (tokens: ButtonTokens, theme: Theme) => { return { diff --git a/packages/components/Button/src/Button.types.ts b/packages/components/Button/src/Button.types.ts index 38855fa6fd..14fa129bd4 100644 --- a/packages/components/Button/src/Button.types.ts +++ b/packages/components/Button/src/Button.types.ts @@ -18,6 +18,11 @@ export interface ButtonCoreTokens extends LayoutTokens, FontTokens, IBorderToken */ iconColor?: ColorValue; + /** + * Ripple color for Android. + */ + rippleColor?: ColorValue; + /** * The size of the icon. */ @@ -155,7 +160,7 @@ export interface ButtonInfo { export interface ButtonSlotProps { root: React.PropsWithRef; - rippleContainer?: IViewProps; + rippleContainer?: IViewProps; // Android only icon: IconProps; content: TextProps; } diff --git a/packages/components/Button/src/ButtonColorTokens.ts b/packages/components/Button/src/ButtonColorTokens.ts index 5ddfda2c6d..ce22ee0f5b 100644 --- a/packages/components/Button/src/ButtonColorTokens.ts +++ b/packages/components/Button/src/ButtonColorTokens.ts @@ -8,6 +8,7 @@ export const defaultButtonColorTokens: TokenSettings = (t: color: t.colors.buttonText, borderColor: t.colors.buttonBorder, iconColor: t.colors.buttonIcon, + rippleColor: t.colors.defaultPressedBackground, // Android only disabled: { backgroundColor: t.colors.defaultDisabledBackground, color: t.colors.defaultDisabledContent, diff --git a/packages/components/Button/src/ExtractStyle.android.ts b/packages/components/Button/src/ExtractStyle.android.ts index 332f5a4839..18288d0853 100644 --- a/packages/components/Button/src/ExtractStyle.android.ts +++ b/packages/components/Button/src/ExtractStyle.android.ts @@ -2,8 +2,12 @@ import { memoize } from '@fluentui-react-native/framework'; import { ViewStyle } from 'react-native'; /** - * React Native's Pressable needs to be wrapped with a root view to support curved edges. - * This function seperates out inner and outer styles for the Container. + * React Native's Pressable does not support curved edges. + * It needs to be wrapped inside another view and have border set there. + * This function extracts styles that should be applied on the outer view. + * + * @param style Styling that is to be applied on the component + * @returns Array containing split styles that are to be applied on the inner and outer views */ export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [outerStyleProps: ViewStyle, innerStyleProps: ViewStyle] => { @@ -48,6 +52,6 @@ export const extractOuterStylePropsAndroid = memoize((style: ViewStyle = {}): [o display, opacity, }, - { ...restOfProps }, + { borderWidth: 0, ...restOfProps }, ]; }); diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index b934c5287e..5d18eccc6b 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -12,64 +12,42 @@ export const stylingSettings: UseStylingOptions { - return { - style: { - flexDirection: 'row', - alignSelf: 'baseline', - backgroundColor: tokens.backgroundColor, - borderRadius: tokens.borderRadius, - overflow: 'hidden', - }, - }; - }, - ['backgroundColor', 'borderRadius'], - ), - root: buildProps( - (tokens: ButtonCoreTokens, theme: Theme) => ({ + ...(Platform.OS == 'android' && { + rippleContainer: buildProps( + (tokens: ButtonCoreTokens) => { + return { style: { - display: 'flex', - alignItems: 'center', flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - ...shadowStyles.from(tokens, theme), + alignSelf: 'baseline', + borderRadius: tokens.borderRadius, + overflow: 'hidden', }, - android_ripple: { - color: tokens.pressed.backgroundColor, - }, - elevation: tokens.elevation, - }), - ['pressed', 'width', 'elevation', ...layoutStyles.keys, ...borderStyles.keys, ...shadowStyles.keys], - ), - }, - default: { - root: buildProps( - (tokens: ButtonCoreTokens, theme: Theme) => ({ - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - alignSelf: 'flex-start', - justifyContent: 'center', - width: tokens.width, - backgroundColor: tokens.backgroundColor, - ...borderStyles.from(tokens, theme), - ...layoutStyles.from(tokens, theme), - ...shadowStyles.from(tokens, theme), - }, - elevation: tokens.elevation, - }), - ['backgroundColor', 'width', 'elevation', ...borderStyles.keys, ...layoutStyles.keys, ...shadowStyles.keys], - ), - }, + }; + }, + ['borderRadius'], + ), }), + root: buildProps( + (tokens: ButtonCoreTokens, theme: Theme) => ({ + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + alignSelf: 'flex-start', + justifyContent: 'center', + width: tokens.width, + backgroundColor: tokens.backgroundColor, + ...borderStyles.from(tokens, theme), + ...layoutStyles.from(tokens, theme), + ...shadowStyles.from(tokens, theme), + }, + android_ripple: { + color: tokens.rippleColor, + }, + elevation: tokens.elevation, + }), + ['backgroundColor', 'width', 'elevation', 'rippleColor', ...borderStyles.keys, ...layoutStyles.keys, ...shadowStyles.keys], + ), content: buildProps( (tokens: ButtonCoreTokens, theme: Theme) => ({ style: { diff --git a/packages/components/Button/src/FAB/FABColorTokens.ts b/packages/components/Button/src/FAB/FABColorTokens.ts index de3c619494..765f928774 100644 --- a/packages/components/Button/src/FAB/FABColorTokens.ts +++ b/packages/components/Button/src/FAB/FABColorTokens.ts @@ -8,6 +8,7 @@ export const defaultFABColorTokens: TokenSettings = (t: color: t.colors.brandedContent, borderColor: t.colors.brandedBorder, iconColor: t.colors.brandedIcon, + rippleColor: t.colors.defaultPressedBackground, // Android only disabled: { backgroundColor: t.colors.brandedDisabledBackground, color: t.colors.brandedDisabledContent, diff --git a/packages/experimental/MenuButton/jest.config.js b/packages/experimental/MenuButton/jest.config.js index 051098f649..a8bf7c4f87 100644 --- a/packages/experimental/MenuButton/jest.config.js +++ b/packages/experimental/MenuButton/jest.config.js @@ -1,2 +1,2 @@ const { configureReactNativeJest } = require('@fluentui-react-native/scripts'); -module.exports = configureReactNativeJest('android'); +module.exports = configureReactNativeJest('ios'); diff --git a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap index bb4aa6b333..0a5e8167b0 100644 --- a/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/experimental/MenuButton/src/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -2,117 +2,106 @@ exports[`ContextualMenu default 1`] = ` - - + - Press for Nested MenuButton - - " - > - - - - - + > + + + + `; From fdc02a50d5caea3e1322f0dba2e0047eafe9d93f Mon Sep 17 00:00:00 2001 From: Ayush Singh Date: Wed, 26 Oct 2022 15:54:14 +0530 Subject: [PATCH 23/23] Change files --- ...native-avatar-3662454b-777e-4f5a-a9fb-925506c75279.json | 7 +++++++ ...l-radio-group-f88773ec-dbe0-49d2-a35e-e72f79f5046c.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-native-avatar-3662454b-777e-4f5a-a9fb-925506c75279.json create mode 100644 change/@fluentui-react-native-experimental-radio-group-f88773ec-dbe0-49d2-a35e-e72f79f5046c.json diff --git a/change/@fluentui-react-native-avatar-3662454b-777e-4f5a-a9fb-925506c75279.json b/change/@fluentui-react-native-avatar-3662454b-777e-4f5a-a9fb-925506c75279.json new file mode 100644 index 0000000000..232c73f3cd --- /dev/null +++ b/change/@fluentui-react-native-avatar-3662454b-777e-4f5a-a9fb-925506c75279.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Typo Fix", + "packageName": "@fluentui-react-native/avatar", + "email": "ayushsinghs@yahoo.in", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-experimental-radio-group-f88773ec-dbe0-49d2-a35e-e72f79f5046c.json b/change/@fluentui-react-native-experimental-radio-group-f88773ec-dbe0-49d2-a35e-e72f79f5046c.json new file mode 100644 index 0000000000..e748938bd1 --- /dev/null +++ b/change/@fluentui-react-native-experimental-radio-group-f88773ec-dbe0-49d2-a35e-e72f79f5046c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Typo Fix", + "packageName": "@fluentui-react-native/experimental-radio-group", + "email": "ayushsinghs@yahoo.in", + "dependentChangeType": "none" +}