@vectara/vectara-ui 16.1.0 → 16.1.2

package/lib/components/app/appLayout.scss

@@ -20,4 +20,5 @@
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
+  scrollbar-gutter: stable;
 }

package/lib/components/screenBlock/_index.scss

@@ -17,11 +17,11 @@
   opacity: 0;
 }
 
-.vuiScreenBlock--default {
+.vuiScreenBlock.vuiScreenBlock--default {
   z-index: $screenBlockZIndex;
 }
 
-.vuiScreenBlock--modal {
+.vuiScreenBlock.vuiScreenBlock--modal {
   z-index: $modalZIndex;
 }
 

package/lib/components/stepsVertical/_index.scss

@@ -8,11 +8,13 @@
 .vuiStepVerticalContainer {
   padding-left: $sizeS;
   border-left: 1px solid var(--vui-color-medium-shade);
+  transition: border-left-color $transitionSpeed;
 }
 
 .vuiStepVerticalContainer-isActive {
   padding-left: $sizeS - 1px;
-  border-left: 2px solid var(--vui-color-primary-shade);
+  border-left-width: 2px;
+  border-left-color: var(--vui-color-primary-shade);
 }
 
 .vuiStepVerticalContainer {
@@ -45,7 +47,6 @@
 
     .vuiStepVerticalContainer__icon {
       .vuiIcon--token {
-        // border-color: var(--vui-color-medium-shade);
         box-shadow: $shadowSmallEnd;
       }
     }

package/lib/styles/index.css

@@ -403,6 +403,7 @@ fieldset {
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .vuiAppSideNav {
@@ -4502,11 +4503,11 @@ h2.react-datepicker__current-month {
   opacity: 0;
 }
 
-.vuiScreenBlock--default {
+.vuiScreenBlock.vuiScreenBlock--default {
   z-index: 10;
 }
 
-.vuiScreenBlock--modal {
+.vuiScreenBlock.vuiScreenBlock--modal {
   z-index: 12;
 }
 
@@ -5084,11 +5085,13 @@ h2.react-datepicker__current-month {
 .vuiStepVerticalContainer {
   padding-left: 12px;
   border-left: 1px solid var(--vui-color-medium-shade);
+  transition: border-left-color 0.2s;
 }
 
 .vuiStepVerticalContainer-isActive {
   padding-left: 11px;
-  border-left: 2px solid var(--vui-color-primary-shade);
+  border-left-width: 2px;
+  border-left-color: var(--vui-color-primary-shade);
 }
 
 .vuiStepVerticalContainer {

package/package.json

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

package/src/docs/pages/drawer/PrimaryDrawer.tsx

@@ -5,6 +5,7 @@ import {
   VuiButtonSecondary,
   VuiDrawer,
   VuiFlexContainer,
+  VuiModal,
   VuiNotifications,
   VuiSpacer,
   VuiText,
@@ -16,6 +17,7 @@ import { FormGroup } from "../searchSelect/FormGroup";
 export const PrimaryDrawer = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [hasFooter, setHasFooter] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
@@ -67,6 +69,12 @@ export const PrimaryDrawer = () => {
 
         <VuiSpacer size="m" />
 
+        <VuiButtonSecondary color="primary" onClick={() => setIsModalOpen(true)}>
+          Open modal from drawer
+        </VuiButtonSecondary>
+
+        <VuiSpacer size="m" />
+
         <VuiText>
           <p>I just thought you should know that your drawer is showing.</p>
         </VuiText>
@@ -203,6 +211,15 @@ export const PrimaryDrawer = () => {
         <VuiSpacer size="l" />
       </VuiDrawer>
 
+      <VuiModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="I'm a modal inside a drawer!">
+        <VuiText>
+          <p>
+            This modal is rendered inside the drawer. It demonstrates that you can have multiple layers of overlays and
+            that the focus management and scroll locking still work as expected.
+          </p>
+        </VuiText>
+      </VuiModal>
+
       <VuiNotifications />
     </>
   );