@artsy/palette-mobile 13.0.24 → 13.0.25

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v13.0.25 (Wed Nov 22 2023)
+
+#### 🐛 Bug Fix
+
+- feat: support dotted pill [#169](https://github.com/artsy/palette-mobile/pull/169) ([@MounirDhahri](https://github.com/MounirDhahri))
+
+#### Authors: 1
+
+- Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
+
+---
+
 # v13.0.24 (Fri Nov 17 2023)
 
 #### 🐛 Bug Fix

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", "profile", "badge"];
+export declare const PILL_VARIANT_NAMES: readonly ["badge", "default", "dotted", "filter", "profile", "search"];
 export type PillState = "default" | "selected" | "disabled";
 export type PillVariant = typeof PILL_VARIANT_NAMES[number];
 export type PillProps = (FlexProps & {
@@ -11,7 +11,7 @@ export type PillProps = (FlexProps & {
     Icon?: React.FC<IconProps>;
     onPress?: MotiPressableProps["onPress"];
 }) & ({
-    variant?: Extract<PillVariant, "default" | "filter" | "badge" | "search">;
+    variant?: Extract<PillVariant, "default" | "filter" | "badge" | "search" | "dotted">;
     src?: never;
 } | {
     variant: Extract<PillVariant, "profile">;

package/dist/elements/Pill/Pill.js

@@ -36,7 +36,14 @@ 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", "profile", "badge"];
+exports.PILL_VARIANT_NAMES = [
+    "badge",
+    "default",
+    "dotted",
+    "filter",
+    "profile",
+    "search",
+];
 const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
     const stateString = selected ? "selected" : disabled ? "disabled" : "default";
     const color = TEXT_COLOR[variant][stateString];
@@ -86,6 +93,18 @@ const PILL_STATES = {
 };
 const PILL_VARIANTS = {
     default: PILL_STATES,
+    dotted: {
+        ...PILL_STATES,
+        default: (0, styled_components_1.css) `
+      ${PILL_STATES.default}
+      border-style: dashed;
+    `,
+        selected: (0, styled_components_1.css) `
+      ${PILL_STATES.selected}
+      background-color: ${(0, theme_get_1.default)("colors.black60")};
+      border-color: ${(0, theme_get_1.default)("colors.black60")};
+    `,
+    },
     search: {
         ...PILL_STATES,
         default: (0, styled_components_1.css) `
@@ -140,6 +159,7 @@ const defaultColors = {
 };
 const TEXT_COLOR = {
     default: defaultColors,
+    dotted: defaultColors,
     search: defaultColors,
     profile: {
         ...defaultColors,

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

@@ -16,7 +16,7 @@ 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: "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" })] })] })))
+    }, 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: "Unique" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Painting" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Sculpture" })] }), (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);

package/package.json

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