@artsy/palette-mobile 8.7.1 → 8.7.2

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 (5) hide show
  1. package/dist/elements/Button/Button.js +3 -9
  2. package/dist/elements/Button/Button.stories.js +1 -1
  3. package/dist/elements/Button/colors.d.ts +1 -1
  4. package/dist/elements/Button/colors.js +0 -8
  5. package/package.json +3 -2
package/dist/elements/Button/Button.js CHANGED
@@ -90,17 +90,11 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
90
90
  (0, react_native_reanimated_1.useAnimatedReaction)(() => [disabled.value, loading.value, pressed.value], ([disabledVal, loadingVal, pressedVal]) => {
91
91
  const toColor = (c) => (0, react_native_reanimated_1.withTiming)(c, { duration: 150 });
92
92
  const states = colorsForVariantAndState[variant];
93
- const colors = disabledVal === 1
94
- ? states.disabled
95
- : loadingVal === 1
96
- ? states.loading
97
- : pressedVal === 1
98
- ? states.pressed
99
- : states.active;
93
+ const colors = disabledVal === 1 ? states.disabled : pressedVal === 1 ? states.pressed : states.active;
100
94
  const { bg, border, text } = colors;
101
95
  bgColor.value = toColor(bg);
102
96
  borderColor.value = toColor(border);
103
- textColor.value = toColor(text);
97
+ textColor.value = loadingVal === 1 ? "rgba(0, 0, 0, 0)" : text;
104
98
  underline.value = pressedVal;
105
99
  }, [variant]);
106
100
  return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled.value === 1, onPressIn: () => {
@@ -113,7 +107,7 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
113
107
  return;
114
108
  }
115
109
  pressed.value = 0;
116
- }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, children: (0, jsx_runtime_1.jsx)(__1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [{ borderWidth: 1, borderRadius: 50, overflow: "hidden" }, containerColorsAnim], children: (0, jsx_runtime_1.jsxs)(__1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(__1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(__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)(__1.Spacer, { x: 0.5 })] })) : null, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), !__TEST__ && ((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)(__1.Spacer, { x: 0.5 }), icon] })) : null, loading.value === 1 ? ((0, jsx_runtime_1.jsx)(__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] }) }) }) }));
110
+ }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, children: (0, jsx_runtime_1.jsx)(__1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [{ borderWidth: 1, borderRadius: 50, overflow: "hidden" }, containerColorsAnim], children: [(0, jsx_runtime_1.jsxs)(__1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(__1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(__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)(__1.Spacer, { x: 0.5 })] })) : null, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), !__TEST__ && ((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)(__1.Spacer, { x: 0.5 }), icon] })) : null] }), loading.value === 1 ? ((0, jsx_runtime_1.jsx)(__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
111
  };
118
112
  exports.Button = Button;
119
113
  const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
package/dist/elements/Button/Button.stories.js CHANGED
@@ -48,7 +48,7 @@ const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { ch
48
48
  exports.TheCTAButton = TheCTAButton;
49
49
  const TheLinkButton = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsx)(_1.LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
50
50
  exports.TheLinkButton = TheLinkButton;
51
- const Miscellaneous = () => ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(atoms_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(atoms_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(atoms_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(atoms_1.Box, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(atoms_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
51
+ const Miscellaneous = () => ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(_1.Button, { loading: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "loading and disabled with icon" }), (0, jsx_runtime_1.jsx)(_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(atoms_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(atoms_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(atoms_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(atoms_1.Box, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(atoms_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
52
52
  exports.Miscellaneous = Miscellaneous;
53
53
  const Playground = () => {
54
54
  const [loading, setLoading] = (0, react_1.useState)(false);
package/dist/elements/Button/colors.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ButtonProps } from "../..";
2
2
  import { NoUndefined } from "../../utils/types";
3
- type State = "disabled" | "loading" | "pressed" | "active";
3
+ type State = "disabled" | "pressed" | "active";
4
4
  export declare const useColorsForVariantAndState: () => Record<NoUndefined<ButtonProps["variant"]>, Record<State, {
5
5
  bg: string;
6
6
  border: string;
package/dist/elements/Button/colors.js CHANGED
@@ -7,13 +7,11 @@ const useColorsForVariantAndState = () => {
7
7
  return {
8
8
  fillDark: {
9
9
  disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
10
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
11
10
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
12
11
  active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
13
12
  },
14
13
  fillLight: {
15
14
  disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
16
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
17
15
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
18
16
  active: {
19
17
  bg: color("white100"),
@@ -23,13 +21,11 @@ const useColorsForVariantAndState = () => {
23
21
  },
24
22
  fillGray: {
25
23
  disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
26
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
27
24
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
28
25
  active: { bg: color("black10"), border: color("black10"), text: color("black100") },
29
26
  },
30
27
  fillSuccess: {
31
28
  disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
32
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
33
29
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
34
30
  active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
35
31
  },
@@ -39,7 +35,6 @@ const useColorsForVariantAndState = () => {
39
35
  border: color("onBackgroundLow"),
40
36
  text: color("onBackgroundLow"),
41
37
  },
42
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
43
38
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
44
39
  active: {
45
40
  bg: color("background"),
@@ -53,7 +48,6 @@ const useColorsForVariantAndState = () => {
53
48
  border: color("black30"),
54
49
  text: color("black30"),
55
50
  },
56
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
57
51
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
58
52
  active: {
59
53
  bg: color("white100"),
@@ -67,7 +61,6 @@ const useColorsForVariantAndState = () => {
67
61
  border: color("black30"),
68
62
  text: color("black30"),
69
63
  },
70
- loading: { bg: color("blue100"), border: color("blue100"), text: "transparent" },
71
64
  pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
72
65
  active: {
73
66
  bg: "rgba(0, 0, 0, 0)",
@@ -77,7 +70,6 @@ const useColorsForVariantAndState = () => {
77
70
  },
78
71
  text: {
79
72
  disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
80
- loading: { bg: color("black10"), border: color("black10"), text: "transparent" },
81
73
  pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
82
74
  active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
83
75
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "8.7.1",
3
+ "version": "8.7.2",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "android": "react-native run-android",
@@ -18,6 +18,7 @@
18
18
  "release": "auto shipit",
19
19
  "setup:artsy": "./scripts/download-fonts",
20
20
  "start": "react-native start",
21
+ "start:reset-cache": "react-native start --reset-cache",
21
22
  "storybook-watcher": "sb-rn-watcher",
22
23
  "test": "jest",
23
24
  "test:w": "jest --watch"
@@ -96,7 +97,7 @@
96
97
  "react-native-flipper": "0.178.1",
97
98
  "react-native-haptic-feedback": "1.14.0",
98
99
  "react-native-linear-gradient": "2.6.2",
99
- "react-native-reanimated": "2.14.4",
100
+ "react-native-reanimated": "2.13.0",
100
101
  "react-native-safe-area-context": "4.5.0",
101
102
  "react-native-svg": "13.7.0",
102
103
  "react-test-renderer": "18.2.0",