From e815aa37197bee38a23f095d01d33298cd94a996 Mon Sep 17 00:00:00 2001 From: Vivek JM <24496671+vivekjm@users.noreply.github.com> Date: Sun, 28 Jun 2026 12:35:03 +0530 Subject: [PATCH] fix: keep icon button content centered --- src/components/IconButton/IconButton.tsx | 2 +- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 8 +++---- src/components/__tests__/IconButton.test.tsx | 19 +++++++++++++++ .../__snapshots__/DataTable.test.tsx.snap | 24 +++++++++---------- .../__snapshots__/IconButton.test.tsx.snap | 10 ++++---- .../__snapshots__/Searchbar.test.tsx.snap | 10 ++++---- .../__snapshots__/TextInput.test.tsx.snap | 16 ++++++------- .../__snapshots__/ToggleButton.test.tsx.snap | 6 ++--- 8 files changed, 57 insertions(+), 38 deletions(-) diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 52a64e98d0..a28cb4fef1 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -220,7 +220,7 @@ const styles = StyleSheet.create({ elevation: 0, }, 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 a5d9d95766..9b6478336f 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -170,7 +170,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -360,7 +360,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -549,7 +549,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -792,7 +792,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A [ { "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 b28456c5ce..2225ef17ab 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -19,6 +19,9 @@ const styles = StyleSheet.create({ slightlyRounded: { borderRadius: 4, }, + customBackground: { + backgroundColor: pink500, + }, }); it('renders icon button by default', async () => { @@ -85,6 +88,22 @@ it('renders icon button with small border radius', async () => { }); }); +it('keeps touchable content centered with custom container style', async () => { + await render( + + ); + + expect(screen.getByTestId('icon-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 e9bc774f78..979c43d1b5 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -470,7 +470,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -610,7 +610,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -808,7 +808,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -948,7 +948,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1088,7 +1088,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1228,7 +1228,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1426,7 +1426,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1566,7 +1566,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2012,7 +2012,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2152,7 +2152,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2292,7 +2292,7 @@ exports[`DataTable.Pagination renders data table pagination with options select [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2432,7 +2432,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 731830ff73..568838ee7b 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -91,7 +91,7 @@ exports[`renders disabled icon button 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -233,7 +233,7 @@ exports[`renders icon button by default 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -375,7 +375,7 @@ exports[`renders icon button with color 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -517,7 +517,7 @@ exports[`renders icon button with size 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -659,7 +659,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 29b660cbd9..403ba6f092 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -129,7 +129,7 @@ exports[`activity indicator snapshot test 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -541,7 +541,7 @@ exports[`renders with placeholder 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -731,7 +731,7 @@ exports[`renders with placeholder 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -914,7 +914,7 @@ exports[`renders with text 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1100,7 +1100,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 c955c943e2..b89c5c2ee6 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -236,7 +236,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -441,7 +441,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -738,7 +738,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -943,7 +943,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1417,7 +1417,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1622,7 +1622,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -1900,7 +1900,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -2105,7 +2105,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 63257435ed..780f790a92 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -89,7 +89,7 @@ exports[`renders disabled toggle button 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -229,7 +229,7 @@ exports[`renders toggle button 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined, @@ -369,7 +369,7 @@ exports[`renders unchecked toggle button 1`] = ` [ { "alignItems": "center", - "flexGrow": 1, + "flex": 1, "justifyContent": "center", }, undefined,