paris 0.8.10 → 0.8.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.8.12
+
+### Patch Changes
+
+- 9c1955b: Add emptyState render for Table when there are no rows to display
+
+## 0.8.11
+
+### Patch Changes
+
+- 28104e0: feat(drawer): Make drawer overlay style default grey and adjust backgroundOverlayGrey color
+
 ## 0.8.10
 
 ### 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.10",
+  "version": "0.8.12",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

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

@@ -34,7 +34,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     }
 
     &.overlayGreyed {
-        background-color: rgba(175, 175, 175, 0); // Non-transparent backgroundOverlayGrey
+        background-color: rgba(175, 175, 175, 0); // Non-transparent backgroundOverlayGrey (for start animation)
         will-change: background-color, opacity;
     }
 }

package/src/stories/drawer/Drawer.tsx

@@ -126,7 +126,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     from = 'right',
     size = 'default',
     pagination,
-    overlayStyle = 'blur',
+    overlayStyle = 'greyed',
     additionalActions,
     children,
 }: DrawerProps<T>) => {

package/src/stories/table/Table.module.scss

@@ -27,6 +27,14 @@
         border-bottom: 1px solid var(--pte-colors-borderOpaque);
     }
 
+    tr.empty {
+        border-bottom: none;
+
+        td {
+            padding: 20px 0 0 0;
+        }
+    }
+
     tbody tr.clickable {
         transition: background-color var(--pte-animations-interaction);
 

package/src/stories/table/Table.tsx

@@ -55,6 +55,11 @@ export type TableProps<
      * Whether the rows should be clickable.
      */
     clickableRows?: boolean;
+
+    /**
+     * The content to display when the table is empty.
+     */
+    emptyState?: ReactNode;
     /**
      * Prop overrides for rendered elements.
      */
@@ -87,6 +92,7 @@ export function Table<RowData extends Record<string, any>[]>({
     rowRenderFn,
     onRowClick,
     clickableRows = true,
+    emptyState,
     overrides,
 }: TableProps<RowData>) {
     const id = useId();
@@ -164,6 +170,15 @@ export function Table<RowData extends Record<string, any>[]>({
                 </tr>
             </thead>
             <tbody {...overrides?.tbody}>
+                {renderedRows.length === 0 && emptyState && (
+                    <>
+                        <tr className={styles.empty}>
+                            <td colSpan={columns.length} className={styles.emptyState}>
+                                {emptyState}
+                            </td>
+                        </tr>
+                    </>
+                )}
                 {renderedRows}
             </tbody>
         </table>

package/src/stories/theme/themes.ts

@@ -330,7 +330,7 @@ export const LightTheme: Theme = {
 
         backgroundOverlayLight: 'rgba(255, 255, 255, 0.07)',
         backgroundOverlayXLight: 'rgba(255, 255, 255, 0.1)',
-        backgroundOverlayGrey: 'rgba(175, 175, 175, 0.8)',
+        backgroundOverlayGrey: 'rgba(60, 60, 60, 0.65)',
         backgroundOverlayDark: 'rgba(0, 0, 0, 0.1)',
         backgroundOverlayTeal: 'rgba(29, 238, 205, 0.1)',