paris 0.8.20 → 0.8.22

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # paris
 
+## 0.8.22
+
+### Patch Changes
+
+- 0243ccb: fix(Field): Remove stopPropagation on Field component
+
+## 0.8.21
+
+### Patch Changes
+
+- 5d2f644: Checkbox: fix label onClick
+- 1476e89: Checkbox: default to `ParagraphXSmall` text styling for label when string is passed
+- ed42d02: Button: honor passed `style` prop
+
 ## 0.8.20
 
 ### 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.20",
+  "version": "0.8.22",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/button/Button.module.scss

@@ -5,6 +5,7 @@
     user-select: var(--pte-utils-defaultUserSelect);
 
     border: 1px solid;
+    position: relative;
 
     display: flex;
     flex-direction: row;

package/src/stories/button/Button.tsx

@@ -137,6 +137,7 @@ export const Button: FC<ButtonProps> = ({
     loading,
     href,
     displayNotificationDot = false,
+    style,
     ...props
 }) => (
     <AriaButton
@@ -147,9 +148,9 @@ export const Button: FC<ButtonProps> = ({
             '--pte-colors-backgroundInverseTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
             '--pte-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary,
             '--pte-colors-backgroundTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
-        } as CSSProperties : {}}
+            ...style,
+        } as CSSProperties : style}
         className={clsx(
-            'relative',
             styles.button,
             styles[kind],
             styles[shape],

package/src/stories/checkbox/Checkbox.tsx

@@ -1,9 +1,10 @@
 import type { FC, ReactNode } from 'react';
-import { useId } from 'react';
+import { useRef, useId } from 'react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import clsx from 'clsx';
 import styles from './Checkbox.module.scss';
 import { pvar } from '../theme';
+import { TextWhenString } from '../utility';
 
 export type CheckboxProps = {
     checked?: boolean;
@@ -35,10 +36,8 @@ export const Checkbox: FC<CheckboxProps> = ({
 }) => {
     const inputID = useId();
     return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <label
             htmlFor={inputID}
-            onClick={() => onChange?.(!checked)}
             className={clsx(styles.container, disabled && styles.disabled, className)}
             {...props}
         >
@@ -58,7 +57,9 @@ export const Checkbox: FC<CheckboxProps> = ({
                     </svg>
                 </RadixCheckbox.Indicator>
             </RadixCheckbox.Root>
-            {children}
+            <TextWhenString kind="paragraphXSmall">
+                {children}
+            </TextWhenString>
         </label>
     );
 };

package/src/stories/field/Field.tsx

@@ -68,7 +68,6 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             // className,
         )}
         onClick={(e) => {
-            e.preventDefault();
             if (typeof window !== 'undefined' && htmlFor) {
                 const input = document.getElementById(htmlFor);
                 if (input && !disabled) {