@artsy/palette-mobile 24.10.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/package.json

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