@artsy/palette-mobile 22.0.1--canary.423.5065.0 → 22.1.0--canary.424.5068.0

package/dist/elements/Tabs/TabMasonry.js

@@ -6,7 +6,7 @@ export function TabMasonry(props) {
     useListenForTabContentScroll();
     const space = useSpace();
     const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
+    return (_jsx(Tabs.FlashList, { masonry: true, contentContainerStyle: {
             paddingHorizontal: space(2),
             ...contentContainerStyle,
         }, ...props, ref: props.innerRef }));

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

@@ -15,7 +15,13 @@ export declare const TabsWithAnimatedHeader: {
         name: string;
     };
 };
-export declare const _TabsWithHeader: {
+export declare const TabsWithHeader: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MasonryTabsWithHeader: {
     (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;

package/dist/elements/Tabs/Tabs.stories.js

@@ -15,7 +15,22 @@ export const TabsWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Scr
 TabsWithAnimatedHeader.story = {
     name: "Tabs with AnimatedHeader",
 };
-export const _TabsWithHeader = () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
-_TabsWithHeader.story = {
+export const TabsWithHeader = () => {
+    return (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
+};
+TabsWithHeader.story = {
     name: "Tabs with header",
 };
+export const MasonryTabsWithHeader = () => {
+    return (_jsxs(Tabs.TabsWithHeader, { title: "Tabs with Masonry", children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.FlatList, { data: Array.from({ length: 20 }), contentContainerStyle: {
+                        paddingHorizontal: 0,
+                    }, renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.FlatList, { contentContainerStyle: {
+                        paddingHorizontal: 0,
+                    }, data: Array.from({ length: 20 }), renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) })] }));
+};
+const randomHexColor = () => {
+    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+};
+MasonryTabsWithHeader.story = {
+    name: "Masonry Tabs with header",
+};

package/dist/storybook/decorators.js

@@ -41,5 +41,5 @@ export const useDarkModeSwitcher = (story) => {
                     // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
                     , { 
                         // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
-                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] })] }) }) }));
+                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { flex: 1, justifyContent: "center", alignItems: "center", children: story() })] })] }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "22.0.1--canary.423.5065.0",
+  "version": "22.1.0--canary.424.5068.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"