@vectara/vectara-ui 15.4.0 → 15.5.0

package/lib/components/form/select/Select.d.ts

@@ -1,4 +1,4 @@
-declare const SIZE: readonly ["m", "l"];
+declare const SIZE: readonly ["s", "m", "l"];
 type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "size"> & {
     isInvalid?: boolean;
     options: {

package/lib/components/form/select/Select.js

@@ -15,8 +15,9 @@ import classNames from "classnames";
 import { VuiIcon } from "../../icon/Icon";
 import { BiCaretDown } from "react-icons/bi";
 import { forwardRef } from "react";
-const SIZE = ["m", "l"];
+const SIZE = ["s", "m", "l"];
 const sizeToIconSizeMap = {
+    s: "s",
     m: "m",
     l: "l"
 };

package/lib/components/form/select/_index.scss

@@ -21,11 +21,23 @@
   right: 12px;
 }
 
+.vuiSelect--s {
+  select {
+    padding: $sizeXxs $sizeS;
+    font-size: $fontSizeSmall;
+    padding-right: 36px;
+  }
+
+  .vuiSelect__caret {
+    top: calc(50% - 8px);
+  }
+}
+
 .vuiSelect--m {
   select {
     padding: $sizeXs $sizeM;
     font-size: $fontSizeStandard;
-    padding-right: 32px;
+    padding-right: 40px;
   }
 
   .vuiSelect__caret {

package/lib/components/table/_index.scss

@@ -7,6 +7,11 @@ $tableResponsiveBreakpointSmall: 500px;
   position: relative;
 }
 
+// Enable nesting tables inside other tables as expandable content.
+.vuiTableRowExpandedContent__cell > .vuiTableWrapper {
+  container-type: normal;
+}
+
 .vuiTableBlock {
   background-color: rgba(var(--vui-color-empty-shade-rgb), 0.4);
   height: 100%;
@@ -84,28 +89,30 @@ $tableResponsiveBreakpointSmall: 500px;
     display: flex;
   }
 
+  // Direct descendent selectors enable non-responsive tables to
+  // be nested inside of responsive tables.
   .vuiTable--responsive {
-    thead {
+    & > thead {
       display: none;
     }
 
-    .vuiTableRow--isSelectable {
+    & > tbody > .vuiTableRow--isSelectable {
       padding-left: $sizeXxl;
     }
 
-    .vuiTableRow--hasActions {
+    & > tbody > .vuiTableRow--hasActions {
       padding-right: $sizeXxl;
     }
 
     // This enables truncated VuiText children to actually be truncated.
-    .vuiTableCell--truncate {
+    & > tbody > tr > .vuiTableCell--truncate {
       min-width: 0;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
 
-    tbody tr:not(.vuiTableRowExpandedContent) {
+    & > tbody > tr:not(.vuiTableRowExpandedContent) {
       position: relative;
       column-gap: $sizeM;
       row-gap: $sizeM;
@@ -123,27 +130,27 @@ $tableResponsiveBreakpointSmall: 500px;
         border-radius: $sizeXs $sizeXs 0 0;
       }
 
-      td {
+      & > td {
         padding: 0;
       }
 
-      .vuiTableCellWrapper {
+      & > td > .vuiTableCellWrapper {
         display: flex;
         flex-direction: column;
         gap: $sizeXxs;
-      }
 
-      .vuiTableCell__label {
-        display: block;
+        & > .vuiTableCell__label {
+          display: block;
+        }
       }
 
-      .vuiTableRowSelect {
+      & > .vuiTableRowSelect {
         position: absolute;
         top: $sizeM;
         left: $sizeXs;
       }
 
-      .vuiTableRowActions {
+      & > .vuiTableRowActions {
         position: absolute;
         top: $sizeXs * 1.25;
         right: $sizeXs;
@@ -157,13 +164,13 @@ $tableResponsiveBreakpointSmall: 500px;
     }
 
     &.vuiTable--noActions {
-      tbody tr:not(.vuiTableRowExpandedContent) {
+      & > tbody tr:not(.vuiTableRowExpandedContent) {
         padding-right: $sizeM;
       }
     }
 
     // Expanded content in responsive mode
-    tbody tr.vuiTableRowExpandedContent {
+    & > tbody > tr.vuiTableRowExpandedContent {
       display: block;
       margin-bottom: $sizeS;
       padding: $sizeL;
@@ -179,7 +186,7 @@ $tableResponsiveBreakpointSmall: 500px;
 
 @container (width < #{$tableResponsiveBreakpointSmall}) {
   .vuiTable--responsive {
-    tbody tr:not(.vuiTableRowExpandedContent) {
+    & > tbody > tr:not(.vuiTableRowExpandedContent) {
       grid-template-columns: 1fr;
     }
   }

package/lib/styles/index.css

@@ -2849,10 +2849,19 @@ h2.react-datepicker__current-month {
   right: 12px;
 }
 
+.vuiSelect--s select {
+  padding: 4px 12px;
+  font-size: 12px;
+  padding-right: 36px;
+}
+.vuiSelect--s .vuiSelect__caret {
+  top: calc(50% - 8px);
+}
+
 .vuiSelect--m select {
   padding: 8px 16px;
   font-size: 14px;
-  padding-right: 32px;
+  padding-right: 40px;
 }
 .vuiSelect--m .vuiSelect__caret {
   top: calc(50% - 10px);
@@ -5099,6 +5108,10 @@ h2.react-datepicker__current-month {
   position: relative;
 }
 
+.vuiTableRowExpandedContent__cell > .vuiTableWrapper {
+  container-type: normal;
+}
+
 .vuiTableBlock {
   background-color: rgba(var(--vui-color-empty-shade-rgb), 0.4);
   height: 100%;
@@ -5166,22 +5179,22 @@ h2.react-datepicker__current-month {
   .vuiTableHeader__responsiveSelectAllCheckbox {
     display: flex;
   }
-  .vuiTable--responsive thead {
+  .vuiTable--responsive > thead {
     display: none;
   }
-  .vuiTable--responsive .vuiTableRow--isSelectable {
+  .vuiTable--responsive > tbody > .vuiTableRow--isSelectable {
     padding-left: 40px;
   }
-  .vuiTable--responsive .vuiTableRow--hasActions {
+  .vuiTable--responsive > tbody > .vuiTableRow--hasActions {
     padding-right: 40px;
   }
-  .vuiTable--responsive .vuiTableCell--truncate {
+  .vuiTable--responsive > tbody > tr > .vuiTableCell--truncate {
     min-width: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) {
     position: relative;
     column-gap: 16px;
     row-gap: 16px;
@@ -5194,27 +5207,27 @@ h2.react-datepicker__current-month {
     box-shadow: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px;
     margin-bottom: 12px;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent).vuiTableRow--expanded {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent).vuiTableRow--expanded {
     margin-bottom: 0;
     border-radius: 8px 8px 0 0;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) td {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > td {
     padding: 0;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableCellWrapper {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > td > .vuiTableCellWrapper {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableCell__label {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > td > .vuiTableCellWrapper > .vuiTableCell__label {
     display: block;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableRowSelect {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > .vuiTableRowSelect {
     position: absolute;
     top: 16px;
     left: 8px;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableRowActions {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > .vuiTableRowActions {
     position: absolute;
     top: 10px;
     right: 8px;
@@ -5222,22 +5235,22 @@ h2.react-datepicker__current-month {
   .vuiTable--responsive.vuiTable--notSelectable tbody tr:not(.vuiTableRowExpandedContent) {
     padding-left: 16px;
   }
-  .vuiTable--responsive.vuiTable--noActions tbody tr:not(.vuiTableRowExpandedContent) {
+  .vuiTable--responsive.vuiTable--noActions > tbody tr:not(.vuiTableRowExpandedContent) {
     padding-right: 16px;
   }
-  .vuiTable--responsive tbody tr.vuiTableRowExpandedContent {
+  .vuiTable--responsive > tbody > tr.vuiTableRowExpandedContent {
     display: block;
     margin-bottom: 12px;
     padding: 24px;
     border-radius: 0 0 8px 8px;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px;
   }
-  .vuiTable--responsive tbody tr.vuiTableRowExpandedContent .vuiTableRowExpandedContent__cell {
+  .vuiTable--responsive > tbody > tr.vuiTableRowExpandedContent .vuiTableRowExpandedContent__cell {
     padding: 0;
   }
 }
 @container (width < 500px) {
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) {
     grid-template-columns: 1fr;
   }
 }

package/package.json

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

package/src/docs/pages/select/Select.tsx

@@ -1,15 +1,45 @@
 import { useState } from "react";
-import { VuiSelect } from "../../../lib";
+import { VuiSelect, VuiSpacer } from "../../../lib";
 
 const options = [
+  { text: "Johann Baptist Christophorus Apollinaris von Albertini", value: "albertini" },
   { text: "David Brin", value: "brin" },
   { text: "Cormac McCarthy", value: "mccarthy" },
   { text: "Bret Easton Ellis", value: "ellis" }
 ];
 
 export const Select = () => {
-  const [value, setValue] = useState("ellis");
+  const [value, setValue] = useState("albertini");
+
   return (
-    <VuiSelect id="optionsList1" options={options} value={value} onChange={(event) => setValue(event.target.value)} />
+    <>
+      <VuiSelect
+        id="optionsList1"
+        size="s"
+        options={options}
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiSelect
+        id="optionsList2"
+        size="m"
+        options={options}
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiSelect
+        id="optionsList3"
+        size="l"
+        options={options}
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+      />
+    </>
   );
 };

package/src/docs/pages/table/Table.tsx

@@ -32,7 +32,7 @@ export const Table = () => {
   const [isAlignTop, setIsAlignTop] = useState(false);
   const [isHeaderSticky, setIsHeaderSticky] = useState(false);
   const [isResponsive, setIsResponsive] = useState(true);
-  const [hasExpandableRows, setHasExpandableRows] = useState(false);
+  const [hasExpandableRows, setHasExpandableRows] = useState(true);
 
   // Table state
   const [isLoading, setIsLoading] = useState(true);
@@ -431,16 +431,42 @@ export const Table = () => {
         collapsedContent={
           hasExpandableRows
             ? (person: Person) => (
-                <VuiText size="s">
-                  <p>
-                    <strong>Roles:</strong> {person.role.length > 0 ? person.role.join(", ") : "None assigned"}
-                  </p>
-                  <p>
-                    <VuiTextColor color="subdued">
-                      This expanded area can contain any content such as additional details about {person.name}.
-                    </VuiTextColor>
-                  </p>
-                </VuiText>
+                <VuiTable
+                  isResponsive={false}
+                  idField="color"
+                  rows={[
+                    {
+                      color: "red",
+                      item: "apple"
+                    },
+                    {
+                      color: "orange",
+                      item: "orange"
+                    },
+                    {
+                      color: "yellow",
+                      item: "banana"
+                    }
+                  ]}
+                  columns={[
+                    {
+                      name: "color",
+                      header: {
+                        render: () => {
+                          return "Color";
+                        }
+                      }
+                    },
+                    {
+                      name: "item",
+                      header: {
+                        render: () => {
+                          return "Item";
+                        }
+                      }
+                    }
+                  ]}
+                />
               )
             : undefined
         }