paris 0.17.3 → 0.17.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # paris
 
+## 0.17.5
+
+### Patch Changes
+
+- 67ea6ea: Fix input field width calculation broken by iOS Safari scale trick. Wraps input/textarea in a container div so the scale trick's `width: calc(100% / 0.875)` resolves correctly, fixing width issues with enhancers and textarea not filling containers.
+
+## 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.5",
   "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/input/Input.module.scss

@@ -84,18 +84,11 @@
         transform: scale(0.875);
         transform-origin: left center;
         width: calc(100% / 0.875);
-        flex-shrink: 0;
-
-        &[data-has-end-enhancer="true"] {
-            width: calc((100% / 0.875) - 14px - 13px);
-            margin-right: calc((-100% * (1 - 0.875) / 0.875));
-        }
     }
 
 
     & input,
     & textarea {
-        width: 100%;
         background-color: transparent;
         padding: 0;
         margin: 0;
@@ -155,6 +148,12 @@
     }
 }
 
+.inputScaleWrapper {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
 .enhancer {
     display: flex;
     color: var(--pte-new-colors-contentSecondary);

package/src/stories/input/Input.tsx

@@ -120,23 +120,23 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
                         )}
                     </div>
                 )}
-                <input
-                    {...props}
-                    id={inputID}
-                    ref={ref}
-                    type={type || 'text'}
-                    aria-label={typeof label === 'string' ? label : props['aria-label']}
-                    aria-describedby={`${inputID}-description`}
-                    aria-disabled={disabled}
-                    data-status={disabled ? 'disabled' : (status || 'default')}
-                    readOnly={disabled}
-                    {...(startEnhancer ? { 'data-has-start-enhancer': 'true' } : {})}
-                    {...(endEnhancer ? { 'data-has-end-enhancer': 'true' } : {})}
-                    className={clsx(
-                        props.className,
-                        styles.input,
-                    )}
-                />
+                <div className={styles.inputScaleWrapper}>
+                    <input
+                        {...props}
+                        id={inputID}
+                        ref={ref}
+                        type={type || 'text'}
+                        aria-label={typeof label === 'string' ? label : props['aria-label']}
+                        aria-describedby={`${inputID}-description`}
+                        aria-disabled={disabled}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                        readOnly={disabled}
+                        className={clsx(
+                            props.className,
+                            styles.input,
+                        )}
+                    />
+                </div>
                 {!!endEnhancer && (
                     <div
                         {...overrides?.endEnhancerContainer}

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

@@ -99,7 +99,9 @@
 }
 
 .content {
-    width: 100%;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
 }
 
 .radioContainer {

package/src/stories/textarea/TextArea.tsx

@@ -68,21 +68,23 @@ export const TextArea = forwardRef<HTMLTextAreaElement, InputProps & ComponentPr
                         )}
                     </div>
                 )}
-                <textarea
-                    {...props}
-                    id={textareaID}
-                    ref={ref}
-                    aria-label={typeof label === 'string' ? label : props['aria-label']}
-                    aria-describedby={`${textareaID}-description`}
-                    aria-disabled={disabled}
-                    readOnly={disabled}
-                    rows={rows}
-                    data-status={disabled ? 'disabled' : (status || 'default')}
-                    className={clsx(
-                        props.className,
-                        styles.input,
-                    )}
-                />
+                <div className={styles.inputScaleWrapper}>
+                    <textarea
+                        {...props}
+                        id={textareaID}
+                        ref={ref}
+                        aria-label={typeof label === 'string' ? label : props['aria-label']}
+                        aria-describedby={`${textareaID}-description`}
+                        aria-disabled={disabled}
+                        readOnly={disabled}
+                        rows={rows}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                        className={clsx(
+                            props.className,
+                            styles.input,
+                        )}
+                    />
+                </div>
                 {!!endEnhancer && (
                     <div
                         {...overrides?.endEnhancerContainer}

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)',