paris 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.9.2
+
+### Patch Changes
+
+- 087723b: Input: Adjusted padding to reduce input height to 34px
+
+## 0.9.1
+
+### Patch Changes
+
+- 525d2ff: feat: Add override props and make TextArea forward ref
+
 ## 0.9.0
 
 ### Minor 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.9.0",
+  "version": "0.9.2",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/drawer/Drawer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 import {
     useEffect,
     useRef, Fragment, useMemo, useState,
@@ -110,6 +110,23 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
     overlayStyle?: 'grey' | 'blur';
     /** The contents of the Drawer. */
     children?: ReactNode | ReactNode[];
+
+    /** Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component. */
+    overrides?: {
+        dialog?: ComponentPropsWithoutRef<'div'>;
+        overlay?: ComponentPropsWithoutRef<'div'>;
+        panelContainer?: ComponentPropsWithoutRef<'div'>;
+        panel?: ComponentPropsWithoutRef<'div'>;
+        titleBar?: ComponentPropsWithoutRef<'div'>;
+        titleArea?: ComponentPropsWithoutRef<'div'>;
+        titleBarButtons?: ComponentPropsWithoutRef<'div'>;
+        content?: ComponentPropsWithoutRef<'div'>;
+        contentChildren?: ComponentPropsWithoutRef<'div'>;
+        contentChildrenChildren: ComponentPropsWithoutRef<'div'>;
+        bottomPanelSpacer?: ComponentPropsWithoutRef<'div'>;
+        bottomPanel?: ComponentPropsWithoutRef<'div'>;
+        bottomPanelContent?: ComponentPropsWithoutRef<'div'>;
+    };
 };
 
 /**
@@ -137,6 +154,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     overlayStyle = 'grey',
     additionalActions,
     children,
+    overrides,
 }: DrawerProps<T>) => {
     // Check if the drawer is on the x-axis.
     const xAxisDrawer = useMemo(() => ['left', 'right'].includes(from), [from]);
@@ -192,13 +210,16 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                 as="div"
                 className={clsx(
                     styles.root,
+                    overrides?.dialog?.className,
                 )}
                 onClose={onClose}
+                {...overrides?.dialog}
             >
                 <div
                     className={clsx(
                         overlayStyle === 'blur' && styles.overlayBlurContainer,
                         overlayStyle === 'grey' && styles.overlayGreyContainer,
+                        overrides?.overlay?.className,
                     )}
                 >
                     <Transition.Child
@@ -225,10 +246,13 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         styles.panelContainer,
                         styles[`from-${from}`],
                         { [styles[`size-${size}`]]: sizeIsPreset },
+                        overrides?.panelContainer?.className,
                     )}
                     style={!sizeIsPreset ? {
                         [xAxisDrawer ? 'width' : 'height']: size,
-                    } : {}}
+                        ...overrides?.panelContainer?.style,
+                    } : overrides?.panelContainer?.style}
+                    {...overrides?.panelContainer}
                 >
                     <Transition.Child
                         as={Fragment}
@@ -243,14 +267,13 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                             className={clsx(
                                 styles.panel,
                                 styles[`from-${from}`],
+                                overrides?.panel?.className,
                             )}
                         >
                             {/* Dialog title bar */}
-                            <div className={styles.titleBar}>
+                            <div className={clsx(styles.titleBar, overrides?.titleBar?.className)}>
                                 <div
-                                    className={clsx(
-                                        styles.titleArea,
-                                    )}
+                                    className={clsx(styles.titleArea, overrides?.titleArea?.className)}
                                 >
                                     <RemoveFromDOM
                                         // Hide when pagination is not enabled.
@@ -300,7 +323,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                         </Dialog.Title>
                                     </VisuallyHidden>
                                 </div>
-                                <div className={styles.titleBarButtons}>
+                                <div className={clsx(styles.titleBarButtons, overrides?.titleBarButtons?.className)}>
                                     {/* Action Menu */}
                                     <RemoveFromDOM when={!hasAdditionalActions}>
                                         {additionalActions}
@@ -329,8 +352,8 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                 </div>
                             </div>
 
