paris 0.17.6 → 0.17.8

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # paris
 
+## 0.17.8
+
+### Patch Changes
+
+- 0ca30b7: fix(drawer): make bottom panel spacer padding conditional on bottomPanelPadding prop
+  fix(accordionselect): add padding to check icon for better tap target
+  feat(combobox): add customValueOption override for independent styling
+
+## 0.17.7
+
+### Patch Changes
+
+- 188ed3e: AccordionSelect: new component for expandable selection groups
+  CardButton: added `kind` variants (`raised`, `surface`, `flat`) and `status` prop; removed SelectableCard
+  Drawer: added `bottomPanelPadding` prop for edge-to-edge footer layouts
+- 188ed3e: Checkbox: removed background hover from `panel` variant
+- 188ed3e: Drawer: removed padding from `bottomPanel` so footer elements can stretch edge-to-edge
+  Combobox: fixed stale options showing on re-focus by resetting query state on blur
+  Field: custom component labels now receive consistent styling with string labels
+  Dialog: `width` prop now accepts custom CSS lengths in addition to presets
+
 ## 0.17.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.17.6",
+  "version": "0.17.8",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -33,6 +33,7 @@
   "exports": {
     "./*": "./src/stories/*",
     "./accordion": "./src/stories/accordion/index.ts",
+    "./accordionselect": "./src/stories/accordionselect/index.ts",
     "./avatar": "./src/stories/avatar/index.ts",
     "./button": "./src/stories/button/index.ts",
     "./callout": "./src/stories/callout/index.ts",

package/src/stories/accordionselect/AccordionSelect.module.scss

@@ -0,0 +1,107 @@
+.root {
+    color: var(--pte-new-colors-contentPrimary);
+    border: 1px solid var(--pte-new-colors-borderStrong);
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+    background: var(--pte-new-colors-surfacePrimary);
+    overflow: hidden;
+    transition: var(--pte-animations-interaction);
+
+    &.open {
+        border-color: var(--pte-new-colors-borderUltrastrong);
+    }
+}
+
+.header {
+    padding: 10px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    background-color: var(--pte-new-colors-overlayWhiteSubtle);
+    cursor: pointer;
+    transition: var(--pte-animations-interaction);
+
+    &.open {
+        background-color: var(--pte-new-colors-overlayMedium);
+        border-bottom: 1px solid var(--pte-new-colors-borderStrong);
+    }
+
+    &:hover {
+        background-color: var(--pte-new-colors-overlayStrong);
+    }
+}
+
+.headerContent {
+    flex: 1;
+    min-width: 0;
+}
+
+.headerEnd {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.chevron {
+    transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
+    transform: rotate(90deg);
+
+    &.open {
+        transform: rotate(-90deg);
+    }
+}
+
+.dropdown {
+    overflow: hidden;
+}
+
+.dropdownContent {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    gap: 0;
+}
+
+.option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background var(--pte-animations-duration-instant) var(--pte-animations-timing-easeInOutExpo);
+
+    &:last-of-type {
+        border-bottom: none;
+    }
+
+    &[data-selected='true'] {
+        background: var(--pte-new-colors-overlaySubtle);
+    }
+
+    &:hover {
+        background: var(--pte-new-colors-overlayMedium);
+    }
+
+    &:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+
+        &:hover {
+            background: transparent;
+        }
+    }
+
+    .check {
+        padding: 4px;
+    }
+}
+
+.optionContent {
+    flex: 1;
+    text-align: left;
+    min-width: 0;
+}

