@aws-amplify/ui-react-native 1.1.2 → 1.1.4

package/src/primitives/Tabs/__tests__/Tab.spec.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { StyleSheet, Text, ViewStyle } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { render, renderHook } from '@testing-library/react-native';
 
 import { useTheme } from '../../../theme';
 import { Tab } from '..';
 import { getThemedStyles } from '../styles';
+import { getThemedStyles as getButtonThemedStyles } from '../../Button/styles';
 
 const customStyles = StyleSheet.create({
   tabStyle: {
@@ -35,14 +36,21 @@ describe('Tab', () => {
 
     const { result } = renderHook(() => useTheme());
     const themedStyle = getThemedStyles(result.current);
+    const buttonThemedStyle = getButtonThemedStyles(result.current);
 
     const tab = getByRole('tab');
-    // select second index as `Button` applies its own style first
-    expect((tab.props.style as ViewStyle[])[4]).toStrictEqual([
-      themedStyle.tab,
-      themedStyle.readonly,
-      themedStyle.selected,
-      null,
+    expect(tab.props.style).toStrictEqual([
+      { ...buttonThemedStyle.container, ...buttonThemedStyle.containerDefault },
+      undefined,
+      [
+        {
+          ...themedStyle.tab,
+          ...themedStyle.readonly,
+          ...themedStyle.selected,
+        },
+        undefined,
+        undefined,
+      ],
     ]);
   });
 
@@ -55,14 +63,13 @@ describe('Tab', () => {
 
     const { result } = renderHook(() => useTheme());
     const themedStyle = getThemedStyles(result.current);
+    const buttonThemedStyle = getButtonThemedStyles(result.current);
 
     const tab = getByRole('tab');
-    // select second index as `Button` applies its own style first
-    expect((tab.props.style as ViewStyle[])[4]).toStrictEqual([
-      themedStyle.tab,
-      null,
-      null,
-      customStyles.tabStyle,
+    expect(tab.props.style).toStrictEqual([
+      { ...buttonThemedStyle.container, ...buttonThemedStyle.containerDefault },
+      undefined,
+      [{ ...themedStyle.tab }, undefined, customStyles.tabStyle],
     ]);
   });
 });

package/src/primitives/Tabs/__tests__/__snapshots__/Tab.spec.tsx.snap

@@ -20,17 +20,14 @@ exports[`Tab can apply custom styling 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       Array [
         Object {
           "backgroundColor": "transparent",
@@ -43,8 +40,7 @@ exports[`Tab can apply custom styling 1`] = `
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        null,
-        null,
+        undefined,
         Object {
           "backgroundColor": "lavender",
           "borderTopColor": "rebeccapurple",
@@ -99,38 +95,30 @@ exports[`Tab renders as expected when Tab is selected 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       Array [
         Object {
-          "backgroundColor": "transparent",
-          "borderBottomColor": "hsl(210, 5%, 87%)",
+          "backgroundColor": "hsl(0, 0%, 100%)",
+          "borderBottomColor": "hsl(190, 95%, 30%)",
           "borderBottomWidth": 2,
           "borderRadius": 0,
           "borderWidth": 0,
+          "color": "hsl(190, 95%, 30%)",
           "flexBasis": 0,
           "flexGrow": 1,
+          "opacity": 1,
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "opacity": 1,
-        },
-        Object {
-          "backgroundColor": "hsl(0, 0%, 100%)",
-          "borderBottomColor": "hsl(190, 95%, 30%)",
-          "color": "hsl(190, 95%, 30%)",
-        },
-        null,
+        undefined,
+        undefined,
       ],
     ]
   }
@@ -185,17 +173,14 @@ exports[`Tab renders as expected with a component passed as children 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       Array [
         Object {
           "backgroundColor": "transparent",
@@ -208,9 +193,8 @@ exports[`Tab renders as expected with a component passed as children 1`] = `
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        null,
-        null,
-        null,
+        undefined,
+        undefined,
       ],
     ]
   }
@@ -241,17 +225,14 @@ exports[`Tab renders default Tab as expected 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       Array [
         Object {
           "backgroundColor": "transparent",
@@ -264,9 +245,8 @@ exports[`Tab renders default Tab as expected 1`] = `
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        null,
-        null,
-        null,
+        undefined,
+        undefined,
       ],
     ]
   }

package/src/primitives/Tabs/__tests__/__snapshots__/Tabs.spec.tsx.snap

@@ -34,38 +34,30 @@ exports[`Tabs applies theme and custom styling 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 10%, 58%)",
           "borderRadius": 4,
+          "borderWidth": 1,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderWidth": 1,
-        },
-        null,
-        null,
+        undefined,
         Array [
           Object {
-            "backgroundColor": "transparent",
-            "borderBottomColor": "hsl(210, 5%, 87%)",
+            "backgroundColor": "hsl(0, 0%, 100%)",
+            "borderBottomColor": "hsl(190, 95%, 30%)",
             "borderBottomWidth": 2,
             "borderRadius": 0,
             "borderWidth": 0,
+            "color": "hsl(190, 95%, 30%)",
             "flexBasis": 0,
             "flexGrow": 1,
+            "opacity": 1,
             "paddingHorizontal": 16,
             "paddingVertical": 12,
           },
-          Object {
-            "opacity": 1,
-          },
-          Object {
-            "backgroundColor": "hsl(0, 0%, 100%)",
-            "borderBottomColor": "hsl(190, 95%, 30%)",
-            "color": "hsl(190, 95%, 30%)",
-          },
-          null,
+          undefined,
+          undefined,
         ],
       ]
     }
@@ -117,17 +109,14 @@ exports[`Tabs applies theme and custom styling 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 10%, 58%)",
           "borderRadius": 4,
+          "borderWidth": 1,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderWidth": 1,
-        },
-        null,
-        null,
+        undefined,
         Array [
           Object {
             "backgroundColor": "transparent",
@@ -140,9 +129,8 @@ exports[`Tabs applies theme and custom styling 1`] = `
             "paddingHorizontal": 16,
             "paddingVertical": 12,
           },
-          null,
-          null,
-          null,
+          undefined,
+          undefined,
         ],
       ]
     }

package/src/primitives/Tabs/styles.ts

@@ -30,6 +30,10 @@ export const getThemedStyles = (
       opacity: opacities[100],
       ...components?.tabs?.readonly,
     },
+    pressed: {
+      opacity: opacities[60],
+      ...components?.tabs?.pressed,
+    },
     tabList: {
       flexDirection: 'row',
       width: '100%',

package/src/primitives/Tabs/types.ts

@@ -43,6 +43,7 @@ export interface TabProps extends ButtonProps {
 }
 
 export interface TabsStyles {
+  pressed?: ViewStyle;
   readonly?: ViewStyle;
   selected?: ViewStyle;
   tabList?: ViewStyle;