@artsy/palette-mobile 13.0.12 → 13.0.14

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v13.0.14 (Thu Sep 28 2023)
+
+#### 🐛 Bug Fix
+
+- fix: remove unnecessary padding from IconComponent in Message [#157](https://github.com/artsy/palette-mobile/pull/157) ([@MounirDhahri](https://github.com/MounirDhahri))
+
+#### Authors: 1
+
+- Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
+
+---
+
+# v13.0.13 (Thu Sep 28 2023)
+
+#### 🐛 Bug Fix
+
+- feat(DIA-110): remove artist variant and replaces with profile on Pill element [#155](https://github.com/artsy/palette-mobile/pull/155) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v13.0.12 (Tue Sep 19 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Message/Message.js

@@ -33,7 +33,7 @@ const Message = ({ bodyTextStyle, containerStyle, IconComponent, iconPosition =
                     }),
                 },
             ],
-        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text }))] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text }))] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
 };
 exports.Message = Message;
 const colors = {

package/dist/elements/Pill/Pill.d.ts

@@ -2,7 +2,7 @@
 import { MotiPressableProps } from "moti/interactions";
 import { IconProps } from "../../svgs/Icon";
 import { FlexProps } from "../Flex";
-export declare const PILL_VARIANT_NAMES: readonly ["default", "search", "filter", "artist", "badge"];
+export declare const PILL_VARIANT_NAMES: readonly ["default", "search", "filter", "profile", "badge"];
 export type PillState = "default" | "selected" | "disabled";
 export type PillVariant = typeof PILL_VARIANT_NAMES[number];
 export type PillProps = (FlexProps & {
@@ -14,7 +14,7 @@ export type PillProps = (FlexProps & {
     variant?: Extract<PillVariant, "default" | "filter" | "badge" | "search">;
     src?: never;
 } | {
-    variant: Extract<PillVariant, "artist">;
+    variant: Extract<PillVariant, "profile">;
     src?: string;
 });
 export declare const Pill: React.FC<PillProps>;

package/dist/elements/Pill/Pill.js

@@ -36,16 +36,17 @@ const svgs_1 = require("../../svgs");
 const Flex_1 = require("../Flex");
 const Image_1 = require("../Image");
 const Text_1 = require("../Text");
-exports.PILL_VARIANT_NAMES = ["default", "search", "filter", "artist", "badge"];
+exports.PILL_VARIANT_NAMES = ["default", "search", "filter", "profile", "badge"];
 const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
     const stateString = selected ? "selected" : disabled ? "disabled" : "default";
     const color = TEXT_COLOR[variant][stateString];
+    const showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(() => ({ hovered, pressed }) => {
                 "worklet";
                 return {
                     opacity: hovered || pressed ? 0.5 : 1,
                 };
-            }, []), children: [variant === "artist" && ((0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30, style: { overflow: "hidden" } })), 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, children: children }), ((variant === "filter" && !disabled) || (variant === "artist" && selected)) && ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 }))] }) }));
+            }, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30, style: { overflow: "hidden" } })), 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, children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
 };
 exports.Pill = Pill;
 const Container = (0, styled_components_1.default)(interactions_1.MotiPressable) `
@@ -93,11 +94,13 @@ const PILL_VARIANTS = {
       ${PILL_STATES.default}
     `,
     },
-    artist: {
+    profile: {
         default: (0, styled_components_1.css) `
+      background-color: ${(0, theme_get_1.default)("colors.black5")};
+      border-color: ${(0, theme_get_1.default)("colors.black5")};
       border-radius: 25px;
       height: 50px;
-      padding: 0 ${(0, theme_get_1.default)("space.2")} 0 ${(0, theme_get_1.default)("space.1")};
+      padding: 0 ${(0, theme_get_1.default)("space.2")}};
     `,
         selected: (0, styled_components_1.css) `
       border-color: ${(0, theme_get_1.default)("colors.blue100")};
@@ -140,7 +143,7 @@ const defaultColors = {
 const TEXT_COLOR = {
     default: defaultColors,
     search: defaultColors,
-    artist: {
+    profile: {
         ...defaultColors,
         selected: "black100",
     },

package/dist/elements/Pill/Pill.stories.js

@@ -16,8 +16,8 @@ exports.default = {
         marginHorizontal: 20,
         justifyContent: "flex-start",
         alignItems: "flex-start",
-    }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Search" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
-    .add("Artist with image", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", src: src, children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", src: src, selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
+    }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", children: "Profile" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Search" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
+    .add("Profile with image", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
     .add("Controlled state", () => {
     const [selected, setSelected] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.12",
+  "version": "13.0.14",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",