paris 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # paris
 
+## 0.6.1
+
+### Patch Changes
+
+- 5193149: Tabs: make controllable
+- 2fd3be7: Drawer: bottom panel
+- 8950299: Button: preset themes
+
 ## 0.6.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.6.0",
+  "version": "0.6.1",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/button/Button.tsx

@@ -12,6 +12,7 @@ import styles from './Button.module.scss';
 import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import { pvar } from '../theme';
 
 const EnhancerSizes = {
     large: 13,
@@ -19,6 +20,21 @@ const EnhancerSizes = {
     xs: 9,
 };
 
+export const ButtonThemes = {
+    negative: {
+        primary: pvar('colors.contentNegative'),
+        secondary: pvar('colors.backgroundNegative'),
+    },
+    positive: {
+        primary: pvar('colors.contentPositive'),
+        secondary: pvar('colors.backgroundPositive'),
+    },
+    warning: {
+        primary: pvar('colors.contentWarning'),
+        secondary: pvar('colors.backgroundWarning'),
+    },
+} as const;
+
 export type ButtonProps = {
     /**
      * The appearance of the Button.
@@ -46,6 +62,10 @@ export type ButtonProps = {
          */
         secondary: string;
     };
+    /**
+     * Preset themes for coloring the button. Overrides the `colors` prop.
+     */
+    theme?: keyof typeof ButtonThemes;
     /**
      * An icon or other element to render before the Button's text. A `size` argument is passed that should be used to determine the width & height of the content displayed.
      *
@@ -99,6 +119,7 @@ export const Button: FC<ButtonProps> = ({
     size = 'large',
     shape = 'pill',
     colors,
+    theme,
     type = 'button',
     startEnhancer,
     endEnhancer,
@@ -110,12 +131,12 @@ export const Button: FC<ButtonProps> = ({
 }) => (
     <AriaButton
         {...props}
-        style={colors ? {
-            '--pte-colors-contentInversePrimary': fontColorContrast(colors.primary),
-            '--pte-colors-backgroundInversePrimary': colors.primary,
-            '--pte-colors-backgroundInverseTertiary': colors.secondary,
-            '--pte-colors-contentPrimary': colors.primary,
-            '--pte-colors-backgroundTertiary': colors.secondary,
+        style={(theme || colors) ? {
+            '--pte-colors-contentInversePrimary': fontColorContrast(theme ? ButtonThemes[theme].primary : colors?.primary || pvar('colors.contentPrimary')),
+            '--pte-colors-backgroundInversePrimary': theme ? ButtonThemes[theme].primary : colors?.primary,
+            '--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 : {}}
         className={clsx(
             styles.button,

package/src/stories/drawer/Drawer.module.scss

@@ -330,3 +330,8 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 .paginationLeave {
     transition: $paginationDuration var(--pte-animations-timing-easeOutQuad);
 }
+
+.bottomPanel {
+    padding: 20px;
+    border-top: 1px solid var(--pte-colors-borderOpaque);
+}

package/src/stories/drawer/Drawer.tsx

@@ -60,6 +60,10 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      * @default false
      */
     hideCloseButton?: boolean;
+    /**
+     * An optional panel that will be rendered at the bottom of the Drawer. This is useful for adding a footer to the Drawer with actions.
+     */
+    bottomPanel?: ReactNode;
     /**
      * The direction from which the Drawer will appear.
      */
@@ -120,6 +124,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     title,
     hideTitle = false,
     hideCloseButton = false,
+    bottomPanel,
     from = 'right',
     size = 'default',
     pagination,
@@ -341,6 +346,12 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                     </Transition>
                                 )) : children}
                             </div>
+
+                            <RemoveFromDOM when={!bottomPanel}>
+                                <div className={styles.bottomPanel}>
+                                    {bottomPanel}
+                                </div>
+                            </RemoveFromDOM>
                         </Dialog.Panel>
                     </Transition.Child>
                 </div>

package/src/stories/tabs/Tabs.tsx

@@ -34,6 +34,10 @@ export type TabsProps = {
      * The default index of the tab to render. Defaults to `0`.
      */
     defaultIndex?: number;
+    /**
+     * Pass in a controlled index to control the selected tab.
+     */
+    index?: number;
     /**
      * An optional handler for tab changes.
      * @param index - The index of the tab that was selected.
@@ -58,6 +62,7 @@ export const Tabs: FC<TabsProps> = ({
     tabWidth = '150px',
     kind = 'auto',
     defaultIndex = 0,
+    index,
     onTabChange,
 }) => {
     const id = useId();
@@ -66,7 +71,7 @@ export const Tabs: FC<TabsProps> = ({
     return (
         <Tab.Group
             as="div"
-            selectedIndex={selectedIndex}
+            selectedIndex={index ?? selectedIndex}
             onChange={(i) => {
                 setSelectedIndex(i);
                 if (onTabChange) {
@@ -77,13 +82,13 @@ export const Tabs: FC<TabsProps> = ({
             <Tab.List
                 style={{
                     '--tab-width': tabWidth,
-                    '--tab-index': `${selectedIndex}`,
+                    '--tab-index': `${index ?? selectedIndex}`,
                 } as CSSProperties}
                 className={clsx(
                     styles.tabList,
                 )}
             >
-                {tabs.map(({ title }, index) => (
+                {tabs.map(({ title }, i) => (
                     <Tab
                         key={`${id}-tab-${title}`}
                         className={clsx(
@@ -93,7 +98,7 @@ export const Tabs: FC<TabsProps> = ({
                         )}
                     >
                         {title}
-                        {index === selectedIndex && (
+                        {i === (index ?? selectedIndex) && (
                             <motion.div
                                 key={`${id}-tab-active-border`}
                                 className={styles.activeTabUnderline}