paris 0.14.0 → 0.14.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # paris
 
+## 0.14.2
+
+### Patch Changes
+
+- 8252518: InformationalTooltip: Added overrides, and increased padding
+- 8252518: Menu: Item side padding from 16px to 14px
+
+## 0.14.1
+
+### Patch Changes
+
+- ffa4d0c: InformationalTooltip: Removed `headingIcon` prop
+- ffa4d0c: InformationalTooltip: Opens onClick for mobile support, new `disableClick` prop to disable that behavior
+
 ## 0.14.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.14.0",
+  "version": "0.14.2",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/informationaltooltip/InformationalTooltip.module.scss

@@ -7,7 +7,7 @@
     justify-content: center;
     gap: 6px;
     width: 280px;
-    padding: 12px;
+    padding: 12px 14px;
     color: var(--pte-new-colors-contentTertiary);
 
     &.medium {
@@ -20,5 +20,4 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding-left: 1px;
 }

package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { createElement } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { InformationalTooltip } from './InformationalTooltip';
 
 const meta: Meta<typeof InformationalTooltip> = {
@@ -63,26 +61,3 @@ export const CustomAlign: Story = {
     },
     render,
 };
-
-export const HeadingIcon: Story = {
-    args: {
-        children: 'This is a medium tooltip with a heading',
-        size: 'medium',
-        headingIcon: (createElement(FontAwesomeIcon, {
-            icon: faPlus,
-            width: '14px',
-        })),
-        heading: 'Custom icon',
-    },
-    render,
-};
-
-export const NullIcon: Story = {
-    args: {
-        children: 'But the headingIcon is null',
-        size: 'medium',
-        headingIcon: null,
-        heading: 'This has a heading',
-    },
-    render,
-};

package/src/stories/informationaltooltip/InformationalTooltip.tsx

@@ -1,7 +1,8 @@
-import type { FC, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { useState } from 'react';
 import clsx from 'clsx';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { HTMLMotionProps } from 'framer-motion';
 import { motion, AnimatePresence } from 'framer-motion';
 import styles from './InformationalTooltip.module.scss';
 import { TextWhenString } from '../utility';
@@ -19,8 +20,6 @@ export type InformationalTooltipProps = {
     trigger?: ReactNode;
     /** The heading text in the tooltip. If null, the heading will be hidden. */
     heading?: string | null;
-    /** The heading icon in the tooltip. If undefined, will show info icon. If pass in an element, it will display in the heading. If set to null, will hide icon. */
-    headingIcon?: ReactNode | null | undefined;
     /** The contents of the tooltip. */
     children?: ReactNode;
     /**
@@ -46,6 +45,22 @@ export type InformationalTooltipProps = {
      * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * By default, tooltip opens on hover and on click (for mobile support). If you want to disable the click event, set this to true.
+     * @default false
+     */
+    disableClick?: boolean;
+    /**
+     * Optional overrides for props of each tooltip element.
+     *
+     * Valid keys are: `tooltip`, `heading`.
+     */
+    overrides?: {
+        /** The main tooltip element  */
+        tooltip?: HTMLMotionProps<'div'>,
+        /** The heading element */
+        heading?: ComponentPropsWithoutRef<'div'>,
+    }
 };
 
 /**
@@ -64,12 +79,13 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
     size = 'large',
     trigger,
     heading,
-    headingIcon,
     children,
     side = 'bottom',
     sideOffset = 6,
     align = 'start',
     defaultOpen = false,
+    disableClick = false,
+    overrides,
 }) => {
     const [isOpen, setOpen] = useState(defaultOpen);
 
@@ -103,7 +119,13 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
                 open={isOpen}
                 onOpenChange={setOpen}
             >
-                <RadixTooltip.Trigger>
+                <RadixTooltip.Trigger
+                    onClick={() => {
+                        if (!disableClick) {
+                            setOpen(!isOpen);
+                        }
+                    }}
+                >
                     {!trigger ? (
                         <Icon icon={Info} size={14} className={styles.icon} style={{ color: pvar('new.colors.contentSecondary') }} />
                     ) : (
@@ -126,13 +148,14 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
                                     animate={{ opacity: 1, y: 0 }}
                                     exit={{ opacity: 0, y: 3 }}
                                     transition={{ duration: parseCSSTime(pget('new.animations.duration.normal')) / 1000 }}
-                                    className={clsx(styles.tooltip, styles[size])}
+                                    {...overrides?.tooltip}
+                                    className={clsx(styles.tooltip, styles[size], overrides?.tooltip?.className)}
                                 >
                                     {heading && (
-                                        <div className={styles.heading}>
-                                            {headingIcon === null ? null : headingIcon || (
-                                                <Icon icon={Info} size={14} className={styles.icon} />
-                                            )}
+                                        <div
+                                            {...overrides?.heading}
+                                            className={clsx(styles.heading, overrides?.heading?.className)}
+                                        >
                                             <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
                                                 {heading}
                                             </TextWhenString>

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

@@ -34,7 +34,7 @@
 
 .menuItem {
     width: 100%;
-    padding: 8px 16px;
+    padding: 8px 14px;
 
     display: flex;
     align-items: center;