@hero-design/rn 8.12.0 → 8.12.2

package/src/components/FAB/ActionGroup/StyledActionItem.tsx

@@ -1,26 +1,24 @@
-import { TouchableOpacity } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import styled from '@emotion/native';
 import type { TouchableOpacityProps } from 'react-native';
 import Typography from '../../Typography';
 import Icon from '../../Icon';
 import type { IconProps } from '../../Icon';
 
-const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>(
-  ({ theme }) => ({
-    paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
-    paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
-    paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
-    paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
-    margin: theme.__hd__.fab.space.actionItemMargin,
-    marginRight: theme.__hd__.fab.space.actionItemMarginRight,
-    backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
-    borderRadius: theme.__hd__.fab.radii.actionItem,
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-end',
-    overflow: 'hidden',
-  })
-);
+const StyledActionItem = styled(TouchableHighlight)(({ theme }) => ({
+  paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
+  paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
+  paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
+  paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
+  margin: theme.__hd__.fab.space.actionItemMargin,
+  marginRight: theme.__hd__.fab.space.actionItemMarginRight,
+  backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
+  borderRadius: theme.__hd__.fab.radii.actionItem,
+  flexDirection: 'row',
+  alignItems: 'center',
+  alignSelf: 'flex-end',
+  overflow: 'hidden',
+}));
 
 const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>(
   ({ theme }) => ({

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -87,7 +87,6 @@ exports[`ActionGroup has active false 1`] = `
     <View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -97,21 +96,23 @@ exports[`ActionGroup has active false 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="speaker-action-item"
       >
@@ -166,7 +167,6 @@ exports[`ActionGroup has active false 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -176,21 +176,23 @@ exports[`ActionGroup has active false 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="target-action-item"
       >
@@ -245,7 +247,6 @@ exports[`ActionGroup has active false 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -255,21 +256,23 @@ exports[`ActionGroup has active false 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="plane-action-item"
       >
@@ -324,7 +327,6 @@ exports[`ActionGroup has active false 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -334,21 +336,23 @@ exports[`ActionGroup has active false 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="health-bag-action-item"
       >
@@ -403,7 +407,6 @@ exports[`ActionGroup has active false 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -413,21 +416,23 @@ exports[`ActionGroup has active false 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="clock-action-item"
       >
@@ -649,7 +654,6 @@ exports[`ActionGroup has active true 1`] = `
     <View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -659,21 +663,23 @@ exports[`ActionGroup has active true 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="speaker-action-item"
       >
@@ -728,7 +734,6 @@ exports[`ActionGroup has active true 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -738,21 +743,23 @@ exports[`ActionGroup has active true 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="target-action-item"
       >
@@ -807,7 +814,6 @@ exports[`ActionGroup has active true 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -817,21 +823,23 @@ exports[`ActionGroup has active true 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="plane-action-item"
       >
@@ -886,7 +894,6 @@ exports[`ActionGroup has active true 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -896,21 +903,23 @@ exports[`ActionGroup has active true 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="health-bag-action-item"
       >
@@ -965,7 +974,6 @@ exports[`ActionGroup has active true 1`] = `
       </View>
       <View
         accessible={true}
-        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onResponderGrant={[Function]}
@@ -975,21 +983,23 @@ exports[`ActionGroup has active true 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "flexDirection": "row",
-            "margin": 8,
-            "marginRight": 24,
-            "opacity": 1,
-            "overflow": "hidden",
-            "paddingBottom": 8,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 8,
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-end",
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "flexDirection": "row",
+              "margin": 8,
+              "marginRight": 24,
+              "overflow": "hidden",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
         }
         testID="clock-action-item"
       >

package/src/components/FAB/FAB.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
 import { StyledFABContainer, StyledFABIcon, StyledFABText } from './StyledFAB';
 import type { IconName } from '../Icon';
+import { useTheme } from '../../theme';
 
 export interface FABProps {
   /**
@@ -81,12 +82,13 @@ const FAB = ({
   style,
 }: FABProps): JSX.Element => {
   const isIconOnly = !title;
+  const theme = useTheme();
   return (
     <StyledFABContainer
+      underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
       testID={testID}
       style={style}
       onPress={onPress}
-      activeOpacity={0.6}
     >
       {isIconOnly ? (
         <IconOnlyContent animated={animated} active={active} icon={icon} />

package/src/components/List/BasicListItem.tsx

@@ -9,6 +9,7 @@ import {
   StyledListItemContainer,
 } from './StyledBasicListItem';
 import type { IconName } from '../Icon';
+import { useTheme } from '../../theme';
 
 export interface ListItemProps {
   /**
@@ -60,6 +61,8 @@ const BasicListItem = ({
   disabled = false,
   onPress,
 }: ListItemProps): JSX.Element => {
+  const theme = useTheme();
+
   return (
     <StyledListItemContainer
       style={style}
@@ -68,6 +71,9 @@ const BasicListItem = ({
       themeDisabled={disabled}
       onPress={onPress}
       disabled={disabled}
+      underlayColor={
+        theme.__hd__.list.colors.checkedListItemContainerBackground
+      }
     >
       <>
         {prefix && (

package/src/components/List/ListItem.tsx

@@ -15,6 +15,7 @@ import {
   StyledTitleContainer,
 } from './StyledListItem';
 import type { IconName } from '../Icon';
+import { useTheme } from '../../theme';
 
 export interface ListItemProps {
   /**
@@ -81,6 +82,8 @@ const ListItem = ({
   onPress,
   disabled = false,
 }: ListItemProps): JSX.Element => {
+  const theme = useTheme();
+
   return (
     <StyledListItemContainer
       style={style}
@@ -89,6 +92,9 @@ const ListItem = ({
       themeVariant={variant}
       onPress={onPress}
       disabled={disabled}
+      underlayColor={
+        theme.__hd__.list.colors.checkedListItemContainerBackground
+      }
     >
       <>
         {leadingStatus && (

package/src/components/List/StyledBasicListItem.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 
 const StyledPrefixContainer = styled(View)(({ theme }) => ({
   marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
@@ -11,7 +11,7 @@ const StyledTitleContainer = styled(View)(() => ({
   flex: 1,
 }));
 
-const StyledListItemContainer = styled(TouchableOpacity)<{
+const StyledListItemContainer = styled(TouchableHighlight)<{
   themeSelected?: boolean;
   themeDisabled?: boolean;
 }>(({ theme, themeSelected, themeDisabled }) => ({

package/src/components/List/StyledListItem.tsx

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled from '@emotion/native';
 
 export type Variant = 'full-width' | 'card';
@@ -9,7 +9,7 @@ export type LeadingStatusIntent =
   | 'info'
   | 'archived';
 
-const StyledListItemContainer = styled(TouchableOpacity)<{
+const StyledListItemContainer = styled(TouchableHighlight)<{
   themeSelected?: boolean;
   themeVariant?: Variant;
 }>(({ theme, themeSelected = false, themeVariant = 'basic' }) => {