paris 0.8.15 → 0.8.17

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # paris
 
+## 0.8.17
+
+### Patch Changes
+
+- c1fd99a: feat(Tag): Add new Tag styling
+- c1fd99a: feat: Update menu component to support new feature styling
+- c1fd99a: chore: Update README typo
+- c1fd99a: feat(Button): Add notification dot support
+
+## 0.8.16
+
+### Patch Changes
+
+- 616d1e6: fix: Remove New Tag styling and add teal700
+
 ## 0.8.15
 
 ### Patch Changes

package/README.md

@@ -4,7 +4,7 @@ Paris is Slingshot's React design system, meant to work universally across serve
 
 Currently, Paris is provided as a set of *unbundled* `.tsx` components styled with SCSS modules. This means that you can import only the components you need, and you can use your own bundler to optimize your bundle size. As a result, Paris works best with frameworks like Next.js that have built-in support for TypeScript and SCSS modules.
 
-Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris because to move away from Styletron and CSS-in-JS, since we're now largely working with React 18, RSC, and the Next.js `app` directory.
+Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris to move away from Styletron and CSS-in-JS, since we're now largely working with React 18, RSC, and the Next.js `app` directory.
 
 <br />
 

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.15",
+  "version": "0.8.17",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/button/Button.tsx

@@ -13,6 +13,7 @@ import type { Enhancer } from '../../types/Enhancer';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pvar } from '../theme';
 import { Spinner } from '../icon';
+import { NotificationDot } from '../icon/NotificationDot';
 
 const EnhancerSizes = {
     large: 13,
@@ -104,6 +105,8 @@ export type ButtonProps = {
      * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
      */
     children?: ReactNode | ReactNode[];
+
+    displayNotificationDot?: boolean;
 } & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
 
 /**
@@ -133,6 +136,7 @@ export const Button: FC<ButtonProps> = ({
     disabled,
     loading,
     href,
+    displayNotificationDot = false,
     ...props
 }) => (
     <AriaButton
@@ -145,6 +149,7 @@ export const Button: FC<ButtonProps> = ({
             '--pte-colors-backgroundTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
         } as CSSProperties : {}}
         className={clsx(
+            'relative',
             styles.button,
             styles[kind],
             styles[shape],
@@ -189,5 +194,10 @@ export const Button: FC<ButtonProps> = ({
                 size={EnhancerSizes[size]}
             />
         )}
+        {!!displayNotificationDot && (
+            <div className="absolute top-0 right-0">
+                <NotificationDot size={8} />
+            </div>
+        )}
     </AriaButton>
 );

package/src/stories/icon/NotificationDot.tsx

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+import type { IconDefinition } from './Icon';
+
+export const NotificationDot: IconDefinition = memo(({ size }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 8 8" fill="none">
+        <circle cx="4" cy="4" r="3.5" fill="#1DEECD" stroke="#8EF7E6" />
+    </svg>
+));

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

@@ -49,4 +49,25 @@
     &:hover {
         background-color: var(--pte-colors-backgroundSecondary);
     }
+    
+    @keyframes gradientFlow {
+        0% {
+            background-position: 0%;
+        }
+        100% {
+            background-position: 125%;
+        }
+    }
+}
+
+.newItem {
+    background: radial-gradient(circle, rgba(20,239,172,0.2) 0%, rgba(38,237,237,0.05) 75%);
+    background-size: 150% 100%;
+    animation: gradientFlow 2.5s ease-in-out infinite alternate;
+    background-position: 0%;
+
+    &:hover {
+        background-color: unset;
+        animation-play-state: paused;
+    }
 }

package/src/stories/menu/Menu.tsx

@@ -31,9 +31,11 @@ export const Menu: FC<MenuProps<React.ElementType>> & {
     Items: FC<MenuItemsProps<React.ElementType> & {
         position?: 'left' | 'right';
     }>;
-    Item: FC<MenuItemProps<React.ElementType>>;
+    Item: FC<MenuItemProps<React.ElementType> & {
+        isNew?: boolean;
+    }>;
 } = ({ className, children, ...props }) => (
-    <HeadlessMenu as="div" className={clsx(className, styles.menu)} {...props}>
+    <HeadlessMenu as="div" className={clsx(styles.menu, className)} {...props}>
         {children}
     </HeadlessMenu>
 );
@@ -44,7 +46,7 @@ export const Menu: FC<MenuProps<React.ElementType>> & {
  * Should be used inside a `Menu` component to serve as the toggle for `MenuItems`.
  */
 Menu.Button = ({ className, children, ...props }) => (
-    <HeadlessMenu.Button className={clsx(className, styles.menuButton)} {...props}>
+    <HeadlessMenu.Button className={clsx(styles.menuButton, className)} {...props}>
         {children}
     </HeadlessMenu.Button>
 );
@@ -59,7 +61,7 @@ Menu.Button = ({ className, children, ...props }) => (
 Menu.Items = ({
     className, children, position = 'left', ...props
 }) => (
-    <HeadlessMenu.Items className={clsx(className, styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition)} {...props}>
+    <HeadlessMenu.Items className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
         {children}
     </HeadlessMenu.Items>
 );
@@ -69,9 +71,12 @@ Menu.Items = ({
  *
  * Should be used inside `MenuItems` to represent selectable options in the menu.
  *
+ * @param isNew - Whether the menu items should be styled as new items.
  */
-Menu.Item = ({ className, children, ...props }) => (
-    <HeadlessMenu.Item className={clsx(className, styles.menuItem)} {...props}>
+Menu.Item = ({
+    className, children, isNew = false, ...props
+}) => (
+    <HeadlessMenu.Item className={clsx(styles.menuItem, isNew && styles.newItem, className)} {...props}>
         {children}
     </HeadlessMenu.Item>
 );

package/src/stories/tag/Tag.module.scss

@@ -16,6 +16,10 @@
     }
 }
 
+.new {
+    padding: 4px 10px;
+}
+
 .default {
     background-color: var(--pte-colors-backgroundTertiary);
     color: var(--pte-colors-contentTertiary);
@@ -43,10 +47,4 @@
     background-color: var(--pte-colors-backgroundNegative);
     color: var(--pte-colors-contentNegative);
     border-color: var(--pte-colors-contentNegative);
-}
-
-.new {
-    border: 1px solid var(--pte-colors-borderAccent);
-    background-color: var(--pte-tokens-colors-teal200);
-    box-shadow: 0px 0px 10px 0px color-mix(in srgb, var(--pte-colors-contentAccent) 30%, transparent);
 }

package/src/stories/tag/Tag.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import clsx from 'clsx';
 import styles from './Tag.module.scss';
 import typography from '../text/Typography.module.css';
@@ -10,7 +10,7 @@ export type TagProps = {
     kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new';
     /** The contents of the Tag. */
     children: ReactNode;
-};
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 
 /**
  * A Tag component.
@@ -28,6 +28,7 @@ export const Tag: FC<TagProps> = ({
     size = 'normal',
     kind = 'default',
     children,
+    className,
 }) => (
     <div
         className={clsx(
@@ -36,6 +37,7 @@ export const Tag: FC<TagProps> = ({
             styles[kind],
             size === 'normal' && typography.labelXSmall,
             size === 'compact' && typography.labelXXSmall,
+            className,
         )}
     >
         {children}

package/src/stories/theme/tokens.ts

@@ -23,6 +23,7 @@ export const Colors = {
     grey100: '#eeeeee',
     grey50: '#f6f6f6',
 
+    teal700: '#004136',
     teal600: '#18b199',
     teal500: '#1ad4b6',
     teal400: '#1deecd',