@vectara/vectara-ui 13.14.1 → 13.15.0

package/lib/components/card/Card.d.ts

@@ -6,7 +6,7 @@ type Props = {
     className?: string;
     interactive?: boolean;
     href?: string;
-    padding?: "s" | "m" | "l";
+    padding?: "xxs" | "xs" | "s" | "m" | "l";
     ungrouped?: boolean;
     fullHeight?: boolean;
     isScrollable?: boolean;

package/lib/components/card/SimpleCard.d.ts

@@ -4,7 +4,7 @@ type Props = {
     fullHeight?: boolean;
     href?: string;
     onClick?: (e: MouseEvent) => void;
-    padding?: "xs" | "s" | "m" | "l";
+    padding?: "xxs" | "xs" | "s" | "m" | "l";
     children?: React.ReactNode;
 };
 export declare const VuiSimpleCard: ({ href, className, fullHeight, padding, children, onClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/card/_index.scss

@@ -83,8 +83,25 @@
   overflow-y: auto;
 }
 
+.vuiCard--xxs {
+  .vuiCard__header,
+  .vuiCard__expandableButton,
+  .vuiCard__body {
+    padding: $sizeXs $sizeS;
+  }
+}
+
+.vuiCard--xs {
+  .vuiCard__header,
+  .vuiCard__expandableButton,
+  .vuiCard__body {
+    padding: $sizeS $sizeM;
+  }
+}
+
 .vuiCard--s {
   .vuiCard__header,
+  .vuiCard__expandableButton,
   .vuiCard__body {
     padding: $sizeM $sizeL;
   }
@@ -92,6 +109,7 @@
 
 .vuiCard--m {
   .vuiCard__header,
+  .vuiCard__expandableButton,
   .vuiCard__body {
     padding: $sizeL $sizeXl;
   }
@@ -99,6 +117,7 @@
 
 .vuiCard--l {
   .vuiCard__header,
+  .vuiCard__expandableButton,
   .vuiCard__body {
     padding: $sizeXl $sizeXxl;
   }
@@ -108,7 +127,6 @@
   .vuiCard__expandableButton {
     display: block;
     width: 100%;
-    padding: $sizeM $sizeL;
     text-align: left;
     background: transparent;
     border: none;
@@ -174,6 +192,10 @@
   height: 100%;
 }
 
+.vuiSimpleCard--xxs {
+  padding: $sizeXs $sizeS;
+}
+
 .vuiSimpleCard--xs {
   padding: $sizeS $sizeM;
 }

package/lib/styles/index.css

@@ -1168,17 +1168,32 @@ fieldset {
   overflow-y: auto;
 }
 
+.vuiCard--xxs .vuiCard__header,
+.vuiCard--xxs .vuiCard__expandableButton,
+.vuiCard--xxs .vuiCard__body {
+  padding: 8px 12px;
+}
+
+.vuiCard--xs .vuiCard__header,
+.vuiCard--xs .vuiCard__expandableButton,
+.vuiCard--xs .vuiCard__body {
+  padding: 12px 16px;
+}
+
 .vuiCard--s .vuiCard__header,
+.vuiCard--s .vuiCard__expandableButton,
 .vuiCard--s .vuiCard__body {
   padding: 16px 24px;
 }
 
 .vuiCard--m .vuiCard__header,
+.vuiCard--m .vuiCard__expandableButton,
 .vuiCard--m .vuiCard__body {
   padding: 24px 32px;
 }
 
 .vuiCard--l .vuiCard__header,
+.vuiCard--l .vuiCard__expandableButton,
 .vuiCard--l .vuiCard__body {
   padding: 32px 40px;
 }
@@ -1186,7 +1201,6 @@ fieldset {
 .vuiCard--expandable .vuiCard__expandableButton {
   display: block;
   width: 100%;
-  padding: 16px 24px;
   text-align: left;
   background: transparent;
   border: none;
@@ -1245,6 +1259,10 @@ fieldset {
   height: 100%;
 }
 
+.vuiSimpleCard--xxs {
+  padding: 8px 12px;
+}
+
 .vuiSimpleCard--xs {
   padding: 12px 16px;
 }

package/package.json

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