@artsy/palette-mobile 17.2.2 → 17.4.0

package/dist/elements/Pill/Pill.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import themeGet from "@styled-system/theme-get";
 import { MotiPressable } from "moti/interactions";
 import { useMemo } from "react";
+import { PixelRatio } from "react-native";
 import styled, { css } from "styled-components";
 import { CloseIcon } from "../../svgs";
 import { Flex } from "../Flex";
@@ -50,7 +51,7 @@ const Thumbnail = styled(Image) `
 const PILL_STATES = {
     default: css `
     border-radius: 15px;
-    height: 30px;
+    height: ${PixelRatio.getFontScale() * 30}px;
     padding: 0 15px;
   `,
     selected: css `

package/dist/elements/Tabs/TabsContainer.d.ts

@@ -7,7 +7,9 @@ interface Indicator {
 export interface TabsContainerProps extends CollapsibleProps {
     indicators?: Indicator[];
     onTabPress?: (tabName: string) => void;
+    stickyTabBarComponent?: React.ReactNode;
     tabScrollEnabled?: boolean;
+    variant?: "pills" | "tabs";
 }
 export declare const TabsContainer: React.FC<TabsContainerProps>;
 export {};

package/dist/elements/Tabs/TabsContainer.js

@@ -1,17 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { debounce } from "lodash";
+import { useState } from "react";
 import { Platform } from "react-native";
 import { Tabs as BaseTabs, MaterialTabBar, MaterialTabItem, } from "react-native-collapsible-tab-view";
+import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
 import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
 import { useColor } from "../../utils/hooks/useColor";
 import { useSpace } from "../../utils/hooks/useSpace";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
+import { Pill } from "../Pill";
 const TAB_BAR_HEIGHT = 50;
-export const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
+const PillTabItem = ({ focusedTab: focusedTabProp, ...props }) => {
+    const [focusedTab, setFocusedTab] = useState(focusedTabProp.value);
+    // We want to debounce the focusedTab value to avoid showing two pills at once
+    const debouncedFocusedTab = debounce(setFocusedTab, 30);
+    useAnimatedReaction(() => focusedTabProp.value, (value) => {
+        runOnJS(debouncedFocusedTab)(value);
+    });
+    return (_jsx(Pill, { selected: props.name === focusedTab, onPress: () => {
+            props.onTabPress?.(props.name);
+        }, variant: "link", children: props.name }, props.name));
+};
+const DefaultTabItem = (props) => {
+    const Indicator = props.indicators.find((indicator) => {
+        return indicator.tabName === props.name;
+    });
+    return (_jsxs(Box, { flex: 1, children: [_jsx(Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && _jsx(Indicator.Component, { ...props }) }), _jsx(MaterialTabItem, { pressOpacity: DEFAULT_ACTIVE_OPACITY, ...props })] }));
+};
+export const TabsContainer = ({ children, indicators = [], initialTabName, onTabPress, renderHeader, stickyTabBarComponent, tabScrollEnabled = false, variant = "tabs", ...tabContainerProps }) => {
     const space = useSpace();
     const color = useColor();
     const isIOS = Platform.OS === "ios";
-    return (_jsx(BaseTabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
+    return (_jsx(BaseTabs.Container, { renderHeader: renderHeader, headerContainerStyle: {
             shadowOpacity: 0,
             shadowRadius: 0,
             elevation: 0,
@@ -19,6 +40,17 @@ export const TabsContainer = ({ children, indicators = [], initialTabName, rende
         }, initialTabName: initialTabName, containerStyle: {
             paddingTop: space(2),
         }, renderTabBar: (tabBarProps) => {
+            if (variant === "pills") {
+                return (_jsxs(Flex, { flexDirection: "row", gap: 2, alignItems: "center", py: 1, children: [_jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: true, TabItemComponent: (props) => (_jsx(PillTabItem, { ...props, onTabPress: (tab) => {
+                                    onTabPress?.(tab);
+                                    tabBarProps.onTabPress(tab);
+                                }, focusedTab: tabBarProps.focusedTab })), indicatorStyle: {
+                                backgroundColor: "transparent",
+                            }, contentContainerStyle: {
+                                gap: space(1),
+                                paddingHorizontal: space(2),
+                            } }), stickyTabBarComponent] }));
+            }
             return (_jsx(_Fragment, { children: _jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: tabScrollEnabled, onTabPress: (tab) => {
                         tabBarProps.onTabPress(tab);
                         onTabPress?.(tab);
@@ -26,12 +58,7 @@ export const TabsContainer = ({ children, indicators = [], initialTabName, rende
                         height: TAB_BAR_HEIGHT,
                         borderBottomWidth: 1,
                         borderColor: color("mono30"),
-                    }, TabItemComponent: (props) => {
-                        const Indicator = indicators.find((indicator) => {
-                            return indicator.tabName === props.name;
-                        });
-                        return (_jsxs(Box, { flex: 1, children: [_jsx(Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && _jsx(Indicator.Component, { ...props }) }), _jsx(MaterialTabItem, { pressOpacity: DEFAULT_ACTIVE_OPACITY, ...props })] }));
-                    }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginHorizontal: 0 }, indicatorStyle: {
+                    }, TabItemComponent: (props) => _jsx(DefaultTabItem, { ...props, indicators: indicators }), contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginHorizontal: 0 }, indicatorStyle: {
                         backgroundColor: color("onBackground"),
                         height: 1,
                         // on android this line breaks the active indicator and it is not visible
@@ -41,5 +68,5 @@ export const TabsContainer = ({ children, indicators = [], initialTabName, rende
                         // to prevent linebreaks on the tab titles
                         paddingHorizontal: 0,
                     } }) }));
-        }, children: children }));
+        }, ...tabContainerProps, children: children }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.2.2",
+  "version": "17.4.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",