chore: migrate vui-source changes to v3.7.0 (#190)

vectara · Dec 20, 2024 · 133569d · 133569d
1 parent d9fa657
commit 133569d
Show file tree

Hide file tree

Showing 18 changed files with 87 additions and 52 deletions.
diff --git a/src/docs/pages/accordion/Accordion.tsx b/src/docs/pages/accordion/Accordion.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
-import { VuiAccordion, VuiSpacer, VuiText } from "../../../lib";
+import { VuiAccordion, VuiText } from "../../../lib";
 
 export const Accordion = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <VuiAccordion header="Open me" isOpen={isOpen} setIsOpen={setIsOpen}>
-      <VuiSpacer size="s" />
       <VuiText>
         <p>Peek-a-boo!</p>
       </VuiText>

diff --git a/src/docs/pages/timeline/Timeline.tsx b/src/docs/pages/timeline/Timeline.tsx
@@ -116,7 +116,6 @@ export const Timeline = () => {
         <VuiSpacer size="s" />
 
         <VuiAccordion header="Instructions" isOpen={isOpen} setIsOpen={setIsOpen}>
-          <VuiSpacer size="s" />
           <VuiText>
             <ol>
               <li>Secure mutagens</li>

diff --git a/src/lib/components/accordion/Accordion.tsx b/src/lib/components/accordion/Accordion.tsx
@@ -43,7 +43,7 @@ export const VuiAccordion = ({ header, children, isOpen, setIsOpen, ...rest }: P
       </button>
 
       {isOpen && (
-        <div id={contentId} aria-labelledby={buttonId}>
+        <div className="vuiAccordionBody" id={contentId} aria-labelledby={buttonId}>
           {children}
         </div>
       )}

diff --git a/src/lib/components/accordion/_index.scss b/src/lib/components/accordion/_index.scss
@@ -1,23 +1,35 @@
 .vuiAccordionHeader {
-  font-size: $fontSizeStandard;
-  border-bottom: 1px solid $borderColorLight;
+  font-size: $fontSizeSmall;
+  font-weight: $fontWeightBold;
+  padding: $sizeXs $sizeS;
+  background-color: $colorLightShade;
+  border: 1px solid $borderColorLight;
   width: 100%;
-  padding: $sizeXs 0;
-  color: $colorSubdued;
+  border-radius: $sizeXxs;
 
   &:hover {
     color: $colorPrimary;
     background-color: $colorPrimaryLighterShade;
+    border-color: transparentize($colorPrimary, 0.5);
     text-decoration: underline;
   }
 }
 
 .vuiAccordionHeader--isOpen {
   color: $colorText;
-  border-bottom-color: $borderColor;
   font-weight: $fontWeightBold;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .vuiAccordionHeader__title {
   text-align: left;
 }
+
+.vuiAccordionBody {
+  border: 1px solid $borderColorLight;
+  border-top: none;
+  padding: $sizeM $sizeL;
+  border-bottom-right-radius: $sizeXxs;
+  border-bottom-left-radius: $sizeXxs;
+}
diff --git a/src/lib/components/callout/_index.scss b/src/lib/components/callout/_index.scss
@@ -23,27 +23,35 @@
 // Color
 $color: (
   accent: (
-    "background-color": transparentize($colorAccent, 0.9)
+    "border-color": $colorAccentLightShade,
+    "background-color": $colorAccentLighterShade
   ),
   primary: (
-    "background-color": $colorPrimaryLightShade
+    "border-color": $colorPrimaryLightShade,
+    "background-color": $colorPrimaryLighterShade
   ),
   success: (
-    "background-color": transparentize($colorSuccess, 0.9)
+    "border-color": $colorSuccessLightShade,
+    "background-color": $colorSuccessLighterShade
   ),
   warning: (
-    "background-color": transparentize($colorWarning, 0.9)
+    "border-color": $colorWarningLightShade,
+    "background-color": $colorWarningLighterShade
   ),
   danger: (
-    "background-color": $colorDangerLightShade
+    "border-color": transparentize($colorDanger, 0.5),
+    "background-color": $colorDangerLighterShade
   ),
   neutral: (
+    "border-color": $colorMediumShade,
     "background-color": $colorLightShade
   )
 );
 
 @each $colorName, $colorValue in $color {
   .vuiCallout--#{$colorName} {
+    border-radius: $sizeXxs;
+    border: 1px solid #{map.get($colorValue, "border-color")};
     background-color: #{map.get($colorValue, "background-color")};
   }
 }
diff --git a/src/lib/components/card/_index.scss b/src/lib/components/card/_index.scss
@@ -105,10 +105,10 @@
   border: 2px solid $colorAccent;
 
   .vuiCard__header {
-    background-color: $colorAccentLightShade;
+    background-color: $colorAccentLighterShade;
   }
 
   .vuiCard__body {
-    border-top: $colorAccentLightShade;
+    border-top: $colorAccentLighterShade;
   }
 }
diff --git a/src/lib/components/chat/_index.scss b/src/lib/components/chat/_index.scss
@@ -25,7 +25,7 @@ $minChatWidth: 600px;
   padding: $sizeXs $sizeS;
   font-size: $fontSizeStandard;
   color: $colorText;
-  background-color: $colorPrimaryLightShade;
+  background-color: $colorPrimaryLighterShade;
   border: 1px solid $borderColor;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   transition: all $transitionSpeed;
@@ -104,7 +104,7 @@ $minChatWidth: 600px;
   padding: $sizeXs $sizeS;
   font-size: $fontSizeStandard;
   color: $colorText;
-  background-color: $colorPrimaryLightShade;
+  background-color: $colorPrimaryLighterShade;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   // Ensure shadow overlaps on top of conversation.
   z-index: 2;

diff --git a/src/lib/components/drawer/_index.scss b/src/lib/components/drawer/_index.scss
@@ -29,7 +29,6 @@ $drawerWidth: 680px;
 
 .vuiDrawerHeader {
   padding: $sizeS $sizeL;
-  background-color: $colorLightShade;
 }
 
 .vuiDrawerHeader__title {
@@ -45,7 +44,7 @@ $drawerWidth: 680px;
 }
 
 .vuiDrawerContent__inner {
-  padding: $sizeL $sizeL;
+  padding: $sizeS $sizeL $sizeL;
 }
 
 // Color

diff --git a/src/lib/components/form/superRadioGroup/_index.scss b/src/lib/components/form/superRadioGroup/_index.scss
@@ -1,6 +1,5 @@
 .vuiSuperRadioGroup {
   display: grid;
-  gap: $sizeXs;
 }
 
 .vuiSuperRadioButton {
@@ -13,7 +12,6 @@
   transition: all $transitionSpeed;
   text-decoration-color: $colorText;
   text-align: left;
-  border: 1px solid $colorPrimaryLightShade;
 
   &:hover {
     text-decoration: underline;

diff --git a/src/lib/components/list/_index.scss b/src/lib/components/list/_index.scss
@@ -24,6 +24,6 @@
 }
 
 .vuiListNumber-isComplete {
-  background-color: $colorAccentLightShade;
+  background-color: $colorAccentLighterShade;
   color: $colorAccent;
 }
diff --git a/src/lib/components/modal/_index.scss b/src/lib/components/modal/_index.scss
@@ -54,7 +54,6 @@ $modalWidth: 500px;
 
 .vuiModalHeader {
   padding: $sizeS $sizeM;
-  background-color: $colorLightShade;
 }
 
 .vuiModalHeader__title {
@@ -70,7 +69,7 @@ $modalWidth: 500px;
 }
 
 .vuiModalContent__inner {
-  padding: $sizeL $sizeM $sizeXxl;
+  padding: $sizeS $sizeM $sizeXxl;
 }
 
 // Color

diff --git a/src/lib/components/optionsList/_index.scss b/src/lib/components/optionsList/_index.scss
@@ -43,7 +43,7 @@ $color: (
   accent: (
     "color": $colorAccent,
     "hover-color": $colorAccent,
-    "selected-color": $colorAccentLightShade
+    "selected-color": $colorAccentLighterShade
   ),
   primary: (
     "color": $colorPrimary,
@@ -53,17 +53,17 @@ $color: (
   success: (
     "color": $colorSuccess,
     "hover-color": $colorSuccess,
-    "selected-color": $colorSuccessLightShade
+    "selected-color": $colorSuccessLighterShade
   ),
   danger: (
     "color": $colorDanger,
     "hover-color": $colorDanger,
-    "selected-color": $colorDangerLightShade
+    "selected-color": $colorDangerLighterShade
   ),
   warning: (
     "color": $colorWarning,
     "hover-color": $colorWarning,
-    "selected-color": $colorWarningLightShade
+    "selected-color": $colorWarningLighterShade
   ),
   neutral: (
     "color": $colorText,

diff --git a/src/lib/components/popover/Popover.tsx b/src/lib/components/popover/Popover.tsx
@@ -52,6 +52,7 @@ export const VuiPopover = ({
   const buttonRef = useRef<HTMLElement | null>(null);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [positionMarker, setPositionMarker] = useState<number>(0);
+  const [showTransition, setShowTransition] = useState(false);
 
   const button = cloneElement(originalButton, {
     isSelected: isOpen,
@@ -83,6 +84,9 @@ export const VuiPopover = ({
   useEffect(() => {
     if (isOpen) {
       returnFocusElRef.current = document.activeElement as HTMLElement;
+      requestAnimationFrame(() => {
+        setShowTransition(true);
+      });
     } else {
       returnFocusElRef.current?.focus();
       returnFocusElRef.current = null;
@@ -95,6 +99,7 @@ export const VuiPopover = ({
   const onCloseDelayed = () => {
     window.setTimeout(() => {
       setIsOpen(false);
+      setShowTransition(false);
     }, 0);
   };
 
@@ -103,7 +108,9 @@ export const VuiPopover = ({
   // of the button changes.
   const position = calculatePopoverPosition(buttonRef.current, anchorSide);
 
-  const classes = classNames("vuiPopover", className);
+  const classes = classNames("vuiPopover", className, {
+    "vuiPopover-isLoaded": showTransition
+  });
 
   const contentClasses = classNames("vuiPopoverContent", {
     "vuiPopoverContent--padding": padding

diff --git a/src/lib/components/popover/_index.scss b/src/lib/components/popover/_index.scss
@@ -6,6 +6,16 @@
   box-shadow: $shadowLargeEnd;
   border-radius: $sizeXxs;
   overflow: hidden;
+  opacity: 0;
+  transform: translateY(-$sizeXs);
+  transition: opacity $transitionSpeed, transform $transitionSpeed;
+  visibility: hidden;
+}
+
+.vuiPopover-isLoaded {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .vuiOptionsListItem__selected--unselected {

diff --git a/src/lib/components/prompt/_index.scss b/src/lib/components/prompt/_index.scss
@@ -29,7 +29,7 @@
 
 .vuiPrompt--interactive {
   &:hover {
-    background-color: $colorAccentLightShade;
+    background-color: $colorAccentLighterShade;
     color: $colorAccent;
   }
 }
@@ -38,7 +38,7 @@
 $color: (
   danger: (
     "color": $colorDanger,
-    "background-color": $colorDangerLightShade
+    "background-color": $colorDangerLighterShade
   ),
   neutral: (
     "color": $colorDarkShade,

diff --git a/src/lib/components/summary/_index.scss b/src/lib/components/summary/_index.scss
@@ -18,7 +18,7 @@
 
   &:hover {
     color: $colorPrimary;
-    background-color: $colorPrimaryLightShade;
+    background-color: $colorPrimaryLighterShade;
     text-decoration: underline;
   }
 }

diff --git a/src/lib/components/tabs/_index.scss b/src/lib/components/tabs/_index.scss
@@ -97,7 +97,7 @@
     box-shadow: $borderColor 0px 1px 0px;
 
     .vuiTab__inner {
-      background-color: $colorMediumLightShade;
+      background-color: $colorLightShade;
     }
   }
 }
diff --git a/src/lib/sassUtils/_colors.scss b/src/lib/sassUtils/_colors.scss
@@ -1,24 +1,28 @@
 // Semantic colors
-$colorAccent: #551edf !default;
-$colorPrimary: #264cd6 !default;
-$colorSuccess: #04821f !default;
-$colorWarning: #965a15 !default;
-$colorDanger: #c41535 !default;
+$colorAccent: #5f30c3 !default;
+$colorAccentLightShade: transparentize($colorAccent, 0.5);
+$colorAccentLighterShade: #eee7ff !default;
 
-// Semantic shades
-$colorAccentLightShade: #eadfff !default;
-$colorPrimaryLightShade: #d9e2ff !default;
-$colorPrimaryLighterShade: #edf5ff !default;
-$colorSuccessLightShade: #e9f2e9 !default;
-$colorWarningLightShade: #f4eee8 !default;
-$colorDangerLightShade: #fae9eb !default;
-$colorDangerLighterShade: #fdeff0 !default;
+$colorPrimary: #045dda !default;
+$colorPrimaryLightShade: transparentize($colorPrimary, 0.5) !default;
+$colorPrimaryLighterShade: #f1f7ff !default;
+
+$colorSuccess: #249719 !default;
+$colorSuccessLightShade: transparentize($colorSuccess, 0.5) !default;
+$colorSuccessLighterShade: #e2f2e0 !default;
+
+$colorWarning: #a86f1b !default;
+$colorWarningLightShade: transparentize($colorWarning, 0.5);
+$colorWarningLighterShade: #ffeed4 !default;
+
+$colorDanger: #d22d2d !default;
+$colorDangerLightShade: transparentize($colorDanger, 0.5);
+$colorDangerLighterShade: #fff1f1 !default;
 
 // Neutral colors
 $colorEmptyShade: #ffffff !default;
-$colorLightShade: #f3f7fb !default;
-$colorMediumLightShade: #e8eff5 !default;
-$colorMediumShade: #cbcdde !default;
+$colorLightShade: #eeeff1 !default;
+$colorMediumShade: #cbd1de !default;
 $colorDarkShade: #69707d !default;
-$colorDarkerShade: #2c313a !default;
-$colorFullShade: #000 !default;
+$colorDarkerShade: #1c1d22 !default;
+$colorFullShade: #0b0c0e !default;