@companycam/slab-web 2.1.0 → 2.1.1

package/lib/Modal/Modal.d.ts

@@ -1,6 +1,16 @@
 import { CSSProperties, ReactNode } from 'react';
 type AsProp = keyof HTMLElementTagNameMap;
-export type ModalProps = {
+type ModalFooterProps = {
+    /** replace footer or pass `null` for no footer */
+    footerComponent?: ReactNode;
+    /** content slot for buttons in footer */
+    footerActions?: ReactNode;
+    /** content slot on left side of footer */
+    footerContentBefore?: ReactNode;
+    /** target footer container */
+    footerStyle?: CSSProperties;
+};
+export type ModalProps = ModalFooterProps & {
     isOpen: boolean;
     onClose: () => void;
     title: string;
@@ -16,18 +26,10 @@ export type ModalProps = {
     bodyStyle?: CSSProperties;
     /** target header container */
     headerStyle?: CSSProperties;
-    /** target footer container */
-    footerStyle?: CSSProperties;
     /** replace header or pass `null` for no header */
     headerComponent?: ReactNode | null;
     /** content slot below title in header */
     headerContentAfter?: ReactNode;
-    /** replace footer or pass `null` for no footer */
-    footerComponent?: ReactNode | null;
-    /** content slot for buttons in footer */
-    footerActions?: ReactNode;
-    /** content slot on left side of footer */
-    footerContentBefore?: ReactNode;
     /** `small (600)` | `medium (900)` | `large (full)` */
     size?: 'small' | 'medium' | 'large';
 };
@@ -35,6 +37,7 @@ export type ModalProps = {
  * - `Modal` is a controlled component; you must manage the `isOpen` state and provide an `onClose` handler
  * - `title` is required for accessibility. If you replace or provide no header via props, it will be read via `aria-label`
  * - The modal body (main content area) has padding is scrollable by default. Overwrite via `bodyStyle`.
+ * - Use `design="outline"` for non-primary footer actions (e.g. Cancel) to visually distinguish them from the primary action.
  */
 export declare function Modal({ isOpen, onClose, as, children, 'data-testid__close-button': dataTestIdCloseButton, bodyStyle, containerStyle, headerStyle, footerStyle, headerComponent, headerContentAfter, footerComponent, footerActions, footerContentBefore, size, title, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",