@artsy/palette-mobile 11.0.27 → 11.0.28

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v11.0.28 (Sat May 13 2023)
+
+#### 🐛 Bug Fix
+
+- chore(screen): make stuff consistent [#102](https://github.com/artsy/palette-mobile/pull/102) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.27 (Fri May 12 2023)
 
 :tada: This release contains work from a new contributor! :tada:

package/dist/elements/Screen/Body.d.ts

@@ -2,7 +2,6 @@
 import { FlexProps } from "../Flex";
 export interface BodyProps extends FlexProps {
     fullwidth?: boolean;
-    safeArea?: boolean;
     scroll?: boolean;
 }
 export declare const Body: React.FC<BodyProps>;

package/dist/elements/Screen/Body.js

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Body = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const constants_1 = require("./constants");
 const Flex_1 = require("../Flex");
-const Body = ({ children, fullwidth, safeArea = true, scroll, ...flexProps }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { style: { flex: 1 }, behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, mt: `${insets.top}px`, pb: safeArea ? `${insets.bottom}px` : undefined, ...flexProps, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : constants_1.SCREEN_HORIZONTAL_PADDING, children: scroll ? (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { children: children }) : children }) }) }));
+const Body = ({ children, fullwidth, scroll, ...flexProps }) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { style: { flex: 1 }, behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, ...flexProps, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, px: fullwidth ? undefined : constants_1.SCREEN_HORIZONTAL_PADDING, children: scroll ? (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { children: children }) : children }) }) }));
 };
 exports.Body = Body;

package/dist/elements/Screen/BottomView.js

@@ -14,6 +14,6 @@ const BottomView = ({ children, darkMode }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_linear_gradient_1.default, { colors: [darkMode ? "rgba(0,0,0,0)" : "rgba(255,255,255,0)", color("background")], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
                     width: "100%",
                     height: 20,
-                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: constants_1.SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 1, backgroundColor: "background", children: children })] }));
+                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: constants_1.SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
 };
 exports.BottomView = BottomView;

package/dist/elements/Screen/FloatingHeader.js

@@ -9,6 +9,6 @@ const Flex_1 = require("../Flex");
 const Spacer_1 = require("../Spacer");
 const FloatingHeader = ({ onBack, rightElements }) => {
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: constants_1.ZINDEX.floatingHeader, height: constants_1.NAVBAR_HEIGHT, px: 1, flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(BackButton_1.BackButtonWithBackground, { onPress: onBack }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1 }), rightElements && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: constants_1.ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(BackButton_1.BackButtonWithBackground, { onPress: onBack }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1 }), rightElements && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }))] }));
 };
 exports.FloatingHeader = FloatingHeader;

package/dist/elements/Screen/Header.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FlexProps } from "../Flex";
 export interface HeaderProps {
     animated?: boolean;
     hideLeftElements?: boolean;
@@ -9,6 +10,7 @@ export interface HeaderProps {
     rightElements?: React.ReactNode;
     scrollY?: number;
     title?: string;
+    titleProps?: FlexProps;
     titleShown?: boolean;
 }
 export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_device_info_1 = require("react-native-device-info");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const constants_1 = require("./constants");
 const constants_2 = require("../../constants");
 const ArrowLeftIcon_1 = require("../../svgs/ArrowLeftIcon");
@@ -11,21 +9,20 @@ const Flex_1 = require("../Flex");
 const Spacer_1 = require("../Spacer");
 const Text_1 = require("../Text");
 const Touchable_1 = require("../Touchable");
-const Header = ({ hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, }) => {
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+const Header = ({ hideLeftElements, hideRightElements, leftElements, rightElements, onBack, title, hideTitle, titleProps = {}, }) => {
     const Left = () => {
         if (hideLeftElements) {
             return null;
         }
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftElements ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements })) : (
                 // If no left elements passed, show back button
-                (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh", marginLeft: "-4px", top: "1px" }) })), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }));
+                (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh", top: "2px" }) })), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }));
     };
     const Center = () => {
         if (hideTitle) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: (0, react_native_device_info_1.isTablet)() ? "100%" : "70%", flex: 1, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", numberOfLines: 1, children: title }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, ...titleProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", numberOfLines: 1, children: title }) }));
     };
     const Right = () => {
         if (hideRightElements) {
@@ -33,6 +30,6 @@ const Header = ({ hideLeftElements, hideRightElements, hideTitle, leftElements,
         }
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, top: insets.top, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Left, {}), (0, jsx_runtime_1.jsx)(Center, {}), (0, jsx_runtime_1.jsx)(Right, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, py: 1, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Left, {}), (0, jsx_runtime_1.jsx)(Center, {}), (0, jsx_runtime_1.jsx)(Right, {})] }));
 };
 exports.Header = Header;

package/dist/elements/Screen/ScreenBase.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const ScreenBase: React.FC<{
+export interface ScreenBaseProps {
     children: React.ReactNode;
-}>;
+    safeArea?: boolean;
+}
+export declare const ScreenBase: React.FC<ScreenBaseProps>;

package/dist/elements/Screen/ScreenBase.js

@@ -4,10 +4,12 @@ exports.ScreenBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const Flex_1 = require("../Flex");
-const ScreenBase = ({ children }) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "background", children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, {})] }));
+const ScreenBase = ({ children, safeArea = true }) => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, children: children }));
 };
 exports.ScreenBase = ScreenBase;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SafeAreaCover = () => {
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", left: 0, right: 0, top: 0, height: insets.top, backgroundColor: "background" }));

package/dist/elements/Screen/constants.d.ts

@@ -1,6 +1,6 @@
 import { SpacingUnitDSValueNumber } from "../../types";
 export declare const LARGE_TITLE_HEIGHT = 64;
-export declare const NAVBAR_HEIGHT = 44;
+export declare const NAVBAR_HEIGHT = 50;
 export declare const SCREEN_HORIZONTAL_PADDING: SpacingUnitDSValueNumber;
 export declare const SCREEN_TRANSITION_TIME = 400;
 export declare const ZINDEX: {

package/dist/elements/Screen/constants.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZINDEX = exports.SCREEN_TRANSITION_TIME = exports.SCREEN_HORIZONTAL_PADDING = exports.NAVBAR_HEIGHT = exports.LARGE_TITLE_HEIGHT = void 0;
 exports.LARGE_TITLE_HEIGHT = 64;
-exports.NAVBAR_HEIGHT = 44;
+exports.NAVBAR_HEIGHT = 50;
 exports.SCREEN_HORIZONTAL_PADDING = 2;
 exports.SCREEN_TRANSITION_TIME = 400;
 exports.ZINDEX = {

package/dist/elements/Screen/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-export declare const Screen: import("react").FC<{
-    children: import("react").ReactNode;
-}> & {
+export * from "./constants";
+export declare const Screen: import("react").FC<import("./ScreenBase").ScreenBaseProps> & {
     Background: import("react").FC<{
         children: import("react").ReactNode;
     }>;

package/dist/elements/Screen/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Screen = void 0;
 const Background_1 = require("./Background");
@@ -9,6 +23,7 @@ const FullWidthDivider_1 = require("./FullWidthDivider");
 const FullWidthItem_1 = require("./FullWidthItem");
 const Header_1 = require("./Header");
 const ScreenBase_1 = require("./ScreenBase");
+__exportStar(require("./constants"), exports);
 exports.Screen = Object.assign(ScreenBase_1.ScreenBase, {
     Background: Background_1.Background,
     Body: Body_1.Body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.0.27",
+  "version": "11.0.28",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",