package/src/stories/accordionselect/AccordionSelect.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccordionSelect } from './AccordionSelect';
+
+const meta: Meta<typeof AccordionSelect> = {
+    title: 'Inputs/AccordionSelect',
+    component: AccordionSelect,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionSelect>;
+
+const options = [
+    { id: 'champagne', node: 'In an alleyway, drinking champagne' },
+    { id: 'rooftop', node: 'On a rooftop, watching the sunset' },
+    { id: 'garden', node: 'In a garden, under the stars' },
+];
+
+export const Default: Story = {
+    args: {
+        options,
+        value: 'champagne',
+    },
+};
+
+export const NoSelection: Story = {
+    args: {
+        options,
+        placeholder: 'Where were we?',
+    },
+};
+
+export const WithDisabledOption: Story = {
+    args: {
+        options: [
+            ...options,
+            { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true },
+        ],
+        value: 'champagne',
+    },
+};

package/src/stories/accordionselect/AccordionSelect.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import {
+    useCallback, useEffect, useRef, useState,
+} from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { clsx } from 'clsx';
+import { Check, ChevronRight, Icon } from '../icon';
+import { TextWhenString } from '../utility';
+import styles from './AccordionSelect.module.scss';
+
+export type AccordionSelectOption<T = Record<string, unknown>> = {
+    /**
+     * A unique identifier for the option.
+     */
+    id: string;
+    /**
+     * The content to render for this option.
+     */
+    node: ReactNode;
+    /**
+     * Whether this option is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional metadata associated with the option.
+     */
+    metadata?: T;
+};
+
+export type AccordionSelectProps<T = Record<string, unknown>> = {
+    /**
+     * The list of selectable options.
+     */
+    options: AccordionSelectOption<T>[];
+    /**
+     * The currently selected option ID.
+     */
+    value?: string | null;
+    /**
+     * Called when the user selects an option.
+     */
+    onChange?: (option: AccordionSelectOption<T>) => void;
+    /**
+     * Custom content to render as the header when an option is selected.
+     * Receives the selected option. If not provided, the option's `node` is used.
+     */
+    renderSelected?: (option: AccordionSelectOption<T>) => ReactNode;
+    /**
+     * Custom content to render for each option in the dropdown.
+     * Receives the option and whether it's selected. If not provided, the option's `node` is used.
+     */
+    renderOption?: (option: AccordionSelectOption<T>, isSelected: boolean) => ReactNode;
+    /**
+     * Placeholder to show when no option is selected.
+     * @default 'Select an option'
+     */
+    placeholder?: ReactNode;
+    /**
+     * Whether the accordion is open. If provided, the component becomes controlled.
+     */
+    isOpen?: boolean;
+    /**
+     * Called when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether to close the accordion when an option is selected.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Whether to close the accordion when clicking outside.
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Optional action to render at the bottom of the options list (e.g. "Add new" button).
+     */
+    action?: ReactNode;
+    /**
+     * Optional label to display on the header (e.g. a Tag).
+     */
+    label?: ReactNode;
+    /**
+     * Optional overrides for nested components.
+     */
+    overrides?: {
+        root?: ComponentPropsWithoutRef<'div'>;
+        header?: ComponentPropsWithoutRef<'div'>;
+        dropdown?: ComponentPropsWithoutRef<'div'>;
+        dropdownContent?: ComponentPropsWithoutRef<'div'>;
+        option?: ComponentPropsWithoutRef<'button'>;
+    };
+};
+
+/**
+ * An AccordionSelect component. Displays the selected option in a card header that expands to reveal all options.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { AccordionSelect } from 'paris/accordionselect';
+ * ```
+ * @constructor
+ */
+export const AccordionSelect: FC<AccordionSelectProps> = ({
+    options,
+    value,
+    onChange,
+    renderSelected,
+    renderOption,
+    placeholder = 'Select an option',
+    isOpen: controlledOpen,
+    onOpenChange,
+    closeOnSelect = true,
+    closeOnClickOutside = true,
+    action,
+    label,
+    overrides,
+}) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen ?? internalOpen;
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    const setOpen = useCallback((nextOpen: boolean) => {
+        setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange]);
+
+    const selectedOption = options.find((o) => o.id === value);
+
+    useEffect(() => {
+        if (!closeOnClickOutside || !open) {
+            return () => { };
+        }
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+                setOpen(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [closeOnClickOutside, open, setOpen]);
+
+    let headerContent: ReactNode = placeholder;
+    if (selectedOption) {
+        headerContent = renderSelected
+            ? renderSelected(selectedOption)
+            : selectedOption.node;
+    }
+
+    return (
+        <div
+            ref={rootRef}
+            {...overrides?.root}
+            className={clsx(
+                styles.root,
+                open && styles.open,
+                overrides?.root?.className,
+            )}
+        >
+            <div
+                {...overrides?.header}
+                className={clsx(
+                    styles.header,
+                    open && styles.open,
+                    overrides?.header?.className,
+                )}
+                onClick={() => setOpen(!open)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setOpen(!open);
+                    }
+                }}
+                role="button"
+                tabIndex={0}
+            >
+                <div className={styles.headerContent}>
+                    <TextWhenString kind="paragraphSmall" weight="medium">
+                        {headerContent}
+                    </TextWhenString>
+                </div>
+                <div className={styles.headerEnd}>
+                    {label}
+                    <Icon
+                        icon={ChevronRight}
+                        size={16}
+                        className={clsx(styles.chevron, open && styles.open)}
+                    />
+                </div>
+            </div>
+
+            <AnimatePresence>
+                {open && (
+                    <motion.div
+                        key="content"
+                        initial="collapsed"
+                        animate="open"
+                        exit="collapsed"
+                        variants={{
+                            open: { opacity: 1, height: 'auto' },
+                            collapsed: { opacity: 0, height: 0 },
+                        }}
+                        transition={{
+                            duration: 0.8,
+                            ease: [0.87, 0, 0.13, 1],
+                        }}
+                        className={clsx(
+                            styles.dropdown,
+                            overrides?.dropdown?.className,
+                        )}
+                    >
+                        <div
+                            {...overrides?.dropdownContent}
+                            className={clsx(
+                                styles.dropdownContent,
+                                overrides?.dropdownContent?.className,
+                            )}
+                        >
+                            {options.map((option) => {
+                                const isOptionSelected = option.id === value;
+                                return (
+                                    <button
+                                        key={option.id}
+                                        type="button"
+                                        disabled={option.disabled}
+                                        data-selected={isOptionSelected}
+                                        {...overrides?.option}
+                                        className={clsx(
+                                            styles.option,
+                                            overrides?.option?.className,
+                                        )}
+                                        onClick={() => {
+                                            onChange?.(option);
+                                            if (closeOnSelect) setOpen(false);
+                                        }}
+                                    >
+                                        <div className={styles.optionContent}>
+                                            {renderOption
+                                                ? renderOption(option, isOptionSelected)
+                                                : (
+                                                    <TextWhenString kind="paragraphXSmall" weight="medium">
+                                                        {option.node}
+                                                    </TextWhenString>
+                                                )}
+                                        </div>
+                                        {isOptionSelected && (
+                                            <Icon icon={Check} size={13} className={styles.check} />
+                                        )}
+                                    </button>
+                                );
+                            })}
+                            {action}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};

package/src/stories/accordionselect/index.ts

@@ -0,0 +1 @@
+export * from './AccordionSelect';

package/src/stories/checkbox/Checkbox.module.scss

@@ -115,9 +115,9 @@
             color: var(--pte-new-colors-contentDisabled);
         }
 
-        &:hover {
-            background-color: var(--pte-new-colors-overlaySubtle);
-        }
+        //&:hover {
+        //    background-color: var(--pte-new-colors-overlaySubtle);
+        //}
 
         .box {
             width: 13px;

package/src/stories/combobox/Combobox.stories.ts

@@ -164,6 +164,47 @@ export const AllowCustomValue: Story = {
     },
 };
 
+export const CustomValueWithDivider: Story = {
+    args: {
+        ...ComboboxArgs,
+        allowCustomValue: true,
+        customValueString: 'Add "%v"',
+    },
+    render: function Render(args) {
+        const [selected, setSelected] = useState<Option | null>(null);
+        const [inputValue, setInputValue] = useState<string>('');
+        return createElement(
+            'div',
+            {
+                style: { minHeight: '200px' },
+            },
+            createElement(Combobox<{ name: string }>, {
+                ...args,
+                value:
+          selected?.id === null
+              ? {
+                  id: null,
+                  node: inputValue,
+                  metadata: {
+                      name: inputValue,
+                  },
+              }
+              : (selected as Option<{ name: string }> | null),
+                options: (args.options as Option<{ name: string }>[]).filter((o) => ((o.metadata?.name as string) || '')
+                    .toLowerCase()
+                    .includes(inputValue.toLowerCase())),
+                onChange: (e) => setSelected(e),
+                onInputChange: (e) => setInputValue(e),
+                overrides: {
+                    customValueOption: {
+                        style: { borderBottom: '5px solid var(--pte-new-colors-borderMedium)' },
+                    },
+                },
+            }),
+        );
+    },
+};
+
 export const HideOptionsInitially: Story = {
     args: ComboboxArgs,
     render: function Render(args) {

package/src/stories/combobox/Combobox.tsx

@@ -113,6 +113,7 @@ export type ComboboxProps<T extends Record<string, any>> = {
         input?: ComponentPropsWithoutRef<'input'>;
         optionsContainer?: ComponentPropsWithoutRef<'ul'>;
         option?: ComponentPropsWithoutRef<'li'>;
+        customValueOption?: ComponentPropsWithoutRef<'li'>;
         label?: TextProps<'label'>;
         description?: TextProps<'p'>;
         startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
@@ -319,10 +320,10 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                 value={query}
                                 data-selected={false}
                                 className={clsx(
-                                    overrides?.option?.className,
+                                    overrides?.customValueOption?.className,
                                     styles.option,
                                 )}
-                                {...overrides?.option}
+                                {...overrides?.customValueOption}
                             >
                                 <Text as="span" kind="paragraphSmall">
                                     {customValueString.replace('%v', query)}

package/src/stories/dialog/Dialog.tsx

@@ -3,7 +3,8 @@
 import type {
     ComponentPropsWithoutRef, FC, MouseEventHandler, PropsWithChildren, ReactNode,
 } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { CSSLength } from '@ssh/csstypes';
 import {
     Dialog as HDialog, DialogPanel, DialogTitle, Transition, TransitionChild,
 } from '@headlessui/react';
@@ -16,6 +17,8 @@ import { VisuallyHidden } from '../utility/VisuallyHidden';
 import { RemoveFromDOM } from '../utility/RemoveFromDOM';
 import { Close, Icon } from '../icon';
 
+export const DialogWidthPresets = ['compact', 'default', 'large', 'full'] as const;
+
 export type DialogProps = {
     /**
      * The dialog's open state.
@@ -47,11 +50,12 @@ export type DialogProps = {
      */
     hideCloseButton?: boolean;
     /**
-     * The width of the dialog.
+     * The width of the dialog. Either a preset or a valid {@link CSSLength} string.
      *
+     * @see DialogWidthPresets
      * @default 'default'
      */
-    width?: 'compact' | 'default' | 'large' | 'full';
+    width?: typeof DialogWidthPresets[number] | CSSLength;
     /**
      * The height of the dialog.
      *
@@ -129,6 +133,8 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
     overlayStyle = 'blur',
     children,
 }) => {
+    const widthIsPreset = useMemo(() => (DialogWidthPresets as readonly string[]).includes(width), [width]);
+
     const [dragging, setDragging] = useState(false);
     const [position, setPosition] = useState({ top: 0, left: 0 });
     const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
@@ -228,11 +234,16 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                             className={clsx(
                                 styles.panel,
                                 styles[appearance],
-                                styles[`w-${width}`],
+                                { [styles[`w-${width}`]]: widthIsPreset },
                                 styles[`h-${height}`],
                                 overrides.panel?.className,
                             )}
-                            style={{ top: `${position.top}px`, left: `${position.left}px` }}
+                            style={{
+                                top: `${position.top}px`,
+                                left: `${position.left}px`,
+                                ...(!widthIsPreset ? { maxWidth: width } : {}),
+                                ...overrides.panel?.style,
+                            }}
                             onMouseDown={handleMouseDown}
                             onMouseUp={handleMouseUp}
                             onMouseMove={handleMouseMove}

package/src/stories/drawer/Drawer.module.scss

@@ -415,10 +415,19 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 .bottomPanelContent {
     position: relative;
     padding: 20px;
+
+    &.noPadding {
+        padding: 0;
+    }
 }
 
 .bottomPanelSpacer {
     padding: 20px;
+
+    &.noPadding {
+        padding: 0;
+    }
+
     opacity: 0;
     pointer-events: none;
 }

package/src/stories/drawer/Drawer.stories.tsx

@@ -239,6 +239,67 @@ export const BottomPanel: Story = {
     },
 };
 
+export const BottomPanelMultiSection: Story = {
+    args: {
+        title: 'Order summary',
+        children: (
+            <div style={{
+                width: '100%', display: 'flex', flexDirection: 'column', gap: '12px',
+            }}
+            >
+                <p>Review your order before confirming.</p>
+            </div>
+        ),
+        bottomPanelPadding: false,
+        bottomPanel: (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    padding: '12px 20px',
+                    borderBottom: '1px solid var(--pte-new-colors-borderMedium)',
+                    background: 'var(--pte-new-colors-overlaySubtle)',
+                }}
+                >
+                    <span>Total</span>
+                    <strong>$249.00</strong>
+                </div>
+                <div style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    padding: '20px',
+                }}
+                >
+                    <Button>
+                        Confirm order
+                    </Button>
+                    <Button kind="secondary" theme="negative">
+                        Cancel
+                    </Button>
+                </div>
+            </div>
+        ),
+    },
+    render: function Render(args) {
+        const [isOpen, setIsOpen] = useState(false);
+        return (
+            <>
+                <Button onClick={() => setIsOpen(true)}>
+                    Review order
+                </Button>
+                <Drawer
+                    {...args}
+                    isOpen={isOpen}
+                    onClose={setIsOpen}
+                >
+                    {args.children}
+                </Drawer>
+            </>
+        );
+    },
+};
+
 export const Full: Story = {
     args: {
         title: 'Transaction details',

package/src/stories/drawer/Drawer.tsx

@@ -62,6 +62,12 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      * An optional panel that will be rendered at the bottom of the Drawer. This is useful for adding a footer to the Drawer with actions.
      */
     bottomPanel?: ReactNode;
+    /**
+     * Whether the bottom panel should have default padding. Set to `false` for edge-to-edge content like dividers or multi-section layouts.
+     *
+     * @default true
+     */
+    bottomPanelPadding?: boolean;
 
     /**
      * An optional area that will be rendered at the top of the Drawer next to the title. This is useful for adding actions to the Drawer. Recommended to use {@link Menu} for an action menu.
@@ -144,11 +150,12 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
 */
 export const Drawer = <T extends string[] | readonly string[] = string[]>({
     isOpen = false,
-    onClose = () => {},
+    onClose = () => { },
     title,
     hideTitle = false,
     hideCloseButton = false,
     bottomPanel,
+    bottomPanelPadding = true,
     from = 'right',
     size = 'default',
     pagination,
@@ -376,13 +383,13 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                 </div>
                                 {bottomPanel && (
                                     <>
-                                        <div tabIndex={-1} aria-hidden="true" className={clsx(styles.bottomPanelSpacer, overrides?.bottomPanelSpacer?.className)}>
+                                        <div tabIndex={-1} aria-hidden="true" className={clsx(styles.bottomPanelSpacer, { [styles.noPadding]: !bottomPanelPadding }, overrides?.bottomPanelSpacer?.className)}>
                                             {bottomPanel}
                                         </div>
                                         <div className={clsx(styles.bottomPanel, overrides?.bottomPanel?.className)}>
                                             <div className={styles.glassOpacity} />
                                             <div className={styles.glassBlend} />
-                                            <div className={clsx(styles.bottomPanelContent, overrides?.bottomPanelContent?.className)}>
+                                            <div className={clsx(styles.bottomPanelContent, { [styles.noPadding]: !bottomPanelPadding }, overrides?.bottomPanelContent?.className)}>
                                                 {bottomPanel}
                                             </div>
                                         </div>

package/src/stories/field/Field.tsx

@@ -80,7 +80,7 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             </Text>
         )
         : (
-            <label htmlFor={htmlFor} className={clsx({ [styles.hidden]: props.hideLabel })}>
+            <label htmlFor={htmlFor} className={clsx(styles.label, { [styles.hidden]: props.hideLabel })}>
                 {props.label}
             </label>
         );