@vectara/vectara-ui 12.0.2 → 12.1.1

package/README.md

@@ -28,6 +28,40 @@ If you are using Sass and need Vectara UI's Sass variables, you can use this imp
 @import "@vectara/vectara-ui/lib/sassUtils/index";
 ```
 
+## Software design principles
+
+We use these principles to guide how we design components, utilities, and other code in VUI.
+
+### Features must have clear use cases
+
+- Adding code is easy. Removing code is hard. Try not to add code.
+- Only add code if we'll use it.
+- If we'll use the code, demonstrate how with an example in the docs.
+
+### Module surface area should be as small as possible
+
+- Nobody enjoys tracking dependencies.
+- Modules with many exports make it hard to know which exports matter.
+- Keep modules simple. Export only what the consumer will need.
+
+### Props should be opinionated
+
+- Nobody enjoys CSS. The primary interface of VUI is React and TS, not CSS.
+- Design props as abstractions over the CSS. Optimize for common use cases.
+- Expect the consuming developer to think about the CSS as a last resort.
+
+### Components should be composable
+
+- Treat components like Legos.
+- Only add a feature to a component if it can't be done by putting components together.
+- If you're writing a lot of custom code in an example, consider moving it to a component.
+
+### Optimize for greppability
+
+- JS refers to CSS via strings. Our tools don't tell us when those references break.
+- Grep is the best way to find relevant CSS class names.
+- Write CSS class names out fully. Avoid Sass concatenation outside of loops.
+
 ## Publishing
 
 Publishing a new version of the package consists of three steps:

package/lib/components/drawer/Drawer.js

@@ -49,5 +49,5 @@ export const VuiDrawer = (_a) => {
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close drawer", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
+                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
 };

package/lib/components/drawer/_index.scss

@@ -25,6 +25,10 @@ $drawerWidth: 680px;
   border-left: 1px solid var(--vui-color-border-medium);
   z-index: $drawerZIndex;
   animation: drawerIn $transitionSpeed cubic-bezier(0, 1, 0, 1);
+
+  @media screen and (max-width: $drawerWidth + $sizeM) {
+    max-width: calc(100% - $sizeM);
+  }
 }
 
 .vuiDrawerHeader {

package/lib/components/modal/Modal.d.ts

@@ -9,6 +9,7 @@ type Props = {
     onClose?: () => void;
     color?: (typeof COLOR)[number];
     key?: string;
+    size?: "s" | "m" | "l";
 };
-export declare const VuiModal: ({ className, color, title, icon, children, isOpen, onClose, key, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiModal: ({ className, color, title, icon, children, isOpen, onClose, key, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/modal/Modal.js

@@ -23,7 +23,7 @@ import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
 import { useVuiContext } from "../context/Context";
 const COLOR = ["primary", "danger"];
 export const VuiModal = (_a) => {
-    var { className, color = "primary", title, icon, children, isOpen, onClose, key } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose", "key"]);
+    var { className, color = "primary", title, icon, children, isOpen, onClose, key, size = "s" } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose", "key", "size"]);
     const { DrawerTitle } = useVuiContext();
     const returnFocusElRef = useRef(null);
     // Return focus on unmount.
@@ -43,11 +43,11 @@ export const VuiModal = (_a) => {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 0);
     };
-    const classes = classNames("vuiModal", `vuiModal--${color}`, className);
+    const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
     return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close modal", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }, key)) }));
+                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }, key)) }));
 };

package/lib/components/modal/_index.scss

@@ -1,7 +1,5 @@
 @use "sass:map";
 
-$modalWidth: 500px;
-
 @keyframes modalIn {
   0% {
     transform: translateY(12px);
@@ -31,24 +29,29 @@ $modalWidth: 500px;
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: $modalWidth;
-  max-height: calc(100vh - $sizeXl);
+  max-height: calc(100% - $sizeM * 2);
   background-color: var(--vui-color-empty-shade);
   border-radius: $sizeXxs;
   z-index: $modalZIndex;
   pointer-events: all;
   box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  transition: height $transitionSpeed, max-width $transitionSpeed, max-height $transitionSpeed;
+}
 
-  @media screen and (max-width: 1000px) {
-    & {
-      max-width: 100%;
-    }
-  }
+$size: (
+  s: 500px,
+  m: 900px,
+  l: 1300px
+);
+
+@each $sizeName, $sizeValue in $size {
+  .vuiModal--#{$sizeName} {
+    max-width: $sizeValue;
 
-  @media screen and (max-height: 600px) {
-    & {
-      max-height: 100%;
-      height: 100%;
+    @media screen and (max-width: ($sizeValue + $sizeXl * 2)) {
+      & {
+        max-width: calc(100% - $sizeM * 2);
+      }
     }
   }
 }

package/lib/styles/index.css

@@ -2283,6 +2283,11 @@ h2.react-datepicker__current-month {
   z-index: 11;
   animation: drawerIn 0.2s cubic-bezier(0, 1, 0, 1);
 }
+@media screen and (max-width: 696px) {
+  .vuiDrawer {
+    max-width: calc(100% - 16px);
+  }
+}
 
 .vuiDrawerHeader {
   padding: 12px 24px;
@@ -3751,23 +3756,39 @@ h2.react-datepicker__current-month {
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 500px;
-  max-height: calc(100vh - 32px);
+  max-height: calc(100% - 32px);
   background-color: var(--vui-color-empty-shade);
   border-radius: 4px;
   z-index: 12;
   pointer-events: all;
   box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  transition: height 0.2s, max-width 0.2s, max-height 0.2s;
 }
-@media screen and (max-width: 1000px) {
-  .vuiModal {
-    max-width: 100%;
+
+.vuiModal--s {
+  max-width: 500px;
+}
+@media screen and (max-width: 564px) {
+  .vuiModal--s {
+    max-width: calc(100% - 32px);
   }
 }
-@media screen and (max-height: 600px) {
-  .vuiModal {
-    max-height: 100%;
-    height: 100%;
+
+.vuiModal--m {
+  max-width: 900px;
+}
+@media screen and (max-width: 964px) {
+  .vuiModal--m {
+    max-width: calc(100% - 32px);
+  }
+}
+
+.vuiModal--l {
+  max-width: 1300px;
+}
+@media screen and (max-width: 1364px) {
+  .vuiModal--l {
+    max-width: calc(100% - 32px);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "12.0.2",
+  "version": "12.1.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",