paris 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.12.0
+
+### Minor Changes
+
+- fc32202: Field: description position prop
+
+## 0.11.1
+
+### Patch Changes
+
+- ef55a9d: Combobox: fix displayValue rendering when allowCustomValue is false
+
 ## 0.11.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.11.0",
+  "version": "0.12.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/combobox/Combobox.tsx

@@ -112,7 +112,7 @@ export type ComboboxProps<T extends Record<string, any>> = {
 /**
  * A Combobox component is used to render a searchable select.
  *
- * When the selected option node is a strings, the combobox will act like an input even when an option is selected, allowing users to edit the selected option directly in order to pick a new one. To circumvent this and make selected options non-editable, pass nodes that are `Text` components instead.
+ * When the selected option node is a string, the combobox will act like an input even when an option is selected, allowing users to edit the selected option directly in order to pick a new one. To circumvent this and make selected options non-editable, pass nodes that are `Text` components instead.
  *
  * When `allowCustomValue` is `true`, a custom value option will be added to the dropdown. This option's text can be customized by passing a value for `customValueString`, where `%v` within the string is the user's input. You can provide an entirely custom node through `renderCustomValueOption`. By default, `onChange` will be called for every input change when custom values are allowed.
  *
@@ -134,6 +134,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     hideLabel,
     description,
     hideDescription,
+    descriptionPosition,
     placeholder,
     startEnhancer,
     endEnhancer,
@@ -166,6 +167,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
             hideLabel={hideLabel}
             description={description}
             hideDescription={hideDescription}
+            descriptionPosition={descriptionPosition}
             disabled={disabled}
             overrides={{
                 container: overrides?.container,
@@ -217,7 +219,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                 {...overrides?.input}
                                 placeholder={placeholder}
                                 // value={query}
-                                displayValue={(allowCustomValue && typeof value?.node === 'string') ? () => value.node as string : undefined}
+                                displayValue={() => value?.node as string}
                                 onChange={(e) => {
                                     setQuery(e.target.value);
                                     if (onInputChange) onInputChange(e.target.value);

package/src/stories/field/Field.tsx

@@ -31,10 +31,16 @@ export type FieldProps = {
      * Disables the field, disallowing user interaction.
      */
     disabled?: boolean;
+    /**
+     * Position of the description relative to the children/input.
+     * @default 'bottom'
+     */
+    descriptionPosition?: 'top' | 'bottom';
     overrides?: {
         container?: ComponentPropsWithoutRef<'div'>;
         label?: TextProps<'label'>;
         description?: TextProps<'p'>;
+        labelContainer?: ComponentPropsWithoutRef<'div'>;
     }
 };
 
