paris 0.8.18 → 0.8.20

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # paris
 
+## 0.8.20
+
+### Patch Changes
+
+- beb687f: Menu: add animations for menu items
+- beb687f: Dropdowns: Light mode border style fixes
+
+## 0.8.19
+
+### Patch Changes
+
+- 9ef8cb0: Menu: add z-index for MenuItems
+
 ## 0.8.18
 
 ### 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.18",
+  "version": "0.8.20",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -26,9 +26,7 @@
     "nextjs",
     "storybook"
   ],
-  "engines": {
-    "pnpm": "^8.x"
-  },
+  "packageManager": "pnpm@8.15.5",
   "exports": {
     "./*": "./src/stories/*",
     "./accordion": "./src/stories/accordion/index.ts",

package/src/stories/card/Card.module.scss

@@ -1,5 +1,5 @@
 .container {
-    border: 1px solid var(--pte-borders-dropdown-color);
+    border: var(--pte-borders-dropdown-border);
     border-radius: var(--pte-borders-radius-rounded);
     box-shadow: var(--pte-lighting-subtlePopup);
 

package/src/stories/dialog/Dialog.module.scss

@@ -111,7 +111,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 .simple {
     border-radius: var(--pte-borders-radius-rounded);
     background: var(--pte-colors-backgroundPrimary);
-    border: 1px solid var(--pte-borders-dropdown-color);
+    border: var(--pte-borders-dropdown-border);
     backdrop-filter: var(--pte-surfaces-dialog-backdropFilter);
     outline: none;
     box-shadow: var(--pte-lighting-shallowBelow);

package/src/stories/menu/Menu.module.scss

@@ -11,6 +11,7 @@
     border-radius: 8px;
     background: var(--pte-colors-backgroundPrimary);
     box-shadow: var(--pte-borders-dropdown-shadow);
+    border: var(--pte-borders-dropdown-border);
 
     display: flex;
     width: 200px;
@@ -18,6 +19,7 @@
     align-items: flex-start;
 
     overflow: hidden;
+    z-index: 100;
 }
 
 .leftPosition {
@@ -31,7 +33,7 @@
 }
 
 .menuItem {
-    width: 100%; 
+    width: 100%;
     padding: 8px 16px;
 
     display: flex;
@@ -49,7 +51,7 @@
     &:hover {
         background-color: var(--pte-colors-backgroundSecondary);
     }
-    
+
     @keyframes gradientFlow {
         0% {
             background-position: 0%;

package/src/stories/menu/Menu.tsx

@@ -1,11 +1,13 @@
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
+import { Fragment, ReactNode } from 'react';
 import type {
     MenuProps, MenuItemsProps, MenuItemProps, MenuButtonProps,
 } from '@headlessui/react';
-import { Menu as HeadlessMenu } from '@headlessui/react';
+import { Menu as HeadlessMenu, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 
 import styles from './Menu.module.scss';
+import dropdownStyles from '../utility/Dropdown.module.scss';
 
 export { Menu as HeadlessMenu } from '@headlessui/react';
 
@@ -61,9 +63,19 @@ Menu.Button = ({ className, children, ...props }) => (
 Menu.Items = ({
     className, children, position = 'left', ...props
 }) => (
-    <HeadlessMenu.Items className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
-        {children}
-    </HeadlessMenu.Items>
+    <Transition
+        as={Fragment}
+        enter={dropdownStyles.transition}
+        enterFrom={dropdownStyles.enterFrom}
+        enterTo={dropdownStyles.enterTo}
+        leave={dropdownStyles.transition}
+        leaveFrom={dropdownStyles.leaveFrom}
+        leaveTo={dropdownStyles.leaveTo}
+    >
+        <HeadlessMenu.Items className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
+            {children}
+        </HeadlessMenu.Items>
+    </Transition>
 );
 
 /**

package/src/stories/popover/Popover.module.scss

@@ -18,5 +18,5 @@
     width: fit-content;
     border-radius: var(--pte-borders-radius-rounded);
     box-shadow: var(--pte-lighting-shallowPopup);
-    border: 1px solid var(--pte-borders-dropdown-color)
+    border: var(--pte-borders-dropdown-border);
 }

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

@@ -35,10 +35,8 @@
 
     background-color: var(--pte-colors-backgroundPrimary);
 
-    border-width: 1px;
-    border-style: solid;
+    border: var(--pte-borders-dropdown-border);
     border-radius: var(--pte-borders-radius-rectangle);
-    border-color: var(--pte-borders-dropdown-color);
     box-shadow: var(--pte-borders-dropdown-shadow);
 
     transition: var(--pte-animations-interaction);

package/src/stories/theme/themes.ts

@@ -204,6 +204,7 @@ export type Theme = {
         dropdown: {
             color: CSSColor,
             shadow: ShadowDefinition,
+            border: `${number}px ${string} ${CSSColor}` | 'none',
         },
     },
     surfaces: {
@@ -502,6 +503,7 @@ export const LightTheme: Theme = {
         dropdown: {
             shadow: Shadows.deepBelow,
             color: 'transparent',
+            border: 'none',
         },
     },
     surfaces: {
@@ -570,6 +572,7 @@ export const DarkTheme: Theme = merge(LightTheme, {
         dropdown: {
             shadow: 'none',
             color: T.colors.grey600,
+            border: `1px solid ${T.colors.grey600}`,
         },
     },
     surfaces: {