From d7e8e38c52340898f7b9cc7e3c5ed3a0a0d83c5f Mon Sep 17 00:00:00 2001 From: Tarik Github Date: Wed, 7 Sep 2022 19:53:28 +0300 Subject: [PATCH 1/5] fix: allow styling fab-group action label, renamings --- src/components/FAB/FABGroup.tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 1ade83eaf3..c737fab188 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -7,6 +7,7 @@ import { TouchableWithoutFeedback, View, ViewStyle, + TextStyle, } from 'react-native'; import FAB from './FAB'; import Text from '../Typography/Text'; @@ -26,7 +27,8 @@ export type Props = { * - `labelTextColor`: custom label text color of the action item * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified * - `style`: pass additional styles for the fab item, for example, `backgroundColor` - * - `labelStyle`: pass additional styles for the fab item label, for example, `backgroundColor` + * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` + * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize` * - `onPress`: callback that is called when `FAB` is pressed (required) * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x * - `testID`: testID to be used on tests @@ -38,7 +40,8 @@ export type Props = { labelTextColor?: string; accessibilityLabel?: string; style?: StyleProp; - labelStyle?: StyleProp; + containerStyle?: StyleProp; + labelStyle?: StyleProp; onPress: () => void; size?: 'small' | 'medium'; testID?: string; @@ -322,7 +325,7 @@ const FABGroup = ({ } onPress={() => { @@ -349,7 +352,10 @@ const FABGroup = ({ > {it.label} @@ -432,7 +438,7 @@ const styles = StyleSheet.create({ backdrop: { ...StyleSheet.absoluteFillObject, }, - label: { + containerStyle: { borderRadius: 5, paddingHorizontal: 12, paddingVertical: 6, @@ -446,7 +452,7 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', alignItems: 'center', }, - v3LabelStyle: { + v3ContainerStyle: { backgroundColor: 'transparent', elevation: 0, }, From 806838d7eb593e79063fe67bae5321124d5efd91 Mon Sep 17 00:00:00 2001 From: Tarik Github Date: Thu, 8 Sep 2022 02:43:31 +0300 Subject: [PATCH 2/5] test: unit tests for FABGroup component, labelStyle, containerStyle --- src/components/__tests__/FABGroup.test.js | 49 ++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/src/components/__tests__/FABGroup.test.js b/src/components/__tests__/FABGroup.test.js index 6cdcfb67b6..db122f5131 100644 --- a/src/components/__tests__/FABGroup.test.js +++ b/src/components/__tests__/FABGroup.test.js @@ -1,6 +1,9 @@ import color from 'color'; -import { getFABGroupColors } from '../FAB/utils'; +import * as React from 'react'; +import renderer from 'react-test-renderer'; import { getTheme } from '../../core/theming'; +import { getFABGroupColors } from '../FAB/utils'; +import FAB from '../FAB'; describe('getFABGroupColors - backdrop color', () => { it('should return custom color', () => { @@ -94,3 +97,47 @@ describe('getFABGroupColors - stacked FAB background color', () => { }); }); }); + +describe('FABActions - labelStyle - containerStyle', () => { + it('renders actions with custom label style', () => { + const tree = renderer + .create( + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it('renders actions with custom container style', () => { + const tree = renderer + .create( + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); From 40a6b9a5043aa37e26a75d81898c75c44dc83666 Mon Sep 17 00:00:00 2001 From: Tarik Github Date: Tue, 13 Sep 2022 15:47:05 +0300 Subject: [PATCH 3/5] test: fab-group asserts the correct behavior of passing a new prop --- src/components/FAB/FABGroup.tsx | 1 + src/components/__tests__/FABGroup.test.js | 76 ++++++++++++----------- 2 files changed, 42 insertions(+), 35 deletions(-) diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index c737fab188..a842697fcd 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -347,6 +347,7 @@ const FABGroup = ({ ? it.accessibilityLabel : it.label } + accessibilityHint="hint" accessibilityRole="button" {...(isV3 && { elevation: 0 })} > diff --git a/src/components/__tests__/FABGroup.test.js b/src/components/__tests__/FABGroup.test.js index db122f5131..447cd51dc4 100644 --- a/src/components/__tests__/FABGroup.test.js +++ b/src/components/__tests__/FABGroup.test.js @@ -1,6 +1,6 @@ import color from 'color'; import * as React from 'react'; -import renderer from 'react-test-renderer'; +import { render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; import { getFABGroupColors } from '../FAB/utils'; import FAB from '../FAB'; @@ -99,45 +99,51 @@ describe('getFABGroupColors - stacked FAB background color', () => { }); describe('FABActions - labelStyle - containerStyle', () => { - it('renders actions with custom label style', () => { - const tree = renderer - .create( - { + const { getByText } = render( + - ) - .toJSON(); + }, + ]} + /> + ); - expect(tree).toMatchSnapshot(); + expect(getByText('complete')).toHaveStyle({ + fontSize: 24, + fontWeight: '500', + }); }); - it('renders actions with custom container style', () => { - const tree = renderer - .create( - { + const { getByA11yHint } = render( + - ) - .toJSON(); + }, + ]} + /> + ); - expect(tree).toMatchSnapshot(); + expect(getByA11yHint('hint')).toHaveStyle({ + padding: 16, + backgroundColor: '#687456', + marginLeft: 16, + }); }); }); From ca2f6618f67f3d44770737ae78e343c16aa270ff Mon Sep 17 00:00:00 2001 From: Tarik Github Date: Thu, 15 Sep 2022 21:19:26 +0300 Subject: [PATCH 4/5] refactor: added accessibilityHint prop to fab-group actions --- src/components/FAB/FABGroup.tsx | 3 ++- src/components/__tests__/FABGroup.test.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index a842697fcd..9f90f64f65 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -39,6 +39,7 @@ export type Props = { color?: string; labelTextColor?: string; accessibilityLabel?: string; + accessibilityHint?: string; style?: StyleProp; containerStyle?: StyleProp; labelStyle?: StyleProp; @@ -323,6 +324,7 @@ const FABGroup = ({ {it.label && ( diff --git a/src/components/__tests__/FABGroup.test.js b/src/components/__tests__/FABGroup.test.js index 447cd51dc4..0c712a4b36 100644 --- a/src/components/__tests__/FABGroup.test.js +++ b/src/components/__tests__/FABGroup.test.js @@ -130,6 +130,7 @@ describe('FABActions - labelStyle - containerStyle', () => { actions={[ { label: 'remove', + accessibilityHint: 'hint', containerStyle: { padding: 16, backgroundColor: '#687456', From b227dd574861fa7bcae3f750133a21668d9a0338 Mon Sep 17 00:00:00 2001 From: Tarik Github Date: Mon, 19 Sep 2022 14:57:50 +0300 Subject: [PATCH 5/5] docs: added accessibilityHint prop description --- src/components/FAB/FABGroup.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 9f90f64f65..68953f58c5 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -26,6 +26,7 @@ export type Props = { * - `color`: custom icon color of the action item * - `labelTextColor`: custom label text color of the action item * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified + * - `accessibilityHint`: accessibility hint for the action * - `style`: pass additional styles for the fab item, for example, `backgroundColor` * - `containerStyle`: pass additional styles for the fab item label container, for example, `backgroundColor` * - `labelStyle`: pass additional styles for the fab item label, for example, `fontSize`