@artsy/palette-mobile 24.3.0 → 24.4.0

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 (3) hide show
  1. package/dist/elements/Pill/Pill.js +5 -2
  2. package/dist/elements/Pill/Pill.tests.js +16 -0
  3. package/package.json +1 -1
package/dist/elements/Pill/Pill.js CHANGED
@@ -88,6 +88,7 @@ var Pill = function (_a) {
88
88
  var stateString = selected ? "selected" : disabled ? "disabled" : "default";
89
89
  var color = TEXT_COLOR[variant][stateString];
90
90
  var showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
91
+ var _c = (0, react_1.useState)(false), isMultiline = _c[0], setIsMultiline = _c[1];
91
92
  return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(function () {
92
93
  return function (_a) {
93
94
  "worklet";
@@ -96,7 +97,9 @@ var Pill = function (_a) {
96
97
  opacity: hovered || pressed ? 0.5 : 1,
97
98
  };
98
99
  };
99
- }, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: (0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, style: react_native_1.Platform.select({
100
+ }, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: (0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, textAlign: variant === "onboarding" ? (isMultiline ? "left" : "center") : undefined, onTextLayout: variant === "onboarding"
101
+ ? function (event) { return setIsMultiline(event.nativeEvent.lines.length > 1); }
102
+ : undefined, style: react_native_1.Platform.select({
100
103
  android: { lineHeight: undefined },
101
104
  default: {},
102
105
  }), children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) })));
@@ -114,7 +117,7 @@ var PILL_STATES = {
114
117
  };
115
118
  var PILL_VARIANTS = {
116
119
  default: PILL_STATES,
117
- onboarding: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n border-radius: 20px;\n height: 40px;\n border-color: ", ";\n "], ["\n ", "\n border-radius: 20px;\n height: 40px;\n border-color: ", ";\n "])), PILL_STATES.default, (0, theme_get_1.default)("colors.mono60")) }),
120
+ onboarding: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 20px;\n padding-horizontal: 15px;\n padding-vertical: 10px;\n border-color: ", ";\n "], ["\n border-radius: 20px;\n padding-horizontal: 15px;\n padding-vertical: 10px;\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.mono60")) }),
118
121
  dotted: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n border-style: dashed;\n "], ["\n ", "\n border-style: dashed;\n "])), PILL_STATES.default), selected: (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n border-color: ", ";\n "], ["\n ", "\n background-color: ", ";\n border-color: ", ";\n "])), PILL_STATES.selected, (0, theme_get_1.default)("colors.mono10"), (0, theme_get_1.default)("colors.mono10")) }),
119
122
  search: __assign({}, PILL_STATES),
120
123
  profile: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-radius: 25px;\n height: 50px;\n padding: 0 ", ";\n "], ["\n background-color: ", ";\n border-color: ", ";\n border-radius: 25px;\n height: 50px;\n padding: 0 ", ";\n "])), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("space.1")), selected: (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.blue100")) }),
package/dist/elements/Pill/Pill.tests.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var jsx_runtime_1 = require("react/jsx-runtime");
4
4
  var react_native_1 = require("@testing-library/react-native");
5
+ var react_native_2 = require("react-native");
5
6
  var Pill_1 = require("./Pill");
6
7
  var Theme_1 = require("../../Theme");
7
8
  describe("Pill", function () {
@@ -17,4 +18,19 @@ describe("Pill", function () {
17
18
  react_native_1.fireEvent.press(react_native_1.screen.getByText("Press me"));
18
19
  expect(onPress).not.toHaveBeenCalled();
19
20
  });
21
+ it("switches the onboarding variant's text alignment from center to left once it wraps to multiple lines", function () {
22
+ (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", children: "Some label" }) }));
23
+ expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBe("center");
24
+ (0, react_native_1.fireEvent)(react_native_1.screen.getByText("Some label"), "textLayout", {
25
+ nativeEvent: { lines: [{}, {}] },
26
+ });
27
+ expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBe("left");
28
+ });
29
+ it("leaves other variants' text alignment untouched regardless of line count", function () {
30
+ (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "default", children: "Some label" }) }));
31
+ (0, react_native_1.fireEvent)(react_native_1.screen.getByText("Some label"), "textLayout", {
32
+ nativeEvent: { lines: [{}, {}] },
33
+ });
34
+ expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBeUndefined();
35
+ });
20
36
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "24.3.0",
3
+ "version": "24.4.0",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "workspaces": [
6
6
  "Example"