diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 1d673a3d27..35eace7ab6 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -216,7 +216,7 @@ const styles = StyleSheet.create({ overflow: 'hidden', }, touchable: { - flexGrow: 1, + flex: 1, justifyContent: 'center', alignItems: 'center', }, diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index faeb89916b..ba0d4b9d00 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -259,7 +259,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -425,7 +425,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -647,7 +647,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -869,7 +869,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1126,7 +1126,7 @@ exports[`AppbarAction should be rendered with custom color 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1384,7 +1384,7 @@ exports[`AppbarAction should be rendered with default theme color 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1642,7 +1642,7 @@ exports[`AppbarAction should be rendered with specific theme color if is leading [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1901,7 +1901,7 @@ exports[`AppbarAction should render AppbarBackAction with custom color 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 914f1e2c55..0b67d22d1a 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native'; import { describe, expect, it } from '@jest/globals'; -import { render } from '../../test-utils'; +import { render, screen } from '../../test-utils'; import { pink500 } from '../../theme/colors'; import { LightTheme } from '../../theme/schemes'; import { tokens } from '../../theme/tokens'; @@ -18,6 +18,9 @@ const styles = StyleSheet.create({ slightlyRounded: { borderRadius: 4, }, + customBackground: { + backgroundColor: pink500, + }, }); it('renders icon button by default', async () => { @@ -80,6 +83,15 @@ it('renders icon button with small border radius', async () => { expect(toJSON()).toMatchSnapshot(); }); +it('keeps touchable content centered with custom container style', async () => { + await render(); + expect(screen.getByRole('button')).toHaveStyle({ + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }); +}); + describe('getIconButtonColor - icon color', () => { it('should return custom icon color', () => { expect( diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index 9084841e9b..3c4495962a 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -752,7 +752,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -870,7 +870,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1046,7 +1046,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1164,7 +1164,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1282,7 +1282,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1400,7 +1400,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1576,7 +1576,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1694,7 +1694,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2168,7 +2168,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2286,7 +2286,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2404,7 +2404,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2522,7 +2522,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap index 7534e6f77e..6507e9252f 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -71,7 +71,7 @@ exports[`renders disabled icon button 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -191,7 +191,7 @@ exports[`renders icon button by default 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -311,7 +311,7 @@ exports[`renders icon button with color 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -433,7 +433,7 @@ exports[`renders icon button with custom border radius 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -554,7 +554,7 @@ exports[`renders icon button with size 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -676,7 +676,7 @@ exports[`renders icon button with small border radius 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -797,7 +797,7 @@ exports[`renders icon change animated 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index c200e71706..2a324289c0 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -161,7 +161,7 @@ exports[`activity indicator snapshot test 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -600,7 +600,7 @@ exports[`renders searchbar in "view" mode 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -766,7 +766,7 @@ exports[`renders searchbar in "view" mode 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1003,7 +1003,7 @@ exports[`renders with placeholder 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1169,7 +1169,7 @@ exports[`renders with placeholder 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1381,7 +1381,7 @@ exports[`renders with text 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1543,7 +1543,7 @@ exports[`renders with text 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 6efc467066..17bcbf80d1 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -226,7 +226,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -415,7 +415,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -700,7 +700,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -889,7 +889,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1352,7 +1352,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1541,7 +1541,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1806,7 +1806,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1995,7 +1995,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined,