paris 0.8.12 → 0.8.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.8.14
+
+### Patch Changes
+
+- effd11c: Adjust height of drawer header to design
+
+## 0.8.13
+
+### Patch Changes
+
+- 74d5542: A bunch of minor changes and UI adjustments
+
 ## 0.8.12
 
 ### 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.8.12",
+  "version": "0.8.14",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/combobox/Combobox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
 import { useId, useState } from 'react';
 import { Combobox as HCombobox, Transition } from '@headlessui/react';
 import clsx from 'clsx';
@@ -67,6 +67,10 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * @default Create "%v"...
      */
     customValueString?: string;
+    /**
+     * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
+     */
+    maxHeight?: number;
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -110,6 +114,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     onInputChange,
     allowCustomValue,
     customValueString = 'Create "%v"',
+    maxHeight = 320,
     overrides,
 }: ComboboxProps<T>) {
     const inputID = useId();
@@ -224,6 +229,9 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                             overrides?.optionsContainer,
                             styles.options,
                         )}
+                        style={{
+                            '--options-maxHeight': `${maxHeight}px`,
+                        } as CSSProperties}
                     >
                         {(allowCustomValue && query.length > 0) && (
                             <HCombobox.Option

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

@@ -4,8 +4,7 @@ $translateOutX: 20%;
 $translateOutY: 60%;
 
 $panelMinMargin: 16px;
-$defaultSize: 360px;
-
+$defaultSize: 360px + $panelMinMargin;
 $panelPaddingX: 20px;
 $panelPaddingY: 20px;
 
@@ -207,7 +206,6 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     //padding: $panelPaddingY $panelPaddingX;
     background-color: var(--pte-colors-backgroundPrimary);
     overflow: auto;
-    border: 1px solid transparent;
 
     display: flex;
     flex-direction: column;
@@ -257,7 +255,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     align-items: center;
 
     border-bottom: 1px solid var(--pte-colors-borderOpaque);
-    padding: 20px;
+    padding: 14px 16px;
 }
 
 .titleBarButtons {
@@ -276,7 +274,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 }
 
 .content {
-    padding: 20px 20px 0;
+    padding: 20px;
     overflow-y: scroll;
     height: 100%;
 }

package/src/stories/drawer/Drawer.tsx

@@ -327,7 +327,6 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                         <Button
                                             kind="tertiary"
                                             shape="circle"
-                                            size="small"
                                             onClick={() => onClose(false)}
                                             startEnhancer={(
                                                 <Icon icon={Close} size={20} />

package/src/stories/input/Input.module.scss

@@ -98,6 +98,30 @@
         &[type="file"]::-webkit-file-upload-button {
             display: none;
         }
+
+        &[data-status="disabled"] {
+            color: var(--pte-colors-contentDisabled);
+
+            &::placeholder {
+                color: var(--pte-colors-contentDisabled);
+            }
+        }
+    
+        &[data-status="error"] {
+            color: var(--pte-colors-contentNegative);
+
+            &::placeholder {
+                color: var(--pte-colors-contentNegative);
+            }
+        }
+    
+        &[data-status="success"] {
+            color: var(--pte-colors-contentPositive);
+
+            &::placeholder {
+                color: var(--pte-colors-contentPositive);
+            }
+        }
     }
 }
 

package/src/stories/input/Input.tsx

@@ -121,6 +121,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
                     aria-label={typeof label === 'string' ? label : props['aria-label']}
                     aria-describedby={`${inputID}-description`}
                     aria-disabled={disabled}
+                    data-status={status}
                     readOnly={disabled}
                     className={clsx(
                         props.className,

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

@@ -22,6 +22,7 @@
 .options {
     max-height: var(--options-maxHeight, auto);
     overflow-y: auto;
+    overflow-x: hidden;
 
     position: absolute;
     top: 100%;

package/src/stories/textarea/TextArea.tsx

@@ -71,6 +71,7 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
                     aria-disabled={disabled}
                     readOnly={disabled}
                     rows={rows}
+                    data-status={status}
                     className={clsx(
                         props.className,
                         styles.input,