paris 0.17.3 → 0.17.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # paris
 
+## 0.17.4
+
+### Patch Changes
+
+- 693a687: fix(combobox): revert close icon to FontAwesomeIcon
+- 12331bd: Theme: fix dark theme color value for `overlayWhiteUltrastrong`
+- 9774b0e: Field's container `onClick` called `input.click()` even when the click originated from the button itself, causing a double toggle on touch devices. This broke Headless UI Select/Menu/Combobox on iOS Safari since HUI 2.2+ toggles on `onClick` for touch (unlike mouse, which toggles on `pointerDown`).
+
 ## 0.17.3
 
 ### 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.3",
+  "version": "0.17.4",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/combobox/Combobox.tsx

@@ -8,6 +8,8 @@ import {
     Combobox as HCombobox, ComboboxInput, ComboboxOptions, ComboboxOption, Transition,
 } from '@headlessui/react';
 import { clsx } from 'clsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from '../select/Select.module.scss';
@@ -21,7 +23,7 @@ import { Field } from '../field';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
 import { TextWhenString } from '../utility';
-import { Check, Close, Icon } from '../icon';
+import { Check, Icon } from '../icon';
 
 export type Option<T extends Record<string, any> = Record<string, any>> = {
     id: string,
@@ -262,7 +264,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         <Button
                             size="xs"
                             shape="circle"
-                            startEnhancer={<Close size={10} />}
+                            startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
                             onClick={() => {
                                 if (onChange) {
                                     onChange(null);

package/src/stories/field/Field.tsx

@@ -124,7 +124,7 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             onClick={(e) => {
                 if (typeof window !== 'undefined' && htmlFor) {
                     const input = document.getElementById(htmlFor);
-                    if (input && !disabled) {
+                    if (input && !disabled && !input.contains(e.target as Node)) {
                         if (input.tagName === 'BUTTON') input.click();
                         else input.focus();
                     }

package/src/stories/theme/themes.ts

@@ -1380,7 +1380,7 @@ export const DarkTheme: Theme = merge(LightTheme, {
             overlayStrong: 'rgba(255, 255, 255, 0.09)',
             overlayInverseSubtle: 'rgba(0, 0, 0, 0.02)',
             overlayInverseMedium: 'rgba(0, 0, 0, 0.05)',
-            overlayWhiteUltrastrong: 'rgba(0, 0, 0, 0.18)',
+            overlayWhiteUltrastrong: 'rgba(255, 255, 255, 0.18)',
             overlayBlackSubtle: 'rgba(0, 0, 0, 0.2)',
             overlayBlackMedium: 'rgba(0, 0, 0, 0.3)',
             overlayBlackStrong: 'rgba(0, 0, 0, 0.4)',