@artsy/palette-mobile 13.2.29 → 13.2.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/elements/Button/Button.js +9 -3
  2. package/dist/elements/Button/Button.stories.js +2 -2
  3. package/dist/elements/Button/FollowButton.js +2 -1
  4. package/dist/elements/Button/colors.d.ts +2 -1
  5. package/dist/elements/Button/colors.js +48 -0
  6. package/package.json +1 -1
package/dist/elements/Button/Button.js CHANGED
@@ -65,7 +65,6 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
65
65
  return 50;
66
66
  }
67
67
  })();
68
- const spinnerColor = variant === "text" ? "blue100" : "white100";
69
68
  const handlePress = (event) => {
70
69
  if (onPress === undefined || onPress === null) {
71
70
  return;
@@ -87,6 +86,12 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
87
86
  borderColor: colors.disabled.border,
88
87
  };
89
88
  }
89
+ if (loading) {
90
+ return {
91
+ backgroundColor: colors.loading.bg,
92
+ borderColor: colors.loading.border,
93
+ };
94
+ }
90
95
  return {
91
96
  backgroundColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
92
97
  borderColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
@@ -95,20 +100,21 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
95
100
  const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
96
101
  const colors = colorsForVariantAndState[variant];
97
102
  if (loading) {
98
- return { color: "rgba(0, 0, 0, 0)" };
103
+ return { color: colors.loading.text };
99
104
  }
100
105
  return {
101
106
  color: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
102
107
  textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
103
108
  };
104
109
  });
110
+ const loaderColor = colorsForVariantAndState[variant].loading.loader;
105
111
  return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled, onPressIn: (e) => {
106
112
  onPressIn?.(e);
107
113
  setPressed(true);
108
114
  }, onPressOut: (e) => {
109
115
  onPressOut?.(e);
110
116
  setPressed(false);
111
- }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", 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, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", selectable: false, children: children }), (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 }) }), iconPosition === "right" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] })) : null, loading ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) }) }));
117
+ }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", 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, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", selectable: false, children: children }), (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 }) }), iconPosition === "right" && !!icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] })), loading && ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: loaderColor }) }))] }) }) }) }) }));
112
118
  };
113
119
  exports.Button = Button;
114
120
  const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
package/dist/elements/Button/Button.stories.js CHANGED
@@ -39,13 +39,13 @@ const States = () => {
39
39
  exports.States = States;
40
40
  const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
41
41
  exports.Variants = Variants;
42
- const VariantsLoading = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
42
+ const VariantsLoading = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) }, `variant_loading_${variant}`)) }));
43
43
  exports.VariantsLoading = VariantsLoading;
44
44
  const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
45
45
  exports.VariantsDisabled = VariantsDisabled;
46
46
  const TheFollowButton = () => {
47
47
  const [follow, setFollow] = (0, react_1.useState)(true);
48
- return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
48
+ return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { loading: true, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
49
49
  };
50
50
  exports.TheFollowButton = TheFollowButton;
51
51
  const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
package/dist/elements/Button/FollowButton.js CHANGED
@@ -7,6 +7,7 @@ const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
7
7
  const Button_1 = require("../Button");
8
8
  const Text_1 = require("../Text");
9
9
  const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
10
- return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }))] })) }));
10
+ const label = isFollowed ? "Following" : "Follow";
11
+ return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !!loading ? (`${label} ${followCount && followCount > 1 ? (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) : ""}`) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: label }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }))] })) }));
11
12
  };
12
13
  exports.FollowButton = FollowButton;
package/dist/elements/Button/colors.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ButtonProps } from "./Button";
2
2
  import { NoUndefined } from "../../utils/types";
3
- type State = "disabled" | "pressed" | "active";
3
+ type State = "disabled" | "pressed" | "active" | "loading";
4
4
  export declare const useColorsForVariantAndState: () => Record<NoUndefined<ButtonProps["variant"]>, Record<State, {
5
5
  bg: string;
6
6
  border: string;
7
7
  text: string;
8
+ loader?: string;
8
9
  }>>;
9
10
  export {};
package/dist/elements/Button/colors.js CHANGED
@@ -9,6 +9,12 @@ const useColorsForVariantAndState = () => {
9
9
  disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
10
10
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
11
11
  active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
12
+ loading: {
13
+ bg: color("black100"),
14
+ border: color("black100"),
15
+ text: "rgba(0, 0, 0, 0)",
16
+ loader: "white100",
17
+ },
12
18
  },
13
19
  fillLight: {
14
20
  disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
@@ -18,16 +24,34 @@ const useColorsForVariantAndState = () => {
18
24
  border: color("white100"),
19
25
  text: color("black100"),
20
26
  },
27
+ loading: {
28
+ bg: color("white100"),
29
+ border: color("white100"),
30
+ text: "rgba(0, 0, 0, 0)",
31
+ loader: "black100",
32
+ },
21
33
  },
22
34
  fillGray: {
23
35
  disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
24
36
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
25
37
  active: { bg: color("black10"), border: color("black10"), text: color("black100") },
38
+ loading: {
39
+ bg: color("black10"),
40
+ border: color("black10"),
41
+ text: "rgba(0, 0, 0, 0)",
42
+ loader: "black100",
43
+ },
26
44
  },
27
45
  fillSuccess: {
28
46
  disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
29
47
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
30
48
  active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
49
+ loading: {
50
+ bg: color("blue100"),
51
+ border: color("blue100"),
52
+ text: "rgba(0, 0, 0, 0)",
53
+ loader: "white100",
54
+ },
31
55
  },
32
56
  outline: {
33
57
  disabled: {
@@ -41,6 +65,12 @@ const useColorsForVariantAndState = () => {
41
65
  border: color("black60"),
42
66
  text: color("black100"),
43
67
  },
68
+ loading: {
69
+ bg: color("white100"),
70
+ border: color("black60"),
71
+ text: "rgba(0, 0, 0, 0)",
72
+ loader: "black100",
73
+ },
44
74
  },
45
75
  outlineGray: {
46
76
  disabled: {
@@ -54,6 +84,12 @@ const useColorsForVariantAndState = () => {
54
84
  border: color("black60"),
55
85
  text: color("black100"),
56
86
  },
87
+ loading: {
88
+ bg: color("white100"),
89
+ border: color("black30"),
90
+ text: "rgba(0, 0, 0, 0)",
91
+ loader: "black100",
92
+ },
57
93
  },
58
94
  outlineLight: {
59
95
  disabled: {
@@ -67,11 +103,23 @@ const useColorsForVariantAndState = () => {
67
103
  border: color("white100"),
68
104
  text: color("white100"),
69
105
  },
106
+ loading: {
107
+ bg: "rgba(0,0,0,0)",
108
+ border: color("white100"),
109
+ text: "rgba(0, 0, 0, 0)",
110
+ loader: "white100",
111
+ },
70
112
  },
71
113
  text: {
72
114
  disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
73
115
  pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
74
116
  active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
117
+ loading: {
118
+ bg: color("white100"),
119
+ border: color("white100"),
120
+ text: "rgba(0, 0, 0, 0)",
121
+ loader: "blue100",
122
+ },
75
123
  },
76
124
  };
77
125
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "13.2.29",
3
+ "version": "13.2.30",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",