@hero-design/rn 8.34.2-alpha.0 → 8.35.0-alpha.0

package/src/components/List/StyledListItem.tsx

@@ -19,6 +19,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       ? theme.__hd__.list.colors.checkedListItemContainerBackground
       : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
+    borderRadius: theme.__hd__.list.radii.item,
   };
 
   switch (themeVariant) {
@@ -28,7 +29,6 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       return {
         ...sharedStyles,
         alignItems: 'center',
-        borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -20,6 +20,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -346,6 +347,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -474,6 +476,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -597,6 +600,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -155,6 +155,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -255,6 +256,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     Array [
       Object {
         "backgroundColor": "#ece8ef",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -467,6 +467,7 @@ Object {
         "actionItemPressedBackground": "#664780",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
+        "buttonActiveBackground": "#664780",
         "buttonBackground": "#401960",
         "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
@@ -566,8 +567,8 @@ Object {
       },
       "radii": Object {
         "basicItem": 4,
-        "card": 8,
         "cardShadow": 4,
+        "item": 8,
         "leadingStatus": 999,
       },
       "shadows": Object {

package/src/theme/components/fab.ts

@@ -4,6 +4,7 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
     buttonPressedBackground: theme.colors.pressedSurface,
+    buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,

package/src/theme/components/list.ts

@@ -21,7 +21,7 @@ const getListTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    card: theme.radii.medium,
+    item: theme.radii.medium,
     basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,

package/src/theme/global/colors/__tests__/__snapshots__/work.spec.ts.snap

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#eaecf0",
+  "highlightedSurface": "#e6e6e6",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#586a8a",
-  "primary": "#2e456d",
+  "pressedSurface": "#000000",
+  "primary": "#000000",
   "primaryOutline": "#001f23",
-  "secondary": "#627492",
+  "secondary": "#4d4d4d",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/src/theme/global/colors/work.ts

@@ -3,13 +3,13 @@ import swag from './swag';
 import type { SystemPalette, BrandSystemPalette } from './types';
 
 const workBrandSystemPallete: BrandSystemPalette = {
-  primary: palette.policeBlue,
+  primary: palette.black,
   onPrimary: palette.white,
-  secondary: palette.policeBlueLight25,
+  secondary: palette.blackLight30,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.policeBlueLight90,
-  pressedSurface: palette.policeBlueLight20,
+  highlightedSurface: palette.blackLight90,
+  pressedSurface: palette.black,
 
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80,

package/types/components/FAB/ActionGroup/FABModal.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ModalProps {
+    /**
+     * Content of the modal.
+     */
+    children: React.ReactElement;
+    /**
+     * Visibility of the modal
+     */
+    visible?: boolean;
+    /**
+     * Callback when the modal is shown.
+     */
+    onShow?: () => void;
+    /**
+     * TestID of the modal.
+     */
+    testID?: string;
+}
+declare const fABModal: ({ children, onShow, testID, visible }: ModalProps) => null;
+export default fABModal;

package/types/components/FAB/ActionGroup/FABModalContentWrapper.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type ModalContentWrapperProps = {
+    children: React.ReactElement;
+    visible?: boolean;
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    animated?: boolean;
+    pointerEvents: 'box-none' | 'none' | 'box-only' | 'auto';
+};
+export type ModalContentWrapperHandler = {
+    hide: (callback?: () => void) => void;
+};
+declare const FABModalContentWrapper: {
+    ({ children, testID, pointerEvents, }: ModalContentWrapperProps): JSX.Element;
+    displayName: string;
+};
+export default FABModalContentWrapper;

package/types/components/FAB/ActionGroup/FABProvider.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare const ModalProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default ModalProvider;

package/types/components/FAB/ActionGroup/ModalPresenter/ModalPresenter.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export type ModalPresenterHandles = {
+    animatedOut: (completion?: () => void) => void;
+};
+export type FABModalDismissFunc = (onDismiss?: () => void) => void;
+export type FABModalUpdateFunc = (content: React.ReactNode) => void;
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type FABModalHandler = {
+    /**
+     * Same `dismiss` function as in `ModalContentProps`.
+     */
+    dismiss: FABModalDismissFunc;
+    /**
+     * Same `update` function as in `ModalContentProps`.
+     */
+    update: FABModalUpdateFunc;
+};
+declare const FABModalPresenter: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<ModalPresenterHandles>>;
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+export declare const showFABModal: (content: React.ReactNode) => FABModalHandler;
+export default FABModalPresenter;

package/types/components/FAB/ActionGroup/ModalPresenter/index.d.ts

@@ -0,0 +1,3 @@
+import { FABModalDismissFunc, FABModalHandler, showFABModal, ModalPresenterHandles } from './ModalPresenter';
+export type { FABModalDismissFunc as ModalDismissFunc, FABModalHandler as ModalHandler, ModalPresenterHandles, };
+export { showFABModal };

package/types/components/FAB/StyledFAB.d.ts

@@ -5,6 +5,8 @@ import type { IconProps } from '../Icon';
 declare const StyledFAB: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeActive?: boolean | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;

package/types/theme/components/fab.d.ts

@@ -16,6 +16,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     colors: {
         buttonBackground: string;
         buttonPressedBackground: string;
+        buttonActiveBackground: string;
         icon: string;
         headerText: string;
         actionItemBackground: string;

package/types/theme/components/list.d.ts

@@ -18,7 +18,7 @@ declare const getListTheme: (theme: GlobalTheme) => {
         suffixContainerMarginLeft: number;
     };
     radii: {
-        card: number;
+        item: number;
         basicItem: number;
         cardShadow: number;
         leadingStatus: number;