paris 0.13.6 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # paris
 
+## 0.14.1
+
+### Patch Changes
+
+- ffa4d0c: InformationalTooltip: Removed `headingIcon` prop
+- ffa4d0c: InformationalTooltip: Opens onClick for mobile support, new `disableClick` prop to disable that behavior
+
+## 0.14.0
+
+### Minor Changes
+
+- a805866: Select: added `multiple` prop to convert listbox into a multiselect
+
+### Patch Changes
+
+- fa49d95: Select: updated hover state for segemented control
+- fa49d95: InformationalTooltip: added `defaultOpen` prop, replacing previous `open` prop
+- fa49d95: InformationalTooltip: added exit animation, and animations use duration theme variables
+
 ## 0.13.6
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.13.6",
+  "version": "0.14.1",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/informationaltooltip/InformationalTooltip.module.scss

@@ -20,5 +20,4 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding-left: 1px;
 }

package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { createElement } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { InformationalTooltip } from './InformationalTooltip';
 
 const meta: Meta<typeof InformationalTooltip> = {
@@ -13,17 +11,15 @@ const meta: Meta<typeof InformationalTooltip> = {
 export default meta;
 type Story = StoryObj<typeof InformationalTooltip>;
 
-const render: Story['render'] = (args) =>
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    createElement('div', {
-        style: { minHeight: '200px' },
-    }, createElement(InformationalTooltip, {
-        ...args,
-    }));
+const render: Story['render'] = (args) => createElement('div', {
+    style: { minHeight: '200px' },
+}, createElement(InformationalTooltip, {
+    ...args,
+}));
 
 export const Default: Story = {
     args: {
-        children: 'If you are being payed on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
+        children: 'If you are being paid on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
         heading: 'Quarterly taxes',
     },
     render,
@@ -51,15 +47,6 @@ export const CustomTrigger: Story = {
     render,
 };
 
-export const Open: Story = {
-    args: {
-        children: 'Open boolean set to true',
-        size: 'medium',
-        open: true,
-    },
-    render,
-};
-
 export const CustomAlign: Story = {
     args: {
         children: 'With some text below',
@@ -74,26 +61,3 @@ export const CustomAlign: Story = {
     },
     render,
 };
-
-export const HeadingIcon: Story = {
-    args: {
-        children: 'This is a medium tooltip with a heading',
-        size: 'medium',
-        headingIcon: (createElement(FontAwesomeIcon, {
-            icon: faPlus,
-            width: '14px',
-        })),
-        heading: 'Custom icon',
-    },
-    render,
-};
-
-export const NullIcon: Story = {
-    args: {
-        children: 'But the headingIcon is null',
-        size: 'medium',
-        headingIcon: null,
-        heading: 'This has a heading',
-    },
-    render,
-};

package/src/stories/informationaltooltip/InformationalTooltip.tsx

@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import styles from './InformationalTooltip.module.scss';
 import { TextWhenString } from '../utility';
 import { Icon, Info } from '../icon';
-import { pvar } from '../theme';
+import { pvar, pget } from '../theme';
 
 export type InformationalTooltipProps = {
     /**
@@ -18,8 +19,6 @@ export type InformationalTooltipProps = {
     trigger?: ReactNode;
     /** The heading text in the tooltip. If null, the heading will be hidden. */
     heading?: string | null;
-    /** The heading icon in the tooltip. If undefined, will show info icon. If pass in an element, it will display in the heading. If set to null, will hide icon. */
-    headingIcon?: ReactNode | null | undefined;
     /** The contents of the tooltip. */
     children?: ReactNode;
     /**
@@ -41,15 +40,15 @@ export type InformationalTooltipProps = {
      */
     align?: 'start' | 'center' | 'end';
     /**
-     * The tooltip's open state.
+     * Whether the tooltip should be open by default.
+     * @default false
      */
-    open?: boolean;
+    defaultOpen?: boolean;
     /**
-     * Event handler called when the open state of the tooltip changes.
-     *
-     * @param value {boolean} - The new open state of the tooltip.
+     * By default, tooltip opens on hover and on click (for mobile support). If you want to disable the click event, set this to true.
+     * @default false
      */
-    onOpenChange?: (value: boolean) => void | Promise<void>;
+    disableClick?: boolean;
 };
 
 /**
@@ -68,58 +67,92 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
     size = 'large',
     trigger,
     heading,
-    headingIcon,
     children,
     side = 'bottom',
     sideOffset = 6,
     align = 'start',
-    open,
-    onOpenChange,
-}) => (
-    <RadixTooltip.Provider
-        delayDuration={150}
-    >
-        <RadixTooltip.Root
-            open={open}
-            onOpenChange={onOpenChange}
+    defaultOpen = false,
+    disableClick = false,
+}) => {
+    const [isOpen, setOpen] = useState(defaultOpen);
+
+    /**
+     * Converts a CSS time value string to milliseconds
+     * @param timeValue - The CSS time value (e.g. '100ms', '0.5s')
+     * @returns The time value in milliseconds
+     * @throws Error if the time value format is invalid
+     */
+    const parseCSSTime = (timeValue: string): number => {
+        // Match the value and unit
+        const match = timeValue.match(/^([\d.]+)(ms|s)$/);
+
+        if (!match) {
+            console.warn('Invalid CSS time format. Expected formats: "100ms", "0.5s"');
+            return 0;
+        }
+
+        const [, value, unit] = match;
+        const numValue = parseFloat(value);
+
+        // Convert to milliseconds based on the unit
+        return unit === 's' ? numValue * 1000 : numValue;
+    };
+
+    return (
+        <RadixTooltip.Provider
+            delayDuration={parseCSSTime(pget('new.animations.duration.normal'))}
         >
-            <RadixTooltip.Trigger>
-                {!trigger ? (
-                    <Icon icon={Info} size={14} className={styles.icon} style={{ color: pvar('new.colors.contentSecondary') }} />
-                ) : (
-                    <>
-                        {trigger}
-                    </>
-                )}
-            </RadixTooltip.Trigger>
-            <RadixTooltip.Portal>
-                <RadixTooltip.Content
-                    side={side}
-                    sideOffset={sideOffset}
-                    align={align}
+            <RadixTooltip.Root
+                open={isOpen}
+                onOpenChange={setOpen}
+            >
+                <RadixTooltip.Trigger
+                    onClick={() => {
+                        if (!disableClick) {
+                            setOpen(!isOpen);
+                        }
+                    }}
                 >
-                    <motion.div
-                        initial={{ opacity: 0, y: 3 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.2 }}
-                        className={clsx(styles.tooltip, styles[size])}
-                    >
-                        {heading && (
-                            <div className={styles.heading}>
-                                {headingIcon === null ? null : headingIcon || (
-                                    <Icon icon={Info} size={14} className={styles.icon} />
-                                )}
-                                <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
-                                    {heading}
-                                </TextWhenString>
-                            </div>
-                        )}
-                        <TextWhenString as="p" kind="paragraphXSmall">
-                            {children}
-                        </TextWhenString>
-                    </motion.div>
-                </RadixTooltip.Content>
-            </RadixTooltip.Portal>
-        </RadixTooltip.Root>
-    </RadixTooltip.Provider>
-);
+                    {!trigger ? (
+                        <Icon icon={Info} size={14} className={styles.icon} style={{ color: pvar('new.colors.contentSecondary') }} />
+                    ) : (
+                        <>
+                            {trigger}
+                        </>
+                    )}
+                </RadixTooltip.Trigger>
+                <AnimatePresence>
+                    {isOpen && (
+                        <RadixTooltip.Portal forceMount>
+                            <RadixTooltip.Content
+                                side={side}
+                                sideOffset={sideOffset}
+                                align={align}
+                                asChild
+                            >
+                                <motion.div
+                                    initial={{ opacity: 0, y: 3 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: 3 }}
+                                    transition={{ duration: parseCSSTime(pget('new.animations.duration.normal')) / 1000 }}
+                                    className={clsx(styles.tooltip, styles[size])}
+                                >
+                                    {heading && (
+                                        <div className={styles.heading}>
+                                            <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
+                                                {heading}
+                                            </TextWhenString>
+                                        </div>
+                                    )}
+                                    <TextWhenString as="p" kind="paragraphXSmall">
+                                        {children}
+                                    </TextWhenString>
+                                </motion.div>
+                            </RadixTooltip.Content>
+                        </RadixTooltip.Portal>
+                    )}
+                </AnimatePresence>
+            </RadixTooltip.Root>
+        </RadixTooltip.Provider>
+    );
+};

package/src/stories/select/Select.module.scss

@@ -281,8 +281,7 @@
     }
 
     &:hover {
-        background-color: var(--pte-new-colors-surfaceSecondary);
-        color: var(--pte-new-colors-contentSecondary);
+        color: var(--pte-new-colors-contentPrimary);
     }
 
     &[data-headlessui-state~="checked"] {

package/src/stories/select/Select.stories.ts

@@ -15,13 +15,20 @@ type Story = StoryObj<typeof Select>;
 const render: Story['render'] = (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState<string | null>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selectedMultiple, setSelectedMultiple] = useState<string[] | null>([]);
     return createElement('div', {
         style: { minHeight: '400px' },
-    }, createElement(Select, {
+    }, createElement(Select, args.multiple ? {
         ...args,
-        value: selected,
-        onChange: (e) => setSelected(e),
-    }));
+        value: selectedMultiple,
+        onChange: (value: string[] | null) => setSelectedMultiple(value),
+    }
+        : {
+            ...args,
+            value: selected,
+            onChange: (value: string | null) => setSelected(value),
+        }));
 };
 
 export const Default: Story = {
@@ -112,6 +119,21 @@ export const Card: Story = {
     render,
 };
 
+export const Multiple: Story = {
+    args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
+        options: [
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
+        ],
+        multiple: true,
+        multipleItemsName: 'releases',
+    },
+    render,
+};
+      
 export const Segmented: Story = {
     args: {
         label: 'Donation',

package/src/stories/select/Select.tsx

@@ -29,7 +29,7 @@ export type Option<T = Record<string, any>> = {
     disabled?: boolean,
     metadata?: T,
 };
-export type SelectProps<T = Record<string, any>> = {
+export type CommonSelectProps<T = Record<string, any>> = {
     /**
      * The  {@link Option}s to render in the select box.
      *
@@ -38,21 +38,6 @@ export type SelectProps<T = Record<string, any>> = {
      * For type safety, you can pass in a type parameter to `SelectProps` component. This will be used as the type for the `metadata` property of each option.
      */
     options: Option<T>[];
-    /**
-     * The option ID to render as selected in the select box.
-     *
-     * This should exactly match one of the option IDs passed in the `options` prop. If `null`, no option will be selected.
-     */
-    value?: Option<T>['id'] | null;
-    /**
-     * The interaction handler for the Select.
-     */
-    onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
-    /**
-     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
-     * @default listbox
-     */
-    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
     /**
      * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
      */
@@ -67,7 +52,6 @@ export type SelectProps<T = Record<string, any>> = {
      * @default compact
      */
     segmentedHeight?: 'compact' | 'tall';
-
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -83,6 +67,55 @@ export type SelectProps<T = Record<string, any>> = {
     }
 } & Omit<InputProps, 'type' | 'overrides'>;
 
+export type SingleSelectProps<T = Record<string, any>> = {
+    /**
+     * The option ID to render as selected in the select box.
+     *
+     * This should exactly match the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: Option<T>['id'] | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
+    /**
+     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
+     * @default listbox
+     */
+    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
+    multiple?: false;
+    multipleItemsName?: never;
+} & CommonSelectProps;
+
+export type MultiSelectProps<T = Record<string, any>> = {
+    /**
+     * Controls the text of the Multiselect button when multiple items selected, such as "All ___" or "2 ___"
+     * @default items
+     */
+    multipleItemsName?: string;
+    /**
+     * The visual variant of the Select. For multiselect, only `listbox` is supported.
+     * @default listbox
+     */
+    kind?: 'listbox',
+    /**
+     * Converts the single select into a multiselect.
+     */
+    multiple: true;
+    /**
+     * For multiselect, should be a string[] that matches the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: Option<T>['id'][] | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: Option<T>['id'][] | null) => void | Promise<void>;
+} & CommonSelectProps;
+
+type SelectProps<T = Record<string, any>> =
+    | (SingleSelectProps<T>)
+    | (MultiSelectProps<T>);
+
 /**
  * A Select component is used to render a `select` box.
  *
@@ -112,10 +145,25 @@ export const Select = forwardRef(function <T = Record<string, any>>({
     kind = 'listbox',
     maxHeight = 320,
     hasOptionBorder = false,
+    multiple = false,
+    multipleItemsName,
     segmentedHeight = 'compact',
     overrides,
 }: SelectProps<T>, ref: ForwardedRef<any>) {
     const inputID = useId();
+    const multiItems = multipleItemsName || 'items';
+    const buttonText = () => {
+        if (!value || value.length === 0) {
+            return placeholder || 'Select an option';
+        } if (!multiple) {
+            return options?.find((o) => o.id === value)?.node;
+        } if (value && value.length === 1) {
+            return options?.find((o) => o.id === value[0])?.node;
+        } if (value.length === options.length) {
+            return `All ${multiItems}`;
+        }
+        return `${value.length} ${multiItems}`;
+    };
     return (
         <Field
             htmlFor={inputID}
@@ -137,6 +185,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     ref={ref}
                     value={value}
                     onChange={onChange}
+                    multiple={multiple}
                 >
                     <Listbox.Button
                         id={inputID}
@@ -164,7 +213,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                 )}
                             </div>
                         )}
-                        {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
+                        {buttonText()}
                         {endEnhancer ? (
                             <div
                                 {...overrides?.endEnhancerContainer}
@@ -205,7 +254,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                 <Listbox.Option
                                     key={option.id}
                                     value={option.id}
-                                    data-selected={option.id === value}
+                                    data-selected={option.id === value || (value && value.includes(option.id))}
                                     className={clsx(
                                         overrides?.option,
                                         styles.option,
@@ -218,7 +267,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                             {option.node}
                                         </Text>
                                     ) : option.node}
-                                    {option.id === value && (
+                                    {(option.id === value || (value && value.includes(option.id))) && (
                                         <Icon icon={Check} size={12} />
                                     )}
                                 </Listbox.Option>