paris 0.17.4 → 0.17.5

package/CHANGELOG.md

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

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

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}