paris 0.17.7 → 0.17.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

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.7",
+  "version": "0.17.8",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

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

@@ -94,6 +94,10 @@
             background: transparent;
         }
     }
+
+    .check {
+        padding: 4px;
+    }
 }
 
 .optionContent {

package/src/stories/accordionselect/AccordionSelect.tsx

@@ -136,7 +136,7 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
 
     useEffect(() => {
         if (!closeOnClickOutside || !open) {
-            return () => {};
+            return () => { };
         }
 
         const handleClickOutside = (e: MouseEvent) => {
@@ -253,7 +253,7 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
                                                 )}
                                         </div>
                                         {isOptionSelected && (
-                                            <Icon icon={Check} size={13} />
+                                            <Icon icon={Check} size={13} className={styles.check} />
                                         )}
                                     </button>
                                 );

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'>;
@@ -249,11 +250,6 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                         });
                                     }
                                 }}
-                                onBlur={(e) => {
-                                    setQuery('');
-                                    if (onInputChange) onInputChange('');
-                                    if (overrides?.input?.onBlur) overrides.input.onBlur(e);
-                                }}
                                 aria-disabled={disabled}
                                 data-status={disabled ? 'disabled' : (status || 'default')}
                                 className={clsx(
@@ -324,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/drawer/Drawer.module.scss

@@ -423,6 +423,11 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
 .bottomPanelSpacer {
     padding: 20px;
+
+    &.noPadding {
+        padding: 0;
+    }
+
     opacity: 0;
     pointer-events: none;
 }

package/src/stories/drawer/Drawer.tsx

@@ -150,7 +150,7 @@ 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,
@@ -383,7 +383,7 @@ 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)}>