@vectara/vectara-ui 15.6.0 → 15.6.2

package/lib/components/notification/Notification.js

@@ -37,5 +37,5 @@ export const VuiNotification = ({ color, message, onDismiss, children, hasCopyBu
             icon = null;
     }
     const copyValue = code ? `${message}\n\n${code.content}` : message;
-    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}` }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) }), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
+    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}` }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, Object.assign({ preserveWhiteSpace: true }, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) })), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy notification" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
 };

package/lib/components/typography/_text.scss

@@ -39,6 +39,7 @@ $textRhythm: $sizeM;
     margin-bottom: $textRhythm;
   }
 
+  // Default block styles for code and pre.
   pre:not(:has(> code)),
   code {
     display: block;
@@ -59,22 +60,63 @@ $textRhythm: $sizeM;
   }
 
   pre > code {
+    display: block;
     word-wrap: break-word;
     word-break: break-word;
     white-space: pre-wrap;
     font-family: var(--vui-font-family-monospace);
     margin-bottom: 0;
+    padding: 0;
+    background-color: transparent;
   }
 
-  p pre,
-  p code {
-    display: inline;
-    padding: $sizeXxxs $sizeXxs;
-    border: none;
-    border-radius: $sizeXs;
-    overflow: auto;
-    background-color: var(--vui-color-light-shade);
-    font-family: var(--vui-font-family-monospace);
+  // Inline styles when nested in text-like elements.
+  strong,
+  b,
+  em,
+  i,
+  p,
+  li,
+  td,
+  th,
+  span,
+  label,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > pre,
+    > code {
+      display: inline;
+      padding: $sizeXxxs $sizeXxs;
+      border-radius: $sizeXs;
+      overflow: auto;
+      background-color: var(--vui-color-light-shade);
+      font-family: var(--vui-font-family-monospace);
+      margin-bottom: 0;
+    }
+  }
+
+  // Block styles when nested in block-like elements.
+  div,
+  blockquote,
+  section,
+  article,
+  aside,
+  main,
+  nav,
+  header,
+  footer {
+    > pre:not(:has(> code)),
+    > code {
+      display: block;
+    }
+
+    > pre:has(> code) {
+      display: block;
+    }
   }
 
   blockquote {

package/lib/styles/index.css

@@ -5716,21 +5716,85 @@ h2.react-datepicker__current-month {
   font-family: var(--vui-font-family-monospace);
 }
 .vuiText pre > code {
+  display: block;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
   font-family: var(--vui-font-family-monospace);
   margin-bottom: 0;
+  padding: 0;
+  background-color: transparent;
 }
-.vuiText p pre,
-.vuiText p code {
+.vuiText strong > pre,
+.vuiText strong > code,
+.vuiText b > pre,
+.vuiText b > code,
+.vuiText em > pre,
+.vuiText em > code,
+.vuiText i > pre,
+.vuiText i > code,
+.vuiText p > pre,
+.vuiText p > code,
+.vuiText li > pre,
+.vuiText li > code,
+.vuiText td > pre,
+.vuiText td > code,
+.vuiText th > pre,
+.vuiText th > code,
+.vuiText span > pre,
+.vuiText span > code,
+.vuiText label > pre,
+.vuiText label > code,
+.vuiText h1 > pre,
+.vuiText h1 > code,
+.vuiText h2 > pre,
+.vuiText h2 > code,
+.vuiText h3 > pre,
+.vuiText h3 > code,
+.vuiText h4 > pre,
+.vuiText h4 > code,
+.vuiText h5 > pre,
+.vuiText h5 > code,
+.vuiText h6 > pre,
+.vuiText h6 > code {
   display: inline;
   padding: 2px 4px;
-  border: none;
   border-radius: 8px;
   overflow: auto;
   background-color: var(--vui-color-light-shade);
   font-family: var(--vui-font-family-monospace);
+  margin-bottom: 0;
+}
+.vuiText div > pre:not(:has(> code)),
+.vuiText div > code,
+.vuiText blockquote > pre:not(:has(> code)),
+.vuiText blockquote > code,
+.vuiText section > pre:not(:has(> code)),
+.vuiText section > code,
+.vuiText article > pre:not(:has(> code)),
+.vuiText article > code,
+.vuiText aside > pre:not(:has(> code)),
+.vuiText aside > code,
+.vuiText main > pre:not(:has(> code)),
+.vuiText main > code,
+.vuiText nav > pre:not(:has(> code)),
+.vuiText nav > code,
+.vuiText header > pre:not(:has(> code)),
+.vuiText header > code,
+.vuiText footer > pre:not(:has(> code)),
+.vuiText footer > code {
+  display: block;
+}
+.vuiText div > pre:has(> code),
+.vuiText blockquote > pre:has(> code),
+.vuiText section > pre:has(> code),
+.vuiText article > pre:has(> code),
+.vuiText aside > pre:has(> code),
+.vuiText main > pre:has(> code),
+.vuiText nav > pre:has(> code),
+.vuiText header > pre:has(> code),
+.vuiText footer > pre:has(> code) {
+  display: block;
 }
 .vuiText blockquote {
   border-left: 4px solid var(--vui-color-light-shade);

package/package.json

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

package/src/docs/pages/text/Text.tsx

@@ -95,6 +95,20 @@ export const Text = () => (
 > In Markdown's ring.`}
             </code>
 
+            <ol>
+              <li>
+                Choose:
+                <ul>
+                  <li>
+                    <strong>Option A:</strong> <code>EXECUTE</code>
+                  </li>
+                  <li>
+                    <strong>Option B:</strong> <code>ABORT</code>
+                  </li>
+                </ul>
+              </li>
+            </ol>
+
             <table>
               <thead>
                 <tr>