@artsy/palette-mobile 14.0.35 → 14.0.36

package/dist/elements/Radio/RadioButton.d.ts

@@ -3,17 +3,18 @@ import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import { Insets, TouchableWithoutFeedbackProps } from "react-native";
 import { FlexProps } from "../Flex";
 export interface RadioButtonProps extends Omit<TouchableWithoutFeedbackProps, "hitSlop">, Omit<FlexProps, "hitSlop"> {
-    hitSlop?: Insets;
-    selected?: boolean;
-    focused?: boolean;
+    accessibilityState?: {
+        checked: boolean;
+    };
+    block?: boolean;
     disabled?: boolean;
     error?: boolean;
+    focused?: boolean;
+    hitSlop?: Insets;
+    selected?: boolean;
+    subtitle?: React.ReactElement | string;
     text?: React.ReactElement | string;
     textVariant?: TextVariant;
-    subtitle?: React.ReactElement | string;
-    accessibilityState?: {
-        checked: boolean;
-    };
 }
 export declare const RadioButton: React.FC<RadioButtonProps>;
 interface RadioDotProps {

package/dist/elements/Radio/RadioButton.js

@@ -8,13 +8,13 @@ import { Flex } from "../Flex";
 import { Text } from "../Text";
 const RADIOBUTTON_SIZE = 20;
 const DURATION = 150;
-export const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "md", subtitle, accessibilityState, ...restProps }) => {
+export const RadioButton = ({ accessibilityState, block, disabled, error, onPress, selected, subtitle, text, textVariant = "md", ...restProps }) => {
     const { color, space } = useTheme();
     const fontScale = PixelRatio.getFontScale();
     const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
     const defaultRadioButtonStyle = {
         backgroundColor: color("white100"),
-        borderColor: color("black60"),
+        borderColor: color("black30"),
     };
     const selectedRadioButtonStyle = {
         backgroundColor: color("black100"),
@@ -39,17 +39,18 @@ export const RadioButton = ({ selected, disabled, error, onPress, text, textVari
         : radioButtonStyles[error ? "error" : "default"][selected ? "selected" : "notSelected"];
     const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
     const subtitleColor = error ? color("red100") : color("black30");
+    const AnimatedDot = (_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
+                styles(fontScale).container,
+                { marginRight: space(1) * fontScale },
+                radioButtonStyle,
+            ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
+                (!!disabled ? (_jsx(DisabledDot, { size: radioButtonSize })) : (_jsx(RadioDot, { size: radioButtonSize }))) }) }));
     return (_jsx(TouchableWithoutFeedback, { accessibilityState: accessibilityState, onPress: (event) => {
             if (disabled) {
                 return;
             }
             onPress?.(event);
-        }, children: _jsxs(Flex, { ...restProps, children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
-                                    styles(fontScale).container,
-                                    { marginRight: space(1) * fontScale },
-                                    radioButtonStyle,
-                                ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
-                                    (!!disabled ? (_jsx(DisabledDot, { size: radioButtonSize })) : (_jsx(RadioDot, { size: radioButtonSize }))) }) }), _jsx(Flex, { justifyContent: "center", children: !!text && (_jsx(Text, { variant: textVariant, color: textColor, children: text })) })] }), _jsx(Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && (_jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
+        }, children: _jsxs(Flex, { ...restProps, children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: block ? "space-between" : "flex-start", children: [!block && AnimatedDot, _jsx(Flex, { justifyContent: "center", children: !!text && (_jsx(Text, { variant: textVariant, color: textColor, children: text })) }), block && AnimatedDot] }), _jsx(Flex, { ml: block ? 0 : `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: block ? 0 : 0.5, children: !!subtitle && (_jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
 };
 // styled-component does not have support for Animated.View
 const styles = (fontScale) => StyleSheet.create({

package/dist/elements/Radio/RadioButton.stories.js

@@ -10,13 +10,15 @@ export default {
 };
 storiesOf("RadioButton", module).add("Default", () => {
     const [metric, setMetric] = useState("cm");
-    return (_jsx(List, { contentContainerStyle: {
+    return (_jsxs(List, { contentContainerStyle: {
             marginHorizontal: 20,
             justifyContent: "flex-start",
             alignItems: "flex-start",
-        }, children: _jsxs(Flex, { flexDirection: "row", gap: 2, children: [_jsx(RadioButton, { onPress: () => {
+        }, children: [_jsxs(Flex, { flexDirection: "row", gap: 2, children: [_jsx(RadioButton, { onPress: () => {
+                            setMetric("cm");
+                        }, selected: metric === "cm", text: "centimeters" }), _jsx(RadioButton, { onPress: () => {
+                            setMetric("in");
+                        }, selected: metric === "in", text: "inches" })] }), _jsx(Flex, { children: _jsx(RadioButton, { onPress: () => {
                         setMetric("cm");
-                    }, selected: metric === "cm", text: "centimeters" }), _jsx(RadioButton, { onPress: () => {
-                        setMetric("in");
-                    }, selected: metric === "in", text: "inches" })] }) }));
+                    }, block: true, selected: metric === "cm", text: "centimeters" }) })] }));
 });

package/dist/elements/Radio/RadioDot.js

@@ -1,54 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from "../Flex";
+const INACTIVE_BORDER_WIDTH = 2;
+const ACTIVE_BORDER_WIDTH = 4;
 export const RADIO_DOT_MODES = {
     default: {
         resting: {
-            borderWidth: 2,
-            borderColor: "black10",
+            borderWidth: INACTIVE_BORDER_WIDTH,
+            borderColor: "black30",
         },
         selected: {
-            borderWidth: 2,
+            borderWidth: ACTIVE_BORDER_WIDTH,
             borderColor: "black100",
-            backgroundColor: "black100",
         },
     },
     disabled: {
         resting: {
-            borderWidth: 2,
+            borderWidth: INACTIVE_BORDER_WIDTH,
             borderColor: "black10",
-            backgroundColor: "black10",
         },
         selected: {
-            borderWidth: 2,
+            borderWidth: ACTIVE_BORDER_WIDTH,
             borderColor: "black10",
-            backgroundColor: "black10",
         },
     },
     error: {
         resting: {
-            borderWidth: 2,
+            borderWidth: INACTIVE_BORDER_WIDTH,
             borderColor: "red100",
         },
         selected: {
-            borderWidth: 2,
+            borderWidth: ACTIVE_BORDER_WIDTH,
             borderColor: "black100",
-            backgroundColor: "black100",
         },
     },
     hover: {
         resting: {
-            borderWidth: 2,
+            borderWidth: INACTIVE_BORDER_WIDTH,
             borderColor: "black10",
-            backgroundColor: "black10",
         },
         selected: {
-            borderWidth: 2,
+            borderWidth: INACTIVE_BORDER_WIDTH,
             borderColor: "black100",
-            backgroundColor: "black100",
         },
     },
 };
-export const RadioDot = (props) => (_jsx(Container, { ...props, children: _jsx(Dot, { ...props }) }));
+export const RadioDot = (props) => (_jsx(Container, { ...props, children: _jsx(Dot, {}) }));
 const Container = ({ selected = false, hover = false, error = false, disabled = false, }) => {
     const mode = (() => {
         switch (true) {
@@ -65,4 +61,4 @@ const Container = ({ selected = false, hover = false, error = false, disabled =
     const moreProps = selected ? mode.selected : mode.resting;
     return (_jsx(Flex, { width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, ...moreProps }));
 };
-const Dot = ({ selected = false, disabled = false }) => (_jsx(Flex, { width: 10, height: 10, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, backgroundColor: disabled && !selected ? "transparent" : "white100" }));
+const Dot = () => (_jsx(Flex, { width: 12, height: 12, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0 }));

package/package.json

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