@hero-design/rn 8.25.3 → 8.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.25.3",
+  "version": "8.26.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.25.3",
+    "@hero-design/colors": "8.26.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.25.3",
+    "@hero-design/eslint-plugin": "8.26.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.25.3",
+    "eslint-config-hd": "8.26.1",
+    "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.25.3",
+    "prettier-config-hd": "8.26.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

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

@@ -8,6 +8,7 @@ import {
   StyledIcon,
 } from './StyledActionItem';
 import { useTheme } from '../../../theme';
+import { StyledIconContainer } from '../StyledFAB';
 
 export interface ActionItemProps {
   testID?: string;
@@ -15,6 +16,7 @@ export interface ActionItemProps {
   icon: ComponentProps<typeof Icon>['icon'];
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  key?: string;
 }
 const ActionItem = ({
   icon,
@@ -24,6 +26,7 @@ const ActionItem = ({
   testID,
 }: ActionItemProps) => {
   const theme = useTheme();
+
   return (
     <StyledActionItem
       underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
@@ -32,7 +35,9 @@ const ActionItem = ({
       testID={testID}
     >
       <>
-        <StyledIcon icon={icon} />
+        <StyledIconContainer>
+          <StyledIcon size="xsmall" icon={icon} />
+        </StyledIconContainer>
         <StyledActionItemText>{title}</StyledActionItemText>
       </>
     </StyledActionItem>

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

@@ -34,10 +34,11 @@ const StyledBackdrop = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
 >(({ theme }) => ({
   position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
+  flex: 1,
+  height: '100%',
+  width: '100%',
   bottom: 0,
+  right: 0,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
@@ -51,10 +52,23 @@ const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   textAlign: 'right',
 }));
 
+const StyledModalView = styled(View)({
+  position: 'absolute',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+  bottom: 0,
+  right: 0,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  backgroundColor: 'transparent',
+});
+
 export {
   StyledHeaderText,
   StyledBackdrop,
   StyledContainer,
   StyledActionGroupContainer,
   StyledFAB,
+  StyledModalView,
 };

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

@@ -6,10 +6,7 @@ import Icon from '../../Icon';
 import type { IconProps } from '../../Icon';
 
 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,
+  padding: theme.__hd__.fab.space.actionItemPadding,
   margin: theme.__hd__.fab.space.actionItemMargin,
   marginRight: theme.__hd__.fab.space.actionItemMarginRight,
   backgroundColor: theme.__hd__.fab.colors.actionItemBackground,