@artsy/palette-mobile 24.9.0 → 24.11.0

package/dist/elements/Button/Button.d.ts

@@ -28,6 +28,7 @@ export interface ButtonProps extends BoxProps {
     /** Used only for tests and stories */
     testOnly_state?: DisplayState;
     textVariant?: TextVariant;
+    followText?: string;
 }
 declare enum DisplayState {
     Enabled = "enabled",

package/dist/elements/Button/Button.js

@@ -56,6 +56,7 @@ var Button = function (_a) {
     var children = _a.children, disabled = _a.disabled, haptic = _a.haptic, icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "left" : _b, loading = _a.loading, longestText = _a.longestText, onPress = _a.onPress, _c = _a.size, size = _c === void 0 ? "large" : _c, _d = _a.variant, variant = _d === void 0 ? "fillDark" : _d, testOnly_state = _a.testOnly_state, testID = _a.testID, textVariant = _a.textVariant, hitSlop = _a.hitSlop, rest = __rest(_a, ["children", "disabled", "haptic", "icon", "iconPosition", "loading", "longestText", "onPress", "size", "variant", "testOnly_state", "testID", "textVariant", "hitSlop"]);
     var textVariantBySize = size === "small" ? "xs" : "sm";
     var textStyle = { fontSize: (0, helpers_1.useTextStyleForPalette)(textVariant !== null && textVariant !== void 0 ? textVariant : textVariantBySize).fontSize };
+    var space = (0, hooks_1.useSpace)();
     var _e = (0, react_1.useState)(DisplayState.Enabled), innerDisplayState = _e[0], setInnerDisplayState = _e[1];
     var _f = (0, react_1.useState)({
         width: 0,
@@ -69,7 +70,7 @@ var Button = function (_a) {
     var getSize = function () {
         switch (size) {
             case "small":
-                return { height: 30 * react_native_1.PixelRatio.getFontScale(), mx: "15px" };
+                return { height: 30 * react_native_1.PixelRatio.getFontScale(), mx: "10px" };
             case "large":
                 return { height: 50 * react_native_1.PixelRatio.getFontScale(), mx: "30px" };
         }
@@ -115,6 +116,9 @@ var Button = function (_a) {
                         backgroundColor: springProps.backgroundColor,
                         borderColor: springProps.borderColor,
                         height: containerSize.height,
+                        // This is needed to make sure that button doesn't push content around its content changes to longestText
+                        // Here, we are factoring in the padding from the container
+                        minWidth: longestTextMeasurements.width + space(2),
                     }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mx: containerSize.mx, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", 
                                 // Do not show the content when the button is loading
                                 style: { opacity: displayState === DisplayState.Loading ? 0 : 1 }, children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(Box_1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, !(0, isTestEnvironment_1.isTestEnvironment)() && longestText && longestTextMeasurements.width === 0 && ((0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), (0, jsx_runtime_1.jsx)(AnimatedText, { style: [

package/dist/elements/Button/FollowButton.d.ts

@@ -4,5 +4,5 @@ type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" |
     followCount?: number;
     longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, followText: followTextProp, ...restProps }: FollowButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/elements/Button/FollowButton.js

@@ -25,12 +25,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FollowButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var native_1 = require("@artsy/icons/native");
+var react_1 = require("react");
 var constants_1 = require("../../constants");
 var formatLargeNumber_1 = require("../../utils/formatLargeNumber");
 var Button_1 = require("../Button");
 var FollowButton = function (_a) {
-    var isFollowed = _a.isFollowed, followCount = _a.followCount, longestText = _a.longestText, loading = _a.loading, restProps = __rest(_a, ["isFollowed", "followCount", "longestText", "loading"]);
-    var followText = isFollowed ? "Following" : "Follow";
+    var isFollowed = _a.isFollowed, followCount = _a.followCount, longestText = _a.longestText, loading = _a.loading, followTextProp = _a.followText, restProps = __rest(_a, ["isFollowed", "followCount", "longestText", "loading", "followText"]);
+    var followText = (0, react_1.useMemo)(function () {
+        if (followTextProp) {
+            return followTextProp;
+        }
+        return isFollowed ? "Following" : "Follow";
+    }, [followTextProp, isFollowed]);
     var followCountText = !!followCount && followCount > 1 ? " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) : "";
     var text = followText + followCountText;
     return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed &&

package/dist/elements/Image/Image.d.ts

@@ -7,6 +7,11 @@ export interface ImageProps extends CustomFastImageProps {
     aspectRatio?: number;
     /** BlurHash code */
     blurhash?: string | null | undefined;
+    /**
+     * Decode the blurhash placeholder on a background thread instead of the main thread.
+     * Defaults to true.
+     */
+    blurhashDecodeAsync?: boolean;
     /** Gemini resize_to param  */
     geminiResizeMode?: GeminiResizeMode;
     /** Resize on the fly using Gemini. Defaults to true */
@@ -27,6 +32,8 @@ type ImageSkeletonProps = {
         height: number;
     };
     blurhash?: string | null | undefined;
+    /** See `blurhashDecodeAsync` on `ImageProps`. Defaults to true. */
+    blurhashDecodeAsync?: boolean;
     style?: StyleProp<ViewStyle>;
 };
 export declare const ImageSkeleton: React.FC<ImageSkeletonProps>;

package/dist/elements/Image/Image.js

@@ -36,8 +36,8 @@ var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
 var Flex_1 = require("../Flex");
 var Skeleton_1 = require("../Skeleton");
 exports.Image = (0, react_1.memo)(function (_a) {
-    var aspectRatio = _a.aspectRatio, width = _a.width, height = _a.height, _b = _a.performResize, performResize = _b === void 0 ? true : _b, src = _a.src, style = _a.style, resizeMode = _a.resizeMode, geminiResizeMode = _a.geminiResizeMode, _c = _a.showLoadingState, showLoadingState = _c === void 0 ? false : _c, blurhash = _a.blurhash, flexProps = __rest(_a, ["aspectRatio", "width", "height", "performResize", "src", "style", "resizeMode", "geminiResizeMode", "showLoadingState", "blurhash"]);
-    var _d = (0, react_1.useState)(true), isLoading = _d[0], setIsLoading = _d[1];
+    var aspectRatio = _a.aspectRatio, width = _a.width, height = _a.height, _b = _a.performResize, performResize = _b === void 0 ? true : _b, src = _a.src, style = _a.style, resizeMode = _a.resizeMode, geminiResizeMode = _a.geminiResizeMode, _c = _a.showLoadingState, showLoadingState = _c === void 0 ? false : _c, blurhash = _a.blurhash, _d = _a.blurhashDecodeAsync, blurhashDecodeAsync = _d === void 0 ? true : _d, flexProps = __rest(_a, ["aspectRatio", "width", "height", "performResize", "src", "style", "resizeMode", "geminiResizeMode", "showLoadingState", "blurhash", "blurhashDecodeAsync"]);
+    var _e = (0, react_1.useState)(true), isLoading = _e[0], setIsLoading = _e[1];
     var dimensions = useImageDimensions({ aspectRatio: aspectRatio, width: width, height: height });
     var color = (0, hooks_1.useColor)();
     if (showLoadingState) {
@@ -53,7 +53,7 @@ exports.Image = (0, react_1.memo)(function (_a) {
                 ], resizeMode: resizeMode, onLoadEnd: function () { return setIsLoading(false); }, source: {
                     priority: react_native_fast_image_1.default.priority.normal,
                     uri: (0, getImageURL_1.getImageURL)({ src: src, dimensions: dimensions, geminiResizeMode: geminiResizeMode, performResize: performResize }),
-                } }), isLoading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [dimensions, { position: "absolute" }], children: (0, jsx_runtime_1.jsx)(exports.ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] })));
+                } }), isLoading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [dimensions, { position: "absolute" }], children: (0, jsx_runtime_1.jsx)(exports.ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, blurhashDecodeAsync: blurhashDecodeAsync, style: { position: "absolute" } }) }))] })));
 });
 var useImageDimensions = function (props) {
     var _a, _b;
@@ -77,9 +77,9 @@ var useImageDimensions = function (props) {
     return dimensions;
 };
 var ImageSkeleton = function (_a) {
-    var dimensions = _a.dimensions, blurhash = _a.blurhash, style = _a.style;
+    var dimensions = _a.dimensions, blurhash = _a.blurhash, _b = _a.blurhashDecodeAsync, blurhashDecodeAsync = _b === void 0 ? true : _b, style = _a.style;
     if (!!blurhash) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ backgroundColor: "mono10" }, dimensions, { style: style, children: (0, jsx_runtime_1.jsx)(react_native_blurhash_1.Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: true }) })));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ backgroundColor: "mono10" }, dimensions, { style: style, children: (0, jsx_runtime_1.jsx)(react_native_blurhash_1.Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: blurhashDecodeAsync }) })));
     }
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: style, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, __assign({}, dimensions)) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "24.9.0",
+  "version": "24.11.0",
   "description": "Artsy's design system for React Native",
   "workspaces": [
     "Example"