From 4918d233b0aa13e979d72711264ff04766c195fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Gabriel=20Quaresma?= Date: Mon, 27 Jun 2022 12:17:55 -0300 Subject: [PATCH] feat: add FAB size prop (#3156) --- example/src/Examples/FABExample.tsx | 15 + src/components/FAB/FAB.tsx | 29 +- src/components/FAB/utils.ts | 41 + src/components/__tests__/FAB.test.js | 28 + .../__tests__/__snapshots__/FAB.test.js.snap | 792 ++++++++++++++++-- 5 files changed, 796 insertions(+), 109 deletions(-) diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index e150e6e8ec..f47661cbf0 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -89,6 +89,21 @@ const FABExample = () => { /> )} + {}} + visible={visible} + /> + {}} + visible={visible} + /> & { * - `large` - FAB with large height (96). */ size?: FABSize; + /** + * @supported Available in v5.x + * + * Custom size for the `FAB`. This prop takes precedence over size prop + */ + customSize?: number; /** * @supported Available in v5.x with theme version 3 * @@ -160,6 +166,7 @@ const FAB = ({ loading, testID, size = 'medium', + customSize, mode = 'elevated', variant = 'primary', ...rest @@ -201,20 +208,19 @@ const FAB = ({ const iconSize = isLargeSize ? 36 : 24; const loadingIndicatorSize = isLargeSize ? 24 : 18; - const fabStyle = getFabStyle({ size, theme }); - - const shapeStyle = { borderRadius: fabStyle.borderRadius }; + const fabStyle = getFabStyle({ customSize, size, theme }); + const extendedStyle = getExtendedFabStyle({ customSize, theme }); const textStyle = { color: foregroundColor, ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium), }; + const shapeStyle = { borderRadius: fabStyle.borderRadius }; const containerStyles = [ !isV3 && styles.elevated, !isV3 && disabled && styles.disabled, shapeStyle, ]; - const extendedStyle = isV3 ? styles.v3Extended : styles.extended; const md3Elevation = isFlatMode || disabled ? 0 : 3; return ( @@ -257,13 +263,13 @@ const FAB = ({ {icon && loading !== true ? ( ) : null} {loading ? ( ) : null} @@ -290,10 +296,6 @@ const styles = StyleSheet.create({ elevated: { elevation: 6, }, - extended: { - height: 48, - paddingHorizontal: 16, - }, content: { flexDirection: 'row', alignItems: 'center', @@ -308,11 +310,6 @@ const styles = StyleSheet.create({ disabled: { elevation: 0, }, - v3Extended: { - height: 56, - borderRadius: 16, - paddingHorizontal: 16, - }, }); export default withTheme(FAB); diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index a853d19df6..0ffddee29c 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -350,14 +350,25 @@ const v3LargeSize = { width: 96, }; +const getCustomFabSize = (customSize: number, roundness: number) => ({ + height: customSize, + width: customSize, + borderRadius: customSize / roundness, +}); + export const getFabStyle = ({ size, theme, + customSize, }: { + customSize?: number; size: 'small' | 'medium' | 'large'; theme: Theme; }) => { const { isV3, roundness } = theme; + + if (customSize) return getCustomFabSize(customSize, roundness); + if (isV3) { switch (size) { case 'small': @@ -374,3 +385,33 @@ export const getFabStyle = ({ } return standardSize; }; + +const extended = { + height: 48, + paddingHorizontal: 16, +}; + +const v3Extended = { + height: 56, + borderRadius: 16, + paddingHorizontal: 16, +}; + +const getExtendedFabDimensions = (customSize: number) => ({ + height: customSize, + paddingHorizontal: 16, +}); + +export const getExtendedFabStyle = ({ + customSize, + theme, +}: { + customSize?: number; + theme: Theme; +}) => { + if (customSize) return getExtendedFabDimensions(customSize); + + const { isV3 } = theme; + + return isV3 ? v3Extended : extended; +}; diff --git a/src/components/__tests__/FAB.test.js b/src/components/__tests__/FAB.test.js index 75f711addd..614091115e 100644 --- a/src/components/__tests__/FAB.test.js +++ b/src/components/__tests__/FAB.test.js @@ -21,6 +21,14 @@ it('renders small FAB', () => { expect(tree).toMatchSnapshot(); }); +it('renders FAB with custom size prop', () => { + const tree = renderer + .create( {}} icon="plus" />) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + it('renders extended FAB', () => { const tree = renderer .create( {}} icon="plus" label="Add items" />) @@ -29,6 +37,16 @@ it('renders extended FAB', () => { expect(tree).toMatchSnapshot(); }); +it('renders extended FAB with custom size prop', () => { + const tree = renderer + .create( + {}} icon="plus" label="Add items" /> + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + it('renders loading FAB', () => { const tree = renderer .create( {}} icon="plus" loading={true} />) @@ -37,6 +55,16 @@ it('renders loading FAB', () => { expect(tree).toMatchSnapshot(); }); +it('renders loading FAB with custom size prop', () => { + const tree = renderer + .create( + {}} icon="plus" loading={true} /> + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); + it('renders disabled FAB', () => { const tree = renderer .create( {}} icon="plus" disabled />) diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap index 708e0608fa..779b8bd7aa 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.js.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap @@ -1,5 +1,150 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders FAB with custom size prop 1`] = ` + + + + + + + + + □ + + + + + + + + +`; + exports[`renders custom color for the icon and label of the FAB 1`] = ` `; -exports[`renders loading FAB 1`] = ` +exports[`renders extended FAB with custom size prop 1`] = ` - - - - - - - - - - - - + + + + Add items + + + + + + +`; + +exports[`renders loading FAB 1`] = ` + + + + + + + + + + + + + + + + + + + `; +exports[`renders loading FAB with custom size prop 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + exports[`renders normal FAB 1`] = `