@@ -53,74 +59,92 @@ export type FieldProps = {
 export const Field: FC<PropsWithChildren<FieldProps>> = ({
     htmlFor,
     disabled,
+    descriptionPosition = 'bottom',
     children,
     // className,
     ...props
-}) => (
-    // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
-    // The container is only made clickable for usability purposes.
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <div
-        {...props.overrides?.container}
-        className={clsx(
-            props.overrides?.container?.className,
-            styles.container,
-            // className,
-        )}
-        onClick={(e) => {
-            if (typeof window !== 'undefined' && htmlFor) {
-                const input = document.getElementById(htmlFor);
-                if (input && !disabled) {
-                    if (input.tagName === 'BUTTON') input.click();
-                    else input.focus();
-                }
-            }
-        }}
-    >
-        {typeof props.label === 'string'
-            ? (
-                <Text
-                    {...props.overrides?.label}
-                    as="label"
-                    kind="paragraphSmall"
-                    htmlFor={htmlFor}
-                    className={clsx(
-                        styles.label,
-                        { [styles.hidden]: props.hideLabel },
-                    )}
-                >
-                    {props.label}
-                </Text>
-            )
-            : (
-                <label htmlFor={htmlFor} className={clsx({ [styles.hidden]: props.hideLabel })}>
-                    {props.label}
-                </label>
+}) => {
+    const label = typeof props.label === 'string'
+        ? (
+            <Text
+                {...props.overrides?.label}
+                as="label"
+                kind="paragraphSmall"
+                htmlFor={htmlFor}
+                className={clsx(
+                    styles.label,
+                    { [styles.hidden]: props.hideLabel },
+                )}
+            >
+                {props.label}
+            </Text>
+        )
+        : (
+            <label htmlFor={htmlFor} className={clsx({ [styles.hidden]: props.hideLabel })}>
+                {props.label}
+            </label>
+        );
+
+    const description = typeof props.description === 'string'
+        ? (
+            <Text
+                id={`${htmlFor}-description`}
+                {...props.overrides?.description}
+                as="p"
+                kind="paragraphXSmall"
+                className={clsx(
+                    styles.description,
+                    { [styles.hidden]: !props.description || props.hideDescription },
+                    props.overrides?.description?.className,
+                )}
+            >
+                {props.description}
+            </Text>
+        )
+        : (
+            <div
+                id={`${htmlFor}-description`}
+                className={clsx({ [styles.hidden]: !props.description || props.hideDescription })}
+            >
+                {props.description}
+            </div>
+        );
+
+    return (
+        // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
+        // The container is only made clickable for usability purposes.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div
+            {...props.overrides?.container}
+            className={clsx(
+                props.overrides?.container?.className,
+                styles.container,
+                // className,
             )}
-        {children}
-        {typeof props.description === 'string'
-            ? (
-                <Text
-                    id={`${htmlFor}-description`}
-                    {...props.overrides?.description}
-                    as="p"
-                    kind="paragraphXSmall"
+            onClick={(e) => {
+                if (typeof window !== 'undefined' && htmlFor) {
+                    const input = document.getElementById(htmlFor);
+                    if (input && !disabled) {
+                        if (input.tagName === 'BUTTON') input.click();
+                        else input.focus();
+                    }
+                }
+            }}
+        >
+            {descriptionPosition === 'top' ? (
+                <div
+                    {...props.overrides?.labelContainer}
                     className={clsx(
-                        styles.description,
-                        { [styles.hidden]: !props.description || props.hideDescription },
-                        props.overrides?.description?.className,
+                        styles.labelContainer,
+                        props.overrides?.labelContainer?.className,
                     )}
                 >
-                    {props.description}
-                </Text>
-            )
-            : (
-                <div
-                    id={`${htmlFor}-description`}
-                    className={clsx({ [styles.hidden]: !props.description || props.hideDescription })}
-                >
-                    {props.description}
+                    {label}
+                    {description}
                 </div>
-            )}
-    </div>
-);
+            ) : label}
+            {children}
+            {descriptionPosition === 'bottom' ? description : <></>}
+        </div>
+    );
+};

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

@@ -106,7 +106,7 @@
                 color: var(--pte-new-colors-contentDisabled);
             }
         }
-    
+
         &[data-status="error"] {
             color: var(--pte-new-colors-contentNegative);
 
@@ -114,7 +114,7 @@
                 color: var(--pte-new-colors-contentNegative);
             }
         }
-    
+
         &[data-status="success"] {
             color: var(--pte-new-colors-contentPositive);
 
@@ -158,6 +158,14 @@
     gap: 8px;
 }
 
+.labelContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
 // Use double selector to ensure specificity is higher than the default styles
 .label.label {
     color: var(--pte-new-colors-contentPrimary);
@@ -177,4 +185,4 @@
     &::-webkit-calendar-picker-indicator {
         display: none;
     }
-}
+}

package/src/stories/input/Input.tsx

@@ -71,6 +71,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
     hideLabel,
     description,
     hideDescription,
+    descriptionPosition,
     startEnhancer,
     endEnhancer,
     disabled,
@@ -86,6 +87,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
             description={description}
             hideDescription={hideDescription}
             disabled={disabled}
+            descriptionPosition={descriptionPosition}
             overrides={{
                 container: {
                     ...overrides?.container,

package/src/stories/select/Select.tsx

@@ -98,6 +98,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
     hideLabel,
     description,
     hideDescription,
+    descriptionPosition,
     placeholder,
     startEnhancer,
     endEnhancer,
@@ -115,6 +116,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
             hideLabel={hideLabel}
             description={description}
             hideDescription={hideDescription}
+            descriptionPosition={descriptionPosition}
             disabled={disabled}
             overrides={{
                 container: overrides?.container,

package/src/stories/textarea/TextArea.tsx

@@ -26,6 +26,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, InputProps & ComponentPr
     hideLabel,
     description,
     hideDescription,
+    descriptionPosition,
     startEnhancer,
     endEnhancer,
     disabled,
@@ -41,6 +42,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, InputProps & ComponentPr
             hideLabel={hideLabel}
             description={description}
             hideDescription={hideDescription}
+            descriptionPosition={descriptionPosition}
             disabled={disabled}
             overrides={{
                 container: overrides?.container,