-                            <div className={styles.content}>
-                                <div className={styles.contentChildren}>
+                            <div className={clsx(styles.content, overrides?.content?.className)}>
+                                <div className={clsx(styles.contentChildren, overrides?.contentChildren?.className)}>
                                     {(isPaginated && Array.isArray(children)) ? children.map((child) => (child && typeof child === 'object' && 'key' in child) && (
                                         <Transition
                                             show={child.key === pagination?.currentPage && loadedPage === child.key}
@@ -345,6 +368,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                             afterLeave={() => {
                                                 setLoadedPage(pagination?.currentPage || null);
                                             }}
+                                            className={clsx(overrides?.contentChildrenChildren?.className)}
                                         >
                                             {child}
                                         </Transition>
@@ -352,13 +376,13 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                 </div>
                                 {bottomPanel && (
                                     <>
-                                        <div tabIndex={-1} aria-hidden="true" className={styles.bottomPanelSpacer}>
+                                        <div tabIndex={-1} aria-hidden="true" className={clsx(styles.bottomPanelSpacer, overrides?.bottomPanelSpacer?.className)}>
                                             {bottomPanel}
                                         </div>
-                                        <div className={styles.bottomPanel}>
+                                        <div className={clsx(styles.bottomPanel, overrides?.bottomPanel?.className)}>
                                             <div className={styles.glassOpacity} />
                                             <div className={styles.glassBlend} />
-                                            <div className={styles.bottomPanelContent}>
+                                            <div className={clsx(styles.bottomPanelContent, overrides?.bottomPanelContent?.className)}>
                                                 {bottomPanel}
                                             </div>
                                         </div>

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

@@ -9,7 +9,7 @@
 
     //height: 36px;
     width: 100%;
-    padding: calc(7.5px - var(--pte-typography-verticalMetricsAdjust)) 14px 7.5px;
+    padding: calc(6px - var(--pte-typography-verticalMetricsAdjust)) 13px 6px;
 
     font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
     font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);

package/src/stories/tabs/Tabs.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import type { CSSProperties, FC, ReactNode } from 'react';
+import type {
+    ComponentPropsWithoutRef, CSSProperties, FC, ReactNode,
+} from 'react';
 import { useId, useState } from 'react';
 import { Tab } from '@headlessui/react';
 import clsx from 'clsx';
@@ -54,6 +56,16 @@ export type TabsProps = {
      * @param index - The index of the tab that was selected.
      */
     onTabChange?: (index: number) => void | Promise<void>;
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        group?: ComponentPropsWithoutRef<'div'>;
+        panel?: ComponentPropsWithoutRef<'div'>;
+        panelContainer?: ComponentPropsWithoutRef<'div'>;
+        tabList?: ComponentPropsWithoutRef<'div'>;
+        tabBackground?: ComponentPropsWithoutRef<'div'>;
+    }
 };
 
 /**
@@ -77,6 +89,7 @@ export const Tabs: FC<TabsProps> = ({
     defaultIndex = 0,
     index,
     onTabChange,
+    overrides,
 }) => {
     const id = useId();
     const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
@@ -91,9 +104,9 @@ export const Tabs: FC<TabsProps> = ({
                     onTabChange?.(i);
                 }
             }}
-            className={clsx(styles.tabGroup, styles[backgroundStyle])}
+            className={clsx(styles.tabGroup, styles[backgroundStyle], overrides?.group?.className)}
         >
-            <div className={clsx(styles.tabBackground, styles[backgroundStyle])}>
+            <div className={clsx(styles.tabBackground, styles[backgroundStyle], overrides?.tabBackground?.className)}>
                 {backgroundStyle === 'glass' && (
                     <div className={styles.glassContainer}>
                         <div className={styles.glassOpacity} />
@@ -109,6 +122,7 @@ export const Tabs: FC<TabsProps> = ({
                         styles.tabList,
                         styles[barStyle],
                         styles[backgroundStyle],
+                        overrides?.tabList?.className,
                     )}
                 >
                     {tabs.map(({ title }, i) => (
@@ -140,7 +154,7 @@ export const Tabs: FC<TabsProps> = ({
             </div>
 
             <Tab.Panels
-                className={clsx(styles.tabPanels, styles[backgroundStyle])}
+                className={clsx(styles.tabPanels, styles[backgroundStyle], overrides?.panelContainer?.className)}
             >
                 {tabs.map(({ title, content }) => (
                     <Tab.Panel
@@ -150,6 +164,7 @@ export const Tabs: FC<TabsProps> = ({
                             styles[backgroundStyle],
                             styles[barStyle],
                             styles[kind],
+                            overrides?.panel?.className,
                         )}
                     >
                         {content}

package/src/stories/textarea/TextArea.tsx

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef, FC } from 'react';
-import { useId } from 'react';
+import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';
+import { forwardRef, useId } from 'react';
 import clsx from 'clsx';
 import type { InputProps } from '../input';
 import styles from '../input/Input.module.scss';
@@ -19,7 +19,7 @@ import { Field } from '../field';
  * ```
  * @constructor
  */
-export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = ({
+export const TextArea = forwardRef<HTMLTextAreaElement, InputProps & ComponentPropsWithoutRef<'textarea'>>(({
     label,
     status,
     type,
@@ -32,7 +32,7 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
     overrides,
     rows = 3,
     ...props
-}) => {
+}, ref: ForwardedRef<HTMLTextAreaElement>) => {
     const textareaID = useId();
     return (
         <Field
@@ -69,6 +69,7 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
                 <textarea
                     {...props}
                     id={textareaID}
+                    ref={ref}
                     aria-label={typeof label === 'string' ? label : props['aria-label']}
                     aria-describedby={`${textareaID}-description`}
                     aria-disabled={disabled}
@@ -97,4 +98,4 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
             </div>
         </Field>
     );
-};
+});